Apakah Anda ingin membuat bagian Hero Divi dengan modul Fullwidth Header atau mendesainnya sendiri?
Bangun bagian pahlawan dari situs jaringan dari awal atau menggunakan modul Divi Fullwidth Header adalah dua cara untuk membuat desain yang menarik untuk Anda situs web.
Pada artikel ini, kita akan melihat pro dan kontra menggunakan modul Fullwidth Header versus membuat bagian Pahlawan Anda sendiri dengan Divi.
Mari kita pergi!
Pentingnya Bagian Pahlawan Situs Web
Bagian Pahlawan adalah bagian pertama yang Anda miliki pengunjung lihat kapan mereka tiba di rumah Anda situs jaringan. Ini sering kali merupakan spanduk berukuran penuh dan juga dapat disebut sebagai Header Pahlawan. Ini adalah tempat yang menonjol di situs web Anda karena memiliki kekuatan untuk meninggalkan kesan pertama yang bertahan lama.
Baca juga: Divi: Cara menampilkan modul Fullwidth Header di layar penuh
Oleh karena itu penting untuk dirancang sedemikian rupa sehingga mudah dibaca sekaligus menarik perhatian. Bagian Pahlawan Situs Web penting karena dapat menarik perhatian calon pelanggan, mendeskripsikan laman dengan cepat, dan menghasilkan keterlibatan tambahan serta calon pelanggan potensial. Bagian pahlawan harus diberi merek, menyertakan judul H1 dan CTA.
Buat bagian Pahlawan dari awal
Mendesain bagian Pahlawan dari awal memungkinkan Anda memiliki kendali penuh atas desain dan isi. Tergantung pada situasi dan kebutuhan Anda, ini bisa menjadi solusi bagus untuk situs web Anda.
Mari kita lihat pro dan kontra dari pendekatan ini.
Manfaat dari pendekatan ini
Pertama, mari kita lihat manfaat membangun bagian Hero situs web dari awal menggunakan Divi.
- Kontrol desain penuh
- Gunakan modul Divi apa pun
Kerugian dari pendekatan ini
Sekarang mari kita lihat kerugian membuat bagian pahlawan dari awal.
- Anda harus membangun dari awal
- Membutuhkan beberapa mod
Buat bagian Pahlawan dengan modul Divi Fullwidth Header
Membuat bagian pahlawan menggunakan modul Divi Fullwidth Header memudahkan pembuatan desain responsif seluler yang menarik hanya dalam hitungan menit.
Mari kita lihat pro dan kontra dari pendekatan ini.
Manfaat dari pendekatan ini
Mari kita lihat manfaat membangun bagian Pahlawan dengan modul Divi Fullwidth Header.
- Semua milik mu isi ada dalam satu modul
- Desain sudah dioptimalkan
Kerugian dari pendekatan ini
Sekarang mari kita evaluasi kekurangan mendesain bagian Hero dengan modul Divi Fullwidth Header.
- Kurang fleksibel dengan desain
Modul Divi Fullwidth Header hadir dengan opsi untuk isi telah ditentukan sebelumnya, sementara banyak lainnya dapat dibatasi jika Anda ingin menambahkan konten yang tidak tersedia dalam modul. Ini berarti Anda akan memiliki lebih sedikit fleksibilitas dengan keseluruhan desain.
Pembangunan dua bagian Pahlawan selangkah demi selangkah
Sekarang setelah Anda memahami pro dan kontra dari kedua pendekatan, mari buat setiap bagian Pahlawan sehingga Anda dapat melihat dengan tepat cara kerja setiap pendekatan.
Buat halaman baru dengan Divi Builder
Untuk memulai, Anda perlu melakukan hal berikut:
- Instal Divi di situs WordPress Anda.
- Tambahkan halaman dan beri judul.
- Aktifkan pembuat visual
Buat bagian Pahlawan Anda dari awal
Sekarang halaman kita sudah siap, mari kita mulai membuat bagian pahlawan dari awal.
Unduh DIVI sekarang!!!
Aktifkan "Pembuat Divi"
Untuk menggunakan pembuat drag and drop Divi, kita perlu mengaktifkan Visual Builder dengan mengklik tombol “Gunakan DiviBuilder”. Ini akan memuat ulang halaman menggunakan Divi Visual Builder.
Pilih: Bangun dari awal
Sekarang halaman Anda telah dimuat ulang dengan pembuat visual diaktifkan, klik opsi “ MEMBANGUN DARI AWAL sehingga kita memiliki halaman kosong untuk dikerjakan saat mendesain.
Tambahkan baris dan konfigurasikan kolom
Buat baris dengan struktur kolom berikut.
Tambahkan mod
Sekarang mari tambahkan modul konten yang kita perlukan.
- 2 Modul Teks, pembagi, tombol di kolom kiri
- 1 Modul Gambar di kolom tengah
- 1 Modul Gambar di kolom kanan
Bagian gaya
Sekarang mari kita konfigurasikan pengaturan bagian.
Tambahkan bagian, lalu konfigurasikan pengaturan berikut:
- Latar belakang: #1d1d25
Gaya teks tajuk
Sesuaikan teks tajuk:
- Judul 1:
- Berat Huruf: Semi Tebal
- Warna Teks: #ffffff
- Ukuran Teks: 90px
- Tinggi Garis: 1,1 em
alat pemisah
Konfigurasikan pengaturan pembagi:
- Warna Garis: rgba (255,255,255,0.3)
- Berat Pembagi: 10px
- Lebar Maks: 260 piksel
teks tubuh
Sesuaikan teks isi:
- Warna Teks: rgba(255,255,255,0.7)
- Ukuran Teks: 13px
- Tinggi Garis: 1,8 em
tombol
Sekarang mari kita sesuaikan tombolnya.
Di tab Tombol:
- Gunakan Gaya Kustom Untuk Tombol: Ya
- Ukuran Teks Tombol: 14px
- Warna Teks: #ffffff
- Latar Belakang Tombol:
- Lebar Perbatasan: 0 piksel
- Radius Perbatasan: 0 piksel
Di tab Spasi:
- Atas dan Bawah: 40px
- Kiri dan Kanan: 20px
Tambahkan Gambar
Tambahkan gambar ke modul gambar.
Sesuaikan pengaturan garis
Parameter baris:
- Margin (Kiri): 15vw
Sesuaikan kolom ke-2
Di kolom kedua, konfigurasikan pengaturan ini:
CSS khusus
Rekatkan kode berikut ke bagian kode elemen utama:
argin-right: -15vw!important;
z-index: 100!important;jarak
Tambahkan 100 piksel padding atas.
Jadi ! Anda sekarang memiliki bagian Pahlawan khusus yang dirancang sepenuhnya.
Unduh DIVI sekarang!!!
Buat bagian Pahlawan Anda dengan modul Fullwidth Header Divi
Sekarang mari kita lihat cara membuat ulang bagian Pahlawan ini menggunakan modul Header Lebar Penuh Divi.
Unduh DIVI sekarang!!!
Tambahkan halaman dan pilih Bangun Dari Awal
Tambahkan halaman baru, beri judul, lalu klik “Use Divi Builder” lalu pilih Build From Scratch.
Masukkan bagian lebar penuh dan header lebar penuh
Sisipkan bagian Lebar penuh, lalu pilih Header Lebar Penuh di perpustakaan modul.
Isi
Tambahkan konten tekstual ke modul di tab Teks.
Images
Tambahkan gambar di tab gambar.
Ubah warna latar belakang
Di tab latar belakang, konfigurasikan pengaturan berikut:
- Latar Belakang: #1D1D25
Teks Tajuk
Konfigurasikan pengaturan teks header:
- Judul Font Berat: Tebal
- Ukuran Teks: 90px
teks tubuh
Konfigurasikan pengaturan teks isi:
- Warna Teks Tubuh: rgba(255,255,255,0.55)
Teks subtitel
Konfigurasikan pengaturan teks keterangan:
- Teks Teks Berat Font: Tebal
- Warna Teks: #4C594C
- Spasi Huruf: 3px
kancing-kancing
Sekarang mari kita sesuaikan kedua tombol.
tombol satu
Pada tab Button One, konfigurasikan pengaturan berikut:
- Gunakan Gaya Kustom Untuk Tombol Satu: Ya
- Tombol Satu
- Latar belakang: #4c594c
- Lebar Perbatasan: 0 piksel
- Radius Perbatasan: 0px
- Tampilkan Ikon : YA
- Hanya Tampilkan Ikon Saat Arahkan: Tidak
- Padding: 25 piksel (Atas dan Bawah); 25px (Kiri), 50px (Kanan)
Tombol Dua
Pada tab Tombol Dua, konfigurasikan pengaturan berikut:
- Gunakan Gaya Kustom Untuk Tombol Dua: YA
- Tombol Dua Lebar Perbatasan: 0 piksel
- Radius Perbatasan: 0px
- Padding: 25px (Atas, Bawah, Kiri dan Kanan)
- Tombol Kotak Bayangan: Pilih 4
- Posisi Horizontal Bayangan Kotak: 0px
- Posisi Vertikal Bayangan Kotak: 2px
- Warna Bayangan: #ffffff
Jadi ! Anda sekarang memiliki bagian Pahlawan yang dirancang penuh menggunakan modul Divi Fullwidth Header.
Lihat juga: Divi: Cara membuat transisi latar belakang antar elemen
Unduh DIVI sekarang!!!
Kesimpulan
Membangun bagian Pahlawan dengan Divi itu mudah, baik Anda membangun dari awal atau menggunakan modul Fullwidth Header. Kedua opsi tersebut memungkinkan Anda membuat desain tajuk menakjubkan yang menarik minat Anda pengunjung.
Bergantung pada kebutuhan unik Anda, salah satu opsi adalah opsi yang bagus untuk dipertimbangkan saat menata bagian Pahlawan Anda.
Setelah membaca pro dan kontra dari keduanya, bagaimana Anda mendesain 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 membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan 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.
...
