Cara Bekerja dengan Pages di WordPress dan Divi: Panduan Lengkap Langkah demi Langkah

WordPress menggerakkan lebih dari 43% dari semua situs web di internet — dan ada alasan yang bagus untuk itu. Antarmuka intuitifnya, ekosistem plugin yang luas, dan kemampuan manajemen konten yang fleksibel menjadikannya CMS pilihan utama bagi semua orang dari blogger solo hingga bisnis tingkat enterprise. Ketika Anda menggabungkan WordPress dengan tema Divi oleh Elegant Themes, Anda membuka visual builder drag-and-drop yang memungkinkan Anda merancang halaman yang menakjubkan dan profesional tanpa menulis satu baris kode pun.

Dalam panduan komprehensif ini, Anda akan belajar dengan tepat cara membuat, menyesuaikan, mengorganisir, dan menerbitkan halaman di WordPress menggunakan Divi Builder. Baik Anda membangun situs web pertama Anda atau menyempurnakan yang sudah ada, tutorial ini mencakup semua yang perlu Anda ketahui.

Apa Itu Halaman di WordPress? (Dan Bagaimana Perbedaannya dengan Postingan)

Sebelum mendalami langkah-langkah teknis, penting untuk memahami apa itu halaman WordPress sebenarnya — dan bagaimana perbedaannya dengan postingan blog.

Halaman adalah tulang punggung struktural situs web Anda. Mereka menyimpan konten yang tidak berubah sering dan tidak perlu dikategorikan atau diberi tag. Pikirkan Tentang Kami, Kontak, Layanan, atau Beranda — ini semua adalah contoh klasik halaman WordPress.

Memahami perbedaan ini membantu Anda membuat keputusan yang lebih cerdas tentang cara mengorganisir dan menyajikan konten Anda.

Prasyarat: Apa yang Anda Butuhkan Sebelum Memulai

Untuk mengikuti panduan ini, pastikan Anda memiliki hal-hal berikut:

• Instalasi WordPress yang aktif di lingkungan hosting yang andal
• Tema Divi yang sudah diinstal dan diaktifkan (tersedia dari Elegant Themes)
• Akses Administrator ke dashboard WordPress Anda
• Pemahaman dasar tentang struktur dan tujuan situs web Anda

Jika Anda masih menyiapkan lingkungan hosting, pertimbangkan VPS Hosting dari AlexHost — solusi berkinerja tinggi dan dapat diskalakan yang memberi Anda akses root penuh, sumber daya khusus, dan fleksibilitas untuk menjalankan WordPress dengan kecepatan optimal. Untuk proyek yang lebih kecil atau situs pribadi, Shared Web Hosting adalah alternatif yang terjangkau dan ramah pemula yang sepenuhnya kompatibel dengan WordPress.

Langkah 1: Masuk ke Dashboard WordPress Anda

Mulai dengan membuka browser web pilihan Anda dan navigasikan ke panel admin WordPress Anda. URL default adalah:

http://yourdomain.com/wp-admin

Masukkan nama pengguna dan kata sandi Anda, kemudian klik Masuk. Anda akan mendarat di Dashboard WordPress — panel kontrol pusat untuk seluruh situs web Anda.

> Pro Tip: Jika Anda mengelola beberapa situs WordPress atau memerlukan pengalaman admin yang lebih efisien, pertimbangkan menggunakan VPS dengan cPanel untuk manajemen server dan situs terpusat dari satu antarmuka yang intuitif.

Langkah 2: Buat Halaman WordPress Baru

Setelah Anda berada di dalam dashboard, ikuti langkah-langkah berikut untuk membuat halaman baru:

1. Di menu navigasi sisi kiri, cari dan klik Pages
2. Klik Add New di bagian atas daftar Pages (atau gunakan pintasan + New > Page di bilah admin atas)
3. Anda akan dibawa ke editor blok WordPress (Gutenberg)

Menambahkan Judul dan Konten Dasar

• Klik pada field “Add title” di bagian atas dan ketik nama halaman Anda (misalnya, *Tentang Kami*, *Kontak*, *Layanan*)
• Di area konten di bawah, Anda dapat menambahkan blok teks, gambar, heading, tombol, dan elemen lainnya menggunakan editor blok Gutenberg
• Gunakan pintasan “/” di editor untuk dengan cepat mencari dan menyisipkan jenis blok apa pun

Pada tahap ini, Anda bekerja dengan editor WordPress standar. Namun, jika Anda menginginkan kustomisasi visual lanjutan — dan Anda menggunakan Divi — Anda akan ingin mengaktifkan Divi Builder di langkah berikutnya.

Langkah 3: Aktifkan dan Gunakan Divi Builder

Divi Builder mengubah editor WordPress standar menjadi lingkungan desain drag-and-drop yang powerful dan visual. Berikut cara mengaktifkan dan menggunakannya:

Mengaktifkan Divi Builder

Setelah membuka halaman Anda di editor, Anda akan melihat tombol yang menonjol di dekat bagian atas area konten:

“Enable Divi Builder” — klik tombol tersebut.

WordPress akan menampilkan tiga opsi awal:

Pilih opsi yang paling sesuai dengan proyek Anda dan klik Start Building.

Memahami Struktur Divi Builder

Sebelum menambahkan konten, akan membantu untuk memahami bagaimana Divi mengorganisir hierarki layoutnya:

Section
  └── Row
        └── Column
              └── Module

• Sections adalah kontainer terbesar — mereka mencakup lebar penuh halaman
• Rows berada di dalam sections dan menentukan struktur kolom (1, 2, 3 kolom, dll.)
• Columns adalah pembagian vertikal individual dalam sebuah row
• Modules adalah elemen konten aktual (teks, gambar, tombol, formulir, dll.)

Langkah 3a: Menambahkan Sections dan Rows

1. Klik ikon biru “+” di bagian bawah kanvas untuk menambahkan Section baru
2. Pilih jenis section: Regular, Fullwidth, atau Specialty
3. Di dalam section, klik ikon “+” untuk menambahkan Row
4. Pilih layout kolom pilihan Anda (misalnya, 1/2 + 1/2 untuk desain dua kolom)

Langkah 3b: Menambahkan Modules

Modules adalah blok bangunan konten dari setiap halaman Divi. Untuk menambahkan satu:

1. Klik ikon abu-abu “+” di dalam kolom
2. Perpustakaan module akan muncul — telusuri atau cari module yang Anda butuhkan
3. Klik pada module untuk memasukkannya ke dalam layout Anda

Module Divi yang umum digunakan meliputi:

• Text Module — untuk paragraf, heading, dan copy berformat
• Image Module — untuk foto, grafis, dan ilustrasi
• Button Module — untuk CTA dan link navigasi
• Slider Module — untuk carousel gambar hero
• Contact Form Module — untuk penangkapan lead dan pertanyaan
• Blurb Module — untuk kotak fitur ikon + teks
• Video Module — untuk konten video tertanam
• Testimonial Module — untuk bukti sosial dan ulasan
• Code Module — untuk snippet HTML, CSS, atau JavaScript kustom

Langkah 3c: Menyesuaikan Modules

Klik ikon pensil (edit) pada module apa pun untuk membuka panel pengaturannya. Pengaturan diorganisir ke dalam tiga tab:

1. Content Tab

Konfigurasi konten aktual dari module — teks, gambar, link, label tombol, bidang formulir, dll.

2. Design Tab

Kontrol tampilan visual dari module:

• Typography — keluarga font, ukuran, berat, tinggi baris, spasi huruf
• Colors — warna latar belakang, teks, border, ikon
• Spacing — kontrol padding dan margin (dengan breakpoint responsif)
• Borders & Shadows — sudut bulat, bayangan kotak, gaya border
• Sizing — lebar, tinggi, batasan max-width

3. Advanced Tab

Akses pengaturan tingkat developer:

• CSS Classes and IDs — untuk hook styling kustom
• Custom CSS — tulis CSS khusus module secara langsung
• Visibility — tampilkan/sembunyikan module di desktop, tablet, atau mobile
• Animations — efek animasi entrance dan timing

> Design Tip: Kontrol responsif Divi memungkinkan Anda menetapkan nilai berbeda untuk tampilan desktop, tablet, dan mobile. Selalu pratinjau halaman Anda di ketiga breakpoint sebelum menerbitkan.

Langkah 4: Atur Halaman Anda dengan Hierarki

Seiring pertumbuhan website Anda, menjaga halaman tetap terorganisir menjadi kritis untuk pengalaman pengguna dan SEO. WordPress mendukung hierarki halaman induk-anak, yang memungkinkan Anda untuk menyarangkan halaman terkait di bawah induk yang sama.

Membuat Hubungan Halaman Induk-Anak

1. Saat mengedit halaman, lihat sidebar sisi kanan di block editor
2. Klik pada Page untuk memperluas panel pengaturan halaman
3. Temukan bagian Page Attributes
4. Di bawah Parent Page, klik dropdown dan pilih halaman yang ingin Anda tetapkan sebagai induk

Contoh hierarki:

Services (parent)
  ├── Web Design (child)
  ├── SEO Consulting (child)
  └── Content Marketing (child)

Struktur ini membuat URL yang lebih bersih (misalnya, yoursite.com/services/web-design/) dan membantu mesin pencari lebih memahami arsitektur konten situs Anda.

Langkah 5: Tambahkan Halaman ke Menu Navigasi Anda

Membuat halaman tidak secara otomatis menambahkannya ke navigasi situs web Anda. Anda perlu menambahkannya secara manual ke menu.

1. Di dasbor WordPress, buka Appearance > Menus
2. Pilih menu yang sudah ada atau klik Create a New Menu
3. Di panel Pages di sebelah kiri, centang kotak di samping halaman yang ingin Anda tambahkan
4. Klik Add to Menu
5. Drag and drop item menu untuk mengurutkan ulang atau membuat sub-menu dropdown
6. Klik Save Menu setelah selesai

> Best Practice: Pertahankan menu navigasi utama Anda fokus pada halaman yang paling penting. Targetkan maksimal 5–7 item tingkat atas untuk menghindari membingungkan pengunjung.

Langkah 6: Konfigurasi Pengaturan Halaman untuk SEO dan Performa

Sebelum menerbitkan, luangkan waktu untuk mengkonfigurasi pengaturan halaman utama yang memengaruhi visibilitas mesin pencari dan pengalaman pengguna.

Permalink (URL Slug)

• Di sidebar editor blok, temukan bagian Permalink
• Edit slug URL agar singkat, deskriptif, dan kaya kata kunci
• Hindari slug yang dibuat otomatis dengan angka (misalnya, /?p=123)
• Contoh baik: yoursite.com/about-us/
• Contoh buruk: yoursite.com/?page_id=47

Gambar Unggulan

• Tetapkan gambar unggulan yang relevan untuk meningkatkan tampilan berbagi sosial dan konsistensi visual

Template Halaman

• Beberapa tema (termasuk Divi) menawarkan beberapa template halaman (misalnya, lebar penuh, tanpa sidebar)
• Pilih template yang sesuai di bawah Atribut Halaman > Template

Data Meta SEO

• Jika Anda menggunakan plugin SEO seperti Yoast SEO atau Rank Math, isi:
• Judul meta — sertakan kata kunci utama Anda
• Deskripsi meta — tulis ringkasan yang menarik 150–160 karakter
• Kata kunci fokus — tetapkan istilah pencarian target Anda

Langkah 7: Simpan, Pratinjau, dan Publikasikan Halaman Anda

Setelah Anda puas dengan desain dan pengaturan halaman Anda, saatnya untuk go live.

Opsi Penyimpanan di Divi Builder

Di bagian kanan atas antarmuka Divi Builder, Anda akan menemukan:

• Save Draft — menyimpan pekerjaan Anda tanpa membuatnya terlihat secara publik
• Preview — membuka pratinjau langsung halaman Anda di tab baru
• Publish/Update — membuat halaman aktif di situs web Anda

Publikasi dari Block Editor

Jika Anda keluar dari Divi Builder dan kembali ke block editor standar:

1. Klik Save Draft untuk menyimpan tanpa mempublikasikan
2. Klik Preview untuk meninjau tampilan halaman di front end
3. Klik Publish ketika Anda siap membuatnya aktif
4. Konfirmasi dengan mengklik Publish lagi di panel konfirmasi

> Penting: Selalu pratinjau halaman Anda di desktop dan mobile sebelum mempublikasikan. Alat desain responsif Divi sangat powerful, tetapi tinjauan manual menangkap masalah yang terlewatkan oleh alat otomatis.

Tips Lanjutan: Memaksimalkan WordPress dan Divi

Gunakan Divi Theme Builder untuk Template Global

Divi Theme Builder (tersedia di Divi 4.0+) memungkinkan Anda membuat template global untuk header, footer, dan jenis post/page tertentu. Ini memastikan konsistensi desain di seluruh situs Anda tanpa perlu mengedit setiap halaman secara manual.

Simpan Layout ke Divi Library

Jika Anda telah merancang section atau layout yang Anda sukai, simpan ke Divi Library untuk digunakan kembali di halaman lain. Ini secara dramatis mempercepat alur kerja Anda.

Aktifkan A/B Testing Divi (Split Testing)

Divi menyertakan split testing tool bawaan yang memungkinkan Anda menguji versi berbeda dari module, section, atau page satu sama lain untuk melihat mana yang berkinerja lebih baik — sangat berharga untuk optimasi tingkat konversi.

Amankan Situs Anda dengan SSL

Jika Anda belum melakukannya, pastikan situs WordPress Anda berjalan di HTTPS. Sertifikat SSL sangat penting untuk kepercayaan pengguna, keamanan data, dan peringkat Google. AlexHost menawarkan SSL Certificates yang mudah dipasang dan kompatibel dengan semua lingkungan hosting WordPress.

Gunakan Domain Kustom

Nama domain profesional memperkuat merek Anda dan meningkatkan tingkat klik-tayang di hasil pencarian. Anda dapat mendaftarkan dan mengelola domain Anda langsung melalui layanan Pendaftaran Domain AlexHost, dengan dukungan untuk ratusan ekstensi TLD.

Pemecahan Masalah Umum

Kesimpulan

Bekerja dengan halaman di WordPress menggunakan tema Divi memberi Anda toolkit yang luar biasa kuat dan fleksibel untuk membangun situs web profesional — tanpa coding yang diperlukan. Dengan mengikuti langkah-langkah dalam panduan ini, Anda dapat:

• Membuat halaman WordPress yang terstruktur dengan baik dengan judul dan konten yang jelas
• Merancang tata letak yang menarik secara visual menggunakan pembangun drag-and-drop Divi
• Mengorganisir halaman Anda ke dalam hierarki logis untuk UX dan SEO yang lebih baik
• Mengonfigurasi pengaturan kunci seperti permalink, metadata, dan template
• Menerbitkan dengan percaya diri setelah melihat pratinjau di semua jenis perangkat

Kombinasi kekuatan manajemen konten WordPress dan kemampuan desain visual Divi sulit untuk dikalahkan. Dan dengan infrastruktur hosting yang tepat di bawahnya, situs Anda akan cepat, aman, dan siap untuk berkembang.

Untuk proyek WordPress yang intensif sumber daya, situs lalu lintas tinggi, atau aplikasi yang membutuhkan kekuatan komputasi khusus, jelajahi Dedicated Servers AlexHost — menawarkan perangkat keras tingkat enterprise, kustomisasi server penuh, dan performa maksimal untuk beban kerja yang menuntut.

*Siap membangun proyek WordPress Anda berikutnya? Mulai dengan fondasi yang solid — pilih hosting yang tepat, instal Divi, dan ikuti panduan ini untuk membuat halaman yang terlihat hebat dan peringkat bahkan lebih baik.*