2 menit
Jika kamu ingin membuat desain website lebih menarik, maka kamu bisa mencoba membuat Header transparan di Elementor sehingga header tampak lebih menyatu dengan konten paling atas websitemu.
Kalau masih bingung, berikut merupakan contoh halaman yang menggunakan Header Transparan
Gimana? Sudah paham maksudnya kan? Jadi logo dan menu di website akan menyatu dengan konten pertama di website.
Cara Membuat Header Transparan di Elementor
Meski dapat membuat tampilan lebih menarik, cara ini kurang cocok jika website yang kamu buat menggunakan background dengan warna langsung atau website sejenis berita, misalnya saja cara ini kurang cocok digunakan di website wpgan.com.
Jika kamu sudah berada dihalaman Elementor editor, maka kamu bisa memulainya dengan
1. Tambahkan Header
Kamu bisa menambahkan header dihalaman yang sudah kamu edit dengan menambahkan kontainer dengan layout sesuai keperluanmu, misalnya disini kita menggunakan layout 3 kolom untuk logo, menu, dan tombol.
2. Tambahkan Konten
Tambahkan konten ke layout yang sudah kamu buat, misalnya sisi kiri dengan logo website dan sisi kanan dengan menu
3. Kustomisasi Kontainer
Ketika belum dikustomisasi, mungkin gambar dan lainnya akan tampil berantakan, sehingga kamu bisa melakukan kustomisasi seperti tata letak, margin, dan padding yang bisa kamu sesuaikan sendiri
4. Ubah Margin Kontainer Header
Sekarang kamu bisa memilih kontainer utama header yang kamu buat di awal, kemudian ubah margin bottom menjadi -100 atau lebih dari tab Advanced. Pastikan angka marginnya menggunakan angka minus.
5. Update Z-Index
Untuk memastikan semua konten tapil dan tidak tertutup elemen lain (misalnya logo dalam tutorial ini masih tidak tampil karena tertutup elemen lain), kamu bisa menambahkan z-index dengan angka yang tinggi, misalnya dengan angka 99
Setelah semua menu tampil, kamu bisa mempublikasikan halaman atau bahkan template header yang sudah kamu buat dan hasilnya akan menjadi seperti contoh diawal postingan ketika diakses.
Begitulah cara mudah untuk membuat Header transparan di Elementor bahkan tanpa harus menggunakan plugin tambahan.
Terima kasih telah berkunjung ke WPGan.com dan membaca Cara Membuat Header Transparan di Elementor. Dapatkan saldo $100 di Vultr gratis untuk uji coba VPS dari [Halaman Ini]