Cara Menambahkan Formulir Kontak Dropdown ke Header Global Anda

Saat Anda membuat tajuk khusus untuk situs web Anda, menggunakan pembuat tema Divi, Anda akan menemukan diri Anda mencari cara ideal untuk menambahkan CTA. Salah satu cara Anda dapat melakukannya adalah dengan menambahkan formulir kontak dropdown. Ini akan membantu Anda menjaga keseluruhan tampilan dan nuansa tajuk Anda tetap bersih sambil tetap memberikan kemungkinan untuk berhubungan tanpa perlu menggulir. Dalam tutorial ini, kami akan menunjukkan cara membuat formulir kontak dropdown menggunakan Divi dan beberapa kode JQuery & CSS. Anda juga dapat mengunduh file JSON 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 & Mulai Buat Header Global

Pergi ke Divi Theme Builder

Mulailah dengan membuka Divi Theme Builder di bagian belakang situs WordPress Anda.

Bangun Header Global

Klik 'Tambahkan Header Global' dan pilih 'Build Global Header' untuk mulai membuat tajuk global kustom.

2. Bangun Desain Tajuk

Pengaturan Bagian

Warna latar belakang

Begitu berada di dalam template tajuk global, Anda akan melihat sebuah bagian. Buka bagian itu dan gunakan warna latar belakang putih.

• Warna Latar Belakang: #FFFFFF

Jarak

Hapus padding atas dan bawah default bagian berikutnya.

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

Bayangan Kotak

Terapkan bayangan kotak halus juga.

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.15)

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

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

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus berikutnya.

• Padding Atas: 1vw
• Padding Bawah: 1vw

Elemen Utama

Dan sejajarkan semua konten kolom dengan menambahkan satu baris kode CSS ke elemen utama baris.

align-items: center;

Kolom 2 Z Indeks

Kami juga memastikan kolom kedua memiliki nilai indeks z yang lebih tinggi untuk tujuan responsif.

• Indeks Z: 12

Tambahkan Modul Gambar ke Kolom 1

Unggah Logo

Saatnya mulai menambahkan modul! Dimulai dengan Modul Gambar di kolom 1. Unggah logo.

Penyelarasan

Ubah perataan modul berikutnya.

• Penjajaran Gambar: Tengah

Perekat

Ubah lebarnya juga.

• Lebar: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)

Tambahkan Modul Menu ke Kolom 2

Pilih Menu

Di kolom kedua, kita akan menambahkan Modul Menu.

Tata Letak

Pindah ke tab desain modul dan ubah gaya tata letak.

• Gaya: Terpusat

Pengaturan Teks Menu

Ubah pengaturan teks menu modul selanjutnya.

• Font Menu: Buka Sans
• Berat Font Menu: Semi Tebal
• Warna Teks Menu: #000000
• Ukuran Teks Menu: 0.8vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Spasi Huruf Menu: 1px

Pengaturan Teks Menu Dropdown

Kemudian, ubah warna garis menu dropdown.

• Warna Garis Menu Dropdown: #007dff

Ikon

Seiring dengan warna ikon menu hamburger.

• Warna Ikon Menu Hamburger: #007dff

Tambahkan Modul Teks 1 ke Kolom 3

Tambahkan Salinan

Ke modul ketiga! Tambahkan Modul Teks dengan beberapa salinan pilihan Anda.

Warna latar belakang

Tambahkan warna latar belakang berikutnya.

• Warna Latar Belakang: #007dff

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Buka Sans
• Berat Font Teks: Tebal
• Warna Teks: #ffffff
• Ukuran Teks: 0.8vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Perataan Teks: Tengah

Perekat

Ubah pengaturan ukuran modul berikutnya.

• Lebar: 33%
• Penyelarasan Modul: Pusat

Jarak

Kemudian, tambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 0.8vw (Desktop), 2vw (Tablet & Ponsel)
• Padding Bawah: 0.8vw (Desktop), 2vw (Tablet & Telepon)

Berbatasan

Dan selesaikan pengaturan modul dengan menambahkan beberapa radius perbatasan.

• Semua Sudut: 100px

Tambahkan Modul Teks 2 ke Kolom 3

Tambahkan Simbol ke Kotak Konten

Ke modul berikutnya, yang merupakan Modul Teks lainnya. Tambahkan simbol panah berikut ke kotak konten: '▼'.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Buka Sans
• Warna Teks: #007fff
• Ukuran Teks: 3vw
• Tinggi Baris Teks: 0em
• Perataan Teks: Tengah

Indeks Z

Kami juga meningkatkan indeks z modul.

• Indeks Z: 11

Tambahkan Modul Formulir Kontak ke Kolom 3

Tambahkan Bidang Pilihan Lebar Penuh

Modul berikutnya dan terakhir yang kita butuhkan di kolom ketiga adalah Modul Formulir Kontak. Tambahkan semua bidang lebar penuh yang Anda butuhkan.

Tambahkan judul

Gunakan judul juga.

Warna latar belakang

Kami mengubah warna latar belakang berikutnya.

• Warna Latar Belakang: #e7f2ff

Pengaturan Bidang

Kemudian, pindah ke tab desain modul dan ubah pengaturan bidang.

• Warna Latar Belakang Bidang: #ffffff
• Warna Teks Bidang: #dddddd
• Warna Teks Fokus Bidang: #007dff
• Bidang Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Bidang Bawah Padding: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Font Bidang: Buka Sans

• Ukuran Teks Bidang: 0,7vw (Desktop), 1,8vw (Tablet), 3vw (Telepon)

Pengaturan Teks Judul

Ubah pengaturan teks judul berikutnya.

• Judul Judul Level: H3
• Judul Font Berat: Tebal
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #007dff
• Judul Teks Ukuran: 1vw (Desktop), 2.5vw (Tablet), 3.5vw (Telepon)
• Tinggi Baris Judul: 1.6em

Pengaturan Teks Captcha

Bersamaan dengan pengaturan teks captcha.

• Captcha Font: Buka Sans
• Warna Teks Captcha: #007dff

Pengaturan Tombol

Lanjutkan dengan menata tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.8vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #007dff
• Lebar Batas Tombol: 0px
• Radius Batas Tombol: 100px

• Font Tombol: Buka Sans
• Berat Huruf Tombol: Tebal

• Margin Atas Tombol: 1vw
• Tombol Atas Padding: 1vw (Desktop), 2vw (Tablet & Telepon)
• Bantalan Bawah Tombol: 1vw (Desktop), 2vw (Tablet & Ponsel)
• Tombol Kiri Padding: 2vw (Desktop), 7vw (Tablet & Telepon)
• Tombol Padding Kanan: 2vw (Desktop), 7vw (Tablet & Ponsel)

Jarak

Kemudian, gunakan beberapa nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 4vw (Desktop), 6vw (Tablet & Ponsel)
• Padding Bawah: 4vw (Desktop), 6vw (Tablet & Ponsel)
• Padding Kiri: 2vw (Desktop), 6vw (Tablet & Ponsel)
• Padding Kanan: 2vw (Desktop), 6vw (Tablet & Ponsel)

Berbatasan

Ubah pengaturan perbatasan berikutnya.

• Semua Sudut: 10px

Elemen Utama, Judul Kontak & Captcha CSS

Selesaikan pengaturan modul dengan menambahkan beberapa perubahan CSS kecil ke tab lanjutan.

Elemen Utama:

border-radius: 20px;

Judul kontak:

margin-bottom: 1vw;

Captcha:

margin-top: 1.5vw;

3. Sesuaikan Elemen untuk Membuat Formulir Kontak di Klik

Tambahkan Tinggi Kolom 3

Setelah Anda memiliki semua modul, saatnya untuk membuat efeknya. Langkah pertama untuk mencapai hasil yang diinginkan adalah membuka pengaturan kolom 3 dan menambahkan beberapa ketinggian kustom responsif di tab lanjutan.

Desktop:

height: 3vw;

Tablet:

height: 5vw;

Telepon:

height: 6vw;

Tambahkan Kelas CSS ke Tombol & Panah

Kemudian, kita akan menambahkan kelas CSS yang sama ke kedua Modul Teks pertama di kolom 3.

• Kelas CSS: show-contact

Tambahkan Kelas CSS ke Formulir Kontak

Kami juga membutuhkan kelas CSS khusus untuk Modul Formulir Kontak.

• Kelas CSS: modul formulir kontak

Sembunyikan Modul Formulir Kontak

Lanjutkan dengan menambahkan satu baris kode CSS tambahan ke elemen utama Modul Formulir Kontak. Ini akan memungkinkan kita untuk menyembunyikan modul sebelum mengklik.

display: none;

Tambahkan Modul Kode ke Kolom 3 dengan Kode JQuery & CSS

Dan untuk membuat fungsi klik, kita memerlukan beberapa kode JQuery. Kami juga akan menggunakan beberapa kode CSS khusus. Tambahkan Modul Kode baru ke kolom 2 dengan kode. Pastikan Anda menempatkan kode JQuery di antara tag skrip dan kode CSS di antara tag gaya.

jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});

.show-contact {
cursor: pointer;
}

.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}

Pratinjau

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

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menambahkan formulir kontak dropdown ke header yang dibuat khusus. Ini adalah cara yang bagus untuk memicu tindakan sejak awal. Kami juga telah membagikan file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, 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.