Divi adalah kekuatan besar dalam dunia pembangunan website WordPress, dan jantung dari kemampuannya terletak pada koleksi modulnya yang luas dan serbaguna. Modul-modul ini adalah “blok bangunan” yang memungkinkan Anda menambahkan hampir semua jenis konten dan fungsionalitas ke halaman Anda, semuanya melalui antarmuka drag-and-drop yang intuitif.
Namun, dengan lebih dari 40 modul yang tersedia (dan terus bertambah!), para pemula mungkin merasa sedikit kewalahan. Modul mana yang paling penting? Modul mana yang harus dipelajari terlebih dahulu untuk menciptakan website yang fungsional dan menarik?
Artikel ini akan menjadi panduan Anda untuk memahami modul Divi yang wajib Anda kuasai, mulai dari dasar-dasar teks hingga menampilkan galeri gambar yang menakjubkan. Dengan menguasai modul-modul ini, Anda akan memiliki fondasi yang kuat untuk membangun desain website apa pun yang Anda impikan.
Memahami Struktur Modul Divi
Sebelum kita menyelami modul spesifik, penting untuk memahami struktur umum setiap modul di Divi Builder. Setiap modul memiliki tiga tab pengaturan utama:
- Konten (Content): Di sinilah Anda memasukkan konten sebenarnya untuk modul tersebut (teks, gambar, tautan, dll.) dan mengatur opsi dasarnya.
- Desain (Design): Ini adalah tempat Anda menyesuaikan tampilan visual modul (warna, font, ukuran, spasi, bayangan, animasi, responsivitas, dll.). Di sinilah Anda akan menghabiskan sebagian besar waktu Anda untuk membuat modul terlihat menarik.
- Tingkat Lanjut (Advanced): Tab ini untuk pengguna yang ingin menambahkan CSS kustom, ID dan Class, atribut HTML kustom, atau mengatur visibilitas modul berdasarkan perangkat.
Dengan pemahaman ini, mari kita jelajahi modul-modul esensial.
Kategori Modul Esensial Divi
Kita akan mengelompokkan modul-modul ini berdasarkan fungsi utamanya.
1. Modul Dasar & Konten Utama
Modul-modul ini adalah tulang punggung hampir setiap halaman website.
-
Teks (Text):
- Fungsi: Modul paling dasar untuk menambahkan paragraf teks, heading, daftar, dan konten berbasis teks lainnya.
- Mengapa Wajib: Hampir setiap halaman memerlukan teks. Kuasai pengaturan font, ukuran, warna, line-height, dan letter-spacing di tab Desain untuk memastikan keterbacaan yang optimal.
- Trik Cerdas: Gunakan blok kode (
< >) di editor teks untuk beralih ke mode HTML jika Anda perlu menyisipkan kode embed atau penyesuaian HTML kecil.
-
Gambar (Image):
- Fungsi: Menampilkan gambar di website Anda.
- Mengapa Wajib: Visual sangat penting. Pelajari cara mengunggah, mengatur ukuran, menambahkan alt text (penting untuk SEO), dan menambahkan link ke gambar.
- Trik Cerdas: Selalu optimalkan gambar Anda sebelum mengunggahnya untuk kecepatan loading yang lebih baik. Gunakan fitur lazy loading Divi.
-
Tombol (Button):
- Fungsi: Membuat tombol call-to-action (CTA) yang menarik.
- Mengapa Wajib: CTA mengarahkan pengunjung untuk mengambil tindakan. Kuasai kustomisasi warna, ukuran, font, padding, radius border, ikon, dan efek hover.
- Trik Cerdas: Gunakan “Copy & Paste Styles” untuk memastikan konsistensi desain tombol di seluruh situs Anda.
-
Blurb:
- Fungsi: Menggabungkan gambar/ikon, judul, dan teks singkat untuk menampilkan fitur, layanan, atau keunggulan.
- Mengapa Wajib: Sangat serbaguna untuk bagian “Fitur Kami”, “Layanan Kami”, atau blok konten ringkas.
- Trik Cerdas: Anda bisa menggunakan gambar atau ikon. Pertimbangkan untuk menyesuaikan posisi gambar/ikon (atas, kiri) dan ukuran ikon untuk efek visual yang berbeda.
-
Heading:
- Fungsi: Membuat judul utama (H1, H2, H3, dll.)
- Mengapa Wajib: Penting untuk struktur konten dan SEO. Divi memungkinkan kustomisasi font, warna, dan spasi untuk setiap level heading secara terpisah.
- Trik Cerdas: Gunakan pengaturan H1-H6 secara konsisten di situs Anda untuk hirarki informasi yang jelas.
2. Modul Tata Letak & Struktur
Modul-modul ini membantu mengatur konten Anda secara visual.
-
Slider:
- Fungsi: Menampilkan beberapa gambar atau konten dalam format slideshow yang berputar.
- Mengapa Wajib: Ideal untuk hero section di beranda, menampilkan penawaran terbaru, atau portofolio singkat.
- Trik Cerdas: Hindari terlalu banyak slide karena dapat memengaruhi kecepatan. Gunakan gambar berkualitas tinggi dan teks yang ringkas.
-
Galeri (Gallery):
- Fungsi: Menampilkan koleksi gambar dalam format grid atau masonry.
- Mengapa Wajib: Penting untuk portofolio fotografi, menampilkan produk, atau acara.
- Trik Cerdas: Manfaatkan fitur lightbox agar pengunjung dapat melihat gambar lebih besar. Sesuaikan jumlah kolom agar responsif.
-
Call To Action:
- Fungsi: Mengombinasikan judul, teks, dan tombol untuk ajakan bertindak yang menonjol.
- Mengapa Wajib: Versi lebih besar dan lebih kuat dari modul tombol, sering digunakan di bagian akhir halaman untuk konversi.
- Trik Cerdas: Sesuaikan latar belakang dan font agar CTA benar-benar menarik perhatian.
-
Divider:
- Fungsi: Membuat garis pemisah horizontal.
- Mengapa Wajib: Membantu memecah konten dan memberikan whitespace, meningkatkan keterbacaan.
- Trik Cerdas: Sesuaikan gaya garis, berat, warna, dan spasi. Anda bisa menggunakannya sebagai elemen dekoratif.
3. Modul Interaktif & Sosial
Modul ini meningkatkan interaksi dan konektivitas.
-
Contact Form (Formulir Kontak):
- Fungsi: Memungkinkan pengunjung mengirimkan pesan langsung dari website Anda.
- Mengapa Wajib: Penting untuk situs bisnis, layanan, dan portofolio agar klien dapat menghubungi Anda.
- Trik Cerdas: Pastikan untuk mengatur alamat email tujuan pengiriman pesan di pengaturan modul. Tambahkan captcha untuk mencegah spam.
-
Social Media Follow:
- Fungsi: Menampilkan ikon media sosial dengan tautan ke profil Anda.
- Mengapa Wajib: Mendorong pengunjung untuk terhubung dengan Anda di platform sosial.
- Trik Cerdas: Pilih ikon yang relevan, sesuaikan ukuran, warna, dan spasi antar ikon agar sesuai dengan desain merek Anda.
-
Testimonial:
- Fungsi: Menampilkan ulasan atau kesaksian dari klien yang puas.
- Mengapa Wajib: Membangun kepercayaan dan kredibilitas merek Anda.
- Trik Cerdas: Tambahkan gambar klien dan rating bintang untuk dampak visual yang lebih besar.
-
Map (Peta):
- Fungsi: Menampilkan lokasi fisik Anda menggunakan Google Maps.
- Mengapa Wajib: Penting untuk bisnis fisik agar pelanggan dapat menemukan Anda.
- Trik Cerdas: Pastikan Anda memasukkan Google Maps API Key di Divi Theme Options untuk peta berfungsi dengan baik.
4. Modul Blog & E-commerce (Opsional, Tergantung Jenis Situs)
Jika Anda memiliki blog atau toko online, modul ini sangat penting.
-
Blog:
- Fungsi: Menampilkan postingan blog terbaru Anda dalam berbagai tata letak (grid, fullwidth, masonry).
- Mengapa Wajib: Jantung dari setiap situs blog. Kontrol kategori, jumlah postingan, dan elemen yang ditampilkan (gambar, meta, cuplikan).
- Trik Cerdas: Gunakan di halaman beranda atau halaman blog khusus untuk menampilkan konten terbaru Anda.
-
Shop (WooCommerce):
- Fungsi: Menampilkan produk WooCommerce Anda dalam tata letak grid atau daftar.
- Mengapa Wajib: Penting untuk toko online. Memungkinkan filter berdasarkan kategori, tag, atau produk tertentu.
- Trik Cerdas: Gunakan bersama dengan Divi Theme Builder untuk membuat template halaman toko dan kategori produk yang unik.
Menguasai Modul: Praktik dan Eksperimen
Meskipun daftar di atas mencakup modul-modul yang paling sering digunakan, kunci untuk menguasai Divi adalah praktik dan eksperimen.
- Baca Dokumentasi: Elegant Themes memiliki dokumentasi yang sangat baik untuk setiap modul. Luangkan waktu untuk membacanya.
- Bereksperimen dengan Pengaturan Desain: Jangan takut untuk mengklik setiap opsi di tab “Desain”. Ubah nilai, lihat hasilnya, dan pahami bagaimana setiap pengaturan memengaruhi tampilan modul.
- Manfaatkan Layout Packs: Impor layout pack Divi. Pelajari bagaimana desainer profesional menggunakan kombinasi modul untuk menciptakan tampilan yang menarik.
- Belajar dari Situs Lain: Identifikasi modul Divi apa yang digunakan di situs web yang Anda kagumi, lalu coba replikasi desainnya.
Kesimpulan
Modul adalah fondasi dari setiap desain Divi. Dengan menguasai modul-modul esensial ini – dari teks dasar hingga galeri gambar yang canggih, dan dari tombol CTA hingga formulir kontak – Anda akan memiliki kendali penuh atas tampilan dan fungsionalitas website Anda. Divi memungkinkan Anda untuk mewujudkan ide-ide desain Anda tanpa hambatan, dan penguasaan modul-modul ini adalah langkah pertama untuk menjadi desainer Divi yang ulung.
Teruslah belajar, teruslah bereksperimen, dan nikmati proses pembangunan website yang kreatif dengan Divi!
0 Comments