Apakah Anda ingin menyesuaikan modul Header Lebar Penuh Divi dengan menyeimbangkan tombol utama dan sekunder?
Modul Divi Fullwidth Header memudahkan untuk menambahkan bagian Hero yang cantik ke situs jaringan. Modul ini dilengkapi dengan dua tombol, teks judul, teks subtitle, teks isi, logo dan gambar yang membuat opsi penyesuaian tidak terbatas.
Pada artikel hari ini, kami akan menunjukkan cara membuat ulang Bagian Pahlawan menggunakan Tajuk Lebar Penuh Divi. Kami akan memulai desain kami menggunakan 3 paket tata letak siap pakai dan mendesain bagian kami dengan fokus pada keseimbangan tombol primer dan sekunder.
Kami ingin tombol utama menonjol karena ini adalah ajakan bertindak utama kami sambil menjaga tombol sekunder tetap terlihat dan dapat diakses tanpa menyalip tombol utama.
Prinsip desain tombol primer dan sekunder
Tombol primer dan tombol sekunder membantu memandu pengunjung anda situs jaringan terhadap saham tertentu. Tombol utama biasanya adalah tindakan yang paling umum atau diinginkan dan tombol sekunder adalah tindakan yang kurang umum. Ini membantu memandu pengunjung ke mana mereka ingin pergi.
Untuk melakukan ini, tombol utama harus menonjol secara visual dan tombol sekunder tidak terlalu menonjol. Artinya, tombol-tombol utama harus lebih khas dan memiliki bobot visual yang lebih besar agar lebih menarik perhatian.
Sekarang setelah kita memahami cara kerja tombol primer dan sekunder, mari kita ke tutorialnya!
penelitian
Berikut adalah tiga header lebar penuh yang akan kita desain hari ini.
Mari kita mulai dengan membuat halaman baru dengan Divi Builder
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Baca juga: Divi: Cara Menggunakan Masker dan Pola Latar Belakang untuk Bagian Pahlawan
Desain contoh pertama
Sekarang halaman kita sudah diatur, mari kita mulai dengan header lebar penuh dari halaman arahan UX.
Mengonfigurasi halaman kami
Sebelum kita dapat mulai menyesuaikan, kita perlu memuat paket tata letak yang telah ditentukan sebelumnya UX dari perpustakaan Divi. Saat Anda mengaktifkan Visual Builder, Anda akan melihat tiga opsi muncul, pilih Jelajahi Tata Letak.
Muat Paket Tata Letak
Untuk memuat paket tata letak UX di halaman Anda:
- Di tab “Tata Letak Premade”, gunakan fungsi pencarian untuk menemukan paket tata letak UX.
- Setelah Anda menemukannya, klik di atasnya. Ini akan memunculkan detail tata letak dan halaman yang tersedia.
- Klik Pendaratandan klik “Gunakan Tata Letak Ini”.
Kami akan membuat ulang bagian atas tata letak sebagai modul Header Lebar Penuh.
Hapus bagian pertama
Karena kita akan membuat ulang bagian pertama menggunakan modul Fullwidth Header, kita perlu menghapus bagian ini. Arahkan kursor ke bagian tersebut dan klik ikon tempat sampah.
Tambahkan bagian lebar penuh
Sebelum kita dapat menambahkan header fullwidth, kita perlu menambahkan bagian fullwidth.
Klik panah "+" untuk menampilkan bagian Divi lalu klik "Lebar penuh". Ini secara otomatis akan memunculkan perpustakaan Divi Fullwidth Module.
Tambahkan tajuk lebar penuh
Di pustaka modul Divi Fullwidth, klik " Header Lebar Penuh".
Tambahkan konten
Sebelum kita mulai menyesuaikan modul, mari tambahkan isi diperlukan untuk modul ini.
Tambahkan konten tekstual
Di bawah tab Teks, tambahkan isi selanjutnya:
- Judul: Tingkatkan Pengetahuan Desain UX Anda
- Subjudul: Kursus Desain UX
- Tombol #1: Ikhtisar Kursus
- Tombol #2: Pelajari Lebih Lanjut
- Tubuh: default
Tambahkan Gambar
Sekarang kita punya milik kita isi teks di tempatnya, kita perlu menambahkan dua gambar ke desain kita.
- Di tab Images, tambahkan gambar logo (bintang) dan gambar header (foto orang yang memegang telepon).
Ubah warna latar belakang
Di tab Latar Belakang, konfigurasikan parameter ini:
- Warna Latar Belakang: #131517
Sesuaikan Header Lebar Penuh
Sekarang konten kita sudah diatur, mari tambahkan beberapa gaya ke dalamnya melalui Mendesain.
Gulir ke bawah ikon
Mari tambahkan ikon gulir ke bawah, panah bawah.
- Tampilkan Tombol Gulir ke Bawah: YA.
- Pilih ikon panah bawah.
- Gulir ke Bawah Warna Ikon: #000
Gambar
Mari tambahkan kurva ke gambar kita dengan membulatkan sudutnya.
Di tab Gambar, konfigurasikan pengaturan berikut:
- Gambar Sudut Bulat : Klik tombol tautan rantai untuk memutuskan tautan sudut, lalu ketik 1000px di kotak input kiri bawah dan kanan bawah. Ini akan membulatkan sudut kiri bawah dan kanan bawah gambar kita.
Teks judul
Di sini, mari kita sesuaikan teks judul modul ini. Di tab Teks Judul, konfigurasikan setelan ini:
- Judul:
- Font: PT Sans
- Berat Huruf: Tebal
- Ukuran Teks: 5 rem
- Tinggi Garis: 1,2 em
Tubuh teks
Di sinilah kami menyesuaikan teks isi untuk modul ini. Di tab Teks Tubuh, konfigurasikan setelan ini:
- Font Tubuh: Mukta
- Ukuran Teks Tubuh: 18px
Teks subtitel
Di sinilah kami menyesuaikan teks keterangan untuk modul ini. Di tab Teks Subjudul, konfigurasikan setelan ini:
- Sub judul:
- Font: Mukta
- Berat Huruf: Tebal
- Gaya: huruf besar
- Warna Teks: #13d678
- Spasi Huruf: 3px
tombol satu
Di sinilah kita dapat menentukan gaya khusus untuk tombol satu: tombol utama. Di tab TombolSatu, konfigurasikan setelan ini:
- Gunakan Gaya Kustom Untuk Tombol Satu : YA
- Tombol Satu:
- Warna Teks: #ffffff
- Warna Latar Belakang: #13d678
- Lebar Perbatasan: 0 piksel
- Radius Batas: 100px
- Font: Mukta
- Berat Huruf: Tebal
- Tampilkan Tombol Satu Ikon: YA
- Ikon: Panah kanan
- Hanya Tampilkan Ikon Saat Melayang untuk Tombol Satu: Tidak
Tombol Dua
Sekarang, mari sesuaikan yang kedua: tombol sekunder. Di tab Tombol Dua, konfigurasikan setelan ini:
- Gunakan Gaya Kustom Untuk Tombol: YA
- Tombol Dua
- Warna Teks: #ffffff
- Warna Latar Belakang: #303030
- Lebar Perbatasan: 0 piksel
- Radius batas: 100 piksel
- Font: Mukta
- Berat Huruf: Tebal
- Tampilkan Tombol Dua Ikon: Ya
- Tombol Dua Ikon: Panah Kanan
- Hanya Tampilkan Ikon Pada Tombol Arahkan Dua: YA
Tambahkan tautan tombol
Jangan lupa untuk menambahkan tautan ke tombol Anda! Di tab Link, konfigurasikan pengaturan berikut:
- Tombol #1 Link URL: Tempelkan URL tombol 1 di sini.
- Tombol #1 Link URL: Tempelkan URL tombol 2 di sini.
Simpan pekerjaan Anda
Sekarang setelah kami memiliki header fullwidth yang dirancang sepenuhnya, pastikan untuk menyimpan desain Anda!
- Klik panah hijau di kanan bawah jendela modul.
- Save
- Keluar dari VisualBuilder.
Baca juga: Divi: Cara membuat bagian Fluid Hero
Selamat bereksperimen
Cara untuk menyesuaikan modul Divi Fullwidth Header tidak terbatas. Memanfaatkan tombol utama dan tombol sekunder dapat membantu mengarahkan Anda pengunjung ke halaman yang Anda ingin mereka lihat atau ambil tindakan (seperti mengirimkan permintaan) yang Anda ingin mereka ambil.
Mari kita lihat dua contoh lagi dari header lebar penuh yang memiliki tombol utama yang menonjol.
Header lebar penuh dari paket "Pusat Pensiun"
Gaya Tombol
Mari kita lihat gaya tombol primer dan sekunder yang unik.
tombol satu
Pada tab Button One, konfigurasikan pengaturan berikut:
- Gunakan Gaya Kustom Untuk Tombol Satu: YA
- Tombol Satu:
- Ukuran Teks: 14px
- Warna Teks: #ffffff
- Warna Latar Belakang: #0a0a0a
- Lebar Perbatasan: 0 piksel
- Radius Batas: 10px
- Spasi Huruf: 3px
- Berat Huruf: Tebal
- Gaya Huruf: TT
- Hanya Tampilkan Ikon Saat Melayang untuk Buttpn One : YA
- Tombol Satu Padding: 15px (Atas dan Bawah), 25px (Kiri dan Kanan)
Tombol Dua
Di tab Tombol Dua, konfigurasikan pengaturan berikut:
- Gunakan Gaya Kustom Untuk Tombol: YA
- Tombol Dua:
- Ukuran Teks: 14px
- Warna Teks: #ffffff
- Warna Latar Belakang: #0a0a0a
- Lebar Perbatasan: 0 piksel
- Radius Batas: 10px
- Berat Huruf: Tebal
- Gaya Huruf: TT
- Padding Tombol Dua: 10px (Bawah), 10px (Kiri dan Kanan)
Dan di sana Anda pergi! Dua tombol unik, satu yang menonjol dan satu lagi di kursi kedua.
Header lebar penuh dari paket "Perencanaan Keuangan"
Gaya Tombol
Mari kita lihat gaya tombol primer dan sekunder yang unik.
tombol satu
Di tab Tombol Satu, konfigurasikan pengaturan berikut:
- Gunakan Gaya Kustom Untuk Tombol Satu : YA
- Tombol Satu:
- Ukuran Teks: 18px
- Warna Teks: #ffffff
- Warna Latar Belakang: #1b4ffe
- Padding: 15px()Atas dan Bawah); 25px (Kiri dan Kanan)
Tombol Dua
Di tab Tombol Dua, konfigurasikan pengaturan berikut:
- Gunakan Gaya Kustom Untuk Tombol Dua: YA
- Tombol Dua:
- Warna Teks: #1b4ffe
- Warna Latar Belakang: Transparan
- Warna Ikon: #1b4ffe
Unduh DIVI sekarang!!!
Kesimpulan
Modul Header Lebar Penuh Divi memudahkan pembuatan bagian Pahlawan yang menakjubkan di perangkat Anda situs jaringan.
Penggunaan tombol primer dan sekunder yang strategis akan meningkatkan pengalaman pengguna Anda dan membantu pengunjung situs web mengambil tindakan yang ingin mereka ambil.
Opsi penyesuaian tidak terbatas dengan header lebar penuh, jadi bersenang-senanglah bereksperimen!
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.
...
