Cara Membuat Bilah Menu Mengambang Transparan Global dengan Pembuat Tema Divi

Mencari cara untuk menempatkan tajuk global Anda di atas bagian pahlawan halaman Anda? Dalam tutorial Divi hari ini, kami akan menunjukkan cara melakukannya dengan tepat. Kami akan membuat ulang header global yang menakjubkan dari awal (menggunakan Divi's Theme Builder) dan kami akan menerapkan efek mengambang ke bilah menu. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Header Global Floating Menu Bar GRATIS

Untuk meletakkan tangan Anda di templat tajuk global bilah menu mengambang, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Berlangganan Saluran Youtube Kami

1. Buka Divi Theme Builder & Tambahkan Template Baru

Pergi ke Divi Theme Builder

Mulailah dengan membuka Divi Theme Builder.

Mulai Membangun Header Global

Kemudian, klik 'Add Global Header' dan lanjutkan dengan memilih 'Build Global Header'.

2. Mulai Membangun Header Global

Pengaturan Bagian

Warna latar belakang

Setelah Anda berada di dalam editor template, Anda akan melihat bagian pada halaman. Buka bagian itu dan ubah warna latar belakang menjadi yang benar-benar transparan. Ini akan memungkinkan segala sesuatu di bawah bagian untuk ditampilkan.

• Warna Latar Belakang: rgba(0,0,0,0)

Perekat

Buka tab desain bagian berikutnya dan ubah lebarnya.

• Lebar: 100%

Jarak

Hapus semua padding atas dan bawah default juga.

• Padding Atas: 0px
• Padding Bawah: 0px

Indeks Z

Dan untuk memastikan bagian tersebut tetap berada di atas semua konten bagian pahlawan, kita perlu meningkatkan indeks z bagian dalam pengaturan visibilitas.

• Indeks Z: 99999

Tambahkan Baris Baru

Struktur Kolom

Setelah Anda menyelesaikan pengaturan bagian, Anda dapat menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus berikutnya.

• Padding Atas: 2vw
• Padding Bawah: 0vw

Elemen Utama

Kemudian, buka tab lanjutan dan pastikan kolom tetap bersebelahan pada ukuran layar yang lebih kecil dengan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Kolom 2

Warna latar belakang

Lanjutkan dengan membuka pengaturan kolom 2 dan mengubah warna latar belakang menjadi semi transparan.

• Warna Latar Belakang: rgba(255,255,255,0.71)

Berbatasan

Tambahkan batas bawah ke kolom juga.

• Lebar Batas Bawah: 2px
• Warna Batas Bawah: #f4583f

Bayangan Kotak

Dan buat efek mengambang dengan menambahkan bayangan kotak yang halus.

• Posisi Vertikal Bayangan Kotak: 20px
• Kekuatan Buram Bayangan Kotak: 50px
• Kekuatan Penyebaran Bayangan Kotak: -20px
• Warna Bayangan: rgba (0,0,0,0.23)

Tambahkan Modul Gambar ke Kolom 1

Unggah Logo

Setelah Anda menyelesaikan pengaturan baris dan kolom, saatnya untuk menambahkan modul, dimulai dengan Modul Gambar di kolom 1. Unggah logo dengan latar belakang transparan.

Penyelarasan

Pindah ke tab desain modul dan ubah perataan.

• Perataan Gambar : Tengah

Perekat

Ubah juga lebar modul dalam pengaturan ukuran.

• Lebar: 8vw (Desktop), 14vw (Tablet), 21vw (Telepon)

Tambahkan Modul Menu ke Kolom 2

Pilih Menu

Ke kolom berikutnya. Di sana, satu-satunya modul yang kita butuhkan adalah Modul Menu. Pilih menu pilihan Anda.

Hapus Warna Latar Belakang

Kemudian, buka pengaturan latar belakang dan hapus warna latar belakang.

Tata Letak

Pindah ke tab desain modul dan ubah tata letaknya.

• Gaya: Terpusat
• Arah Menu Dropdown: Ke Bawah

Teks Menu

Gaya pengaturan teks menu juga.

• Font Menu: Muli
• Warna Teks Menu: #6f6666
• Ukuran Teks Menu: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)

Menu drop down

Ubah pengaturan menu dropdown berikutnya.

• Warna Garis Menu Dropdown: #f4583f

Ikon

Gunakan warna yang sama untuk warna ikon menu hamburger di pengaturan ikon.

• Warna Ikon Menu Hamburger: #f4583f

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa padding atas dan bawah dalam pengaturan spasi.

• Padding Atas: 1.5vw
• Padding Bawah: 1.5vw

Tambahkan Modul Tombol ke Kolom 3

Tambahkan Salinan

Ke kolom berikutnya dan terakhir. Tambahkan Modul Tombol dengan beberapa salinan pilihan Anda.

Penyelarasan

Ubah perataan modul berikutnya.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Lanjutkan dengan menata tombol yang sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.9vw (Desktop), 1.5vw (Tablet), 2.5vw (Ponsel)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #f4583f
• Lebar Batas Tombol: 0px
• Warna Batas Tombol: #f4583f
• Radius Perbatasan Tombol: 0px

• Font Tombol: Muli
• Berat Huruf Tombol: Tebal

Jarak

Dan selesaikan pengaturan modul dengan menambahkan beberapa bantalan khusus di berbagai ukuran layar.

• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Kiri: 2vw (Desktop), 3vw (Tablet), 4vw (Telepon)
• Padding Kanan: 2vw (Desktop), 3vw (Tablet), 4vw (Telepon)

Pengaturan Bagian Tambahan

Elemen Utama Default

Setelah Anda menyelesaikan keseluruhan desain, ada satu hal yang harus dilakukan; menempatkan bagian di atas konten halaman Anda. Untuk melakukannya, kita perlu menambahkan dua baris kode CSS ke elemen utama bagian.

position: absolute;
top: 0;

Arahkan Elemen Utama

Pastikan Anda menambahkan baris kode CSS yang sama ke opsi hover dari elemen utama. Ini akan mencegah bagian dari berkedip setelah Anda mengarahkannya.

position: absolute;
top: 0;

3. Simpan Perubahan Builder & Lihat Hasil

Setelah Anda menyelesaikan bagian ini, Anda dapat menyimpan tajuk global dan melihat hasilnya di situs web Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat bilah menu mengambang dengan Divi's Theme Builder. Ini adalah cara yang bagus untuk memadukan bagian header dan hero Anda. Header ditempatkan di atas bagian pertama pada halaman atau posting Anda. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.