Cara menggunakan modul Navigasi lebar penuh pada Divi Builder

Modul Menu Lebar Penuh Divi memungkinkan Anda menempatkan menu navigasi di mana saja pada halaman. Ini dapat digunakan untuk menambahkan menu halaman kedua ke halaman, atau dapat digunakan bersama dengan fitur Halaman Kosong untuk memindahkan navigasi utama Anda ke bagian bawah halaman. Misalnya, Anda dapat memindahkan menu Anda di bawah bagian pertama Anda untuk mengakomodasi orang-orang dengan gambar awal yang besar. Ini pada dasarnya memungkinkan navigasi tajuk Anda untuk bergerak di sekitar halaman menggunakan pembuat!

Bagaimana cara menambahkan modul menu layar penuh ke halaman Anda

Sebelum Anda dapat menambahkan modul menu lebar penuh ke halaman Anda, Anda harus terlebih dahulu masuk ke Divi Builder. sekali Tema Divi diinstal pada Anda situs jaringan, Anda akan melihat tombol Gunakan Divi Builder di atas editor posting setiap kali Anda membuat halaman baru. Klik tombol ini untuk mengaktifkan Divi Builder dan mengakses semua modul Divi Builder. Kemudian klik tombolnya Gunakan Visual Builder untuk memulai generator dalam mode visual. Anda juga dapat mengklik tombol tersebut Aktifkan Visual Builder saat Anda menelusuri situs jaringan di latar depan jika Anda masuk ke dasbor WordPress Anda.

Setelah Anda memasuki Visual Builder, Anda dapat mengklik tombol plus abu-abu untuk menambahkan modul baru ke halaman Anda. Modul lebar penuh baru hanya dapat ditambahkan di dalam bagian lebar penuh. Jika Anda memulai halaman baru, jangan lupa untuk menambahkan bagian lebar-penuh ke halaman Anda terlebih dahulu. Kami memiliki beberapa tutorial bagus tentang cara menggunakan elemen bagian Divi.

Temukan modul menu lebar-penuh dalam daftar modul dan klik di atasnya untuk menambahkannya ke halaman Anda. Daftar modul dapat dicari, yang berarti Anda juga dapat mengetik kata "Menu lebar penuh" atau "menu lebar penuh" (tergantung versi Anda), lalu klik enter untuk mencari secara otomatis dan menambahkan modul menu lebar penuh ! Setelah modul ditambahkan, Anda akan disambut oleh daftar opsi modul. Opsi-opsi ini dipisahkan menjadi tiga kelompok utama: Isi , Pembuahan et maju .

Contoh kasus penggunaan: Menambahkan menu Lebar Penuh di bawah tajuk halaman

Untuk contoh ini, saya akan menunjukkan kepada Anda cara menambahkan menu lebar-penuh di bawah bagian tajuk halaman.

Berikut adalah contohnya:

Karena menu halaman penuh baru ini akan menggantikan menu navigasi utama default, maka perlu dilakukan pemilihan template halaman kosong agar menu navigasi default tidak muncul di bagian atas halaman selain menu lebar penuh. yang akan saya tambahkan.

Untuk mengedit template halaman Anda, buka editor halaman Anda dan pilih template "halaman kosong" di area Atribut Halaman di sidebar kanan.

Karena modul ini akan menampilkan menu yang sudah ada, Anda harus sudah membuat menu sebelum menambahkannya ke modul menu lebar penuh.

Setelah Anda membuat menu, gunakan pembuat visual untuk menambahkan bagian Lebar Penuh tepat di bawah bagian tajuk halaman. Kemudian tambahkan modul menu lebar penuh ke bagian tersebut.

Perbarui pengaturan menu Fullwidth sebagai berikut:

Opsi konten

Menu: [pilih menu yang akan digunakan dalam modul] Konteks: # 333333

Opsi desain

Warna teks: Cahaya Orientasi teks: Font Menu Tengah: Menu Roboto Ukuran font: 20px

Itu saja!

cara : Anda dapat menggunakan opsi tampilan di bawah tab Lanjutan untuk menyembunyikan menu ini di seluler dan menampilkan menu berbeda di atas tajuk sehingga pengguna ponsel dapat melihat menu tanpa harus menggulir ke bawah halaman .

Opsi Konten Menu Lebar

Di tab Content, Anda akan menemukan semua elemen konten dari modul, seperti teks, gambar, dan ikon. Semua itu mengontrol apa? muncul di modul Anda akan selalu ditemukan di tab ini.

Warna latar belakang

Secara default, modul menu memiliki warna latar belakang putih. Jika Anda ingin menggunakan warna yang berbeda untuk background menu Anda, Anda dapat memilihnya di sini menggunakan color picker.

Warna latar menu tarik-turun

Secara default, menu drop-down di modul menu Anda mewarisi warna latar belakang yang ditentukan di setelan sebelumnya. Jika Anda ingin menu drop-down memiliki warna sendiri, Anda dapat memilih warna kustom menggunakan pengaturan ini.

Warna latar belakang menu seluler

Di perangkat seluler, modul menu diubah menjadi desain yang berbeda dan lebih disesuaikan dengan perangkat seluler. Anda dapat mengontrol warna latar belakang menu tarik-turun seluler terlepas dari versi desktopnya.

Label administrasi

Ini akan mengubah label modul di konstruktor untuk memudahkan identifikasi. Saat Anda menggunakan tampilan WireFrame di Visual Builder, label ini muncul di blok modul antarmuka Divi Builder.

Pilihan desain menu lebar-penuh

Di tab Desain, Anda akan menemukan semua opsi gaya modul, seperti font, warna, ukuran, dan spasi. Ini adalah tab yang akan Anda gunakan untuk mengubah tampilan modul Anda. Setiap modul Divi memiliki daftar panjang pengaturan desain yang dapat Anda gunakan untuk mengubah apa pun.

Buka submenu

Secara default, semua submenu terbuka sebagai menu drop-down di bawah bilah menu utama. Jika Anda meletakkan menu di dekat bagian bawah halaman dan menu Anda memiliki menu drop-down yang panjang, Anda mungkin ingin membuka menu tersebut di atas modul menu sehingga menu tersebut tidak melampaui jendela browser.

Buat tautan menu lebar-lebar

Secara default, tautan tingkat atas dengan modul menu ditempatkan dalam lebar konten default Anda. Jika Anda ingin menghapus batasan ini dan membuat link Anda berjalan selebar halaman, mulai dari ujung kiri layar, Anda dapat mengaktifkan opsi ini.

Warna garis menu drop-down

Di menu drop-down, link dipisahkan oleh garis 1 piksel. Jika Anda ingin menyesuaikan warna baris ini, Anda dapat memilih warna kustom menggunakan pemilih warna dalam pengaturan ini.

Warna teks

Di sini Anda dapat memilih nilai teks Anda. Jika Anda mengerjakan latar belakang gelap, teks Anda harus aktif. Jika Anda bekerja dengan latar belakang terang, teks Anda harus gelap.

Orientasi teks

Ini mengontrol bagaimana teks Anda diratakan dalam modul. Anda dapat memilih antara Kiri, Kanan dan Tengah.

Warna tautan aktif

Warna tautan aktif disorot dalam modul menu untuk menunjukkan kepada pengguna lokasi mereka saat ini. Anda dapat mengubah warna sorotan yang digunakan untuk tautan aktif ini menggunakan pengaturan ini.

Warna teks dari menu drop-down

Secara default, teks di menu tarik-turun modul mewarisi warna teks menu utama. Namun, Anda mungkin ingin mengubah warna ini jika Anda telah menentukan warna latar belakang menu drop-down kustom.

Warna teks menu seluler

Secara default, teks di menu tarik-turun modul mewarisi warna teks menu utama. Namun, Anda mungkin ingin mengubah warna ini jika Anda telah menyetel warna latar belakang menu seluler kustom.

Font menu

Anda dapat mengubah fonta font menu Anda dengan memilih font yang diinginkan dari menu drop-down. Divi hadir dengan lusinan font hebat yang diberdayakan oleh Google Fonts. Secara default, Divi menggunakan font Open Sans untuk semua teks di halaman Anda. Anda juga dapat menyesuaikan gaya teks Anda menggunakan opsi tebal, miring, huruf besar, dan garis bawah.

Menu Ukuran Font

Di sini Anda dapat menyesuaikan ukuran font menu Anda. Anda dapat menyeret penggeser rentang untuk menambah atau mengurangi ukuran teks Anda atau langsung memasukkan nilai ukuran teks yang diinginkan ke dalam bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.

Warna teks menu

Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu tua. Jika Anda ingin mengubah warna teks digital Anda, pilih warna yang diinginkan dari color picker menggunakan opsi ini.

Spasi huruf menu

Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks numerik, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.

Ketinggian baris menu

Ketinggian garis memengaruhi ruang antara setiap baris teks numerik Anda Jika Anda ingin menambah ruang di antara setiap baris, gunakan bilah geser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan terletak di sebelah kanan kursor. Kolom masukan mendukung berbagai satuan ukuran, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.

Opsi Menu Fullwidth Lanjutan

Pada tab lanjutan, Anda akan menemukan opsi yang mungkin berguna bagi desainer web yang lebih berpengalaman, seperti atribut CSS dan HTML khusus. Di sini Anda dapat menerapkan CSS khusus ke salah satu dari banyak elemen modul. Anda juga dapat menerapkan kelas dan ID CSS khusus ke modul, yang dapat digunakan untuk menyesuaikan modul dalam file style.css tema anak Anda.

ID CSS

Masukkan ID CSS opsional untuk digunakan untuk modul ini. ID dapat digunakan untuk membuat gaya CSS kustom atau untuk menautkan ke bagian tertentu halaman Anda.

Kelas CSS

Masukkan kelas CSS opsional yang akan digunakan untuk modul ini. Kelas CSS dapat digunakan untuk membuat gaya CSS khusus. Anda dapat menambahkan beberapa kelas, dipisahkan dengan spasi. Kelas-kelas ini dapat digunakan di tema anak Divi Anda atau di lembar gaya CSS khusus yang Anda tambahkan ke halaman atau situs web Anda. situs jaringan menggunakan opsi tema Divi atau pengaturan halaman Divi Builder.

CSS khusus

CSS khusus juga dapat diterapkan ke modul dan bagian internal modul mana pun. Di bagian CSS Khusus, Anda akan menemukan bidang teks tempat Anda dapat menambahkan lembar gaya CSS khusus langsung ke setiap elemen. Entri CSS dalam pengaturan ini sudah dibungkus dalam tag gaya. Jadi masukkan saja aturan CSS yang dipisahkan oleh titik koma.

Animasi menu drop-down

Anda dapat memilih di antara animasi yang berbeda untuk digunakan saat menu drop-down diaktifkan. Secara default, animasi disetel ke pudar, tetapi Anda mengubahnya menjadi: luaskan, seret, atau balik.

jarak penglihatan

Opsi ini memungkinkan Anda untuk mengontrol perangkat tempat modul Anda muncul. Anda dapat memilih untuk menonaktifkan modul Anda pada tablet, smartphone atau desktop satu per satu. Ini berguna jika Anda ingin menggunakan mod berbeda pada perangkat berbeda, atau jika Anda ingin menyederhanakan desain seluler dengan menghilangkan elemen tertentu dari laman.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorial” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]UNDUH TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Cara menggunakan Modul Navigasi Divi Builder Full-Width