Perlu menambahkan a formulir kontak ke tajuk global?
Saat Anda membuat tajuk khusus untuk situs jaringan Menggunakan Pembuat Tema Divi, Anda menemukan diri Anda mencari cara sempurna untuk menambahkan CTA (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 tanpa harus scroll.
Dalam tutorial ini kami akan menunjukkan cara membuat formulir kontak dapat digulir menggunakan kode Divi dan JQuery & CSS.
Ayo mulai!
penelitian
Sebelum masuk ke tutorial ini, mari kita lihat preview dari hasil yang akan kita dapatkan.
Buat tajuk global
Buka Pembuat Tema
Buka Theme Builder dari menu Divi yang ada di dashboard WordPress Anda dan klik "Add a global header".
Pilih 'Buat tajuk global'.
Buat gaya tajuk
Pengaturan bagian
Warna latar belakang
Setelah berada di editor template, Anda akan melihat sebuah bagian. Buka bagian ini dan ubah warna latar belakang.
- Latar belakang: #FFFFFF
jarak
Kemudian hapus Margin Dalam Atas dan Bawah default dari bagian tersebut.
- Verteks Margin Dalam: 0px
- Margin Internal Bawah: 0px
Kotak bayangan
Juga terapkan bayangan kotak yang halus.
- Kekuatan Kotak Bayangan Biru: 50px
- Warna font subtitle: rgba (0,0,0,0.15)
Tambahkan baris baru
Struktur kolom
Tambahkan 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
- Jarak kolom: 1
- Menyelaraskan ketinggian kolom: Ya
- Lebar maksimum: 95%
- Lebar maksimum: 100%
jarak
Kemudian tambahkan padding khusus atas dan bawah.
- Margin internal puncak: 1vw
- Margin internal bawah: 1vw
elemen utama
Sejajarkan semua konten kolom dengan menambahkan satu baris kode CSS ke elemen baris utama.
align-items: center;
Z subskrip kolom 2
Kami juga memastikan kolom kedua memiliki nilai indeks-z yang lebih tinggi untuk desain responsif.
- Z-indeks: 12
Tambahkan modul gambar ke kolom 1
Unduh logo
Saatnya untuk mulai menambahkan modul! Dimulai dengan modul Gambar di kolom 1. Unggah logo.
penjajaran
Kemudian ubah perataan modul.
- Perataan Gambar: Terpusat
perekat
Juga ubah lebar.
- Lebar maksimum: 3vw (desktop), 5vw (tablet), 7vw (ponsel)
Tambahkan modul Menu ke kolom 2
Pilih Menu
Di kolom kedua kita akan menambahkan modul Menu.
ketentuan
Beralih ke tab Module Style dan ubah gaya tata letak.
- Gaya: Terpusat
Pengaturan teks menu
Kemudian ubah pengaturan teks dalam menu modul.
- Menu Font: Buka Tidak Ada
- Menu cahaya redup: semi-tebal
- Warna teks menu: #000000
- Ukuran Teks Menu: 0,8 vw (desktop), 2 vw (tablet), 3 vw (ponsel)
- Spasi huruf menu: 1px
Pengaturan teks menu tarik-turun
Selanjutnya, ubah warna garis dari menu drop-down.
- Warna garis menu tarik-turun: #007dff
ikon
Ubah warna ikon menu hamburger.
- Warna ikon menu hamburger: #007dff
Tambahkan modul Teks ke kolom 3
Tambahkan pesan
Ke modul ketiga! Tambahkan modul Teks dengan pesan pilihan Anda.
Warna latar belakang
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
- Teks Cahaya Lembut: Tebal
- Warna teks Teks: #ffffff
- Teks Ukuran teks: 0,8 vw (desktop), 2 vw (tablet), 3 vw (ponsel)
- Perataan Teks: Terpusat
perekat
Kemudian modifikasi parameter ukuran modul.
- Lebar maksimum: 33%
- Penyelarasan Modul: Pusat
jarak
Selanjutnya, tambahkan bantalan Atas dan Bawah khusus.
- Margin internal atas: 0,8 vw (desktop), 2 vw (tablet dan ponsel)
- Margin Internal Rendah: 0,8 vw (desktop), 2 vw (tablet dan ponsel)
Perbatasan
Dan lengkapi parameter modul dengan menambahkan radius batas.
- Persegi panjang bulat: 100px
Tambahkan modul Teks lain ke kolom 3
Tambahkan simbol ke area konten
Mari kita beralih ke modul berikutnya, yang merupakan modul teks lain. Tambahkan simbol 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
- Teks Ukuran teks: 3vw
- Tinggi baris teks: 0em
- Perataan Teks: Terpusat
Z-indeks
Mari kita juga meningkatkan indeks-z modul.
- Z-indeks: 11
Tambahkan modul Formulir Kontak ke kolom 3
Tambahkan bidang lebar penuh pilihan Anda
Modul berikutnya dan terakhir yang kita butuhkan di kolom ketiga adalah modul formulir kontak. Tambahkan bidang lebar penuh yang Anda butuhkan.
Tambahkan judul
Juga menggunakan judul.
Warna latar belakang
Selanjutnya, mari kita ubah warna latar belakang.
- Warna latar belakang: #e7f2ff
Pengaturan bidang
Mari kita pergi ke tab Style modul dan mengubah pengaturan bidang.
- Bidang Warna Latar Belakang: #ffffff
- Warna teks bidang: #dddddd
- Warna teks fokus: #007dff
- Bidang Padding Vertex: 1vw (desktop), 2vw (tablet), 3vw (ponsel)
- Bidang Padding Bawah: 1vw (desktop), 2vw (tablet), 3vw (ponsel)
- Bidang Font: Buka Tidak Ada
- Bidang Ukuran teks: 0,7 vw (desktop), 1,8 vw (tablet), 3 vw (ponsel)
Pengaturan teks judul
Edit pengaturan teks judul.
- Sisipkan Judul Tiga: H3
- Judul Cahaya Lembut: Teks Tebal
- Perataan teks: terpusat
- Warna teks judul: #007dff
- Judul Ukuran teks: 1 vw (desktop), 2,5 vw (tablet), 3,5 vw (ponsel)
- Tinggi baris judul: 1,6 em
Pengaturan teks captcha
Dengan pengaturan teks captcha.
- Font Captcha: Buka Sans
- Warna teks captcha: #007dff
Pengaturan tombol
Lanjutkan dengan menyesuaikan tombol.
- Gunakan gaya khusus untuk Tombol: Ya
- Ukuran Teks Tombol: 0,8 vw (desktop), 2 vw (tablet), 3 vw (ponsel)
- Warna teks tombol: #ffffff
- Tombol Latar Belakang: #007dff
- Tombol lebar batas: 0 piksel
- Radius Batas Tombol: 100 piksel
- Tombol Font: Buka Tidak Ada
- Tombol Soft Light: Teks tebal
- Margin Tombol: 1vw
- Tombol Padding Atas: 1vw (desktop), 2vw (tablet dan ponsel)
- Tombol Padding Bawah: 1vw (desktop), 2vw (tablet dan ponsel)
- Tombol Pad Kiri: 2vw (desktop), 7vw (tablet dan ponsel)
- Tombol Pad Kanan: 2vw (desktop), 7vw (tablet dan ponsel)
jarak
Gunakan nilai padding khusus pada ukuran layar yang berbeda.
- Ruang kepala internal puncak: 4vw (desktop), 6vw (tablet dan ponsel)
- Bawah Margin Internal: 4vw (desktop), 6vw (tablet dan ponsel)
- Margin dalam kiri: 2vw (desktop), 6vw (tablet dan ponsel)
- Margin internal kanan: 2vw (desktop), 6vw (tablet dan ponsel)
Perbatasan
Kemudian ubah pengaturan perbatasan.
- Masukan Persegi Panjang Bulat: 10px
Elemen Utama, Judul Kontak, dan Captcha CSS
Selesaikan pengaturan modul dengan menambahkan beberapa perubahan CSS kecil ke tab lanjutan.
Elemen utama:
| 01 | border-radius: 20px; |
Judul dari kontak :
| 01 | margin-bottom: 1vw; |
Captcha:
| 01 | margin-top: 1.5vw; |
Sesuaikan elemen untuk membuat formulir kontak dalam satu klik
Tambahkan tinggi kolom 3
Setelah Anda memiliki semua modul, saatnya untuk membuat efeknya. Langkah pertama untuk mendapatkan hasil yang diinginkan adalah membuka pengaturan 3 kolom dan menambahkan ketinggian responsif khusus di tab lanjutan.
Meja :
| 01 | height: 3vw; |
tablet:
| 01 | height: 5vw; |
Panggilan:
| 01 | 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
Kami juga membutuhkan kelas CSS khusus untuk modul formulir kontak.
- Kelas CSS: modul formulir kontak
Sembunyikan modul formulir kontak
Lanjutkan dengan menambahkan baris kode CSS tambahan ke elemen utama modul formulir kontak. Ini akan memungkinkan kita untuk menyembunyikan modul sebelum mengklik.
| 01 | display: none; |
Tambahkan modul kode ke kolom 3 dengan kode JQuery dan CSS
Dan untuk membuat fungsi klik, kita membutuhkan 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 kita telah melalui semua langkah, mari kita lihat hasilnya.
Kesimpulan
Pada artikel ini, kami menunjukkan kepada Anda cara menambahkan formulir kontak tarik-turun ke tajuk khusus Anda.
Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.
