Cara Menambahkan Dua Tombol Berdampingan ke Divi Global Header Anda

Memiliki ajakan bertindak yang jelas di halaman Anda adalah kebutuhan bagi sebagian besar situs web. Dan cara apa yang lebih baik untuk menarik perhatian ke beberapa CTA terpenting Anda selain dengan menempatkannya di header Anda? Dalam tutorial hari ini, kami akan menunjukkan cara menambahkan dua tombol berdampingan ke header global Anda menggunakan Pembuat Tema Divi. Salah satu tombol adalah primer, yang lain sekunder. Anda juga dapat mengunduh file JSON header global secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Header Global GRATIS

Untuk mendapatkan template tajuk global gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Buka Divi Theme Builder & Buat Header Global

Pergi ke Divi Theme Builder

Mulailah dengan pergi ke Divi Theme Builder dan klik 'Add Global Header'.

Bangun Header Global

Lanjutkan dengan mengklik 'Build Global Header'.

2. Bangun Desain Header Global

Tambahkan Bagian Baru

Jarak

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka pengaturan bagian dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Indeks Z

Pastikan Anda juga meningkatkan indeks z bagian dalam pengaturan visibilitas. Ini akan memastikan konten tajuk global akan muncul di atas semua halaman dan konten posting.

• 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 apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar wadah bagian.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Ubah juga nilai padding kiri dan kanan baris.

• Padding Kiri: 2vw (Desktop), 10vw (Tablet & Ponsel)
• Padding Kanan: 2vw (Desktop), 10vw (Tablet & Ponsel)

Elemen Utama

Untuk memusatkan semua konten kolom, kami akan menambahkan dua baris kode CSS ini ke elemen utama baris.

display: flex;
align-items: center;

Hapus properti tampilan desktop di tablet dan seluler.

display: block;

kolom 1

Berbatasan

Lanjutkan dengan membuka pengaturan kolom 1 dan tambahkan batas kanan di desktop saja.

• Lebar Batas Kanan: 1px (Desktop), 0px (Tablet & Ponsel)
• Warna Batas Kanan: #d8d8d8

Indeks Z

Tingkatkan indeks z kolom juga.

• Indeks Z: 11

Kolom 2

Elemen Utama

Kemudian, buka pengaturan kolom 2 dan tambahkan baris kode CSS berikut ke elemen utama kolom 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.

Unggah Logo

Unggah logo berikutnya.

Tata Letak

Pindah ke tab desain modul dan pastikan pengaturan tata letak berikut berlaku:

• Gaya: Rata Kiri
• Arah Menu Dropdown: Ke Bawah

Teks Menu

Ubah pengaturan teks menu selanjutnya.

• 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)
• Spasi Huruf Menu: 1px

Teks Menu Dropdown

Buat beberapa perubahan pada pengaturan teks menu dropdown juga.

• Warna Latar Menu Dropdown: #ffffff
• Warna Garis Menu Dropdown: #ef6f49

Ikon

Kemudian, ubah warna ikon menu hamburger.

• Warna Ikon Menu Hamburger: #000000

Perekat

Tambahkan lebar maksimum logo ke pengaturan ukuran juga.

• Logo Lebar Maks: 9vw (Desktop), 12vw (Tablet), 15vw (Telepon)

Menu Logo CSS

Dan selesaikan pengaturan modul dengan menambahkan satu baris 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 antar item menu:

<style>
.et-menu>li {
padding-left: 1.5vw !important;
padding-right: 1.5vw !important;
}
</style>

Tambahkan Modul Tombol #1 ke Kolom 2

Tambahkan Salinan

Ke modul berikutnya! Tambahkan Modul Tombol pertama dan masukkan beberapa salinan pilihan Anda.

Tambahkan Tautan

Tambahkan tautan ke Modul Tombol berikutnya.

Penyelarasan

Pindah ke tab desain modul dan ubah perataan tombol.

• Penjajaran Tombol: Kanan

Pengaturan Tombol

Gaya tombol juga.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.8vw (Desktop), 1.7vw (Tablet), 2.5vw (Ponsel)
• Warna Teks Tombol: #000000
• Warna Latar Tombol: #edeef0 (Default), #d6d7d8 (Arahkan)
• Lebar Batas Tombol: 0px

• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: 2px
• Font Tombol: Montserrat
• Berat Huruf Tombol: Semi Tebal
• Gaya Font Tombol: Huruf Besar

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Kiri: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)
• Padding Kanan: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)

Modul Tombol Klon

Setelah Anda menyelesaikan Modul Tombol pertama, klon modul itu.

Ubah Tautan

Buka Modul Tombol duplikat dan ubah URL.

Ubah Perataan

Ubah juga perataan modul.

• Penjajaran Tombol: Kiri

Ubah Pengaturan Tombol

Buat beberapa perubahan pada pengaturan tombol juga.

• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #ef6f49 (Default), #e06945 (Arahkan)

Arahkan Skala Transformasi

Selesaikan pengaturan tombol dengan menambahkan efek hover skala transformasi.

• Kanan: 110%
• Bawah: 110%

3. Simpan Perubahan Pembuat Tema & Hasil Pratinjau

Setelah tajuk global Anda selesai, simpan semua perubahan pembuat tema dan lihat hasilnya di situs web Anda!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam tutorial ini, kami telah menunjukkan kepada Anda cara menambahkan dua tombol berdampingan ke header global Anda menggunakan pembuat tema Divi. Salah satu tombol yang kami tambahkan adalah tombol utama, yang lainnya adalah tombol sekunder. Menambahkan tombol ke tajuk global membantu Anda menekankan beberapa CTA terpenting situs web Anda. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.