Advan – Membuat header transparan di Elementor bisa memberikan tampilan yang modern dan elegan untuk situs web kamu. Dengan elemen transparan, kamu bisa menampilkan konten di belakang header dengan lebih menarik.
Namun, prosesnya mungkin sedikit rumit jika kamu belum terbiasa bahkan tergolong pemula dalam menggunakan Elementor. Tapi jangan khawatir! Di artikel ini, kamu akan belajar langkah-langkah mudah untuk membuat header transparan di Elementor.
Langkah Mudah Membuat Header Transparan di Elementor
Di era kemudahan mengakses teknologi seperti saat ini, tidak perlu menjadi ahli desain web untuk membuat tampilan web kamu menjadi lebih menarik, dan menarik banyak perhatian.
Hanya butuh sedikit kesabaran dan perhatian terhadap detail. Berikut ini adalah langkah-langkah yang harus kamu ikuti untuk membuat header transparan di Elementor:
1. Buka Elementor dan Pilih Halaman yang Ingin Diedit
Pertama, masuk ke dashboard WordPress kamu dan pilih halaman yang ingin kamu tambahkan header transparan. Klik tombol “Edit with Elementor” untuk memulai. Pastikan kamu sudah menginstal dan mengaktifkan plugin Elementor di situs kamu.
2. Tambahkan Header Baru
Setelah halaman terbuka di Elementor, kamu perlu menambahkan header baru. Klik pada ikon plus (+) untuk menambahkan section baru. Pilih layout dengan satu kolom untuk memulai.
3. Buat Header Menjadi Transparan
Untuk membuat header transparan, kamu perlu mengatur background section menjadi transparan. Klik pada section yang baru saja kamu buat, lalu pilih “Style” di panel sebelah kiri. Di bagian background, pilih opsi “Classic” dan atur opacity ke 0.
4. Tambahkan Menu Navigasi
Setelah background transparan, tambahkan menu navigasi ke header kamu. Klik pada ikon plus (+) di dalam section dan pilih widget “Nav Menu”. Tarik dan letakkan widget tersebut ke dalam section. Pastikan menu navigasi sudah dibuat sebelumnya di Appearance > Menus.
Baca Juga: Cara Edit Header di Elementor
5. Sesuaikan Warna Teks dan Link
Karena header kamu sekarang transparan, penting untuk memastikan teks dan link mudah dibaca. Klik pada widget “Nav Menu” dan pilih “Style”. Atur warna teks dan link agar kontras dengan background halaman kamu.
6. Tambahkan Logo
Untuk melengkapi header, tambahkan logo di sebelah kiri menu navigasi. Klik pada ikon plus (+) di section dan pilih widget “Image”. Tarik dan letakkan widget tersebut di section, lalu upload logo kamu. Atur ukuran dan posisi logo agar terlihat rapi.
7. Atur Padding dan Margin
Untuk memastikan header kamu terlihat proporsional dan tidak mengganggu konten di belakangnya, atur padding dan margin section. Klik pada section, pilih “Advanced” di panel sebelah kiri, dan sesuaikan padding serta margin sesuai kebutuhan.
8. Periksa Responsivitas
Terakhir, pastikan header transparan kamu terlihat bagus di semua perangkat. Klik ikon monitor di bagian bawah panel Elementor dan pilih tampilan desktop, tablet, dan mobile. Sesuaikan elemen jika diperlukan agar header tetap terlihat menarik di semua ukuran layar.
Baca Juga: Cara Membuat Sticky Header di Elementor
Dengan mengikuti langkah-langkah di atas, kamu bisa membuat header transparan yang stylish dan fungsional di Elementor. Hasil akhirnya akan membuat situs web kamu terlihat lebih profesional dan modern.
Untuk pengalaman editing yang lebih lancar dan performa yang optimal, coba gunakan Advan Workpro. Laptop ini memiliki spesifikasi tinggi dengan prosesor Intel Core i7 dan RAM 16GB, membuat proses editing di Elementor menjadi lebih cepat dan responsif.
Layar Full HD 15.6 inci yang dimiliki Advan Workpro juga memastikan warna dan detail terlihat jelas, membantu kamu dalam mendesain dengan presisi tinggi.
Semoga artikel ini membantu kamu dalam membuat header transparan di Elementor. Selamat mencoba dan semoga sukses!***
Editor: Mahfida Ustadhatul Umma