Perlu untuk membuat menu mengambang transparan di Divi ?
Apakah Anda mencari cara untuk menempatkan tajuk keseluruhan di atas bagian utama halaman Anda? Dalam tutorialnya Divi Hari ini kami akan menunjukkan kepada Anda bagaimana melakukannya.
Kami akan membuat header global yang menakjubkan dari awal (menggunakan konstruktor dari tema de Divi) dan kami akan menerapkan efek mengambang ke bilah menu.
Mari kita pergi.
penelitian
Sebelum masuk ke tutorial ini, mari kita lihat sekilas hasil yang ingin kita capai.
Buka Pembuat Tema Divi dan tambahkan templat baru
allez di Divi > Pembuat Tema.
Buat tajuk global dengan Pembuat Tema Divi
Klik 'Add Global Header' dan lanjutkan dengan memilih 'Build Global Header'.
Pengaturan bagian
Warna latar belakang
Setelah berada di editor template, Anda akan melihat bagian pada halaman. Buka bagian ini dan ubah warna latar belakang menjadi warna yang benar-benar transparan. Ini akan memungkinkan semua yang ada di bawah bagian untuk ditampilkan.
- Latar belakang: rgba(0,0,0,0)
perekat
Lalu pergi ke tab Section Style dan ubah lebar maksimum.
- Lebar maksimum (Lihat tangkapan layar): 100%
jarak
Hapus juga semua margin internal Atas dan Bawah default.
- Inner Margin Vertex: 0px
- Margin Internal Bawah: 0px
Z-indeks
Dan untuk memastikan bagian tersebut tetap berada di atas segalanya isi Dari bagian hero, kita perlu meningkatkan indeks-z di pengaturan visibilitas.
- Z-indeks: 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:
- Menyelaraskan ketinggian kolom: Ya
- Lebar maksimum: 100%
- Lebar maksimum: 100%
jarak
Kemudian tambahkan margin internal khusus (Atas dan Bawah).
- Margin internal puncak: 2vw
- Margin Dalam Bawah: 0vw
Elemen utama
Selanjutnya, buka tab Advanced dan pastikan kolom tetap bersebelahan pada ukuran layar yang lebih kecil dengan menambahkan satu baris kode CSS ke elemen baris utama.
display: flex;
Kolom 2
Warna latar belakang
Lanjutkan dengan membuka pengaturan kolom 2 dan ubah warna latar belakang menjadi warna semi-transparan.
- Warna latar belakang: rgba (255,255,255,0.71)
Perbatasan
Juga tambahkan batas bawah ke kolom.
- Lebar batas bawah: 2px
- Warna tepi tombol dan bawah: #f4583f
Kotak bayangan
Dan buat efek mengambang dengan menambahkan bayangan kotak yang halus.
- Kotak Bayangan: [Lihat Tangkapan]
- Posisi Awal: 20px
- Kekuatan Buram Bayangan Busur: 50px
- Kekuatan Penyebaran Bayangan Kotak: -20px
- Warna font subtitle: rgba (0,0,0,0.23)
Tambahkan modul Gambar ke kolom 1
Unduh 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.
penjajaran
Beralih ke tab Module Style dan ubah perataan.
- Perataan Gambar: Terpusat
perekat
Ubah juga lebar modul di pengaturan ukuran.
- Lebar maksimum: 8 vw (desktop), 14 vw (tablet), 21 vw (ponsel)
Tambahkan modul Menu ke kolom 2
Pilih Menu
Mari kita pergi ke kolom berikutnya. Di sana, satu-satunya modul yang kita butuhkan adalah modul Menu. Pilih menu pilihan Anda.
Hapus warna latar belakang
Lalu pergi ke pengaturan latar belakang dan hapus warna latar belakang.
ketentuan
Beralih ke tab Module Style dan ubah tata letaknya.
- Gaya: Terpusat
- Menu tarik-turun: turun
teks menu
Juga gaya pengaturan teks menu.
- Font Menu: Mulish
- Warna teks menu: #6f6666
- Menu Ukuran Teks: 1vw (desktop), 2vw (tablet), 3vw (ponsel)
Menu tarik-turun
Kemudian ubah pengaturan dari menu tarik-turun.
- Warna baris tarik-turun: #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 padding Atas dan Bawah di pengaturan Spasi.
- Margin internal puncak: 1,5 vw
- Margin internal bawah: 1,5 vw
Tambahkan modul Tombol ke kolom 3
Tambahkan teks ke tombol
Mari kita beralih ke kolom berikutnya dan terakhir. Tambahkan modul Button dengan teks pilihan Anda.
penjajaran
Kemudian ubah perataan modul.
- Penjajaran tombol: terpusat
Pengaturan tombol
Lanjutkan dengan menyesuaikan tombol yang sesuai:
- Gunakan gaya khusus untuk Tombol: Ya
- Ukuran Teks Tombol: 0,9 vw (desktop), 1,5 vw (tablet), 2,5 vw (ponsel)
- Warna teks tombol: #ffffff
- Tombol latar belakang: #f4583f
- Lebar Batas Tombol: 0 piksel
- Warna Batas Tombol: #f4583f
- Tombol Radius Perbatasan: 0 piksel
- Font Tombol: Mulish
- Tombol Cahaya Redup: Teks Tebal
jarak
Selesaikan pengaturan modul dengan menambahkan bantalan khusus pada ukuran layar yang berbeda.
- Margin Internal Atas dan Bawah: 1vw (desktop), 2vw (tablet), 3vw (ponsel)
- Margin internal kiri dan kanan: 2vw (desktop), 3vw (tablet), 4vw (ponsel)
Parameter Bagian Tambahan
Item utama default
Setelah Anda menyelesaikan penyesuaian umum, ada satu hal lagi yang harus dilakukan; tempatkan bagian di atas isi dari halaman Anda. Untuk melakukan ini, kita perlu menambahkan dua baris kode CSS ke elemen utama bagian tersebut.
position: absolute;
top: 0;
Elemen utama pada hover
Pastikan untuk menambahkan baris CSS yang sama ke opsi hover elemen utama. Ini akan mencegah bagian dari berkedip setelah Anda mengarahkan kursor ke atasnya.
position: absolute;
top: 0;
Simpan perubahan konstruktor dan lihat hasilnya
Setelah Anda menyelesaikan bagian ini, Anda dapat menyimpan tajuk global dan menampilkan hasilnya di situs Anda!
penelitian
Sekarang kita telah melalui semua langkah, mari kita lihat hasilnya.
Unduh DIVI Sekarang!!!
Kesimpulan
Jadi ! Itu saja untuk artikel ini. Kami menunjukkan kepada Anda cara membuat bilah menu mengambang dan transparan dengan Pembuat Tema Divi. Header ditempatkan di atas bagian pertama halaman atau posting Anda.
Untuk membiasakan diri dengan Pembuat Tema Divi, Anda juga dapat membaca artikel kami di Cara Membuat Header Global dengan Pembuat Tema Divi
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
