Divi: Cara memasukkan tombol gulir ke bawah dalam modul Fullwidth Header

Apakah Anda ingin menambahkan modul Fullwidth Header Anda dari Divi tombol gulir ke bawah?

Modul Header Lebar Penuh dari Divi termasuk tombol yang memberi tahu pengguna bahwa mereka dapat menggulir ke bawah. Setelah mereka mengkliknya, mereka secara otomatis diarahkan ke bagian berikutnya. Ini adalah tombol sederhana dengan banyak ikon untuk dipilih dan warna serta ukurannya dapat disesuaikan sepenuhnya. 

Pada artikel ini, kita akan melihat cara menyesuaikannya dan melihat empat tombol gulir ke bawah yang dapat Anda sertakan dalam modul Fullwidth Header Anda. Kita juga akan melihat cara menyesuaikannya dengan CSS untuk opsi desain yang lebih banyak lagi.

Ayo mulai!

Ikhtisar tombol gulir ke bawah

Pertama, mari kita lihat desain yang akan kita buat di artikel ini.

Contoh 1

Contoh 2

Unduh DIVI sekarang!!!

Contoh 3

Contoh 4

Unduh DIVI sekarang!!!

Tombol gulir ke bawah Desain tajuk lebar penuh

Pertama, kita akan membuat desain header lebar penuh. Saya membangunnya dari awal menggunakan desain dari paket tata letak terapi gratis tersedia di Divi . Buat halaman baru dan tambahkan modul header lebar penuh ke bagian lebar penuh baru.

Lihat juga: Divi: Cara membuat bagan organisasi dengan modul Blurb

Pembagi bagian lebar penuh

Kami akan menambahkan Pembagi untuk header lebar penuh ini. Buka pengaturan bagian lebar penuh .

Kemudian gulir ke bawah ke Pembagi . Klik pada tab Bawah dan pilih gaya pemisah ke-8. Atur warnanya ke #e5e8f0 dan masukkan 10vw untuk tingginya. Tutup pengaturan bagian.

• Pembagi: Rendah
• Gaya: gaya ke-8
• Warna: #e5e8f0
• Tinggi: 10vw

Teks Tajuk

Selanjutnya, buka modul Fullwidth Header dan tambahkan judul, subjudul, dan teks tombol Anda. Hapus teks tiruan untuk isi bagian tubuh dan biarkan kosong.

• Judul: Mulailah Perjalanan Anda untuk Merasa Lebih Baik Hari Ini.
• Subtitle: Leslie Saidon, Terapis berlisensi
• Tombol #1: Buat Janji Temu
• bodysuit: tidak ada

Gambar tajuk

Gulir ke Images dan pilih gambar header. Saya memilih gambar yang disediakan dengan Paket Tata Letak Terapi.

Latar belakang tajuk

Gulir ke Latar Belakang. Hapus warna latar belakang dan pilih tab Gradien Latar Belakang.

• Gradien Berhenti:
  • 25%: #2e5b61
  • 100%: RGBA (46, 91, 97, 0,5)

memungkinkan Tempatkan gradien di atas gambar latar belakang .

• Gradien Persegi Di Atas Gambar Latar Belakang : YA

Gambar latar belakang header lebar penuh

Kemudian pilihTab Gambar Latar Belakang dan pilih gambar layar penuh. Saya menggunakan gambar lain dari Paket Tata Letak Terapi.

• Posisi Gambar Latar Belakang: Tengah Atas

Tata letak tajuk lebar penuh

Kemudian pilihtab desain dan aktifkan Buat Layar Penuh .

• Jadikan Layar Penuh: YA

Ikon gulir ke bawah header lebar penuh

Kemudian aktifkan Tampilkan Tombol Gulir Ke Bawah. Kami akan menata tombol ini dalam contoh kami, jadi kami akan membiarkannya dalam pengaturan default untuk saat ini.

• Tampilkan Tombol Gulir Bawah: YA

Gambar Header

Kemudian gulir ke bawah ke Gambar dan ubah sudut membulat kiri atas menjadi 200px untuk desktop. Atur sisa sudut membulat ke 0px. Ubah sudut membulat menjadi 100 piksel untuk tablet dan ponsel.

• Gambar Sudut Bulat:
  • Desktop: 200px kiri atas, 0px semua lainnya
  • Tablet dan Telepon: 100px kiri atas, 0px semua lainnya

Teks judul tajuk

Kemudian gulir ke bawah ke Teks Judul. Gunakan H1 untuk level heading. Pilih Cormorant Garamond untuk font judul, atur bobot menjadi Bold dan warna ke #e1ecea.

• Judul:
  • Tingkat Pos: H1
  • Font: Cormorant Garamond
  • Berat Huruf: Tebal
  • Warna Teks: #e1ecea

Kemudian atur ukuran untuk ketiga ukuran layar. Gunakan 90 piksel untuk desktop, 40 piksel untuk tablet, dan 24 piksel untuk ponsel. Ubah tinggi garis menjadi 1.1em.

• Ukuran Teks Judul: 90px, 40px, 24px
• Judul Baris Tinggi: 1,1 em

Teks subtitle header lebar penuh

Kemudian gulir ke bawah ke Teks Subjudul. Ubah font menjadi Inter, berat menjadi tebal, dan warna menjadi #e1ecea.

• Sub judul:
  • Font: Inter
  • Berat Huruf: Tebal
  • Warna Teks: #e1ecea

Mengatur ukuran pada 22px untuk desktop, 20px untuk tablet, dan 16px untuk ponsel. Ubahlah tinggi baris pada 1,6 em.

• Ukuran Teks Subjudul: 22px, 20px, 16px
• Tinggi Baris Subtitle: 1,6 em

tombol tajuk

Gulir ke bawah ke Pengaturan Tombol Satu dan aktifkan Gunakan Gaya Kustom untuk Tombol Satu . Ubah ukurannya menjadi 14px, warna teks menjadi #2e5b61, dan warna latar belakang menjadi #e1ecea.

• Gunakan Gaya Kustom Untuk Tombol Satu: YA
• Tombol Satu
  • Ukuran Teks: 14px
  • Warna Teks: #2e5b61
  • Latar belakang: #e1ecea

Ubah lebar perbatasan pada 0px dan radius perbatasan pada 50px. Gunakan Inter untuk font dan ubah bobot menjadi semi-tebal.

• Tombol Satu:
  • Lebar Perbatasan: 0px
  • Radius Perbatasan: 50px
  • Font: Inter
  • Berat: Tebal

untuk bantalan tombol , gunakan 20px untuk Atas dan Bawah dan 40px untuk Kiri dan Kanan.

• Tombol Satu Padding: 20 px atas dan bawah, 40 px kiri dan kanan

Baca juga: Divi: Cara membuat bagian Fluid Hero

Contoh tombol gulir ke bawah

Sekarang setelah kita memiliki header lebar penuh, mari kita lihat cara menyesuaikan tombol gulir ke bawah. Kita akan melihat empat contoh dengan berbagai kombinasi ikon, warna, dan ukuran.

Tombol gulir ke bawah mencakup tiga parameter. Setiap pengaturan dapat disesuaikan secara independen untuk setiap ukuran layar. Parameter meliputi:

• Pemilihan ikon - pilih dari 11 ikon. Mereka mencakup berbagai desain panah dengan atau tanpa latar belakang, termasuk tidak dilingkari, dilingkari, dan padat.
• Warna – pemilih warna Divi standar.
• Ukuran – penyesuaian ukuran Divi standar.

Ini juga mencakup bidang CSS di tab Lanjutan. 

Kami akan menggunakan semua parameter ini.

Lihat juga: Divi: 5 overlay topeng dan pola yang berlaku untuk gambar latar belakang

Contoh 1

Untuk contoh pertama kami, kami akan menggunakan ikon yang tidak dilingkari tanpa latar belakang. Pilih ikon pertama, ubah warnanya menjadi #e1ecea, dan ubah ukurannya menjadi 66px untuk desktop, 60px untuk tablet, dan 50px untuk ponsel.

• Ikon: ikon pertama
• Warna: #e1ecea
• Ukuran: 66px (Desktop dan Tablet), 50px (Telepon)

Ini menciptakan panah bawah hijau muda yang bekerja dengan baik dengan sisa desain dan cukup menonjol untuk memberi tahu pengguna.

Contoh 2

Untuk contoh kedua kami, kami akan menggunakan ikon yang dilingkari. Pilih ikon ketujuh dan ubah warnanya menjadi #e8c553. Kita akan memperbesar ikon untuk yang satu ini. Ubah ukurannya menjadi 78px untuk desktop, 70px untuk tablet, dan 60px untuk ponsel.

• Ikon: ikon ke-7
• Warna: #e8c553
• Ukuran: 78px (Desktop), 70px (Tablet), 60px (Ponsel)

Warna ini merupakan variasi dari warna kuning dalam paket tata letak, tetapi lebih terang dan bekerja paling baik pada latar belakang hijau. Ikon memiliki sudut yang tajam, tetapi lingkarannya cocok dengan desain tata letak yang membulat.

Contoh 3

Untuk contoh ketiga kami, kami akan menggunakan ikon yang memiliki lingkaran di sekitarnya dan latar belakang. Ini mewarnai latar belakang dan membuat ikon dengan bukaan yang mengungkapkan gambar latar belakang situs jaringan. 

Untuk hasil terbaik, kita perlu memperhatikan ukuran ikon dan warna latar tombol.

Pilih ikon kedelapan dan ubah warnanya menjadi #0e4951. Atur ukurannya menjadi 60px untuk desktop, 56pc untuk tablet, dan 50px untuk ponsel.

• Ikon: ikon ke-8
• Warna: #0e4951
• Ukuran: 60px (Desktop), 56px (Tablet), 50px (Ponsel)

Hijau adalah warna hijau yang lebih gelap di latar belakang. Warna yang lebih gelap menonjol dengan warna hijau dan masih cocok dengan tata letak lainnya.

Contoh 4

Bagaimana jika Anda ingin menggabungkan warna sehingga Anda memiliki warna latar belakang di belakang ikon guntingan? Kita bisa melakukan ini dengan CSS. 

Untuk contoh ini, kita akan menggunakan CSS untuk membuat bentuk latar belakang di belakang ikon yang akan ditampilkan melalui ikon potongan. Ikon itu sendiri akan menggunakan pengaturan standar.

Pilih ikon kesebelas dan ubah warnanya menjadi #e1ecea. Kami akan mengatur ikon yang lebih kecil untuk yang satu ini dan membuat bentuk latar belakang yang besar. Ubah ukurannya menjadi 50px untuk desktop, 40px untuk tablet, dan 30px untuk ponsel.

• Ikon: 11^th
• Warna: #e1ecea
• Ukuran: 50px (Desktop), 40px (Tablet), 30px (Ponsel)

Lalu pergi ke tab Advanced dan gulir ke lapangan Tombol Gulir ke Bawah dan masukkan CSS ini:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

Format CSS ini menambahkan padding ke atas, kanan, bawah, dan kiri. Saya menggunakan padding ini untuk membuat oval latar belakang yang cocok dengan desain header menggunakan panduan desain layout.

Hasil dari berbagai contoh

Contoh 1

Contoh 2

Unduh DIVI sekarang!!!

Contoh 3

Contoh 4

Unduh DIVI sekarang!!!

Kesimpulan

Ini adalah ikhtisar kami tentang empat tombol gulir ke bawah yang dapat Anda sertakan dalam modul Fullwidth Header Divi Anda. Tombol gulir mencakup beberapa ikon untuk dipilih dan Anda dapat mengatur warna dan ukurannya. 

Dengan menggunakan bidang CSS, Anda dapat menyesuaikan tombol lebih lanjut. Kombinasi opsi gaya tombol dan CSS memberi Anda banyak kemungkinan desain dengan tombol gulir ke bawah.

Semoga bermanfaat untuk blog anda selanjutnya. 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.

...