Cara Membuat Popup Pojok Formulir Kontak Tetap dengan Opsi Ukuran Divi

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang sedang berlangsung, kami akan menunjukkan kepada Anda cara menambahkan popup sudut formulir kontak tetap ke halaman Anda menggunakan opsi ukuran Divi. Pendekatan ini akan membantu Anda mengatur formulir kontak yang mengikuti pengunjung selama mereka tinggal di situs web Anda, tanpa memerlukan plugin tambahan!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

1. Unggah Halaman Arahan Paket Tata Letak Chiropractor

Tambahkan Halaman Baru

Mulailah dengan membuat halaman baru. Setelah Anda menamai halaman dan menerbitkannya, alihkan ke Visual Builder.

Unggah Halaman Arahan Paket Tata Letak Chiropractor

Unggah halaman arahan Paket Tata Letak Chiropractor berikutnya. Meskipun kami akan menggunakan tata letak khusus ini, Anda dapat membuat teknik ini berfungsi di halaman mana pun yang sedang Anda kerjakan.

2. Ayo Mulai Membuat Ulang!

Tambahkan Bagian Baru ke Bawah Halaman

Kami akan mendedikasikan bagian yang sama sekali baru untuk formulir kontak tetap yang muncul saat diklik. Tambahkan bagian ini ke bagian bawah halaman Anda.

Warna latar belakang

Buka pengaturan bagian dan gunakan warna latar belakang yang sepenuhnya transparan. Nanti di posting ini, kami akan membuat seluruh bagian diperbaiki. Menggunakan warna latar belakang transparan akan memastikan semua yang muncul di bawah wadah bagian terlihat jelas.

• Warna Latar Belakang: rgba(255,255,255,0)

Perekat

Pindah ke tab desain dan ubah lebar bagian di berbagai ukuran layar.

• Lebar: 37% (Desktop), 95% (Tablet), 100% (Ponsel)
• Perataan Bagian: Kanan

Jarak

Hapus padding atas default berikutnya.

• Padding Atas: 0px

Kelas CSS

Kita juga harus memberi bagian baru kita kelas CSS khusus. Nanti di postingan, kita akan menggunakan kelas CSS ini untuk menambahkan beberapa kode JQuery dan CSS.

• Kelas CSS: bagian-terbuka

Indeks Z Default

Untuk memastikan bagian muncul di atas semua konten halaman, kami akan meningkatkan indeks bagian z dalam pengaturan visibilitas.

• Indeks Z: 99

Arahkan ke Indeks Z

Tambahkan nilai indeks z yang sama pada hover juga.

• Indeks Z: 99

Tambahkan Baris #1

Struktur Kolom

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

Tambahkan Modul Blurb

Biarkan Kotak Konten Kosong

Modul pertama dan satu-satunya yang kita butuhkan di baris ini adalah Modul Blurb. Pastikan Anda membiarkan kotak judul dan konten kosong.

Pilih Ikon

Pilih ikon berikutnya.

Warna latar belakang

Ubah warna latar belakang blurb juga.

• Warna Latar Belakang: #FFFFFF

Pengaturan Ikon

Pindah ke tab desain dan terapkan pengaturan ikon berikut:

• Warna Ikon: #ff5f24
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ikon Ukuran Font: 46px (Desktop), 30px (Tablet), 25px (Telepon)

Perekat

Ubah pengaturan ukuran di berbagai ukuran layar berikutnya.

• Lebar: 140px (Desktop), 105px (Tablet), 80px (Ponsel)
• Penyelarasan Modul: Kanan

Jarak

Kami juga akan menambahkan beberapa nilai padding atas dan bawah kustom di berbagai ukuran layar.

• Padding Atas: 50px (Desktop), 35px (Tablet), 25px (Ponsel)
• Padding Bawah: 20px (Desktop), 10px (Tablet), 0px (Ponsel)

Berbatasan

Untuk membuat bentuk lingkaran, kita perlu menambahkan nilai tinggi ke masing-masing sudut di pengaturan perbatasan. Kami menggunakan '500px'.

Bayangan Kotak

Kami juga akan menambahkan bayangan kotak halus untuk memungkinkan bentuk lingkaran muncul.

• Kekuatan Buram Bayangan Kotak: 80px

Animasi

Buka pengaturan animasi selanjutnya dan hapus ikon animasi.

• Ikon Animasi: Tanpa Animasi

Kelas CSS

Terakhir, tambahkan kelas CSS ke Modul Blurb. Nanti di postingan ini, kita akan menggunakan kelas CSS ini untuk membuat fungsi klik bekerja.

• Kelas CSS: buka kontak

Tambahkan Baris #2

Struktur Kolom

Ke baris kedua! Gunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #FFFFFF

Berbatasan

Tambahkan radius batas '39px' ke masing-masing sudut berikutnya.

Bayangan Kotak

Dan selesaikan pengaturan baris dengan menambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 80px

Tambahkan Formulir Kontak

Elemen

Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Formulir Kontak. Setelah Anda menambahkan modul, nonaktifkan captcha di pengaturan elemen.

• Tampilkan Captcha: Tidak

bidang

Pindah ke tab desain dan ubah warna latar belakang bidang di pengaturan bidang.

• Warna Latar Belakang Bidang: rgba (0,126.255,0.13)

Tombol

Lanjutkan dengan menata tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 16px
• Warna Teks Tombol: #FFFFFF
• Warna Latar Tombol: #ff5f24
• Lebar Perbatasan Tombol: 2px
• Warna Batas Tombol: rgba(0,0,0,0)
• Radius Perbatasan Tombol: 0px
• Font Tombol: Karla
• Berat Huruf Tombol: Tebal
• Padding Atas Tombol: 14px
• Padding Bawah Tombol: 14px
• Tombol Kiri Padding: 20px
• Tombol Padding Kanan: 20px

Jarak

Dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 30px
• Padding Bawah: 30px
• Padding Kiri: 40px
• Padding Kanan: 40px

Tambahkan Modul Kode

Masukkan Kode JQuery

Setelah Anda menyelesaikan Modul Formulir Kontak, saatnya untuk membuat fungsi klik berfungsi! Tambahkan Modul Kode ke baris kedua di bagian tersebut dan masukkan baris kode JQuery berikut di antara tag skrip seperti yang Anda lihat di layar cetak di bawah ini:

jQuery(function($){
$(".contact-open").click(function() {
 $('.section-open').toggleClass('section-open-active');
});
});

Ubah Pengaturan Bagian

Tinggi

Lanjutkan dengan membuka pengaturan bagian. Ubah ketinggian di berbagai ukuran layar.

• Tinggi: 190px (Desktop), 140px (Tablet), 125px (Ponsel)

Elemen Utama Default

Tambahkan beberapa kode CSS khusus ke elemen utama bagian di sebelah untuk membuatnya tetap di sudut kanan bawah.

bottom: 0;
right: 0;
position: fixed;

Arahkan Elemen Utama

Pastikan Anda menambahkan posisi tetap ke elemen utama hover juga.

position: fixed;

Tambahkan Kode CSS Khusus ke Halaman

Buka Pengaturan Halaman

Untuk menyelesaikan efek toggling, kita perlu menambahkan sedikit kode CSS ke halaman juga. Buka pengaturan halaman.

Tambahkan CSS Khusus

Buka tab lanjutan dan tambahkan baris kode CSS berikut:

.section-open-active {
height: auto !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 tetap ke halaman Anda menggunakan pengaturan ukuran Divi. Anda dapat membuat pendekatan ini berfungsi di semua jenis situs web yang Anda buat. Tutorial ini adalah bagian dari inisiatif desain Divi kami yang sedang berlangsung, di mana kami mencoba memasukkan sesuatu yang ekstra ke dalam kotak peralatan desain Anda setiap minggu. Jika Anda memiliki pertanyaan atau saran, pastikan Anda 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.