Cara Membuat Bagian Pahlawan yang Menghentikan dengan Divi

Bagian pahlawan; mereka melayani semua jenis tujuan. Mereka adalah hal pertama yang dilihat pengunjung ketika mereka mengunjungi situs web Anda, mereka segera menunjukkan gaya situs web Anda dan mereka memengaruhi cara pengunjung Anda merasakan dan berperilaku di situs Anda. Kami sudah terbiasa dengan semua jenis bagian pahlawan di luar sana, tetapi kebanyakan dari mereka menyertakan gambar pahlawan, tagline, dan ajakan bertindak. Ada kemungkinan lain juga, meskipun. Dalam posting ini, kami akan menunjukkan pendekatan lain pada bagian pahlawan dan kami akan menindaklanjutinya dengan contoh yang dapat Anda buat ulang menggunakan Divi.

Contoh

Contoh yang akan kami tunjukkan kepada Anda cara membuat ulang dengan Divi terlihat seperti ini di desktop:

Dan seperti ini di ponsel:

Cara Membuat Bagian Pahlawan Anda Menonjol

Sebelum kami menunjukkan cara membuat ulang contoh, mari kita lihat beberapa faktor yang membedakan bagian pahlawan ini dari yang lain.

1. Logo Besar, Deskriptif, dan Terpusat

Hal pertama yang kami gunakan dalam contoh kami, untuk membantu membuat bagian pahlawan kami menonjol, adalah format header terpusat, bukan default. Bersamaan dengan itu, kami juga menggunakan menu transparan yang akan membantu menumpang tindih item menu dengan desain bagian pahlawan. Tautan antara logo, menu, dan situs web lebih jelas saat menggunakan latar belakang transparan karena ada satu divisi yang lebih sedikit di bagian pahlawan.

2. Konsentrasikan Konten Tertulis

Hal lain yang dapat Anda lakukan untuk membuat bagian pahlawan Anda menonjol adalah berkonsentrasi pada konten tertulis yang Anda miliki. Dengan begitu, Anda akan menarik perhatian pengunjung ke satu tempat di layar yang membuat kesempatan mereka untuk membacanya lebih besar. Jika Anda, di sisi lain, membagi konten tertulis di seluruh bagian pahlawan Anda, perubahannya kemungkinan besar akan kehilangan bagian dari pesan yang Anda coba sampaikan.

3. Sorot Proposisi Penjualan Unik

Biasanya, bagian pahlawan berisi Modul Teks normal yang membagikan tagline produk atau perusahaan. Namun, Anda juga dapat menggunakan Modul Blurb di dalam bagian pahlawan. Modul Blurb ini sempurna jika Anda ingin langsung membagikan proposisi penjualan unik produk atau layanan Anda. Selain itu, Anda juga dapat memilih apakah Anda ingin segera menyertakan ajakan bertindak di dalamnya. Dalam contoh kami, ajakan bertindak ini dibangun ke dalam modul uraian itu sendiri.

4. Gambar Produk Bersih

Untuk melengkapinya, dan untuk menyeimbangkan konten tertulis yang Anda berikan, sebaiknya gunakan gambar produk yang bersih sebagai gambar latar belakang bagian pahlawan Anda. Anda ingin citra pahlawan Anda sekualitatif dan sejelas mungkin tanpa mengambil alih seluruh bagian pahlawan.

Cara Membuat Bagian Pahlawan yang Menghentikan dengan Divi

Berlangganan Saluran Youtube Kami

Buat Ulang Contoh dengan Divi

Sekarang kita telah membahas sisi teoretis, saatnya kita mulai membuatnya kembali.

Format Tajuk

Hal pertama yang harus Anda lakukan adalah memilih 'Centered' sebagai Header Style dengan masuk ke Dashboard WordPress > Customize > Header & Navigation > Header Format > Dan pilih 'Centered' sebagai Header Style'.

Pengaturan Bilah Menu Utama

Kemudian, kembali ke Header & Navigation > Primary Menu Bard > Dan lakukan penyesuaian berikut:

• Tinggi Menu: 211px
• Tinggi Maks Logo: 100px
• Ukuran Teks: 16
• Spasi Huruf: 2
• Font: Lato Light
• Gaya Font: Huruf Besar
• Warna Teks: #FFFFFF
• Warna Tautan Aktif: #FFFFFF
• Warna Latar Belakang: rgba(255,255,255,0)
• Warna Latar Menu Dropdown: rgba(255,255,255,0)

Tambahkan Bagian Baru

Setelah selesai, tambahkan halaman baru, aktifkan Divi Builder, aktifkan Visual Builder dan tambahkan bagian standar baru.

Latar Belakang Gradien

Gunakan latar belakang gradien berikut untuk bagian ini:

• Warna Pertama: #e2e2e2
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Linier
• Arah Gradien: 180 derajat
• Posisi Awal: 40%
• Posisi Akhir: 40%

Gambar latar belakang

Selanjutnya, upload gambar latar belakang dan pilih 'Multiply' sebagai Background Image Blend.

Tambahkan Baris Dua Kolom

Warna latar belakang

Tambahkan baris dua kolom ke bagian yang baru saja Anda buat dan gunakan '#b7afa1' sebagai warna latar belakang.

Kolom 1 Latar Belakang Gradien

Gulir ke bawah dan gunakan latar belakang gradien berikut untuk kolom pertama:

• Warna Pertama: rgba (255,255,255,0.43)
• Warna Kedua: rgba (255,255,255,0)
• Kolom 1 Jenis Gradien: Radial
• Arah Gradien Kolom 1: Kiri Atas
• Kolom 1 Posisi Awal: 49%
• Posisi Akhir Kolom 1: 49%

Kolom 2 Latar Belakang Gradien

Dan gunakan latar belakang gradien berikut untuk kolom kedua:

• Warna Pertama: rgba (255,255,255,0.43)
• Warna Kedua: rgba (255,255,255,0)
• Kolom 2 Jenis Gradien: Radial
• Kolom 2 Arah Radial: Kanan Bawah
• Kolom 2 Posisi Awal: 49%
• Posisi Akhir Kolom 2: 49%

Perekat

Buka tab Desain, aktifkan opsi 'Gunakan Lebar Talang Kustom' dan gunakan '1' untuk Lebar Talang.

Jarak

Buka subkategori Spasi dan gunakan padding dan margin berikut:

• Padding Atas: 0px (Desktop), 20px (Tablet & Ponsel)
• Padding Kanan: 25px
• Padding Bawah: 20px
• Padding Kiri: 25px
• Margin Bawah: 200px

Modul Blurb Pertama

Aktifkan Ikon

Tambahkan Modul Blurb ke kolom pertama baris, aktifkan opsi 'Gunakan Ikon' dan pilih ikon.

Pengaturan Ikon

Lalu, buka pengaturan Desain dan buat perubahan berikut pada subkategori Gambar & Ikon:

• Warna Ikon: #FFFFFF
• Penempatan Gambar/Ikon: Kiri
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 40px

Pengaturan Teks Tajuk

Kemudian, buat pengaturan berikut berlaku untuk subkategori Teks Header:

• Font Header: Roboto Light
• Gaya Font: Tebal
• Ukuran Font Tajuk: 25px
• Warna Teks Tajuk: #FFFFFF
• Tinggi Garis Tajuk: 1.5em

Pengaturan Teks Tubuh

Subkategori Teks Tubuh memerlukan perubahan berikut:

• Font Tubuh: Lato Light
• Ukuran Font Tubuh: 13px
• Warna Teks Tubuh: #FFFFFF

Perekat

Selanjutnya, gunakan '300px' sebagai Lebar Konten.

Jarak

Terakhir, gunakan margin dan padding berikut untuk Modul Blurb:

• Margin Atas: -50px (Desktop), 0px (Tablet & Ponsel)
• Padding Atas: 100px
• Padding Kanan: 10px
• Bantalan Bawah: 30px
• Padding Kiri: 10px

Clone Blurb Module & Tempatkan di Kolom Kedua

Lanjutkan dengan mengkloning Modul Blurb yang dibuat sebelumnya dan menempatkannya di kolom lain juga.

Ubah Warna Latar Belakang

Hal pertama yang harus Anda ubah dalam Modul Blurb kloning ini adalah warna latar belakang. Ubah menjadi 'rgba(89,60,31,0.5)'.

Ubah Ikon

Hal berikutnya dan terakhir yang perlu Anda ubah adalah ikon di dalam tab konten.

Ekstra: Tambahkan Opsi Bayangan Kotak Baru Divi ke Baris

Dengan pembaruan terbaru, Anda sekarang juga dapat menambahkan bayangan kotak ke baris, modul, dan bagian. Untuk contoh ini, kita akan menambahkan beberapa bayangan kotak ke baris. Itu akan membantu menciptakan kedalaman dan menekankan konten tertulis di bagian pahlawan kita.

• Posisi Horizontal Bayangan Kotak: -3px
• Posisi Vertikal Bayangan Kotak: 31px
• Kekuatan Kabur Bayangan Kotak: 79px
• Kekuatan Penyebaran Bayangan Kotak: -4px
• Warna Bayangan: #424242
• Posisi Bayangan Kotak: Bayangan Luar

Hasil

Mari kita ambil hasil cepat lainnya pada hasil yang seharusnya dapat Anda capai di desktop setelah mengikuti posting ini:

Dan di ponsel:

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda pendekatan yang berbeda pada bagian pahlawan. Kami telah memberi Anda beberapa tip dan menguraikan tip tersebut dengan menunjukkan kepada Anda cara membuat ulang contoh yang telah kami buat sebelumnya dengan Divi. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh Ellagrin / shutterstock.com