Bagian-Bagian Situs Web: Contoh Beranotasi (Anatomi Situs Web)
Penjelasan bagian situs web melalui contoh desain We.Inc berlabel: header, navigasi, hero, ajakan bertindak, layanan, bukti, tentang kami, formulir kontak, footer, serta bagian tersembunyi seperti domain, judul, dan peta situs.
Kebanyakan situs web bisnis kecil dibangun dari bagian yang sama, dari atas ke bawah: header dan navigasi, hero, ajakan bertindak, layanan, bukti, tentang kami, kontak, dan footer. Di baliknya ada beberapa bagian yang tidak terlihat oleh pengunjung, seperti domain, judul halaman, dan peta situs. Berikut label setiap bagian pada contoh desain yang dibuat dengan We.Inc.
Bagian yang terlihat, dari atas ke bawah
- Header. Bilah di bagian atas yang memuat logo atau nama bisnis. Header muncul di setiap halaman agar pengunjung selalu tahu sedang berada di mana.
- Navigasi (menu). Tautan ke halaman atau bagian utama: Layanan, Tentang Kami, Harga, Kontak. Batasi hingga lima sampai tujuh item. Di ponsel, navigasi dilipat menjadi tombol menu.
- Hero. Layar pertama: headline yang menjelaskan layanan dan untuk siapa, kalimat pendukung singkat, dan sering kali gambar. Pengunjung memutuskan dalam hitungan detik apakah akan bertahan. Lihat contoh bagian hero.
- Ajakan bertindak (CTA). Tombol utama, misalnya Jadwalkan panggilan atau Minta penawaran. Letakkan di hero dan ulangi di dekat bagian bawah.
- Layanan atau fitur. Penawaran Anda, satu blok singkat untuk setiap item, masing-masing dengan satu kalimat mengenai hasil yang diperoleh pelanggan.
- Bukti. Ulasan, contoh pekerjaan, sertifikasi, atau jaminan. Gunakan bukti yang nyata saja.
- Tentang kami. Siapa di balik bisnis dan alasan mereka layak dipercaya. Lihat cara menulis halaman tentang kami.
- Kontak. Formulir, nomor telepon, email, serta alamat atau area layanan. Lihat cara menambahkan formulir kontak.
- Footer. Bilah paling bawah: detail kontak yang diulang, tautan sekunder, kebijakan privasi, dan tautan sosial.
Bagian yang tidak dilihat pengunjung
| Bagian | Fungsinya |
|---|---|
| Domain | Alamat situs Anda, seperti yourbusiness.com |
| Hosting | Komputer yang menyajikan situs kepada pengunjung |
| Judul dan deskripsi halaman | Informasi yang muncul di hasil Google dan tab browser |
| Peta situs | Daftar halaman yang membantu mesin pencari menemukannya |
| Favicon | Ikon kecil di tab browser |
| Gambar berbagi | Gambar yang muncul saat tautan dibagikan di media sosial |
Bagian yang sama, panjang halaman berbeda
Situs satu halaman menumpuk semua bagian ini dalam satu halaman yang digulir, dan menu berpindah ke setiap bagian. Situs dengan banyak halaman memberi layanan, tentang kami, dan kontak halaman tersendiri, tetapi mempertahankan header dan footer yang sama. Aplikasi web menambahkan proses masuk dan data tersimpan.
Mendapatkan semua bagian di We.Inc
Setiap templat We.Inc sudah menyertakan header, navigasi, hero, CTA, dan footer. Situs yang diterbitkan juga dilengkapi judul, peta situs, serta gambar berbagi. Paket Free menerbitkan hingga 3 situs templat dengan alamat we.inc, tanpa kredit AI dan domain khusus. Paket berbayar mulai dari $20 per bulan dan menambahkan pembuatan berbantuan AI serta domain sendiri. Lihat templat.
Pertanyaan yang sering diajukan
Apa saja bagian utama situs web?
Header, navigasi, hero, ajakan bertindak, layanan, bukti, tentang kami, kontak, dan footer, ditambah bagian tersembunyi seperti domain, hosting, judul halaman, dan peta situs.
Apa itu bagian hero pada situs web?
Layar pertama yang dilihat pengunjung: headline, kalimat pendukung singkat, sering kali gambar, dan tombol ajakan bertindak utama.
Apa isi footer situs web?
Detail kontak, tautan sekunder seperti kebijakan privasi dan ketentuan, tautan sosial, serta terkadang pengulangan singkat menu.
Apakah situs satu halaman memiliki bagian yang sama?
Ya. Situs satu halaman menumpuk bagian yang sama di satu halaman, dengan menu yang berpindah ke tiap bagian alih-alih membuka halaman baru.
Mulai gratis · Tanpa kartu kredit
Product
- AI Website Builder: Describe a site in plain English; it's live in minutes
- White Label Platform: Your brand, your domain, your margin
- Enterprise: SSO, custom SLAs, and dedicated support
- Developer API: Embed site generation into your SaaS
Who It's For
- For Agencies: Resell under your brand
- For Freelancers: Your own branded builder
- For Hosting Providers: Add a builder to your stack
- For SaaS Platforms: Embed site creation via API
- For Startups
- For Financial Services
- For Healthcare
Features
- Drag & Drop Editor
- Built-in SEO Tools
- Custom Branding
- Client Dashboard
- Reseller Billing (Stripe Connect)
Resources
- Blog
- Help Center
- Free Business Tools
- Website Templates
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App