Menggunakan Divi Theme Builder: Kustomisasi Global yang Tak Terbatas

Monday, 16 June 2025

Divi telah lama dikenal sebagai page builder visual yang revolusioner, memungkinkan pengguna mendesain setiap halaman dengan drag-and-drop yang intuitif. Namun, kekuatan sejati Divi, yang benar-benar membedakannya dari pesaing, terletak pada fitur Divi Theme Builder. Ini bukan sekadar alat untuk mendesain halaman, melainkan sebuah sistem komprehensif yang memungkinkan Anda mengkustomisasi setiap bagian dari website Anda secara global, memberikan kontrol desain yang tak terbatas dan konsistensi merek yang sempurna.

Bagi banyak pengguna Divi, Theme Builder mungkin terasa sedikit lebih kompleks di awal dibandingkan dengan Visual Builder biasa. Namun, begitu Anda memahami konsepnya, Anda akan menyadari bahwa ini adalah kunci untuk menciptakan website WordPress yang benar-benar unik, profesional, dan mudah dikelola dalam skala besar. Artikel ini akan menjadi panduan lengkap Anda untuk menguasai Divi Theme Builder, membuka pintu menuju kustomisasi global yang belum pernah ada sebelumnya.

Memahami Konsep Divi Theme Builder: Lebih dari Sekadar Halaman

Sebelum menyelami detail, mari pahami mengapa Theme Builder begitu penting:

Secara tradisional, tema WordPress menentukan header, footer, tata letak postingan blog, halaman kategori, dan elemen umum lainnya. Jika Anda ingin mengubah salah satu elemen ini, Anda terbatas pada opsi kustomisasi tema atau harus menulis kode kustom (misalnya, mengedit file header.php atau footer.php).

Divi Theme Builder mengubah paradigma ini. Ia memungkinkan Anda untuk:

Mendesain Setiap Elemen Tema Secara Visual: Anda dapat membuat template kustom untuk header, footer, halaman postingan tunggal, halaman arsip (kategori, tag, penulis), halaman produk WooCommerce, halaman hasil pencarian, halaman 404, dan banyak lagi, semuanya menggunakan Divi Builder yang familier.
Menerapkan Kustomisasi Secara Global: Template yang Anda buat dapat diterapkan ke seluruh situs atau ke bagian situs tertentu berdasarkan kondisi (misalnya, template header hanya untuk halaman blog, atau template produk kustom untuk kategori produk tertentu).
Menggunakan Modul Dinamis: Theme Builder memperkenalkan modul-modul khusus yang secara otomatis menarik konten dari basis data WordPress Anda (misalnya, judul postingan, gambar unggulan, komentar, harga produk).
Mencapai Konsistensi Merek: Dengan mendesain elemen global di satu tempat, Anda memastikan bahwa branding dan tampilan visual situs Anda konsisten di mana pun.

Singkatnya, Divi Theme Builder adalah alat untuk mengendalikan desain keseluruhan struktur situs WordPress Anda, bukan hanya konten halaman individual.

Mengakses Divi Theme Builder

Anda dapat mengakses Divi Theme Builder melalui dasbor WordPress Anda:

Navigasi ke Divi > Theme Builder.

Anda akan melihat antarmuka yang menampilkan tata letak default situs Anda, serta opsi untuk menambahkan template baru atau mengelola template yang sudah ada.

Komponen Utama Divi Theme Builder

Divi Theme Builder beroperasi berdasarkan sistem template dan kondisi:

Template: Ini adalah wadah utama di mana Anda mendesain tata letak untuk bagian tertentu dari situs Anda. Setiap template terdiri dari tiga area:
- Header Global/Kustom: Area header situs Anda.
- Body Global/Kustom: Area konten utama dari template. Ini adalah tempat sebagian besar desain dinamis Anda akan berada.
- Footer Global/Kustom: Area footer situs Anda.
Global vs. Kustom:
- Global: Bagian Header/Body/Footer yang ditandai sebagai “Global” akan muncul di setiap halaman yang diterapkan oleh template tersebut. Perubahan pada elemen global akan diterapkan di mana pun ia digunakan.
- Kustom: Anda bisa memilih untuk tidak membuat bagian header/footer global jika Anda ingin mendesainnya secara unik untuk template tersebut.
Kondisi (Conditions): Ini adalah aturan yang Anda terapkan pada setiap template untuk menentukan di mana template tersebut akan digunakan. Anda dapat menetapkan template untuk:
- Seluruh situs (All Posts, All Pages, All Products).
- Jenis Postingan Tertentu (Specific Page, Specific Post, Specific Product).
- Kategori/Tag Tertentu (All Posts In Category, All Products In Category).
- Halaman Sistem (404 Page, Search Results Page).
- Dan banyak lagi!

Langkah-langkah Menggunakan Divi Theme Builder (Studi Kasus: Membuat Header Kustom)

Mari kita ambil contoh praktis untuk membuat header kustom yang menarik.

Tambahkan Template Baru:
- Di antarmuka Divi Theme Builder, klik “Add New Template.”
- Jendela “Template Settings” akan muncul. Pilih di mana template ini akan berlaku. Untuk header global, Anda bisa memilih “All Posts”, “All Pages”, “All Products”, atau cukup “All Pages” jika Anda ingin header ini berlaku di sebagian besar halaman. Untuk header yang benar-benar global di seluruh situs, Anda tidak perlu menetapkan kondisi apa pun (ini akan menjadi default jika tidak ada template lain yang menimpanya). Untuk permulaan, mari pilih “All Posts” dan “All Pages” agar header ini muncul di blog dan halaman Anda.
- Klik “Create Template.”
Tambahkan Custom Header:
- Di dalam kotak template baru, klik “Add Custom Header.”
- Pilih “Build Custom Header.” (Ini akan membawa Anda ke Divi Builder).
Desain Header Anda dengan Divi Builder:
- Anda akan melihat kanvas Divi Builder kosong. Sekarang, Anda dapat menggunakan Bagian, Baris, dan Modul Divi untuk membuat header impian Anda.
- Modul Penting untuk Header:
  - Menu: Modul ini akan menampilkan menu navigasi WordPress Anda. Pastikan Anda sudah membuat menu di Tampilan > Menu terlebih dahulu.
  - Logo: Modul gambar sederhana yang Anda gunakan untuk logo situs Anda.
  - Teks: Untuk tagline atau informasi kontak.
  - Tombol: Untuk call-to-action penting.
  - Social Media Follow: Untuk ikon media sosial.
- Contoh Tata Letak Header Sederhana:
  - Tambahkan satu Bagian (+ biru).
  - Di dalamnya, tambahkan satu Baris (+ hijau) dengan struktur 2 kolom.
  - Di kolom kiri, tambahkan Modul Gambar untuk logo Anda.
  - Di kolom kanan, tambahkan Modul Menu. Sesuaikan tata letak menu (horizontal, rata kanan, dll.).
  - Anda dapat menambahkan Baris kedua di bawahnya untuk tagline atau info kontak kecil.
- Kustomisasi Desain: Gunakan pengaturan desain setiap Modul, Baris, dan Bagian (warna latar belakang, padding, margin, font, efek sticky, box shadow) untuk membuat header yang menarik dan responsif.
- Penting: Pastikan Responsif! Gunakan ikon desktop/tablet/mobile di bagian bawah Divi Builder untuk memastikan header Anda terlihat sempurna di semua perangkat. Sesuaikan ukuran font, padding, atau bahkan visibilitas modul jika diperlukan (misalnya, menyembunyikan elemen tertentu di mobile).
Simpan Header Kustom Anda:
- Klik ikon titik tiga di bagian bawah tengah Divi Builder.
- Klik “Save” (ikon disket).
- Setelah disimpan, tutup Divi Builder (klik “X” di kanan atas).
Simpan Perubahan Theme Builder:
- Anda akan kembali ke antarmuka Theme Builder. Klik tombol “Save Changes” di kanan atas.

Sekarang, setiap kali Anda mengunjungi halaman atau postingan yang Anda tetapkan dalam kondisi template ini, header kustom Anda akan muncul!

Studi Kasus Lanjutan: Mendesain Halaman Produk WooCommerce Kustom

Divi Theme Builder sangat kuat untuk toko online yang dibangun dengan WooCommerce.

Tambahkan Template Baru:
- Di Theme Builder, klik “Add New Template.”
- Di “Template Settings”, pilih “All Products” (atau “Specific Product Category” jika Anda ingin template unik untuk kategori produk tertentu).
- Klik “Create Template.”
Tambahkan Custom Body:
- Di dalam kotak template baru, klik “Add Custom Body.”
- Pilih “Build Custom Body.”
Desain Halaman Produk Anda:
- Ini adalah kanvas kosong tempat Anda akan mendesain tata letak detail produk. Kuncinya adalah menggunakan modul-modul WooCommerce khusus Divi.
- Modul WooCommerce Penting:
  - Woo Product Title: Menampilkan judul produk.
  - Woo Product Images: Menampilkan galeri gambar produk.
  - Woo Product Price: Menampilkan harga produk.
  - Woo Add To Cart: Tombol “Tambah ke Keranjang.”
  - Woo Product Description: Deskripsi lengkap produk.
  - Woo Product Data: Informasi tambahan produk (SKU, kategori, tag, berat).
  - Woo Related Products: Menampilkan produk terkait.
  - Woo Breadcrumbs: Navigasi jalur produk.
  - Woo Notices: Untuk pesan sistem WooCommerce (misalnya, “Produk ditambahkan ke keranjang”).
- Susun modul-modul ini menggunakan Bagian, Baris, dan Kolom seperti biasa. Anda bisa membuat tata letak dua kolom (gambar di kiri, detail di kanan), atau tata letak kompleks lainnya.
- Tambahkan modul Divi standar (Teks, Testimoni, Blurb, Komentar) untuk memperkaya halaman produk Anda.
- Desainlah dengan responsivitas dalam pikiran.
Simpan & Terapkan:
- Simpan desain Anda di Divi Builder, lalu kembali ke Theme Builder dan “Save Changes.”

Sekarang, setiap halaman produk di toko online Anda akan menggunakan template desain kustom ini, memberikan pengalaman belanja yang unik dan branding yang konsisten.

Tips dan Trik Rahasia untuk Theme Builder

Gunakan Tata Letak Pra-desain (Pre-made Layouts): Saat membangun Custom Body, Anda dapat memilih “Choose A Premade Layout” dan memfilter untuk template Divi Theme Builder yang sudah ada (misalnya, single product page layouts). Ini adalah cara cepat untuk memulai.
Prioritas Template: Jika ada beberapa template yang kondisinya tumpang tindih, Divi akan memprioritaskan template yang paling spesifik. (misalnya, template untuk “Specific Product” akan menimpa “All Products”).
Revisi Theme Builder: Di kanan atas antarmuka Theme Builder, ada ikon jam (History). Anda dapat melihat riwayat perubahan template Anda dan kembali ke versi sebelumnya.
Eksport/Import Template: Anda dapat mengekspor template Theme Builder untuk digunakan di situs Divi lain, sangat berguna untuk pengembang web atau jika Anda memiliki banyak situs.
Tes Setelah Perubahan: Selalu uji situs Anda secara menyeluruh setelah membuat atau mengubah template di Theme Builder untuk memastikan semuanya berfungsi seperti yang diharapkan dan tidak ada masalah tampilan.
Jangan Lupakan Elemen Dinamis: Ingatlah bahwa modul-modul di Theme Builder menarik konten dinamis dari WordPress. Anda tidak mengisi teks produk di template itu sendiri, melainkan modul Woo Product Title akan menariknya dari produk yang sedang dilihat.

Kesimpulan

Divi Theme Builder adalah alat yang luar biasa yang mengangkat Divi dari sekadar page builder menjadi solusi pembangunan website yang komprehensif. Dengan kemampuannya untuk mengkustomisasi setiap bagian dari struktur situs Anda secara global, Anda dapat mencapai tingkat konsistensi merek dan kontrol desain yang sebelumnya hanya mungkin dengan pengkodean tingkat lanjut.

Meskipun mungkin memerlukan sedikit waktu untuk memahami sepenuhnya, investasi dalam belajar Divi Theme Builder akan terbayar lunas dengan efisiensi yang ditingkatkan, desain yang lebih profesional, dan kemampuan untuk menciptakan website yang benar-benar unik dan dinamis. Mulailah bereksperimen, dan buka potensi tak terbatas dalam desain website Anda!