Advan – Kamu pasti pernah mengalami saat di mana desain header di Elementor kurang memuaskan. Mungkin warnanya kurang pas atau tata letaknya tidak sesuai. Nah, di sinilah custom CSS bisa jadi penyelamat. Menambahkan custom CSS memungkinkan kamu untuk menyesuaikan tampilan sesuai keinginan, membuat header jadi lebih menarik dan sesuai dengan gaya situs.
Menggunakan custom CSS di header Elementor bukanlah hal yang sulit. Meskipun kamu bukan seorang ahli coding, dengan panduan yang tepat, kamu bisa melakukannya dengan mudah. Jadi, mari kita lihat langkah-langkahnya.
Langkah-Langkah Menambahkan Custom CSS di Header Elementor
Memulai dengan custom CSS mungkin terasa menakutkan, tetapi tenang saja! Langkah-langkah berikut ini akan membantumu memahami cara menambahkan custom CSS di header Elementor dengan mudah. Ikuti setiap langkah dengan cermat, dan kamu akan melihat perubahan yang signifikan pada tampilan situs.
1. Buka Halaman Editor Elementor
Pertama, buka halaman atau template di Elementor yang ingin kamu tambahkan custom CSS. Klik “Edit with Elementor” pada halaman yang diinginkan. Pastikan kamu sudah login ke dashboard WordPress untuk mengakses fitur ini.
2. Akses Tab Advanced pada Widget Header
Setelah masuk ke editor, pilih widget header yang ingin kamu ubah. Klik pada widget tersebut, lalu pilih tab “Advanced”. Di sini, kamu akan menemukan berbagai opsi untuk mengatur tampilan widget lebih detail.
3. Buka Bagian Custom CSS
Di dalam tab “Advanced”, scroll ke bawah hingga menemukan opsi “Custom CSS”. Di sini kamu bisa mulai menambahkan kode CSS sesuai keinginan. Fitur ini hanya tersedia di Elementor Pro, jadi pastikan kamu menggunakan versi Pro.
4. Tambahkan Kode CSS
Mulailah menambahkan kode CSS untuk mengubah tampilan header. Misalnya, untuk mengubah warna latar belakang, tambahkan kode berikut:
- css
selector {
background-color: 333;
Kamu bisa mengganti `333` dengan kode warna lain sesuai selera.
Selain itu, kamu bisa menambahkan berbagai properti CSS lain seperti padding, margin, dan font-style.
5. Preview dan Sesuaikan
Setelah menambahkan kode CSS, lihat perubahan yang terjadi di preview Elementor. Jika ada yang perlu disesuaikan, edit kembali kodenya hingga sesuai keinginan. Proses ini mungkin memerlukan beberapa kali percobaan hingga hasilnya sempurna.
Baca Juga: Cara Menambahkan Call to Action di Header Elementor
6. Simpan Perubahan
Jika sudah puas dengan hasilnya, jangan lupa untuk menyimpan perubahan. Klik tombol “Update” di bagian bawah editor Elementor. Pastikan semua perubahan tersimpan dengan baik sebelum menutup editor.
Tips Tambahan
Menambahkan custom CSS bisa jadi menantang, terutama jika kamu belum terbiasa dengan kode. Berikut beberapa tips tambahan:
Gunakan Inspektor Browser
Jika kamu kesulitan menemukan elemen yang ingin diubah, gunakan fitur “Inspect” pada browser untuk melihat kode HTML dan CSS yang ada. Ini akan membantumu memahami struktur elemen yang ingin kamu modifikasi.
Eksperimen dengan Kode
Jangan takut untuk bereksperimen. Cobalah berbagai kode CSS hingga menemukan tampilan yang paling sesuai dengan gaya situsmu. Catat kode-kode yang berhasil sehingga bisa kamu gunakan lagi di masa mendatang.
Referensi dan Tutorial
Manfaatkan referensi dan tutorial online untuk belajar lebih banyak tentang CSS. Situs seperti W3Schools dan MDN Web Docs bisa sangat membantu. Kamu juga bisa bergabung dengan forum dan komunitas desain web untuk berbagi pengalaman dan mendapatkan saran.
Menambahkan custom CSS di header Elementor dapat memberikan fleksibilitas yang lebih besar dalam mendesain situs. Dengan mengikuti langkah-langkah di atas, kamu bisa dengan mudah mengubah tampilan header sesuai keinginan.
Jangan lupa untuk selalu menyimpan perubahan dan melakukan pengecekan pada berbagai perangkat untuk memastikan tampilan tetap konsisten.
Untuk mendukung kegiatan mendesain dan coding yang lebih efisien, kamu bisa menggunakan Advan Workplus. Laptop ini dilengkapi dengan layar berkualitas tinggi dan performa yang mumpuni, sehingga cocok untuk digunakan dalam berbagai aktivitas kreatif dan produktif. Dengan Advan Workplus, kamu bisa bekerja dengan lebih nyaman dan efisien.***
Editor: Mahfida Ustadhatul Umma