Cara Membuat Modul Header Fullwidth Divi Anda Layar Penuh

Header layar penuh mengambil seluruh layar, terlepas dari ukuran layar pengunjung. Ini bagus untuk menarik perhatian pengguna. Ini juga bagus untuk mengarahkan mereka ke ajakan bertindak Anda. Untungnya, membuat header layar penuh dengan Modul Header Fullwidth Divi itu mudah. Dalam posting ini, kami akan menunjukkan cara membuat header lebar penuh, mengubahnya menjadi layar penuh, dan menatanya. Anda dapat menggunakan pendekatan ini untuk membuat bagian pahlawan layar penuh untuk halaman Anda!

Mari kita mulai.

Pratinjau Header Layar Penuh

Mari kita lihat pratinjau dari apa yang akan kita buat dalam tutorial ini.

Desktop

Tablet

Telepon

Mengapa Membuat Header Layar Penuh dengan Modul Header Fullwidth Divi?

Sebelum kita membahas cara membuat header layar penuh, mari kita bicara tentang mengapa pengguna Divi mungkin menginginkannya.

Header layar penuh menyajikan elemen tertentu di bagian yang dimuat. Bagian ini menyajikan elemen-elemen ini dalam tata letak yang bersih yang menarik perhatian dan melakukan beberapa tugas.

Pertama, ini dapat digunakan untuk menampilkan ajakan bertindak yang dapat mengarahkan pengunjung ke saluran penjualan Anda. Ini adalah tempat yang bagus untuk menyebutkan produk atau layanan tertentu.

Kedua, dapat menghadirkan pengguna dengan desain menarik yang membuat mereka tetap berada di situs web. Situs web hanya memiliki beberapa detik untuk menarik perhatian pengunjung.

Ada beberapa hal yang perlu diingat saat membuat header layar penuh:

• Ikuti praktik desain umum untuk warna dan font. Pastikan mereka dapat dibaca dan sesuai dengan topik situs web Anda.
• Jaga agar desain tetap sederhana dan bersih. Jangan menggunakan terlalu banyak gambar, tautan, atau tombol. Fokus pada beberapa hal. Kurang itu lebih.
• Pastikan header layar penuh responsif. Header layar penuh harus terlihat bagus dan berfungsi dengan baik di semua ukuran layar.

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 akan terbuka. Pilih tab Desain. Aktifkan opsi yang disebut Make Fullscreen .

Kami sekarang memiliki header layar penuh. Sesederhana itu.

Aktifkan Ikon Gulir Tajuk Layar Penuh

Kami juga dapat menambahkan tombol yang menunjukkan kepada pengguna untuk menggulir ke bawah. Namun, kita harus mengaktifkannya. Tombol ini selalu terlihat dalam opsi layar penuh. Opsi header layar penuh selalu cocok dengan tinggi layar pengunjung.

Dalam pengaturan modul, kita akan melihat bagian yang disebut Ikon Gulir ke Bawah di bawah opsi Tata Letak. Klik tombol untuk mengaktifkan Tampilkan Tombol Gulir Bawah .

Contoh Header Layar Penuh Divi Fullwidth

Sekarang kita telah membahas mengapa kita ingin membuat Fullwidth Header fullscreen dan melihat bagaimana menyelesaikan tugas, mari kita lihat sebuah contoh. Saya akan membuat header lebar penuh menggunakan bagian pahlawan dari tata letak Divi.

Untuk contoh ini, saya menggunakan bagian pahlawan dari beranda di Paket Tata Letak Studio Fotografi gratis yang tersedia di Divi. Saya akan menyesuaikan bagian pahlawan ini menggunakan font dan warna dari tata letak untuk membuat header lebar penuh yang unik.

Pengaturan Modul Header Layar Penuh

Berikut adalah langkah-langkah untuk setiap bagian pengaturan di Modul Header Layar Penuh.

Teks

Pertama, tambahkan teks yang akan terlihat di header fullwidth. Ini termasuk judul, sub-judul, konten (saya akan menggunakan teks dummy bawaan Divi untuk ini), dan teks tombol.

• Judul: Divi Photography Studio
• Subjudul: Fotografi
• Tombol 1: Ringkasan Proyek
• Tombol 2: Perencanaan Proyek
• Tubuh: konten

Gambar-gambar

Selanjutnya, tambahkan gambar . Ini ditampilkan di sisi kanan header lebar penuh, memindahkan teks ke kiri.

• Gambar Header: pilihan Anda

Latar belakang

Gulir ke bawah ke Latar Belakang dan atur Warnanya ke #f6f5ee.

• Warna: #f6f5ee

Tata Letak

Selanjutnya, buka tab Desain. Aktifkan Jadikan Layar Penuh .

• Jadikan Layar Penuh: Ya

Gulir ke Bawah Ikon

Selanjutnya, aktifkan Ikon Gulir ke Bawah . Ubah Warna menjadi hitam untuk desktop dan tablet dan putih untuk ponsel. Dengan gambar yang saya pilih, ikon akan muncul pada gambar di bagian bawah untuk ponsel dan ini memungkinkannya terlihat dengan warna gambar. Ubah Ukuran Ikon menjadi 70px untuk desktop, 60px untuk tablet, dan 50px untuk ponsel.

• Tampilkan Tombol Gulir Bawah: Ya
• Warna Ikon: #000000 Desktop dan Tablet, #ffffff Telepon
• Ukuran: Desktop 70px, Tablet 60px, Telepon 50px

Teks Judul

Selanjutnya, kita akan menyesuaikan Judul Teks . Atur teks ke H1 dan pilih Inter untuk Font. Atur Weight menjadi bold, Alignment menjadi center, dan Color menjadi hitam.

• Judul: H1
• Font: Inter
• Berat: Tebal
• Penjajaran: Pusat
• Warna: #000000

Kami akan menggunakan tiga ukuran untuk Ukuran Font : 75px untuk desktop, 40ps untuk tablet, dan 24px untuk ponsel. Ubah Tinggi Garis menjadi 1.2em.

• Ukuran: Desktop 75px, Tablet 40px, Telepon 24px
• Tinggi Garis: 1.2em

Teks Tubuh

Selanjutnya, gulir ke bawah ke Body Text . Pilih Buka Sans untuk Font. Atur Alignment ke Left dan Color menjadi hitam.

• Font: Buka Sans
• Perataan: Kiri
• Warna: #000000

Atur Ukuran Font menjadi 16px untuk desktop, 15px untuk tablet, dan 14px untuk ponsel. Ubah Tinggi Garis menjadi 1.8em.

• Ukuran: Desktop 16px, Tablet 15px, Ponsel 14px
• Tinggi Garis: 1.8em

Teks Subjudul

Selanjutnya, gulir ke bawah ke Teks Subtitle . Ubah Font menjadi Inter. Atur Weight ke bold, Style ke TT, Alignment ke center, dan Color ke #ff5a17.

• Font: Inter
• Berat: Tebal
• Gaya: TT
• Penjajaran: Pusat
• Warna: #ff5a17

Ubah Ukuran menjadi 14px untuk ketiga ukuran layar. Ubah Letter Spacing menjadi 1px dan Line Height menjadi 1.4em.

• Ukuran: 14px
• Spasi Huruf 1px
• Tinggi Garis: 1.8em

Tombol Satu

Selanjutnya, gulir ke bawah ke Button One dan pilih Use Custom Styles for Button . Ubah Warna Teks menjadi hitam.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran: Desktop 20px, Tablet 18px, Telepon 16px
• Warna Teks: #000000

Ubah Background Color menjadi putih dan atur Border Width dan Radius menjadi 0px.

• Warna Latar Belakang: #ffffff
• Tombol Satu Lebar Batas: 0px
• Tombol Satu Radius Batas: 0px

Ubah Font menjadi Inter dan Weight menjadi Bold.

• Font: Inter
• Berat: Tebal

Selanjutnya, pilih ikon pilihan Anda, ubah Warna menjadi hitam, atur Penempatan Tombol di sebelah kiri, dan nonaktifkan Only Show Icon On Hover For Button One.

• Ikon: pilihan Anda
• Warna Ikon: #000000
• Tombol Satu Penempatan Ikon: Kiri
• Hanya Tampilkan Ikon Saat Arahkan ke Tombol Satu: Tidak

Terakhir, gulir ke bawah ke opsi Padding Button One. Kami akan menggunakan Padding yang berbeda untuk setiap ukuran layar. Untuk desktop, gunakan 20px untuk Atas dan Bawah, dan 40px untuk Kiri dan Kanan. Untuk tablet, ubah Padding Atas dan Bawah menjadi 16px. Di ponsel, ubah Padding Atas dan Bawah menjadi 12px. Biarkan Padding Kiri dan Kanan sama untuk ketiganya.

• Desktop Padding: 20px Atas dan Bawah, 40px Kiri dan Kanan
• Tablet Padding: 16px Atas dan Bawah, 40px Kiri dan Kanan
• Padding Telepon: 12px Atas dan Bawah, 40px Kiri dan Kanan

Tombol Dua

Terakhir, gulir ke bawah ke Tombol Dua . Pilih Gunakan Gaya Kustom untuk Tombol . Atur ukuran Font menjadi 20px untuk desktop, 19ps untuk tablet, dan 16px untuk ponsel. Ubah Warna Teks menjadi putih.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran: Desktop 20px, Tablet 18px, Telepon 16px
• Warna Teks: #ffffff

Ubah Warna Latar Belakang menjadi #ff5a17. Atur Border Width dan Radius ke 0px.

• Warna Latar Belakang: #ff5a17
• Tombol Dua Lebar Perbatasan: 0px
• Tombol Dua Radius Batas: 0px

Selanjutnya, ubah Font menjadi Inter dan Weight menjadi Bold.

• Font: Inter
• Berat: Tebal

Pilih ikon pilihan Anda. Ubah Warna menjadi hitam, atur Penempatan Tombol di sebelah kiri, dan nonaktifkan Only Show Icon On Hover For Button Two.

• Ikon: pilihan Anda
• Warna Ikon: #000000
• Tombol Dua Penempatan Ikon: Kiri
• Hanya Tampilkan Ikon Saat Arahkan ke Tombol Dua: Tidak

Terakhir, gulir ke bawah ke opsi Padding Button Two. Untuk desktop, gunakan 20px untuk Atas dan Bawah, dan 40px untuk Kiri dan Kanan. Pada tablet, ubah Padding Atas dan Bawah menjadi 16px. Untuk ponsel, ubah Padding Atas dan Bawah menjadi 12px. Tutup modul dan simpan pekerjaan Anda.

• Desktop Padding: 20px Atas dan Bawah, 40px Kiri dan Kanan
• Tablet Padding: 16px Atas dan Bawah, 40px Kiri dan Kanan
• Padding Telepon: 12px Atas dan Bawah, 40px Kiri dan Kanan

Hasil Tajuk Layar Penuh

Berikut tampilan header fullwidth kami di desktop, tablet, dan ponsel.

Desktop

Tablet

Telepon

Mengakhiri Pemikiran tentang Membuat Header Layar Penuh dengan Modul Header Lebar Penuh Divi

Itulah tampilan kami tentang cara membuat header layar penuh dengan Modul Header Fullwidth Divi Anda. Prosesnya sederhana, dan terlihat bagus di perangkat apa pun. Menambahkan tombol Gulir ke Bawah adalah visual luar biasa yang menunjukkan kepada 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 Header Layar Penuh Divi.

Kami ingin mendengar dari Anda. Sudahkah Anda membuat Divi Fullwidth Header Anda menjadi layar penuh? Beri tahu kami tentang hal itu di komentar.