Apakah Anda ingin membuat tajuk global dengan modul Menu Layar Penuh di Divi?
Header adalah salah satu elemen terpenting dari semua situs jaringan dan berada di jantung pengalaman pengguna. Menu navigasi memberikan gambaran kepada pengguna tentang apa yang dapat mereka temukan di situs jaringan dan membantu mereka menemukan informasi yang mereka butuhkan.
Selain itu, bilah menu sekunder dapat menjadi ruang ideal untuk menyorot ajakan bertindak atau ajakan bertindak memajukan sebuah penawaran. Belum lagi header adalah salah satu bagian terpenting dari Anda situs jaringan, karena biasanya muncul di setiap halaman. Ini adalah peluang bagus untuk menampilkan merek Anda dan membuat tajuk yang konsisten dengan desain situs web Anda lainnya.
Opsi Pembuat Tema Divi memungkinkan Anda membuat tajuk global khusus dan menyesuaikan tampilan modul tajuk dan menu di seluruh situs web Anda.
Dalam tutorial ini, kami akan menunjukkan cara membuat header global menggunakan modul menu layar penuh Divi.
Mari kita mulai!
penelitian
Berikut adalah preview dari header global yang akan kita desain.
Buka pembuat tema
Karena kita sedang membuat tajuk global dalam contoh ini, mari navigasikan ke "Pembuat Tema", yang dapat Anda temukan di menu Divi WordPress. Pilih Tambahkan Header Global, lalu pilih Buat Header Global.
Buat bilah menu sekunder
Saat Anda pertama kali membuka tata letak tajuk global, itu sudah dimuat sebelumnya dengan bagian biasa. Kami akan memodifikasi ini menjadi bilah menu sekunder kami, yang akan berada di atas menu lebar penuh kami dan menyertakan teks ajakan bertindak dan sebuah tombol.
Pertama, buka pengaturan bagian dan tambahkan warna latar belakang.
- Latar belakang: #92A8A1
Selanjutnya, margin bagian.
- Verteks Margin Dalam: 0px
- Margin Internal Bawah: 0px
Sekarang masukkan satu baris. Untuk contoh ini, kami akan menggunakan tata letak yang ditunjukkan di bawah ini.
Dalam pengaturan baris, di bawah Ukuran tab Gaya, selaraskan tinggi kolom.
- Menyelaraskan ketinggian kolom: YA
Selanjutnya, atur margin Atas dan Bawah sebagai berikut:
- Margin Dalam Atas: 5px
- Margin Dalam Bawah: 5px
Karena kita ingin elemen header sekunder kita disejajarkan secara vertikal, kita akan menambahkan beberapa CSS khusus ke elemen baris utama.
1.
align-items:center;
Sekarang saluran kita sudah dikonfigurasi, kita dapat memasukkan modul untuk kita isi. Pertama masukkan modul teks di sisi kiri.
Ubah isi teks. Ini adalah tempat yang tepat untuk menyertakan Ajakan Bertindak atau untuk memajukan sebuah penawaran.
- Teks: "Bergabunglah dengan milis kami untuk menerima diskon 10% dari pesanan Anda!" »
Akses tab Style dari modul Text dan ubah parameternya sebagai berikut:
- Font "Teks": Poppins
- Cahaya Redup "Teks": Sedang
- Warna teks "Teks": #FFFFFF
Selanjutnya, tambahkan modul Button di sebelah kanan.
Tambahkan teks tombol.
- Teks: "Dapatkan penawaran gratis"
Di tab Gaya, sejajarkan tombol di tengah.
- Penjajaran Tombol: Tengah
Sekarang mari kita sesuaikan tampilan tombol.
- Gunakan gaya khusus untuk "Tombol": Ya
- Ukuran Teks Tombol: 14px
- Warna teks tombol: #FFFFFF
- Tombol latar belakang: #2F5349
- Lebar Perbatasan Tombol: 0px
- Tombol Radius Batas: 50px
- Jarak Huruf Tombol: 1px
- Font Tombol: Poppins
Tambahkan modul Menu Layar Penuh
Sekarang menu sekunder dirancang, kita dapat beralih ke menu utama. Kami akan membangun menu menggunakan modul Menu Layar Penuh. Tambahkan bagian Layar Penuh baru ke header global.
Pilih dan masukkan modul Menu Layar Penuh
Selanjutnya, kami akan menyesuaikan pengaturan Menu Layar Penuh.
- Warna Tautan Aktif: #2F5349
- Menu Font: Poppins
- Menu Cahaya Redup: Semi Tebal
- Salin Menu Gaya: TT
- Warna teks menu: #000000
- Arahkan warna teks Menu: #2F5349
- Ukuran Teks Menu: 15px
- Spasi huruf menu: 2px
Ubah warna ikon menu hamburger menjadi hitam.
- Warna Ikon Menu Hamburger: #000000
Sebelum kita menambahkan logo ke menu kita, mari kita ubah opsi ukuran. Kami akan menggunakan opsi responsif bawaan Divi untuk mengatur ketinggian maksimum yang berbeda untuk PC dan seluler.
- Tinggi logo maksimum pada PC: 3vw
- Tinggi logo maksimum di ponsel: 6vw
Sekarang tambahkan logo Anda ke Menu Layar Penuh.
Terakhir, kami ingin menu utama tetap berada di bagian atas layar saat pengguna menggulir situs web, jadi kami akan menggunakan pengaturan sticky sticky bawaan Divi untuk ini.
- Posisi Lengket: Tempel di atas
Dengan itu, desain tajuk global kami selesai.
Buat halaman baru dengan tata letak yang telah ditentukan
Untuk melihat header dan menu full-width beraksi, mari buat halaman baru dengan tata letak yang telah ditentukan dari perpustakaan Divi. Untuk contoh ini kita akan menggunakan Flooring Home Page dari paket tata letak lantai.
Tambahkan halaman baru ke situs web Anda dan beri judul, lalu pilih opsi Gunakan Divi Builder.
Kami menggunakan tata letak pra-dibuat dari Perpustakaan Divi untuk contoh ini, jadi pilih Pilih Tata Letak.
Temukan dan pilih tata letak "Lantai Beranda".
Pilih "Pilih tata letak" untuk menambahkan tata letak ke halaman Anda.
Sekarang desainnya sudah selesai!
Hasil akhir
Kesimpulan
Seperti yang kami katakan di atas, tajuk dan menu navigasi adalah inti dari pengalaman pengguna situs web Anda. Anda sekarang telah melihat betapa mudahnya merancang keseluruhan header yang menakjubkan dengan modul "Menu Layar Penuh" Divi.
Untungnya, pembuat tema Divi memberi Anda kendali atas setiap aspek menu dan tajuk situs web Anda, dan Anda dapat membuat desain yang benar-benar khusus dan unik hanya dengan beberapa klik.
Sudahkah Anda menggunakan opsi tajuk global Divi untuk menyesuaikan tajuk dan menu navigasi Anda? Beri tahu kami pendapat Anda di komentar!
