Apakah Anda ingin membuat bagian Hero Divi dengan modul Fullwidth Header atau mendesainnya sendiri?
Membangun bagian hero situs web dari awal atau menggunakan modul Divi Fullwidth Header adalah dua cara untuk membuat desain yang menarik bagi situs web Anda.
Pada artikel ini, kita akan membahas kelebihan dan kekurangan penggunaan modul Fullwidth Header dibandingkan dengan membuat bagian Hero sendiri menggunakan Divi.
Mari kita pergi!
Pentingnya bagian hero pada situs web.
Bagian Hero adalah bagian pertama yang dilihat pengunjung saat mereka tiba di situs web Anda. Biasanya berupa banner lebar penuh dan juga bisa disebut Header Hero. Ini adalah tempat yang menonjol di situs web Anda karena memiliki kekuatan untuk memberikan kesan pertama yang abadi.
Baca juga: Divi: Cara menampilkan modul Fullwidth Header di layar penuh
Oleh karena itu, penting agar desainnya mudah dibaca sekaligus menarik dan persuasif. Bagian hero (bagian utama) pada situs web penting karena dapat menarik perhatian calon pelanggan, menjelaskan halaman secara singkat, dan mengarah pada keterlibatan lebih lanjut serta potensi prospek. Bagian hero harus ditandai dengan jelas, menyertakan judul H1, dan ajakan bertindak (call to action/CTA).
Buat bagian Pahlawan dari awal
Mendesain bagian Hero dari awal memberi Anda kendali penuh atas desain dan konten. Tergantung pada situasi dan kebutuhan Anda, ini bisa menjadi solusi yang sangat baik untuk situs web Anda.
Mari kita lihat pro dan kontra dari pendekatan ini.
Manfaat dari pendekatan ini
Pertama, mari kita periksa keuntungan membuat bagian Hero situs web dari awal menggunakan Divi.
- Kontrol desain penuh
- Gunakan modul Divi apa pun
Kerugian dari pendekatan ini
Sekarang mari kita lihat kekurangan membuat bagian hero dari awal.
- Anda harus membangun dari awal
- Membutuhkan beberapa mod
Buat bagian Pahlawan dengan modul Divi Fullwidth Header
Membuat bagian hero menggunakan modul Divi Fullwidth Header memudahkan pembuatan desain yang menarik, ramah seluler, dan responsif hanya dalam hitungan menit.
Mari kita lihat pro dan kontra dari pendekatan ini.
Manfaat dari pendekatan ini
Mari kita lihat keuntungan membangun bagian Hero dengan modul Divi Fullwidth Header.
- Semua konten Anda 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 konten yang telah ditentukan sebelumnya, tetapi opsi ini bisa terbatas jika Anda ingin menambahkan konten yang tidak tersedia di modul tersebut. Ini berarti Anda akan memiliki fleksibilitas yang lebih sedikit dalam hal desain keseluruhan.
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 "Divi Builder"
Untuk menggunakan fitur drag-and-drop builder Divi, kita perlu mengaktifkan Visual Builder dengan mengklik tombol tersebut. "Gunakan Divi Builder". Ini akan memuat ulang halaman menggunakan Divi Visual Builder.
Pilih: Bangun dari awal
Setelah halaman Anda dimuat ulang dengan visual builder diaktifkan, klik "opsi".MEMBANGUN DARI AWAL"agar kita memiliki halaman kosong untuk dikerjakan selama fase desain."
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 judul
Sesuaikan teks header:
- 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 Jarak:
- 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
Tempelkan 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 bagaimana cara membuat ulang bagian Hero ini menggunakan modul Fullwidth Header dari Divi.
Unduh DIVI sekarang!!!
Tambahkan halaman dan pilih Bangun Dari Awal
Tambahkan halaman baru, beri judul, lalu klik "Gunakan Divi Builder" dan kemudian pilih Buat dari Awal.
Masukkan bagian lebar penuh dan header lebar penuh
Sisipkan bagian Lebar penuh, lalu pilih Header Lebar Penuh di perpustakaan modul.
Isi
Tambahkan konten teks ke modul di tab Teks.
Foto
Tambahkan gambar di tab gambar.
Ubah warna latar belakang
Pada tab latar belakang, konfigurasikan pengaturan berikut:
- Latar Belakang: #1D1D25
Teks judul
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 Tombol Satu, 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 ! Sekarang Anda memiliki bagian Hero yang sepenuhnya didesain menggunakan modul Divi Fullwidth Header.
Lihat juga: Divi: Cara membuat transisi latar belakang antar elemen
Unduh DIVI sekarang!!!
Kesimpulan
Membangun bagian Hero dengan Divi itu mudah, baik Anda membangunnya dari awal atau menggunakan modul Fullwidth Header. Kedua opsi tersebut memungkinkan Anda untuk membuat desain header yang menakjubkan yang menarik perhatian pengunjung Anda.
Tergantung pada kebutuhan unik Anda, kedua opsi tersebut merupakan pilihan yang bagus untuk dipertimbangkan saat menata bagian Hero 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.
...