Cara Membangun Bagian Pahlawan dengan Modul Header Fullwidth Divi

Membangun bagian pahlawan adalah cara terbaik untuk menarik perhatian ke konten penting di halaman Anda. Ini adalah konten berukuran super yang dapat Anda gunakan untuk menceritakan kisah Anda, berbagi informasi tentang pekerjaan Anda, atau menyoroti produk atau layanan. Dengan modul Fullwidth Header Divi, Anda dapat menambahkan judul, subjudul, dua tombol, teks isi, gambar logo, dan gambar header. Tentu saja, Anda juga dapat memanfaatkan opsi latar belakang untuk menambahkan dan menggabungkan gambar, gradien, warna, pola, dan topeng. Anda dapat mengedit semua pengaturan ini dalam satu pengaturan modul header lebar penuh daripada harus beralih di antara beberapa modul gambar, teks, dan tombol.

Dalam tutorial ini, kami akan menunjukkan cara membuat bagian pahlawan yang menarik dan menarik perhatian menggunakan modul header lebar penuh Divi.

Mari kita mulai!

Sneak Peek

Berikut adalah preview dari apa yang akan kita desain.

Apa yang Anda Butuhkan untuk Memulai

Sebelum kita mulai, pastikan Anda memiliki Divi versi terbaru di situs web Anda.

Sekarang, Anda siap untuk memulai!

Cara Membangun Bagian Pahlawan dengan Modul Header Fullwidth Divi

Buat Halaman Baru dengan Tata Letak Premade

Mari kita mulai dengan menggunakan tata letak premade dari perpustakaan Divi. Untuk desain ini, kita akan menggunakan Halaman Arahan Dokter Hewan dari Paket Tata Letak Dokter Hewan.

Tambahkan halaman baru ke situs web Anda dan beri judul, lalu pilih opsi untuk Gunakan Divi Builder.

Kami akan menggunakan tata letak premade dari perpustakaan Divi untuk contoh ini, jadi pilih Browse Layouts.

Cari dan pilih tata letak Halaman Arahan Dokter Hewan.

Pilih Gunakan Tata Letak Ini untuk menambahkan tata letak ke halaman Anda.

Sekarang kita siap untuk membangun desain kita.

Tambahkan Modul Header Lebar Penuh

Kita akan membuat ulang bagian hero menggunakan modul header fullwidth. Tambahkan bagian lebar penuh baru ke halaman, di bawah header yang ada.

Tambahkan modul header lebar penuh ke bagian.

Kemudian, hapus bagian header asli.

Sesuaikan Modul Header Lebar Penuh

Tambah isi

Buka pengaturan modul header lebar penuh dan tambahkan konten berikut ke modul:

• Judul: Dokter hewan
• Subjudul: DiviVet. Melayani Sahabat Terbaik Kami
• Tombol #1: Lihat Semua Layanan
• Tombol #2: Buat Janji Temu
• Tubuh: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.

Selanjutnya, tambahkan Gambar Header dokter hewan dengan hewan.

Pengaturan Latar Belakang Gradien

Pindah ke pengaturan latar belakang. Hapus warna latar belakang asli, lalu tambahkan gradien latar belakang.

• 0%: rgba(255,170,205,0.48)
• 40%: rgba(110,66,255,0.24)
• 87%: rgba(124.239.255.0.71)
• Tipe Gradien: Elips
• Posisi Gradien: Kanan

Selanjutnya, pilih tab Background Mask dan tambahkan background mask ke background.

• Topeng Latar Belakang: Corner Blob
• Warna Topeng: #FFFFFF
• Transformasi Topeng: Vertikal

Sesuaikan Gaya Teks

Dengan konten header dan latar belakang di tempatnya, mari beralih ke tab desain untuk menyesuaikan gaya teks. Pertama, buka pengaturan judul dan sesuaikan teks sebagai berikut:

• Judul Font: Nunito
• Judul Font Berat: Ultra Tebal
• Judul Font Style: TT (Kapital)

Ubah warna, ukuran, dan spasi teks judul.

• Warna Teks Judul: #a9cb6b
• Ukuran Teks Judul: 14px
• Spasi Huruf Judul: 2px

Pindah ke bagian teks isi dan sesuaikan font. Gunakan pengaturan responsif Divi untuk menambahkan ukuran teks yang lebih kecil untuk perangkat seluler.

• Warna Teks Tubuh: #000000
• Ukuran Teks Tubuh-Desktop: 18px
• Ukuran Teks Tubuh: Seluler: 14px
• Tinggi Garis Tubuh: 1.8em

Selanjutnya, buka pengaturan subtitle dan sesuaikan font.

• Font Teks: Nunito
• Berat Huruf Subtitel: Tebal
• Warna Teks Subtitle: #000000

Terakhir, ubah ukuran teks untuk desktop dan seluler (sekali lagi, gunakan pengaturan responsif untuk menambahkan ukuran teks yang lebih kecil di seluler) dan sesuaikan tinggi baris.

• Ukuran Teks Subjudul–Desktop: 56px
• Ukuran Teks Subtitle-Seluler: 32px
• Tinggi Baris Subtitle: 1.2em

Sesuaikan Tombol Satu Gaya

Selanjutnya, kita akan menyesuaikan gaya tombol. Mulailah dengan mengaktifkan gaya khusus untuk Tombol Satu, lalu sesuaikan ukuran teks.

• Gunakan Gaya Kustom untuk Tombol Satu: Ya
• Tombol Satu Ukuran Teks: 14px

Tambahkan gradien latar belakang ke tombol. Nilai gradien adalah sebagai berikut:

• 58%: #316EFF
• 100%: #1D2B60
• Arah Gradien: 90 derajat

Selanjutnya, sesuaikan pengaturan perbatasan dan pengaturan font.

• Tombol Satu Lebar Batas: 0px
• Tombol Satu Radius Batas: 80px
• Tombol Satu Huruf Spasi: 2px
• Tombol Satu Font: Nunito
• Tombol Satu Font Berat: Ultra Tebal
• Tombol Satu Gaya Font: TT (Kapital)

Nonaktifkan Ikon Tombol Satu.

• Tampilkan Tombol Satu Ikon: Tidak

Selanjutnya, sesuaikan pengaturan margin dan padding untuk desain desktop dan tambahkan bayangan kotak.

• Tombol Satu Margin-Atas-Desktop: 200px
• Tombol Satu Margin-Bawah-Desktop: 0px
• Tombol Satu Padding-Top-Desktop: 16px
• Tombol Satu Padding-Bottom-Desktop: 16px
• Tombol Satu Padding-Kiri-Desktop: 2em
• Tombol Satu Padding-Kanan-Desktop: 50em
• Bayangan Kotak Tombol: Bawah

Gunakan pengaturan responsif untuk menyetel nilai margin dan padding yang berbeda pada perangkat seluler.

• Tombol Satu Margin-Top-Mobile: 25px
• Tombol Satu Padding-Kanan-Seluler: 10em

Ada beberapa masalah bungkus teks dengan tombol kami yang akan kami perbaiki dengan beberapa CSS khusus nanti.

Kustomisasi Tombol Dua Gaya

Tombol dua memiliki beberapa warna dan jarak yang berbeda tetapi sangat mirip dengan tombol satu. Untuk menyimpan beberapa langkah desain berulang, mari salin gaya modul satu tombol ke modul dua tombol, lalu sesuaikan apa yang perlu kita ubah.

Pertama, klik kanan pada tombol satu bagian dan salin tombol satu gaya.

Kemudian klik kanan pada tombol dua bagian dan tempel tombol satu gaya.

Sekarang kita dapat menyesuaikan tombol dua gaya. Ubah warna teks.

• Tombol Dua Warna Teks: #121F60

Sesuaikan gradien latar belakang untuk tombol dua.

• 30%: rgba (0,229,198.0)
• 100%: #00e5c6

Gunakan pengaturan responsif untuk menyesuaikan gradien latar belakang untuk perangkat seluler.

• 0%: rgba (0,229,198.0)
• 100%: #00e5c6

Selanjutnya, sesuaikan margin dan padding untuk desain desktop.

• Tombol Dua Margin-Top-Desktop: 0px
• Tombol Dua Margin-Bawah-Desktop: 0px
• Tombol Dua Margin-Kiri-Desktop: 30%
• Tombol Dua Padding-Top-Desktop: 16px
• Tombol Dua Padding-Bottom-Desktop: 16px
• Tombol Dua Padding-Kiri-Desktop: 48em
• Tombol Dua Padding-Kanan-Desktop: 2em

Gunakan pengaturan responsif untuk menyetel nilai margin dan padding yang berbeda untuk desain seluler.

• Tombol Dua Margin-Kiri-Seluler: 5%
• Tombol Dua Padding-Kiri-Mobile: 35%
• Tombol Dua Padding-Kanan-Mobile: 5%

CSS khusus

Akhirnya, sebagian besar pekerjaan desain selesai. Sekarang kita perlu menambahkan beberapa CSS khusus untuk menyelesaikan desain. Pindah ke tab Advanced dan buka bagian Custom CSS.

Pertama, mari kita mulai dengan CSS Gambar Header. CSS ini memungkinkan gambar header ditampilkan di atas tombol.

z-index: 1;
position:relative;

Selanjutnya, Kustom CSS ke Judul. Kami akan menetapkan nilai yang berbeda untuk tampilan desktop dan seluler menggunakan pengaturan responsif.

Untuk desktop:

padding-top:50px;
padding-bottom:30px;

Untuk seluler:

padding-top:5px;
padding-bottom:10px;

Terakhir, tambahkan CSS berikut ke Tombol Satu dan Tombol Dua.

white-space: nowrap;

Hasil Akhir

Berikut adalah desain akhir untuk bagian pahlawan header lebar penuh kami.

Pikiran Akhir

Modul header fullwidth memungkinkan Anda untuk dengan mudah membuat bagian pahlawan yang indah untuk mengiklankan layanan Anda dan memberi tahu pengunjung tentang situs web Anda. Pengaturan bawaan memudahkan untuk menyesuaikan desain setiap aspek header, dan semuanya ada di satu tempat, jadi tidak perlu beralih di antara beberapa modul untuk membangun bagian pahlawan Anda. Untuk desain bagian pahlawan yang lebih unik, lihat tutorial ini: Cara Menggunakan Masker dan Pola Latar Belakang Divi untuk Bagian Pahlawan. Apakah Anda menggunakan modul header lebar penuh untuk membangun bagian pahlawan Anda? Kami akan senang mendengar dari Anda di komentar!