Cara Menggunakan CSS Kustom di Divi untuk Desain Lebih Detail

Monday, 16 June 2025

Divi dikenal luas sebagai page builder WordPress yang memungkinkan siapa saja menciptakan website yang menakjubkan tanpa perlu menyentuh kode. Dengan antarmuka drag-and-drop yang intuitif dan ribuan opsi desain bawaan, Anda dapat mencapai hampir semua tampilan yang Anda inginkan. Namun, ada kalanya Anda mungkin menghadapi batasan—mungkin Anda menginginkan efek hover yang sangat spesifik, penyesuaian spasi yang lebih halus, atau gaya unik yang tidak tersedia di opsi Divi Builder.

Di sinilah kekuatan CSS kustom (Custom CSS) berperan. CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk menjelaskan presentasi dokumen yang ditulis dalam HTML. Dengan menambahkan CSS kustom, Anda dapat “menarik tuas” tambahan yang tidak terekspos di antarmuka Divi, memberikan Anda kontrol piksel-sempurna dan kemampuan untuk merealisasikan visi desain yang paling detail dan unik.

Artikel ini akan menjadi panduan lengkap Anda untuk memahami cara menggunakan CSS kustom di Divi, mengungkap di mana Anda dapat menambahkan kode Anda, dan memberikan tips untuk menggunakannya secara efektif dan aman untuk mencapai desain yang lebih mendalam dan profesional.

Mengapa Menggunakan CSS Kustom di Divi?

Meskipun Divi sangat kaya fitur, ada beberapa alasan kuat mengapa Anda mungkin perlu menggunakan CSS kustom:

Kontrol Piksel-Sempurna: Untuk penyesuaian yang sangat spesifik yang tidak disediakan oleh opsi Divi (misalnya, border yang sangat kompleks, efek teks unik).
Efek Desain Lanjutan: Menerapkan efek hover yang lebih canggih, animasi yang spesifik, atau transisi yang unik.
Override Gaya Bawaan: Menimpa gaya default Divi atau plugin lain yang mungkin tidak sesuai dengan branding Anda.
Efisiensi untuk Skala Besar: Terkadang, lebih efisien menulis beberapa baris CSS kustom yang akan diterapkan di beberapa tempat daripada mengklik melalui banyak pengaturan di setiap modul.
Desain yang Unik: Membuat website Anda benar-benar menonjol dari yang lain yang menggunakan tema atau layout pack Divi yang sama.

Penting: Menggunakan CSS kustom membutuhkan pemahaman dasar tentang cara kerja CSS dan selektor. Namun, jangan takut, Anda bisa memulai dengan mempelajari dasar-dasar dan secara bertahap membangun keahlian Anda.

Di Mana Menambahkan CSS Kustom di Divi?

Divi menyediakan beberapa lokasi yang berbeda untuk menambahkan CSS kustom, masing-masing dengan kegunaan dan prioritasnya sendiri.

1. Pengaturan Tingkat Modul/Baris/Bagian (Module/Row/Section Settings)

Ini adalah tempat terbaik untuk CSS yang hanya berlaku untuk elemen tertentu.

Lokasi: Saat mengedit Modul, Baris, atau Bagian, klik ikon roda gigi untuk membuka pengaturannya. Navigasi ke tab “Tingkat Lanjut” (Advanced), lalu gulir ke bawah ke bagian “CSS Kustom” (Custom CSS).
Keunggulan: CSS yang Anda tambahkan di sini akan sangat spesifik untuk elemen tersebut, sehingga risiko konflik dengan gaya lain sangat rendah. Divi secara otomatis akan menghasilkan selektor yang unik untuk elemen tersebut, jadi Anda bisa langsung menulis properti CSS (misalnya, background-color: red;).
Penggunaan Ideal: Penyesuaian kecil untuk modul tunggal, efek hover unik untuk tombol tertentu, atau padding khusus untuk baris tertentu.

2. Opsi Tema Divi (Divi Theme Options)

Lokasi ini cocok untuk CSS kustom yang berlaku di seluruh situs Anda.

Lokasi: Di dasbor WordPress Anda, navigasi ke Divi > Opsi Tema. Gulir ke bawah ke bagian “CSS Kustom” (Custom CSS).
Keunggulan: CSS di sini akan diterapkan ke setiap halaman yang menggunakan tema Divi. Ini sangat berguna untuk gaya global seperti heading kustom, gaya link default, atau penyesuaian pada elemen Divi yang muncul di seluruh situs.
Penggunaan Ideal: Mengatur ulang gaya default H1-H6, menimpa warna atau font global, atau menambahkan gaya khusus untuk plugin pihak ketiga.
Penting: Selalu gunakan selektor CSS yang spesifik (misalnya, h1 { ... }, .et_pb_button { ... }) untuk menargetkan elemen yang tepat.

3. File `style.css` di Child Theme Anda

Ini adalah lokasi yang paling direkomendasikan dan paling aman untuk semua kustomisasi CSS yang signifikan atau yang lebih kompleks.

Lokasi: Anda perlu mengakses file website Anda melalui FTP (File Transfer Protocol) client (misalnya, FileZilla) atau melalui File Manager di cPanel hosting Anda. File ini terletak di wp-content/themes/nama-child-theme-anda/style.css.
Keunggulan:
- Update-Proof: Kustomisasi Anda tidak akan hilang saat tema Divi induk diperbarui.
- Organisasi: Memungkinkan Anda mengatur kode CSS Anda dengan lebih baik menggunakan komentar dan struktur yang jelas.
- Debugging: Lebih mudah untuk melacak masalah karena semua kode kustom berada di satu tempat.
Penggunaan Ideal: Semua kustomisasi CSS utama, penimpaan gaya default Divi yang besar, dan CSS untuk template yang Anda buat di Divi Theme Builder.
Penting: Selalu gunakan child theme ketika menambahkan CSS ke file style.css. (Lihat artikel sebelumnya tentang “Divi Child Theme”).

4. WordPress Customizer (Additional CSS)

Ini adalah fitur bawaan WordPress yang juga bisa digunakan untuk CSS kustom.

Lokasi: Di dasbor WordPress Anda, navigasi ke Tampilan > Sesuaikan (Customize). Di sidebar kiri, klik “CSS Tambahan” (Additional CSS).
Keunggulan: Memungkinkan Anda melihat perubahan CSS secara real-time sebelum menerapkannya. Kode ini juga update-proof.
Penggunaan Ideal: Untuk kustomisasi CSS yang relatif kecil dan global.
Prioritas: CSS di sini umumnya akan menimpa CSS dari tema atau plugin lain karena dimuat terakhir.

Cara Menulis CSS Kustom yang Efektif untuk Divi

Pahami Selektor CSS:
- ID (#): Menargetkan elemen dengan ID unik (misalnya, #my-custom-section). Divi secara otomatis memberikan ID unik pada modul.
- Class (.): Menargetkan elemen dengan class tertentu (misalnya, .my-custom-button). Anda dapat menambahkan class kustom di pengaturan modul Divi (Advanced > CSS ID & Classes > CSS Class). Ini adalah cara terbaik untuk menerapkan gaya yang sama ke beberapa elemen.
- Tag HTML: Menargetkan semua elemen dengan tag HTML tertentu (misalnya, p, h1, a).
- Kombinasi: Gabungkan selektor untuk menargetkan lebih spesifik (misalnya, .my-section .et_pb_text_inner h2).
Gunakan Inspect Element (Alat Pengembang Browser):
- Ini adalah teman terbaik Anda. Klik kanan pada elemen di website Anda, lalu pilih “Inspect” atau “Inspect Element” (tergantung browser).
- Anda dapat melihat CSS yang sedang diterapkan pada elemen tersebut, class dan ID-nya, dan bahkan menguji perubahan CSS secara real-time di browser Anda sebelum menambahkannya ke Divi.
Pentingnya !important (Gunakan dengan Bijak):
- Terkadang, Anda mungkin menemukan bahwa CSS kustom Anda tidak diterapkan karena ada gaya lain dengan prioritas lebih tinggi. Menambahkan !important setelah properti CSS akan memaksanya untuk diterapkan (misalnya, color: blue !important;).
- Gunakan !important hanya sebagai upaya terakhir. Penggunaan berlebihan dapat membuat CSS Anda sulit dikelola dan di-debug. Lebih baik mencari selektor yang lebih spesifik.
Komentar Kode:
- Gunakan komentar CSS (/* Ini adalah komentar CSS */) untuk menjelaskan kode Anda. Ini akan sangat membantu Anda dan orang lain yang mungkin mengelola website Anda di masa mendatang.
Periksa Responsivitas:
- Saat menambahkan CSS kustom, selalu uji bagaimana tampilannya di berbagai ukuran layar. Anda mungkin perlu menggunakan media queries untuk menerapkan gaya yang berbeda untuk desktop, tablet, dan mobile.
CSS
```
/* Contoh Media Query untuk Mobile */
@media only screen and (max-width: 767px) {
    .my-custom-class {
        font-size: 16px !important;
        padding: 10px !important;
    }
}
```

Contoh Penggunaan CSS Kustom di Divi

Contoh 1: Efek Hover Kustom pada Gambar

Anda ingin gambar sedikit membesar dan memiliki bayangan saat di-hover.

Tambahkan Kelas CSS: Edit Modul Gambar. Di tab “Advanced” > “CSS ID & Classes”, tambahkan my-image-hover-effect di “CSS Class.”

Tambahkan CSS Kustom (di Opsi Tema Divi atau Child Theme):

CSS

.my-image-hover-effect img {
    transition: all 0.3s ease-in-out; /* Untuk transisi halus */
}

.my-image-hover-effect:hover img {
    transform: scale(1.05); /* Memperbesar gambar 5% */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Menambah bayangan */
}

Contoh 2: Gaya Tombol Kustom yang Unik

Anda ingin tombol memiliki gradient border saat di-hover.

Tambahkan Kelas CSS: Edit Modul Tombol. Di tab “Advanced” > “CSS ID & Classes”, tambahkan my-gradient-button di “CSS Class.”

Tambahkan CSS Kustom:

CSS

.my-gradient-button .et_pb_button {
    border: 2px solid transparent; /* Border transparan awal */
    border-image: linear-gradient(to right, #ff7e5f, #feb47b) 1; /* Efek gradient border */
    transition: all 0.4s ease-in-out;
}

.my-gradient-button .et_pb_button:hover {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Isi tombol dengan gradien */
    color: white !important; /* Ubah warna teks */
    border-image: none; /* Hilangkan gradient border saat hover */
    border-color: transparent; /* Pastikan border transparan */
}

(Catatan: Efek gradient border bisa kompleks dan mungkin memerlukan prefix browser lama atau fallback.)

Kesimpulan

Menggunakan CSS kustom adalah keterampilan yang memberdayakan bagi setiap pengguna Divi yang ingin melampaui batas-batas opsi bawaan. Ini membuka pintu ke tingkat detail dan personalisasi yang tak terbatas, memungkinkan Anda menciptakan website yang benar-benar unik dan mencerminkan visi desain Anda secara presisi.

Meskipun memerlukan sedikit pembelajaran tentang dasar-dasar CSS, investasi ini akan sangat berharga. Mulailah dengan penyesuaian kecil, gunakan Inspect Element sebagai teman terbaik Anda, dan secara bertahap Anda akan menjadi mahir dalam menambahkan sentuhan CSS kustom yang akan membuat website Divi Anda benar-benar menonjol. Selamat mengcoding dan mendesain!