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