Apakah Anda ingin menampilkan modul Divi Fullwidth Header dalam layar penuh?
Header layar penuh memenuhi seluruh layar, berapa pun ukuran layarnya pengunjung. Ini bagus untuk menarik perhatian pengguna. Untungnya, mudah untuk membuat header layar penuh dengan modul ini Header Lebar Penuh dari Divi.
Pada artikel ini, kami akan menunjukkan cara membuat header lebar penuh, menyesuaikannya, dan menampilkannya dalam layar penuh. Anda dapat menggunakan pendekatan ini untuk membuat bagian pahlawan layar penuh untuk halaman Anda.
Mari kita mulai.
penelitian
Mari kita lihat preview apa yang akan kita desain dalam tutorial ini.
Biro
Tablette
Telepon
Cara Membuat Header Fullwidth Divi Anda menjadi Header Layar Penuh
Mulailah dengan menambahkan bagian lebar penuh ke halaman yang sedang Anda kerjakan.
Kemudian tambahkan Modul Header Lebar Penuh ke bagian lebar penuh.
Pengaturan modul terbuka. Pilih tab Mendesain. Aktifkan opsi yang disebut Buat Layar Penuh
Kami sekarang memiliki header layar penuh. Ini sesederhana itu.
Aktifkan ikon gulir
Kami juga dapat menambahkan tombol yang memberitahu pengguna untuk menggulir ke bawah. Namun, kita perlu mengaktifkannya. Tombol ini selalu terlihat dalam opsi layar penuh. Opsi header layar penuh selalu sesuai dengan tinggi layar pengunjung.
- Tampilkan Tombol Gulir Bawah: YA
Contoh Header Layar Penuh Divi Fullwidth
Parameter Modul Header Lebar Penuh
Berikut adalah langkah-langkah untuk setiap bagian dari pengaturan modul Fullwidth Header.
Baca juga: Divi: Cara menggabungkan topeng latar belakang dan pemisah
teks
Semua pertama, tambahkan teks yang akan terlihat di header lebar penuh. Ini termasuk judul, subjudul, isi dan teks tombol.
- Judul: Buat blog Anda dengan Divi
- Subjudul: Blogpascher
- Burron #1: Ringkasan
- Tombol #2: Jadwal
- Isi: (bawaan)
Images
layanan, tambahkan gambar. Ini ditampilkan di sisi kanan header lebar penuh, menggeser teks ke kiri.
- Gambar Header: pilihan Anda
latar belakang
Gulir ke Latar Belakang dan atur warnanya ke #f6f5ee.
- Warna Latar Belakang: #f6f5ee
ketentuan
Selanjutnya, navigasikan ke tab Desain.
- Jadikan Layar Penuh: YA
Gulir ke bawah ikon
- Tampilkan Tombol Gulir Bawah: YA
- Gulir ke Bawah Warna Ikon: #000000 (Desktop dan Tablet), #ffffff (Telepon)
- Gulir ke Bawah Ukuran Ikon: 70px (Desktop), 60px (Tablet), 50px (Ponsel)
Teks judul
Selanjutnya kita akan menyesuaikan teks judul.
- Tingkat Pos: H1
- Font: Inter
- Berat Huruf: Tebal
- Perataan Teks: Tengah
- Warna Teks: #000000
- Judul Teks Ukuran: 75px (Desktop), 40px (Tablet), 24px (Telepon)
- Tinggi Baris Judul: 1.2em
teks deskripsi
Kemudian gulir ke bawah ke Teks Tubuh.
- Font: Buka Sans
- Perataan: Kiri
- Warna: #000000
- Ukuran Teks: 16px (Desktop), 15px (Tablet), 14px (Ponsel)
- Tinggi Garis: 1.8em
anak judul
Kemudian gulir ke bawah ke Teks Subjudul.
- Font: Inter
- Berat Huruf: Tebal
- Gaya: TT
- Penjajaran: Pusat
- Warna: #ff5a17
- Ukuran: 14px
- Spasi Huruf: 1px
- Tinggi Garis: 1.8em
Tombol #1
Kemudian gulir ke bawah ke Tombol Satu.
- Gunakan Gaya Kustom Untuk Tombol: YA
- Ukuran Teks: 20px (Desktop), 18px (Tablet), 16px (Ponsel)
- Warna Teks: #000000
- Warna Latar Belakang: #ffffff
- Lebar Perbatasan: 0px
- Radius Perbatasan: 0px
- Font: Inter
- Berat Huruf: Tebal
- Ikon: pilihan Anda
- Warna Ikon: #000000
- Penempatan: Kanan
- Hanya Tampilkan Ikon Saat Arahkan ke Tombol Satu: TIDAK
Terakhir, gulir ke bawah ke opsi Tombol Satu Padding.
- Lapisan:
- Desktop: 20px (Atas dan Bawah), 40px (Kiri dan Kanan)
- Tablet: 16px (Atas dan Bawah), 40px (Kiri dan Kanan)
- Telepon: 12px (Atas dan Bawah), 40px (Kiri dan Kanan)
Tombol #2
Terakhir, gulir ke bawah ke Tombol Dua.
- Gunakan Gaya Kustom Untuk Tombol Dua: Ya
- Ukuran Teks: 20px (Desktop), 18px (Tablet), 16px (Telepon)
- Warna Teks: #ffffff
- Warna Latar Belakang: #ff5a17
- Lebar Perbatasan: 0px
- Radius Perbatasan: 0px
- Font: Inter
- Berat Huruf: Tebal
Pilih ikon favorit Anda.
- Ikon: pilihan Anda
- Warna Ikon: #000000
- Penempatan: kiri
- Hanya Tampilkan Ikon Saat Arahkan ke Tombol Dua: TIDAK
Terakhir, gulir ke bawah ke opsi Tombol Dua Padding.
- Lapisan:
- Desktop: 20px (Atas dan Bawah), 40px (Kiri dan Kanan)
- Tablet: 16px (Atas dan Bawah), 40px (Kiri dan Kanan)
- Telepon: 12px (Atas dan Bawah), 40px (Kiri dan Kanan)
Hasil akhir
Seperti inilah tampilan header lebar penuh kami di desktop, tablet, dan ponsel.
Anda juga dapat berkonsultasi: Divi: Cara menggunakan efek bayangan dan arahkan kursor untuk membuat konten interaktif
Biro
Tablette
Telepon
Unduh DIVI sekarang!!!
Kesimpulan
Berikut adalah tampilan kami tentang cara membuat Header Fullwidth dengan modul Divi Fullwidth Header Anda.
Prosesnya sederhana dan terlihat bagus di perangkat apa pun. Menambahkan tombol Gulir ke bawah adalah visual hebat yang memberi tahu pengguna bahwa mereka dapat menggulir.
Merancang header layar penuh mirip dengan mendesain bagian Pahlawan. Mengikuti beberapa panduan sederhana dapat membantu Anda membuat header layar penuh yang menakjubkan dengan modul Fullwidth Header Divi.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
