Loncat ke Konten Utama

Cara menggunakan Modul Navigasi Divi Builder Full-Width

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 701.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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!

Menu lebar penuh diviBagaimana 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. Setelah tema Divi dipasang di situs web Anda, Anda akan melihat sebuah 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 ketika Anda menelusuri situs web Anda di latar depan jika Anda terhubung ke dashboard WordPress Anda.

Menggunakan divi builder

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.

modul menu lebar penuh.png

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:

contoh menu fullwidth divi.jpg

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.

atribut dari page.png

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

contoh menu wordpress.jpg

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.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

tambahkan menu lebar-penuh di bawah title.jpg

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 .

menu hasil divi.jpg

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.

konten-sisi-lebar bagian.png

menu

Pilih menu untuk digunakan di modul. Anda dapat membuat menu baru menggunakan halaman Penampilan> Menu dari dasbor WordPress Anda. Setiap kali Anda membuat menu baru, menu tersebut dapat dipilih dari menu drop-down 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.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

bagian menu modul desain fullwidth.png

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.

modul menu fullwidth bagian lanjutan divi.png

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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 oleh spasi. Kelas-kelas ini dapat digunakan dalam tema anak Divi Anda atau di lembar gaya CSS khusus yang Anda tambahkan ke halaman Anda atau ke situs web Anda 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.

Tutorial Divi lainnya

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
17 saham
saham10
menciak3
Register4