Modul Menu layar penuh di Divi memudahkan untuk menambahkan tajuk berwarna indah di bagian atas halaman Anda (atau di mana saja di situs web Anda, jika Anda mau). Modul ini hanya dapat ditempatkan di bagian lebar penuh.
Bagaimana cara menambahkan modul Menu Layar Penuh Divi
Sebelum Anda dapat menambahkan modul Menu Layar 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 Menu Layar 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.
Temukan modul header layar penuh dalam daftar modul dan klik di atasnya untuk menambahkannya ke halaman Anda. Daftar modul dapat dicari, yang berarti Anda juga dapat mengetik kata "header layar penuh" dan kemudian mengklik "Enter" untuk mencari dan menambahkan modul header layar penuh secara otomatis! 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 header layar penuh ke halaman Tentang
Untuk contoh ini, saya akan menunjukkan cara menggunakan modul header lebar-penuh untuk menambahkan header dengan teks kustom dan gambar latar belakang.
Semua modul layar penuh hanya tersedia saat menggunakan bagian layar penuh. Menggunakan Visual Builder, masukkan bagian layar penuh baru. Kemudian tambahkan modul Person ke bagian tersebut.
Perbarui pengaturan header layar penuh sebagai berikut:
Opsi konten
Judul: Tentang Kami Teks Subtitle: Kami Melakukan Hal Berbeda ... URL Gambar Latar Belakang: [masukkan gambar 1920 x 800] Warna latar hamparan: rgba (0,0,0,0.2 , XNUMX)
Opsi desain
Orientasi teks dan logo: Tombol tengah Gulir ke bawah Tombol: YES Ikon: [ikon pilih] Ikon Gulir ke bawah Warna: # fcbf00 Ikon Gulir: 50px Warna teks: Cahaya Warna teks: # fcbf00 Font Judul: Buka Tanpa, tebal, huruf besar Judul Ukuran font: 60px (desktop), 40px (tablet), 30px (ponsel) Ukuran Font Subtitle: 25px
Opsi lanjutan (CSS khusus)
Elemen utama:
upholstery: 100px 0;
Itu saja!
Opsi konten header layar penuh
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.
Judul
Masukkan judul halaman Anda di sini.
Teks subtitle
Jika Anda ingin menggunakan subtitle, tambahkan di sini. Judul Anda akan muncul di bawah judul Anda dengan font kecil.
Tombol # 1 Text
Masukkan teks untuk tombol.
Tombol # 2 Text
Masukkan teks untuk tombol.
Isi
Di sini Anda dapat menentukan konten yang akan ditempatkan di bawah tajuk dan teks judul.
URL tombol 1
Masukkan URL tombol.
URL tombol 2
Masukkan URL tombol.
Url gambar logo
Unggah gambar yang Anda inginkan atau ketik URL gambar yang ingin Anda lihat.
URL Gambar Header
Unggah gambar yang Anda inginkan atau ketik URL gambar yang ingin Anda lihat.
Url gambar latar belakang
Jika disetel, gambar ini akan digunakan sebagai latar belakang modul ini. Untuk menghapus gambar latar belakang, cukup hapus URL dari bidang pengaturan. Gambar latar belakang akan muncul di atas warna latar belakang, yang berarti warna latar belakang tidak akan terlihat saat gambar latar diterapkan.
Warna latar belakang
Tentukan warna latar belakang kustom untuk modul Anda atau biarkan kosong untuk menggunakan warna default.
Warna overlay latar belakang
Pilih warna hamparan latar belakang, yang akan ditempatkan di atas gambar latar belakang. Gambar hamparan semi transparan dapat menciptakan beberapa efek keren bila ditempatkan di atas gambar latar belakang.
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.
Opsi desain header 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.
Orientasi Teks & Logo
Ini mengontrol bagaimana teks Anda disejajarkan dalam modul.
Buat layar penuh
Di sini Anda dapat memilih apakah tajuk diperluas ke ukuran layar penuh.
Gunakan efek Parallax
Jika diaktifkan, gambar latar belakang Anda akan memiliki posisi tetap seperti gulungan Anda, menciptakan efek paralaks yang menyenangkan.
Metode paralaks
Tentukan metode yang digunakan untuk efek paralaks.
Tampilkan tombol gulir ke bawah
Di sini Anda dapat memilih apakah tombol gulir ke bawah ditampilkan.
icon
Pilih ikon untuk ditampilkan untuk tombol gulir ke bawah.
Gulir ke bawah ikon Warna
Secara default, ikon drop-down mewarisi warna teks header Anda (putih atau abu-abu). Anda dapat mengubah warna ini dengan menyesuaikan warna pada opsi ini menggunakan color picker.
Gulir ke bawah Ukuran ikon
Gunakan pengaturan ini untuk menambah atau mengurangi ukuran ikon gulir ke bawah yang muncul di bagian bawah header Anda.
Penjajaran gambar vertikal
Ini mengontrol orientasi gambar di modul.
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.
Perataan vertikal dari teks
Pengaturan ini menentukan kesejajaran vertikal konten Anda. Konten Anda dapat dipusatkan secara vertikal atau disejajarkan di bawah.
Font judul
Anda dapat mengubah fonta teks judul 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.
Ukuran Font Judul
Di sini Anda dapat menyesuaikan ukuran teks judul Anda. Anda dapat menyeret penggeser rentang untuk menambah atau mengurangi ukuran teks Anda, atau langsung memasukkan nilai ukuran teks yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom input mendukung unit pengukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.
Warna teks judul
Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu tua. Jika Anda ingin mengubah warna teks judul Anda, pilih warna yang diinginkan dari pemilih warna menggunakan opsi ini.
Jarak huruf judul
Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah jarak antara setiap huruf dalam teks judul Anda, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Ketinggian garis judul
Ketinggian garis memengaruhi ruang antara setiap baris teks judul 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 input terletak di sebelah kanan kursor. Kolom input mendukung unit pengukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.
Font konten
Anda dapat mengubah fonta teks konten 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.
Ukuran font konten
Di sini Anda dapat menyesuaikan ukuran teks konten Anda. Anda dapat menyeret penggeser rentang untuk menambah atau mengurangi ukuran teks Anda, atau langsung memasukkan nilai ukuran teks yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Warna teks konten
Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu tua. Jika Anda ingin mengubah warna teks konten Anda, pilih warna yang diinginkan dari pemilih warna menggunakan opsi ini.
Spasi surat konten
Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks konten Anda, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Ketinggian garis konten
Ketinggian garis mempengaruhi ruang antara setiap baris teks konten 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 satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Font Subtitle
Anda dapat mengubah font teks keterangan 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.
Ukuran font subtitle
Di sini Anda dapat menyesuaikan ukuran teks teks 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 subtitle
Secara default, semua warna teks di Divi muncul dalam warna putih atau abu-abu tua. Jika Anda ingin mengubah warna teks keterangan Anda, pilih warna yang diinginkan dari pemilih warna menggunakan opsi ini.
Jarak huruf subtitle
Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks teks Anda, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Ketinggian garis subtitle
Ketinggian baris memengaruhi ruang di antara setiap baris teks teks Anda. Jika Anda ingin menambah ruang di antara setiap baris, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung satuan ukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis satuannya.
Lebar teks maksimum
Gunakan pengaturan ini untuk mengurangi lebar maksimum teks di modul header. Misalnya, nilai 50% akan memastikan bahwa teks tidak pernah melebihi 50% dari lebar keseluruhan modul header.
Gunakan gaya khusus untuk tombol
Mengaktifkan opsi ini mengungkapkan berbagai pengaturan kustomisasi tombol yang dapat Anda gunakan untuk mengubah tampilan tombol modul Anda.
Ukuran teks tombol
Pengaturan ini dapat digunakan untuk menambah atau mengurangi ukuran teks di tombol. Tombol menyesuaikan saat ukuran teks bertambah dan berkurang.
Warna teks tombol
Secara default, tombol mengadopsi warna aksen tema Anda seperti yang ditentukan dalam Penyesuai Tema. Opsi ini memungkinkan Anda untuk menetapkan warna teks kustom ke tombol modul ini. Pilih warna kustom Anda menggunakan color picker untuk mengubah warna tombol.
Warna latar tombol
Secara default, tombol memiliki warna latar transparan. Ini dapat diubah dengan memilih warna latar belakang yang diinginkan dari pemilih warna.
Tombol Lebar Perbatasan
Semua tombol Divi memiliki batas 2px secara default. Perbatasan ini dapat ditingkatkan atau dikurangi menggunakan pengaturan ini. Perbatasan dapat dihapus dengan memasukkan nilai 0.
Warna batas tombol
Secara default, batas tombol mengadopsi warna aksen tema Anda seperti yang ditentukan dalam Penyesuai Tema. Opsi ini memungkinkan Anda untuk menetapkan warna tepi kustom ke tombol modul ini. Pilih warna kustom Anda menggunakan color picker untuk mengubah warna batas tombol.
Radius batas tombol
Jari-jari perbatasan memengaruhi kebulatan sudut tombol Anda. Secara default, tombol di Divi memiliki radius batas kecil yang membulatkan sudut sebesar 3 piksel. Anda dapat mengurangi nilai ini menjadi 0 untuk membuat tombol persegi atau meningkatkannya secara signifikan untuk membuat tombol dengan tepi melingkar.
Jarak dari huruf-huruf tombol
Penspasian huruf mempengaruhi jarak antara setiap huruf. Jika Anda ingin menambah ruang di antara setiap huruf dalam teks tombol Anda, gunakan penggeser rentang untuk menyesuaikan ruang atau masukkan ukuran jarak yang diinginkan di bidang masukan di sebelah kanan penggeser. Kolom masukan mendukung unit pengukuran yang berbeda, yang berarti Anda dapat memasukkan "px" atau "em" bergantung pada nilai ukuran Anda untuk mengubah jenis unitnya.
Font Tombol
Anda dapat mengubah fonta teks tombol 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.
Tambahkan ikon tombol
Dinonaktifkan, pengaturan ini akan menghapus ikon dari tombol Anda. Secara default, semua tombol Divi menampilkan ikon panah di hover.
Ikon tombol
Jika ikon diaktifkan, Anda dapat menggunakan pengaturan ini untuk memilih ikon mana yang akan digunakan di tombol Anda. Divi memiliki ikon berbeda untuk dipilih.
Tombol ikon warna
Menyesuaikan parameter ini akan mengubah warna ikon yang muncul di tombol Anda. Secara default, warna ikon sama dengan warna teks tombol Anda, tetapi pengaturan ini memungkinkan Anda menyesuaikan warna secara mandiri.
Tombol penempatan ikon
Anda dapat memilih untuk menampilkan ikon tombol Anda di sebelah kiri atau kanan tombol Anda.
Tampilkan hanya ikon saat mengarahkan tombol
Secara default, ikon tombol hanya ditampilkan saat melayang. Jika Anda ingin ikon selalu muncul, matikan pengaturan ini.
Warna Teks Tombol Melayang
Saat tombol diarahkan oleh mouse pengunjung, warna ini akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.
Warna latar tombol hover (warna tombol hover)
Saat tombol diarahkan oleh mouse pengunjung, warna ini akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.
Tombol Hover Perbatasan Warna (warna batas hover)
Saat tombol diarahkan oleh mouse pengunjung, warna ini akan digunakan. Warna akan berubah dari warna dasar yang ditentukan dalam pengaturan sebelumnya.
Tombol Radius Hover Border
Saat tombol digerakkan oleh mouse pengunjung, nilai ini akan digunakan. Nilai akan berubah dari nilai dasar yang ditentukan di pengaturan sebelumnya.
Menunjuk tombol spasi catatan
Saat tombol digerakkan oleh mouse pengunjung, nilai ini akan digunakan. Nilai akan berubah dari nilai dasar yang ditentukan di pengaturan sebelumnya.
Opsi header lebar penuh 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.
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]
Tutorial Divi lainnya
- 5 website untuk restoran penggunaan Divi tema
- Bagaimana cara menambahkan teks pada produk Divi WooCommerce
- Cara mengubah warna menu antara halaman Divi
- Cara mempersonalisasi kisi-kisi blog dengan Divi
- Cara menggunakan peran Divi editor pada WordPress
- Cara membuat slider Divi layar penuh
- Cara mengubah warna menu antara halaman Divi
- Fitur yang Anda mungkin tidak tahu tentang Divi
- Cara menggunakan Divi Builder di WordPress
- Cara menggunakan modul gulir video Divi
- Cara menggunakan modul Flip Divi Builder
- Bagaimana cara menambahkan modul testimonial pada Divi Builder
- Cara menggunakan modul teks Divi
- Cara membuat slider di Divi
- Cara mengedit peran pengguna Divi
- Cara menggunakan modul Divi Social Media
- Cara menggunakan modul shop pada tema WordPress Divi
- Cara menggunakan modul sidebar Divi
- Cara menggunakan Modul Tabel Divi Price
- Cara menggunakan modul judul publikasi Divi
- Bagaimana cara menambahkan modul video Divi
- Cara menggunakan modul navigasi artikel
- Cara menggunakan modul pencarian Divi
- Cara menggunakan modul dompet Divi
- Cara menggunakan modul orang di Divi Builder
- Cara menggunakan modul dompet dengan filter Divi
- Cara menggunakan modul slider lebar penuh
- Cara menggunakan Modul Gambar Divi Builder
- Cara menggunakan modul navigasi penuh lebar dari Divi Builder
- Cara menggunakan modul galeri gambar
- Cara menggunakan Modul Full-Width Divi Builder Card
- Cara menggunakan Modul Portofolio Full Full Divi
- Cara menggunakan modul header penuh lebar Divi
- Cara menggunakan Modul Divi Counter
- Cara menggunakan slider artikel di Divi Builder
- Cara menggunakan modul Divi Email Optin
Terima kasih atas informasi ini, sebenarnya saya sedang mencari kemungkinan menempatkan menu pada gambar tanpa mengaktifkan area header di Divi. Apa itu mungkin?
Kami belum menguji opsi ini.
Halo
Terima kasih atas artikelnya, apakah mungkin menambahkan tombol ke-3 "Teks Tombol # 3" jika ya, bagaimana?
cdt,
Judulnya berbicara tentang menu, dan isinya adalah blok lebar penuh ...