Apakah Anda ingin membuat formulir kontak di Divi yang muncul setelah mengklik tombol?
Dalam tutorial Divi ini, kami akan menunjukkan kepada Anda cara membuat a formulir kontak yang muncul setelah mengklik tombol hanya menggunakan Divi, kode jQuery, dan kode CSS.
Baca juga panduan kami di: Divi: Cara membuat footer lengket dengan efek "Reveal"
Ini cara yang bagus untuk menjaga pengunjung anda situs web berfokus pada tindakan yang mereka lakukan dengan mengklik tombol. Itu tidak membawa mereka ke halaman yang berbeda.
penelitian
Di bawah ini, Anda dapat melihat sekilas apa yang akan kita buat, lalu masuk ke tutorial!
Pratinjau di PC
Pratinjau di ponsel dan tablet
Buat halaman baru dengan tata letak yang telah ditentukan
Mari kita mulai dengan menggunakan tata letak yang telah ditentukan dari perpustakaan Divi. Untuk contoh ini, kami akan menggunakan halaman kontak dari Paket Tata Letak Produk Kecantikan .
Tambahkan halaman baru ke . Anda situs jaringan dan beri judul, lalu pilih opsi 'Gunakan Divi Builder'.
Kami akan menggunakan tata letak pra-dibuat dari perpustakaan Divi untuk contoh ini, jadi pilih 'Pilih tata letak'.
Temukan dan pilih halaman Beranda tata letak 'Perusahaan Desain Interior'.
Pilih 'Pilih tata letak' untuk menambahkan tata letak ke halaman Anda.
Kami sekarang siap untuk melanjutkan tutorial kami.
Buat bagian dengan modul Tombol
Hal pertama yang harus kita lakukan adalah menambahkan bagian baru tempat kita menempatkan tombol yang mengizinkan formulir kontak menunjukkan.
Lihat juga: Divi: Cara membuat footer khusus
Cukup tambahkan bagian standar
Selanjutnya, pilih baris satu kolom.
Setelah Anda selesai melakukannya, tambahkan modul Button ke dalamnya.
Anda dapat menyesuaikan tombol sesuka Anda, tetapi Anda perlu memastikan bahwa URL tombol dimulai dengan '#' diikuti oleh yang lain. Anda tidak bisa membiarkannya kosong atau hanya menggunakan karakter '#'. Dengan menambahkan '#' dan teks, halaman tidak akan bergerak setelah Anda mengklik tombol. Jika Anda membiarkannya kosong, halaman akan disegarkan saat diklik. Dan jika Anda hanya menggunakan '#', Anda akan diarahkan ke bagian atas halaman.
Hal penting berikutnya yang perlu kita lakukan adalah menetapkan kelas CSS ke tombol. Kami akan menggunakan kelas CSS ini nanti di artikel ini dalam kode jQuery untuk memastikan bahwa formulir kontak muncul setelah mengklik. Kelas yang perlu kita tetapkan ke tombol hanyalah "tombol".
- Kelas CSS: tombol
Buat formulir kontak versi PC
Hal berikutnya yang perlu kita lakukan adalah membuat formulir kontak desktop yang akan muncul setelah seseorang mengklik tombol yang kita buat di bagian sebelumnya dari artikel ini. Nanti di artikel ini, kami juga akan menunjukkan cara membuat versi seluler.
Tambahkan bagian standar baru
Mulailah dengan menambahkan bagian standar baru ke halaman yang sedang Anda kerjakan. Di bagian pengaturan, buka tab Lanjutan tambahkan "sembulan" ke bidang Kelas CSS.
Gulir ke bawah tab yang sama dan tempatkan baris kode CSS berikut di bidang Sebelum dari subkategori CSS Kustom:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Dengan menambahkan ini, kami memastikan bahwa bagian tersebut memenuhi seluruh tab. Anda dapat menyesuaikan warna latar belakang dalam kode CSS untuk membuat hamparan latar belakang yang diinginkan. Dalam hal ini kami menggunakan warna hitam dengan sedikit transparansi. Di tab yang sama ini, tambahkan juga baris kode CSS berikut ke elemen utama:
display: none;
Hal terakhir yang harus kita lakukan di tab Lanjutan adalah menonaktifkan bagian di ponsel dan tablet di subkategori Visibilitas.
Tambahkan satu baris ke dua kolom
Lanjutkan dengan menambahkan baris dua kolom dan arahkan ke tab Gaya.
- Gunakan Lebar Talang Kustom: YA
- Lebar maksimum: 1291px
Masukkan parameter masing-masing kolom.
Ubah margin internal (Atas, Kiri dan Kanan) sebagai berikut:
- Margin Internal (Atas, Kiri, Kanan): 30px
Selesaikan dengan masuk ke tab Advanced. Di elemen utama, tambahkan baris kode CSS berikut:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Tambahkan modul Teks pertama
Setelah Anda membuat semua perubahan pada bagian dan baris, saatnya untuk menambahkan berbagai modul yang ingin Anda tampilkan.
Hal pertama yang akan kita tambahkan adalah judul yang muncul. Mulailah dengan menambahkan modul Teks baru ke kolom pertama baris, tulis teks di tab Isi dan beralih ke tab Gaya.
Di tab Gaya, kami menggunakan pengaturan berikut untuk subkategori Teks:
- Font Tajuk: Lobster
- Header Cahaya Lembut: Teks Tebal
- Perataan teks: Tebal
- Warna teks tajuk: #002282
- Ukuran Teks Tajuk: 37px
- Tinggi garis tajuk: 1,7 em
Tambahkan modul Teks kedua
Lanjutkan dengan menambahkan modul Teks baru dan ketik teks yang ingin Anda tampilkan di tab Konten. Beralih ke tab Gaya dan terapkan pengaturan berikut ke subkategori Teks:
- Perataan teks: Tengah
- Font Teks: Arial
- Ukuran Teks Teks: 13px
- Teks Warna Teks: #002282
- Tinggi baris teks: 1,7 em
Tambahkan modul 'Ikuti kami di jejaring sosial'
Selanjutnya, kita juga akan menambahkan modul 'Ikuti kami di media sosial' pada kolom pertama. Dalam hal ini, kami telah memilih tiga ikon media sosial; Facebook, Twitter, dan Instagram.
Hal terakhir yang perlu kita lakukan adalah menambahkan padding (Kiri) ke modul ini di tab Advanced. Tambahkan baris kode CSS berikut ke elemen utama:
padding-left: 40%;
Tambahkan modul Formulir Kontak
Kemudian kita bisa pindah ke kolom kedua di baris. Di kolom ini, hal pertama yang akan kita tempatkan adalah modul Contact Form.
Untuk contoh ini, kami hanya memilih dua bidang; nama dan email.
Setelah Anda menambahkan modul Formulir Kontak, navigasikan ke tab Gaya dari modul Formulir Kontak dan buat perubahan berikut pada subkategori Bidang:
- Bidang Warna Teks: #002282
- Bidang Ukuran Teks: #002282
- Tinggi garis bidang: 1,7 em
Pada tab yang sama, buat perubahan berikut pada subkategori Tombol:
- Gunakan gaya khusus untuk Tombol: Ya
- Tombol ukuran teks: 20
- Warna teks tombol: #FFFFFF
- Tombol latar belakang: #0086c4
Lihat juga: Cara membuat menu geser dan tekan di DIVI
- Lebar Perbatasan Tombol: 2
- Tombol Radius Perbatasan: 3
Beralih ke tab Advanced dan tambahkan margin 5%.
Tambahkan modul Ringkasan
Hal lain yang perlu kita tambahkan ke kolom kedua adalah modul Ringkasan. Satu-satunya hal yang kita butuhkan untuk modul ini adalah ikon keluar di kanan atas jendela sembulan. Pilih ikon berikutnya dari daftar ikon dan biarkan semuanya kosong.
Lalu pergi ke tab Advanced dan ketik "close" sebagai kelas CSS.
Di tab yang sama ini, tambahkan baris kode berikut ke elemen utama dari subkategori CSS khusus:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Terapkan isian gradien ke garis
Terakhir, kita akan menambahkan latar belakang gradien yang bagus ke garis. Buka pengaturan dan terapkan perubahan berikut ke opsi latar belakang gradien:
- Warna gradien pertama: #FFFFFF
- Warna gradien kedua: #0c71c3
- Tipe Gradien: Linier
- Arah gradien: 124 derajat
- Posisi awal: 50%
- Posisi akhir: 50%
Buat formulir kontak untuk tablet dan ponsel
Sekarang setelah kita membuat versi PC, versi tablet dan ponsel akan berjalan lebih cepat. Sebagian besar modul yang kami gunakan untuk versi PC sama dengan untuk versi seluler.
Gandakan bagian sebelumnya
Alih-alih menonaktifkannya untuk ponsel dan tablet, seperti yang kami lakukan untuk versi PC, kami akan menonaktifkan versi PC di subkategori Visibilitas di pengaturan modul:
Ubah kode CSS dari modul Ringkasan
Alih-alih menggunakan kode desktop, gunakan yang berikut ini sebagai gantinya:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Terapkan isian gradien ke garis
Untuk versi seluler, kami menggunakan pengaturan yang berbeda untuk latar belakang gradien garis:
- Warna gradien pertama: #FFFFFF
- Warna gradien kedua: #0c71c3
- Tipe Gradien: Linier
- Arah gradien: 180 derajat
- Posisi awal: 40%
- Posisi akhir: 40%
Tambahkan kode jQuery
Hal terakhir yang perlu kita lakukan untuk tutorial ini adalah menambahkan kode jQuery. Tambahkan modul Kode dan masukkan kode JQuery berikut:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
Hasil
Jika Anda mengikuti pesan langkah demi langkah, Anda seharusnya bisa mendapatkan hasil berikut di komputer:
Dan berikut hasilnya di tablet dan ponsel:
Unduh DIVI Sekarang!!!
Kesimpulan
Dalam artikel ini, kami telah menunjukkan kepada Anda cara membuat formulir kontak sekali klik. Gunakan metode ini untuk menghubungi Anda pengunjung halus tapi efektif.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
