Membuat Global Header dan Footer dengan Divi Theme Builder

Monday, 16 June 2025

Tentu, ini adalah draf artikel 1000 kata mengenai “Membuat Global Header dan Footer dengan Divi Theme Builder”.

Membuat Global Header dan Footer dengan Divi Theme Builder

Di setiap website profesional, header dan footer adalah elemen desain yang sangat penting. Header berfungsi sebagai gerbang utama situs Anda, menampilkan logo, menu navigasi, dan seringkali call-to-action penting. Sementara itu, footer adalah area terakhir yang dilihat pengunjung, biasanya berisi informasi kontak, tautan penting, media sosial, dan hak cipta. Keduanya tidak hanya esensial untuk navigasi dan informasi, tetapi juga krusial untuk konsistensi branding dan pengalaman pengguna yang mulus di seluruh situs Anda.

Secara tradisional, mengubah header atau footer di WordPress seringkali berarti harus mengedit file tema (header.php atau footer.php) yang memerlukan pengetahuan coding. Ini adalah penghalang besar bagi banyak pengguna. Namun, Divi Theme Builder merevolusi proses ini, memungkinkan Anda untuk sepenuhnya mendesain header dan footer kustom menggunakan visual page builder Divi yang akrab, dan menerapkannya secara global ke seluruh website Anda.

Artikel ini akan menjadi panduan lengkap Anda untuk memahami dan memanfaatkan kekuatan Divi Theme Builder dalam menciptakan global header dan footer yang menarik, fungsional, dan konsisten di seluruh website Divi Anda.

Mengapa Membutuhkan Global Header dan Footer Kustom?

Meskipun Divi hadir dengan header dan footer bawaan yang dapat dikustomisasi melalui Theme Options, Theme Builder menawarkan keunggulan signifikan:

Kontrol Desain Tak Terbatas: Anda tidak lagi terbatas pada opsi tema standar. Anda dapat mendesain tata letak, posisi elemen, tipografi, warna, dan efek visual header dan footer Anda dengan kebebasan penuh, sama seperti membangun halaman biasa dengan Divi Builder.
Konsistensi Merek yang Sempurna: Dengan membuat header dan footer global, Anda memastikan bahwa branding (logo, skema warna, font) tetap konsisten di setiap halaman situs Anda.
Fleksibilitas Kondisional: Meskipun kita akan fokus pada global, Theme Builder juga memungkinkan Anda membuat header atau footer yang berbeda untuk bagian situs tertentu (misalnya, header khusus untuk halaman penjualan, atau footer berbeda untuk postingan blog).
Efisiensi Pembaruan: Jika Anda perlu mengubah elemen di header atau footer, Anda hanya perlu mengeditnya di satu tempat (Theme Builder), dan perubahan akan diterapkan di seluruh situs Anda.
Penempatan Elemen Dinamis: Gunakan modul Divi Builder yang dapat menarik konten dinamis (misalnya, tanggal postingan terbaru, judul halaman saat ini) langsung ke header atau footer Anda.

Mengakses Divi Theme Builder

Untuk memulai, akses Divi Theme Builder dari dasbor WordPress Anda:

Masuk ke dasbor WordPress Anda.
Navigasi ke Divi > Theme Builder.

Anda akan melihat antarmuka yang menunjukkan “Default Website Template” dengan area untuk Global Header, Global Body, dan Global Footer. Ini adalah template yang akan diterapkan ke seluruh situs Anda secara default jika tidak ada template spesifik lainnya.

Membuat Global Header Kustom

Mari kita buat header kustom yang akan muncul di setiap halaman website Anda.

Tambahkan Header Global:
- Di dalam kotak “Default Website Template”, arahkan kursor ke area “Global Header” dan klik “Add Global Header.”
- Kemudian, klik “Build Global Header.” (Ini akan membuka Divi Builder dalam antarmuka khusus header).
Desain Header Anda dengan Divi Builder:
- Anda akan melihat kanvas Divi Builder yang kosong. Sekarang, Anda dapat menggunakan Bagian (Sections), Baris (Rows), dan Modul (Modules) Divi untuk membangun header impian Anda.
- Modul Penting untuk Header:
  - Menu: Ini adalah modul paling penting. Modul ini akan menampilkan menu navigasi WordPress Anda. Pastikan Anda sudah membuat menu di Tampilan > Menu terlebih dahulu.
  - Gambar: Untuk menampilkan logo situs Anda.
  - Teks: Untuk tagline, nomor telepon, atau informasi kontak singkat.
  - Tombol: Untuk call-to-action utama (misalnya, “Hubungi Kami”, “Belanja Sekarang”).
  - Social Media Follow: Untuk ikon media sosial.
  - Search: Untuk bilah pencarian.
- Contoh Tata Letak Header Sederhana:
  - Bagian (Section) Pertama (Baris Atas):
    - Tambahkan satu Bagian (biru).
    - Di dalamnya, tambahkan satu Baris (hijau) dengan tata letak satu kolom.
    - Tambahkan Modul Teks di sini untuk informasi kontak singkat atau pengumuman promosi (misalnya, “Gratis Ongkir untuk Pembelian di Atas Rp500.000”). Sesuaikan warna latar belakang dan font.
  - Bagian (Section) Kedua (Navigasi Utama):
    - Tambahkan Bagian baru.
    - Di dalamnya, tambahkan Baris dengan struktur 2 kolom (misalnya, 1/3 + 2/3).
    - Di kolom kiri (1/3), tambahkan Modul Gambar untuk logo Anda. Unggah logo Anda dan sesuaikan ukurannya.
    - Di kolom kanan (2/3), tambahkan Modul Menu. Pastikan Anda memilih menu yang benar dari pengaturan modul. Sesuaikan gaya menu (rata kanan, warna link, efek hover).
    - Tips Responsif: Periksa bagaimana header Anda tampil di tablet dan mobile menggunakan ikon desktop/tablet/mobile di bilah alat Divi Builder. Anda mungkin perlu menyesuaikan ukuran font, padding, atau bahkan menyembunyikan elemen tertentu di mobile (misalnya, menyembunyikan nomor telepon di baris atas pada tampilan mobile menggunakan pengaturan visibilitas di tab “Advanced”).
- Kustomisasi Desain: Manfaatkan semua opsi desain Divi untuk membuat header Anda menarik:
  - Background: Warna solid, gradien, gambar latar belakang.
  - Spacing: Padding dan margin untuk mengatur jarak.
  - Border & Box Shadow: Tambahkan garis pembatas atau bayangan untuk efek kedalaman.
  - Sticky Position: Di pengaturan Bagian header Anda, di tab “Advanced” > “Scroll Effects” > “Sticky Position”, Anda dapat mengaturnya menjadi “Stick to Top”. Ini akan membuat header Anda tetap terlihat saat pengunjung menggulir ke bawah. Sesuaikan juga pengaturan “Sticky Style” untuk mengubah tampilan header saat menempel (misalnya, mengecilkan ukuran atau mengubah latar belakang).
Simpan Header Kustom Anda:
- Setelah selesai mendesain, klik ikon titik tiga di bilah alat Divi Builder (bawah tengah) untuk membuka menu.
- Klik ikon disket (Save) di kanan bawah.
- Setelah disimpan, tutup Divi Builder (klik “X” di kanan atas pop-up Divi Builder).
Simpan Perubahan Theme Builder:
- Anda akan kembali ke antarmuka Divi Theme Builder. Klik tombol “Save Changes” di kanan atas.

Sekarang, header kustom Anda akan muncul di setiap halaman website Anda!

Membuat Global Footer Kustom

Proses untuk membuat global footer sangat mirip dengan header.

Tambahkan Footer Global:
- Di dalam kotak “Default Website Template”, arahkan kursor ke area “Global Footer” dan klik “Add Global Footer.”
- Kemudian, klik “Build Global Footer.” (Ini akan membuka Divi Builder dalam antarmuka khusus footer).
Desain Footer Anda dengan Divi Builder:
- Modul Penting untuk Footer:
  - Teks: Untuk hak cipta, deskripsi singkat, atau alamat.
  - Menu: Untuk tautan penting (Kebijakan Privasi, Syarat & Ketentuan).
  - Social Media Follow: Untuk ikon media sosial.
  - Blurb: Untuk informasi kontak dengan ikon.
  - Map: Jika Anda ingin menampilkan lokasi fisik.
  - Email Opt-in: Untuk formulir langganan newsletter.
  - Blog: Untuk menampilkan postingan blog terbaru di footer.
- Contoh Tata Letak Footer:
  - Tambahkan satu Bagian (biru).
  - Di dalamnya, tambahkan Baris dengan struktur multi-kolom (misalnya, 3 atau 4 kolom).
  - Kolom 1: Logo (Modul Gambar) dan deskripsi singkat (Modul Teks).
  - Kolom 2: Tautan Navigasi (Modul Menu) atau daftar tautan penting (Modul Teks).
  - Kolom 3: Informasi Kontak (Modul Teks dengan ikon) atau modul Email Opt-in.
  - Kolom 4: Modul Social Media Follow dan teks hak cipta (Modul Teks).
  - Anda bisa menambahkan Bagian terpisah di bawahnya untuk bilah hak cipta yang lebih sederhana.
- Kustomisasi Desain: Sesuaikan warna latar belakang (seringkali lebih gelap), font, spasi, dan elemen desain lainnya agar footer Anda menarik dan mudah dibaca. Pastikan font cukup besar untuk keterbacaan di mobile.
Simpan Footer Kustom Anda:
- Klik ikon titik tiga di bilah alat Divi Builder.
- Klik ikon disket (Save).
- Setelah disimpan, tutup Divi Builder.
Simpan Perubahan Theme Builder:
- Anda akan kembali ke antarmuka Divi Theme Builder. Klik tombol “Save Changes” di kanan atas.

Sekarang, footer kustom Anda akan muncul di setiap halaman website Anda!

Tips Penting untuk Menggunakan Global Header dan Footer

Pembaruan Menu WordPress: Ingat, jika Anda mengubah menu di Tampilan > Menu, Modul Menu di header kustom Anda akan secara otomatis diperbarui. Anda tidak perlu mengedit header di Theme Builder lagi.
Global Item vs. Non-Global: Header dan footer yang Anda buat di “Global Header” dan “Global Footer” di Theme Builder secara otomatis adalah Global Item. Ini artinya, setiap perubahan yang Anda lakukan pada header atau footer di Theme Builder akan langsung memengaruhi semua halaman di website Anda yang menggunakan template ini. Ini adalah kekuatan sekaligus tanggung jawab.
Kondisi Spesifik: Jika di kemudian hari Anda ingin header atau footer yang berbeda untuk halaman tertentu (misalnya, halaman landing atau halaman penjualan), Anda dapat membuat template baru di Theme Builder, menetapkan kondisi untuk halaman spesifik tersebut, dan mendesain header/footer unik di sana. Template yang lebih spesifik akan menimpa template global.
Performa: Meskipun Divi Theme Builder sangat fleksibel, hindari penggunaan terlalu banyak elemen atau animasi kompleks yang tidak perlu di header dan footer, karena ini bisa memengaruhi kecepatan loading website Anda.

Kesimpulan

Divi Theme Builder adalah fitur yang luar biasa yang mendemokratisasikan kustomisasi header dan footer di WordPress. Tidak ada lagi kebutuhan untuk coding yang rumit; semua bisa dilakukan dengan drag-and-drop yang intuitif. Dengan menguasai kemampuan untuk membuat global header dan footer kustom, Anda dapat mencapai tingkat konsistensi branding, profesionalisme, dan efisiensi yang tinggi di seluruh website Divi Anda.

Investasikan waktu dalam mendesain header dan footer yang menarik dan fungsional, dan Anda akan memberikan pengalaman pengguna yang luar biasa yang akan meninggalkan kesan positif pada setiap pengunjung. Selamat mendesain dengan Divi Theme Builder!