Bagaimana Cara Menggunakan Elementor untuk Membuat Header Transparan?

Header transparan bisa menjadi cara yang bagus untuk meningkatkan tampilan situs Anda. Itu membuat desain situs web Anda menonjol dan terlihat lebih interaktif bagi pengunjung situs Anda.

Tetapi bisakah Anda menggunakan Elementor untuk membuat header transparan di WordPress tanpa mengetahui bahasa pemrograman apa pun? Jawabannya iya! Anda pasti bisa. Artikel ini akan menunjukkan petunjuk untuk membuat header transparan Elementor dengan mudah.

Keuntungan Menggunakan Header Transparan

Anda dapat dengan mudah membuat header transparan Elementor yang menarik. Tetapi jika Anda mau, Anda dapat melangkah lebih jauh dan memperbaikinya saat pengunjung menggulir konten halaman. Di bawah ini adalah kelebihannya:

Sangat baik untuk Halaman Web Panjang

Menggunakan header lengket transparan adalah cara yang bergaya dan cepat untuk memastikan pengunjung Anda mendapatkan pengalaman yang menyenangkan.

Mereka dapat membantu situs web Anda memiliki sistem navigasi yang lebih ramah pengguna. Jika konten situs Anda sangat panjang, manfaat ini akan sangat bermanfaat.

Terbaik untuk Situs Web yang Dapat Ditindaklanjuti

Header lengket transparan berfungsi paling baik di situs web yang dapat ditindaklanjuti, seperti situs ritel atau eCommerce. Itu karena Anda ingin pengunjung melakukan tindakan tertentu saat masih berada di konten halaman.

Ketika tajuk ditampilkan dengan indah saat menjelajahi situs web Anda, pengunjung akan merasa lebih nyaman untuk menjelajah.

Terlebih lagi, karena tajuknya transparan, itu tidak akan mengurangi keterbacaan konten. Oleh karena itu, menambahkan tajuk transparan dapat mengurangi rasio pentalan situs Anda dan membantu memandu pengunjung Anda secara efisien.

Tingkatkan Kemampuan Navigasi Situs Anda

Menggunakan header lengket transparan di situs Anda mendorong pengunjung Anda untuk mengambil tindakan segera. Ini menghemat waktu mereka saat mencari opsi tertentu.

Dan alih-alih meletakkan logo merek Anda di mana-mana di beranda, Anda dapat menampilkannya dengan elegan di header lengket transparan.

Bagaimana Cara Menggunakan Elementor Pro untuk Membuat Header Transparan?

Sekarang, mari pelajari cara membuat dan menyesuaikan header transparan menggunakan Elementor Pro.

Instal dan Aktifkan Plugin Elementor Pro

Jika situs Anda belum memiliki Elementor Pro, Anda perlu menginstal dan mengaktifkannya.

1. Dari dasbor WordPress, buka Plugin > Add New .

2. Temukan plugin dengan memasukkan 'Elementor'. Anda kemudian akan melihat Pembuat Situs Web Elementor terdaftar sebagai opsi.
3. Klik tombol Instal Sekarang dan tombol Aktifkan , masing-masing.
4. Setelah berhasil membeli Elementor Pro, buka my.elementor.com.
5. Masuk dengan informasi yang Anda dapatkan di email setelah pembelian.
6. Selanjutnya, Anda akan dibawa ke halaman Profil . Klik tombol Unduh Plugin di sudut kanan atas untuk mengunduh file .zip ke komputer Anda.

7. Dari dasbor WordPress situs Anda, klik Plugin > Add New . Kemudian, klik tombol Unggah Plugin di sudut kiri atas.
8. Klik tombol Pilih File . Pilih file .zip yang baru saja Anda unduh. Selanjutnya, klik Aktifkan .
9. Di atas dasbor situs, Anda akan mendapatkan pemberitahuan yang meminta Anda untuk mengaktifkan kunci lisensi Anda.

Buat Menu untuk Situs Anda

Selanjutnya, Anda harus membuat menu header menggunakan dashboard WordPress jika Anda belum melakukannya. Di bawah ini adalah panduan pengantar.

1. Dari dasbor WordPress, navigasikan ke Appearance > Menus .

2. Masukkan nama menu di kotak teks Nama Menu . Kemudian, klik tombol Buat Menu .
3. Fokus pada panel kiri. Di sini, Anda dapat menambahkan halaman situs, posting, kategori, dan tautan khusus ke menu.

4. Anda dapat menarik dan melepas item menu untuk mengatur ulang atau membuat submenu di panel kanan.

5. Saat Anda senang, ingatlah untuk mengklik tombol Simpan Menu .

Gunakan Elementor Pro untuk Membuat Header Normal

1. Buka Template > Tambah Baru dari dasbor WordPress.

2. Sebuah jendela pop-up akan muncul. Pilih template header Elementor dari menu dropdown dan masukkan namanya di kotak teks Name your template . Kemudian, klik tombol BUAT TEMPLATE .

3. Galeri Template Elementor akan muncul dalam pop-up. Anda dapat menavigasi semua gaya header Elementor. Setelah Anda memilih favorit, gerakkan kursor ke sana, lalu klik tombol Sisipkan . Anda juga dapat melihat pratinjau semuanya.

Buat Header Lengket Transparan Menggunakan Elementor Pro

1. Sekarang, Anda perlu membuat header transparan menggunakan Elementor Pro. Untuk melakukannya, klik tombol enam titik di atas header.

2. Di bagian 'Tata Letak', pilih menu yang Anda inginkan di menu tarik-turun Menu.

3. Buka tab Style untuk mengubah warna latar belakang header dan nilai transparan. Di bagian 'Latar Belakang', pilih jenis latar belakang Klasik (ditunjukkan dengan kuas).

4. Klik tombol Pemilih Warna . Kemudian, pilih warna dan nilai transparan yang Anda inginkan.
5. Anda selanjutnya dapat mengubah keseluruhan tampilan header, termasuk tipografi, overlay latar belakang, batas, dan pembagi. Jangan ragu untuk bereksperimen.
6. Selanjutnya, buka tab Lanjutan . Kemudian, gulir ke bagian Efek Gerakan . Aktifkan opsi Efek Bergulir .

7. Pilih opsi Seluruh Halaman dari menu drop-down Effects Relative To .
8. Terakhir, pilih opsi Top dari menu drop-down Sticky .
9. Saat Anda senang, klik tombol Publikasikan untuk menerapkan perubahan.

Hasilnya akan mirip seperti di bawah ini:

Bagaimana Cara Menggunakan Elementor untuk Membuat Header Transparan Gratis ?

Jika anggaran Anda rendah dan tidak ingin menghabiskan uang untuk Elementor Pro, Anda memerlukan plugin lain untuk membuat header transparan.

Pada artikel ini, kita akan menggunakan plugin Essential Addons for Elementor. Ini adalah perpustakaan widget paling populer dengan lebih dari satu juta pengguna aktif.

Anda akan mendapatkan banyak widget gratis untuk membuat situs web menonjol dan semenarik mungkin. Perhatikan bahwa Anda tidak memerlukan versi premium untuk membuat header transparan.

Instal dan Aktifkan Elementor dan Addons Esensial untuk Plugin Elementor

1. Dari dasbor WordPress, buka Plugin > Add New .

2. Temukan plugin dengan memasukkan ' Elementor '. Anda kemudian akan melihat plugin Elementor terdaftar sebagai opsi.
3. Klik tombol 'Instal Sekarang' dan tombol 'Aktifkan'.
4. Ulangi proses di atas dengan plugin Essential Addons for Elementor.

Buat Menu untuk Situs Anda

Kami sudah membahas ini di atas. Silakan gulir ke atas untuk mengetahui caranya.

Gunakan Addons Penting untuk Elementor untuk Membuat Header Lengket Transparan

1. Arahkan ke Addons Esensial > Elemen . Di sini, aktifkan widget Menu Sederhana . Ingatlah untuk mengklik tombol SIMPAN PENGATURAN .

2. Buat halaman/postingan baru atau buka yang sudah ada dengan Elementor.
3. Klik tombol Pengaturan (ditunjukkan dengan roda gigi) di sudut kiri bawah. Pilih 'Elementor Canvas' di menu tarik-turun Tata Letak Halaman . Dengan cara ini, Anda dapat menyingkirkan header yang disertakan dengan tema.

4. Kembali ke menu widget dengan mengklik ikon sembilan persegi. Cari widget Menu Sederhana . Drag dan drop ke lokasi yang diinginkan.

5. Di bagian Umum , pilih menu yang Anda inginkan di menu tarik-turun Pilih Menu .

6. Buka tab Style untuk mengubah warna latar belakang header dan nilai transparan.

7. Di bagian Latar Belakang , pilih jenis latar belakang Klasik (ditunjukkan dengan kuas).
8. Klik tombol Pemilih Warna . Kemudian, pilih warna dan nilai transparan yang Anda inginkan.
9. Anda selanjutnya dapat mengubah keseluruhan tampilan header, termasuk tipografi, overlay latar belakang, batas, dan pembagi. Jangan ragu untuk bereksperimen.
10. Selanjutnya, buka tab Lanjutan . Kemudian, gulir ke bagian Positioning . Pilih opsi Tetap di menu tarik-turun Posisi .

11. Kembali ke menu widget dengan mengklik ikon sembilan persegi. Cari widget Spacer . Seret dan lepas tepat di bawah widget Menu Sederhana .

12. Di bagian Spacer , sesuaikan nilai Space agar sesuai dengan tinggi header.

13. Saat Anda senang, klik tombol Publikasikan untuk menerapkan perubahan.

Bagaimana Cara Membuat Header Transparan untuk Pengguna Woostify?

Jika Anda menggunakan tema Woositfy, bahkan versi gratisnya, Anda dapat dengan cepat menerapkan header transparan yang indah untuk seluruh situs Anda dalam hitungan menit. Ikuti petunjuk di bawah ini untuk mengetahui caranya:

1. Arahkan ke Appearance > Customize dari dashboard WordPress.

2. Lalu, pergi ke Tata Letak > Header Transparan .

3. Aktifkan sakelar Aktifkan Header Transparan .

4. Di tab Umum dan Desain baru, Anda dapat menyesuaikan header transparan baru sesuai dengan kebutuhan Anda. Misalnya, Anda dapat mengaktifkan/menonaktifkannya di halaman tertentu, seperti 404, posting, dll.,

5. Jangan lupa untuk mengklik tombol Terbitkan saat Anda puas dengan hasilnya.

Kata-kata Terakhir

Membuat header transparan Elementor adalah pendekatan penuh gaya untuk membantu pengguna menavigasi situs Anda.

Header yang kami buat sepenuhnya responsif. Oleh karena itu, Anda tidak perlu terlalu khawatir dengan masalah ini. Bagi yang menggunakan Woostify, Anda harus menggunakan cara ketiga. Ini juga merupakan cara paling sederhana dan tercepat ketika Anda ingin membuat header transparan yang indah.