Memiliki ajakan bertindak yang jelas di halaman Anda adalah kebutuhan bagi sebagian besar situs. Dan cara apa yang lebih baik untuk menarik perhatian ke beberapa CTA terpenting Anda selain dengan menempatkannya di header?
Dalam tutorial hari ini, kami akan menunjukkan cara menambahkan dua tombol berdampingan ke header global Anda menggunakan Button Builder. tema dari Divi. Salah satu tombolnya adalah yang utama, yang lainnya adalah tombol sekunder. Anda juga dapat mengunduh file JSON header global secara gratis!
penelitian
Sebelum kita menyelami tutorialnya, mari kita lihat sekilas hasil pada ukuran layar yang berbeda.
Biro
1. Akses Divi Theme Builder dan buat header global
Pergi ke Pembuat Tema Divi
Mulailah dengan membuka Divi Theme Builder dan klik "Add a global header".
Buat tajuk global
Lanjutkan dengan mengklik "Build Global Header".
2. Bangun desain header secara keseluruhan
Tambahkan bagian baru
jarak
Setelah berada di dalam editor template, Anda akan melihat sebuah bagian. Buka pengaturan bagian dan hapus semua padding atas dan bawah default.
- Lapisan atas: 0px
- Lapisan bawah: 0px
Indeks Z
Pastikan juga untuk meningkatkan indeks-z bagian tersebut dalam pengaturan visibilitas. Hal ini akan memastikan bahwa isi header global akan muncul di bagian atas seluruh halaman dan memposting isi.
- Indeks Z: 99999
Tambahkan baris baru
Struktur kolom
Setelah Anda menyelesaikan pengaturan bagian, tambahkan baris baru ke bagian menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul, buka parameter garis dan biarkan garis menempati seluruh lebar bagian kontainer.
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Menyamakan ketinggian kolom: Ya
- Lebar: 100%
- Lebar maks: 100%
jarak
Juga ubah nilai isian kiri dan kanan baris.
- Padding kiri: 2vw (meja), 10vw (tablet dan telepon)
- Padding kanan: 2vw (meja), 10vw (tablet dan telepon)
Elemen utama
Untuk memusatkan semua isi kolom, kita akan menambahkan dua baris kode CSS ini ke elemen utama baris tersebut.
display: flex;align-items: center;
Hapus properti tampilan desktop di tablet dan seluler.
display: block;
Kolom 1
Batas
Lanjutkan dengan membuka pengaturan di kolom 1 dan tambahkan batas kanan di desktop saja.
- Lebar batas kanan: 1px (meja), 0px (tablet dan telepon)
- Warna tepi kanan: # d8d8d8
Indeks Z
Tingkatkan juga indeks z kolom.
- Indeks Z: 11
Kolom 2
Elemen utama
Kemudian buka pengaturan untuk kolom 2 dan tambahkan baris kode CSS berikut ke elemen kolom utama untuk mengubahnya menjadi dua kolom.
display: grid;grid-template-columns: 50% 50%;
Tambahkan modul menu ke kolom 1
Pilih menu
Saatnya mulai menambahkan modul! Tambahkan modul menu ke kolom 1 dan pilih menu pilihan Anda.
Unduh logo
Lalu unggah logo.
ketentuan
Beralih ke tab desain modul dan pastikan pengaturan tata letak berikut berlaku:
- Gaya: rata kiri
- Arah menu tarik-turun: turun
Teks menu
Kemudian ubah pengaturan teks menu.
- Warna tautan aktif: # ef6f49
- Font menu: Montserrat
- Berat font menu: Semi tebal
- Gaya font menu: huruf besar
- Warna teks menu: # 333333 (default), # ef6f49 (hover)
- Ukuran teks menu: 0.7vw (desktop), 1.8vw (tablet), 2.5vw (telepon)
- Penspasian huruf menu: 1px
Teks menu drop-down
Juga buat perubahan pada pengaturan teks di menu drop-down.
- Warna latar belakang menu drop-down: #ffffff
- Warna garis pada menu tarik-turun: # ef6f49
ikon
Selanjutnya, ubah warna ikon menu hamburger.
- Warna ikon menu Hamburger: # 000000
perekat
Juga tambahkan lebar logo maksimum ke parameter ukuran.
- Lebar logo maksimum: 9vw (meja), 12vw (tablet), 15vw (telepon)
Menu Logo CSS
Dan selesaikan pengaturan modul dengan menambahkan sebaris kode CSS ke logo menu di tab lanjutan.
margin-right: 10vw;
Tambahkan modul kode ke kolom 1
Tambahkan kode CSS khusus ke modul
Modul berikutnya dan terakhir yang kita butuhkan di kolom 1 adalah modul kode. Tambahkan baris kode CSS berikut untuk menyesuaikan ruang di antara item menu:
<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>
Tambahkan modul tombol pertama ke kolom 2
Tambahkan salinan
Mari lanjutkan ke modul berikutnya! Tambahkan modul tombol pertama dan masukkan salinan pilihan Anda.
Menambahkan link
Kemudian tambahkan tautan ke modul tombol.
penjajaran
Beralih ke tab desain modul dan ubah perataan tombol.
- Perataan tombol: Kanan
Pengaturan tombol
Juga gaya tombol.
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran teks tombol: 0.8vw (desktop), 1.7vw (tablet), 2.5vw (telepon)
- Warna teks tombol: # 000000
- Warna latar tombol: # edeef0 (default), # d6d7d8 (hover)
- Lebar batas tombol: 0px
- Jari-jari batas tombol: 0px
- Penempatan huruf tombol: 2px
- Font tombol: Montserrat
- Berat font tombol: Setengah tebal
- Gaya font tombol: huruf besar
jarak
Selesaikan pengaturan modul dengan menambahkan nilai padding kustom pada ukuran layar yang berbeda.
- Lapisan atas: 1vw (desktop), 2vw (tablet), 3vw (telepon)
- Lapisan bawah: 1vw (meja), 2vw (tablet), 3vw (telepon)
- Padding kiri: 2vw (desktop), 4vw (tablet), 6vw (ponsel)
- Padding kanan: 2vw (meja), 4vw (tablet), 6vw (telepon)
Modul tombol klon
Setelah Anda menyelesaikan modul tombol pertama, tiru itu.
Edit tautan
Buka modul tombol duplikat dan ubah URL-nya.
Ubah perataan
Ubah juga kesejajaran modul.
- Perataan tombol: kiri
Ubah pengaturan tombol
Juga buat perubahan pada pengaturan tombol.
- Warna teks tombol: #ffffff
- Warna latar tombol: # ef6f49 (default), # e06945 (hover)
Arahkan skala transformasi
Selesaikan pengaturan tombol dengan menambahkan efek hover skala transformasi.
- Kanan: 110%
- Rendah: 110%
3. Simpan perubahan ke generator tema dan hasil pratinjau
Setelah tajuk global Anda selesai, simpan semua perubahan yang dibuat pada pembuat tema dan lihat hasilnya di situs jaringan!
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
final pikiran
Dalam tutorial ini, kami telah menunjukkan kepada Anda bagaimana menambahkan dua tombol secara berdampingan ke header Anda secara keseluruhan menggunakan pembuat tema Divi.
Salah satu tombol yang kami tambahkan adalah tombol utama, yang lainnya adalah tombol sekunder. Menambahkan tombol ke tajuk keseluruhan membantu Anda menyorot beberapa CTA terpenting di situs jaringan. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.
