Apakah Anda ingin tahu cara membuat bagian Hero dengan modul Fullwidth Header Divi?
Membangun bagian Pahlawan adalah cara yang bagus untuk menarik perhatian isi penting untuk halaman Anda. Ini adalah sebuah isi ukuran besar yang dapat Anda gunakan untuk menceritakan kisah Anda, berbagi informasi tentang pekerjaan Anda, atau menyorot suatu 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 menggunakan opsi latar belakang untuk menambahkan dan menggabungkan gambar, gradien, warna, pola, dan topeng.
Anda dapat mengubah semua pengaturan ini dalam pengaturan modul daripada harus beralih di antara beberapa modul gambar, teks, dan tombol.
Dalam tutorial ini, kami akan menunjukkan cara membuat bagian Hero yang menarik dan eye-catching menggunakan modul Fullwidth Header Divi.
Ayo pergi !
penelitian
Berikut adalah preview dari apa yang akan kita rancang.
Apa yang Anda butuhkan untuk memulai
Sebelum memulai, pastikan Anda memiliki Divi versi terbaru di situs jaringan.
Sekarang Anda siap untuk memulai!
Cara Membuat Bagian Pahlawan dengan Modul Header Fullwidth Divi
Baca juga: Divi: Cara menggunakan "Gradient Builder" untuk mempercantik gambar Anda
Buat halaman baru dengan tata letak yang telah ditentukan
Mari kita mulai dengan menggunakan tata letak yang telah ditentukan dari perpustakaan Divi. Untuk desain ini kita akan menggunakan homepage paket tata letak dokter hewan.
Dari dasbor Worpress, tambahkan halaman baru ke . Anda situs jaringan
Beri judul, lalu pilih opsi Gunakan Divi Builder.
Kami akan menggunakan tata letak yang telah ditentukan dari perpustakaan Divi untuk contoh ini. Jadi pilih Jelajahi Tata Letak.
Temukan dan pilih tata letak peternak anjing.
Sélectionnez Gunakan Tata Letak Ini untuk menambahkan tata letak ke halaman Anda.
Kami sekarang siap untuk mendesain.
Tambahkan modul Fullwidth Header
Kami akan membuat ulang bagian pahlawan menggunakan modul Fullwidth Header. Tambahkan bagian lebar penuh baru ke halaman, di bawah header yang ada.
Tambahkan modul Fullwidth Header ke bagian tersebut.
Selanjutnya, hapus bagian header asli.
Sesuaikan modul Fullwidth Header
Tambahkan konten
Buka pengaturan modul dan tambahkan isi di sebelah modul:
- Judul: Dokter hewan
- Subjudul: Divivet. Melayani teman-teman terbaik kami
- Tombol #1: Semua Layanan
- Tombol #2: Buat janji
- 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.
Pengaturan latar belakang gradien
Pergi 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
Kemudian pilih tab Topeng Latar Belakang dan tambahkan topeng latar belakang.
- Latar Belakang Topeng: Corner Blob
- Warna Topeng: #FFFFFF
- Transformasi: vertikal
Sesuaikan teks
Beralih ke tab Mendesain dan ubah pengaturan judul
- Judul Font: Nunito
- Judul Font Berat: Ultra Tebal
- Gaya Font: TT (Huruf Besar)
- Warna Teks Judul: #a9cb6b
- Ukuran Teks: 14px
- Spasi Huruf Judul: 2px
Pergi ke bagian Teks Tubuh dan menyesuaikan font.
- Warna Teks: #000000
- Ukuran Teks Tubuh:
- Desktop: 18px
- Telepon: 14px
- Tinggi Garis Tubuh: 1.8em
Lihat juga: Divi: Cara menyesuaikan keranjang dan ikon pencarian dari modul "Menu Lebar Penuh"
Selanjutnya, buka pengaturan subtitle dan sesuaikan font.
- Font Teks: Nunito
- Berat Huruf Subtitel: Tebal
- Warna Teks: #000000
Terakhir, ubah ukuran teks
- Ukuran Teks Subjudul:
- Desktop: 56px
- Bergerak: 32px
- Tinggi Baris Subtitle: 1.2em
Kustomisasi tombol #1
Selanjutnya, kita akan menyesuaikan gaya tombol. Mulailah dengan mengaktifkan gaya khusus untuk tombol satu, lalu sesuaikan ukuran teks.
- Gunakan Gaya Kustom Untuk Tombol: YA
- Tombol Satu Ukuran Teks: 14px
Tambahkan gradien latar belakang ke tombol. Nilai gradiennya adalah sebagai berikut:
- 58%: #316EFF
- 100%: #1D2B60
- Arah Gradien: 90 derajat
Selanjutnya, sesuaikan pengaturan perbatasan dan pengaturan font.
- Tombol Satu:
- Lebar Perbatasan: 0px
- Radius Perbatasan: 80px
- Spasi Huruf: 2px
- Font: Nunito
- Berat Huruf: Sangat Tebal
- Gaya: TT (Kapital)
- Tampilkan Ikon Tombol Satu: TIDAK
Selanjutnya, sesuaikan pengaturan margin dan padding untuk desain desktop dan tambahkan bayangan kotak.
- Tombol Satu Margin
- Atas: 200px
- Bawah: 0px
- Tombol Satu Padding:
- Atas: 16px
- Bawah: 16px
- Kiri: 2em
- Kanan: 50em
- Bayangan Kotak: Lihat Tangkapan
Gunakan pengaturan responsif untuk mengatur margin dan nilai padding yang berbeda pada perangkat seluler.
- Tombol Satu Margin-Top-Mobile: 25px
- Tombol Satu Padding-Kanan-Seluler: 10em
Kustomisasi tombol #2
Pertama, klik kanan tombol #1 dan klik Salin Tombol Satu Gaya.
Selanjutnya, klik kanan pada tombol dua dan rekatkan gaya dari tombol #1.
Sekarang kita dapat menyesuaikan tombol dua. 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:
- Atas: 0px
- Bawah: 0px
- Kiri: 30%
- Tombol Dua Padding:
- Atas: 16px
- Bawah: 16px
- Kiri: 48em
- Kanan: 2em
Gunakan pengaturan responsifq untuk menyetel nilai margin dan padding yang berbeda untuk desain seluler.
- Tombol Dua Margin-Kiri-Seluler: 5%
- Tombol Dua Padding:
- Kiri-Seluler: 35%
- Seluler Kanan: 5%
CSS khusus
Akhirnya, sebagian besar pekerjaan desain selesai. Sekarang kita perlu menambahkan CSS khusus untuk menyelesaikan desain. Beralih ke tab Advanced dan buka bagiannya Kustom CSS.
Pertama, mari kita mulai dengan CSS untuk gambar header. CSS ini memungkinkan gambar header ditampilkan di atas tombol.
z-index: 1;
position:relative;
Selanjutnya, kustom CSS dalam judul. Kami akan menetapkan nilai yang berbeda untuk tampilan desktop dan seluler menggunakan pengaturan responsif.
Untuk komputer 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.
Baca juga: Divi: Cara membuat bagian anggota tim sebagai korsel
Unduh DIVI Sekarang!!!
Kesimpulan
Modul Fullwidth Header memungkinkan Anda dengan mudah membuat bagian Pahlawan yang cantik untuk mengiklankan layanan Anda dan memberi tahu Anda pengunjung apa yang kamu bicarakan situs jaringan.
Pengaturan bawaan memudahkan untuk menyesuaikan setiap aspek header, dan semuanya ada di satu tempat, jadi tidak perlu beralih di antara beberapa modul untuk membangun bagian Pahlawan Anda.
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.
...
