Saat Anda membuat tajuk khusus untuk situs jaringan, menggunakan pembuat tema Divi, Anda akan menemukan diri Anda mencari cara sempurna untuk menambahkan AAL (ajakan bertindak). Salah satu cara untuk melakukannya adalah dengan menambahkan a formulir kontak bergulir. Ini akan membantu Anda menjaga keseluruhan tampilan tajuk Anda tetap bersih sambil memberikan kemampuan untuk masuk kontak dengan Anda, tanpa harus menggulir ke bawah. Dalam tutorial ini, kami akan menunjukkan cara membuat a formulir kontak drop-down menggunakan kode Divi dan JQuery & CSS. Anda juga dapat mengunduh file JSON secara gratis!
Mari kita pergi.
penelitian
Sebelum kita menyelami tutorialnya, mari kita lihat hasilnya pada ukuran layar yang berbeda.
1. Buka Divi Theme Builder dan mulai membuat header global
Pergi ke Pembuat Tema Divi
Mulailah dengan membuka Divi Theme Builder di bagian belakang situs WordPress Anda.
Buat tajuk global
Klik "Tambahkan Global Header" dan pilih "Buat Global Header" untuk mulai membuat header global khusus.
2. Bangun desain header
Pengaturan bagian
Warna latar belakang
Setelah berada di dalam template header keseluruhan, Anda akan melihat sebuah bagian. Buka bagian ini dan gunakan warna latar belakang putih.
- Warna Latar Belakang: #FFFFFF
jarak
Kemudian hapus padding atas dan bawah default dari bagian.
- Lapisan atas: 0px
- Lapisan bawah: 0px
Kotak bayangan
Juga menerapkan naungan kotak halus.
- Kekuatan Box Shadow Blur: 50px
- Warna bayangan: rgba (0,0,0,0,15)
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul, buka parameter garis dan modifikasi parameter dimensi sebagai berikut:
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Menyamakan ketinggian kolom: Ya
- Lebar: 95%
- Lebar maks: 100%
jarak
Kemudian tambahkan padding khusus atas dan bawah.
- Lapisan atas: 1vw
- Lapisan 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 bahwa kolom kedua memiliki nilai indeks-z yang lebih tinggi untuk tujuan reaktif.
- Indeks Z: 12
Tambahkan modul gambar ke kolom 1
Unduh logo
Saatnya mulai menambahkan modul! Mulailah dengan modul gambar di kolom 1. Unggah logo.
penjajaran
Kemudian ubah perataan modul.
- Perataan gambar: tengah
perekat
Juga ubah lebar.
- Lebar: 3vw (desktop), 5vw (tablet), 7vw (telepon)
Tambahkan modul menu ke kolom 2
Pilih menu
Di kolom kedua, kita akan menambahkan modul menu.
ketentuan
Beralih ke tab desain modul dan ubah gaya tata letak.
- Gaya: Berpusat
Pengaturan teks menu
Kemudian ubah pengaturan teks dalam menu modul.
- Font menu: Buka tanpa
- Berat font menu: Semi tebal
- Warna teks menu: # 000000
- Ukuran teks menu: 0.8vw (desktop), 2vw (tablet), 3vw (telepon)
- Penspasian huruf menu: 1px
Pengaturan teks menu drop-down
Kemudian ubah warna garis di menu drop-down.
- Warna garis menu drop-down: # 007dff
ikon
Dengan warna ikon menu hamburger.
- Warna ikon menu hamburger: # 007dff
Tambahkan modul teks 1 ke kolom 3
Tambahkan salinan
Mari beralih ke modul ketiga! Tambahkan modul teks dengan salinan pilihan Anda.
Warna latar belakang
Kemudian tambahkan warna latar belakang.
- Warna Latar Belakang: # 007dff
Pengaturan teks
Beralih 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)
- Penyelarasan teks: pusat
perekat
Kemudian modifikasi parameter ukuran modul.
- Lebar: 33%
- Penyelarasan modul: pusat
jarak
Kemudian tambahkan padding khusus atas dan bawah.
- Lapisan atas: 0.8vw (desktop), 2vw (tablet dan telepon)
- Bantalan bawah: 0.8vw (meja), 2vw (tablet dan telepon)
Batas
Dan lengkapi parameter modul dengan menambahkan radius batas.
- Semua sudut: 100px
Tambahkan modul teks 2 ke kolom 3
Tambahkan simbol ke area konten
Mari beralih ke modul berikutnya, yang merupakan modul teks lainnya. Tambahkan panah berikut di area konten: "▼".
Pengaturan teks
Beralih ke tab desain modul dan ubah pengaturan teks yang sesuai:
- Font teks: Buka Sans
- Warna teks: # 007fff
- Ukuran teks: 3vw
- Tinggi baris teks: 0em
- Penyelarasan teks: pusat
Indeks Z
Kami juga meningkatkan indeks z modul.
- Indeks Z: 11
Tambahkan modul formulir kontak ke kolom 3
Anda sekarang dapat menambahkan a formulir kontak tepat di bagian bawah modul teks yang berisi panah. Modul ini cukup mudah digunakan, jadi Anda perlu menyesuaikan bidang mana yang ingin Anda tampilkan.
3. Kustomisasi elemen untuk membuat formulir kontak dalam satu klik
Tambahkan tinggi kolom 3
Setelah semua mod terpasang, saatnya membuat efek. Langkah pertama untuk mencapai hasil yang diinginkan adalah membuka pengaturan di kolom 3 dan menambahkan ketinggian kustom yang responsif di tab lanjutan.
Office:
height: 3vw;
tablet:
height: 5vw;
Telepon:
height: 6vw;
Tambahkan kelas CSS ke tombol dan panah
Selanjutnya, kita akan menambahkan kelas CSS yang sama ke dua modul teks pertama di kolom 3.
- Kelas CSS: tampilkan-kontak
Tambahkan kelas CSS ke formulir kontak
Kita juga membutuhkan kelas CSS khusus untuk modul Formulir Kontak.
- kelas CSS: kontak-bentuk-modul
Sembunyikan modul formulir Kontak
Lanjutkan dengan menambahkan baris tambahan kode CSS ke elemen utama modul Formulir Kontak. Ini akan memungkinkan kita menyembunyikan modul sebelum mengklik.
display: none;
Tambahkan modul kode ke kolom 3 dengan kode JQuery dan CSS
Dan untuk membuat fungsi klik, kita membutuhkan beberapa kode JQuery. Kami juga akan menggunakan kode CSS khusus. Tambahkan modul kode baru ke kolom 2 dengan kode. Pastikan untuk 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;}
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
Biro
Apa yang harus diingat?
Di artikel ini, kami telah menunjukkan cara menambahkan formulir kontak drop-down ke header kustom Anda. Ini cara yang bagus untuk memicu tindakan sejak dini.
