Apakah Anda ingin membuat formulir kontak lengket di DIVI?
Opsi lengket bawaan Divi memungkinkan Anda membuat efek visual yang menakjubkan di halaman Anda hanya dengan beberapa klik.
Anda dapat menerapkan efek lengket ke elemen apa pun di halaman Anda, tetapi dalam tutorial ini kami akan fokus pada cara membuat formulir kontak lengket di halaman Divi mana pun yang Anda buat.
Baca juga panduan kami di Cara membuat tajuk global yang lengket di DIVI
Untuk contoh ini, kami akan menambahkan gambar dan informasi kontak yang akan digulir saat formulir kontak akan tetap di tempatnya.
penelitian
Berikut preview dari apa yang akan kita rancang. Di ponsel, kami tidak menerapkan efek lengket.
Bagaimana cara menambahkan formulir kontak tempel ke halaman Divi Anda
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'.
Cari dan pilih halaman kontak tata letak'Produk Kecantikan'.
Pilih 'Pilih tata letak' untuk menambahkan tata letak ke halaman Anda.
Kami sekarang siap untuk melanjutkan tutorial kami.
Mengubah tata letak formulir kontak yang lengket
Untuk tutorial ini, kami ingin formulir kontak di kolom kiri (kolom 1) tetap lengket saat pengguna menggulir modul konten lain di kolom kanan (kolom 2). Ini akan memberi kami efek gulir dinamis yang akan membuat formulir kontak Anda menonjol. Mari kita mulai dengan memodifikasi template yang telah ditentukan sebelumnya.
Lihat juga: Cara membuat menu geser dan tekan di DIVI
Buat bagian baru
Tambahkan bagian baru ke halaman Anda.
Kemudian masukkan baris baru dengan dua kolom. Anda dapat menambahkan bagian ini di mana saja di halaman, bagian lain pada akhirnya akan dihapus saat kami melanjutkan tutorial ini.
Buka pengaturan bagian dan ubah warna latar belakang agar sesuai dengan desain tata letak:
- Latar belakang: #EEE8E2
Menambahkan modul lengket Anda ke kolom 1
Tambahkan modul Formulir Kontak di kolom 1. Jika Anda mengikuti tutorial ini atau sudah memiliki formulir kontak di halaman Anda, Anda cukup menyeret modul 'formulir kontak' yang ada di kolom 1.
Pindahkan modul Teks Contactez-nous di bagian atas bagian ini. Ini juga akan lengket. Tambahkan batas putih di pengaturan teks agar sesuai dengan gaya tata letak:
- Lebar batas: 20px
- Warna Perbatasan: #FFFFFF
Tata letak asli menyertakan padding antara teks dan batas, tetapi kami akan melewatkannya karena memotong bagian bawah formulir kontak pada layar yang lebih kecil.
Tambahkan modul gulir Anda di kolom 2
Di kolom 2, tambahkan semua modul gulir Anda. Untuk kasus kami, pindahkan dua modul gambar, informasi kontak, dan informasi lokasi ke kolom 2. Setelah Anda memindahkan modul ke bagian baru, Anda dapat menghapus bagian kosong yang tersisa.
Tip: jika Anda perlu memindahkan beberapa modul secara bersamaan, tahan tombol 'Mei' pada keyboard dan pilih modul yang ingin Anda pindahkan. Gunakan fungsi pemindahan modul untuk memindahkan semua modul Anda secara bersamaan.
Gambar offset besar dari tata letak yang kami pilih dapat menyebabkan masalah pengguliran horizontal. Jadi mari kita ubah beberapa pengaturan untuk mengatasi masalah ini.
Baca juga: Cara membuat tajuk global dengan formulir masuk di DIVI
Buka pengaturan bagian. Dibawah maju, buka Visibilitas, lalu perbarui pengaturan luapan horizontal dan vertikal:
- Luapan horizontal: tersembunyi
- Luapan vertikal: tersembunyi
Halaman Anda sekarang akan terlihat seperti ini, dengan konten tempel Anda di kolom 1 dan konten bergulir Anda di kolom 2.
Kami siap untuk mengambil langkah terakhir: membuat formulir kontak lengket.
Buat formulir kontak lengket
Dengan tata letak kami di tempat, kami dapat mengaktifkan pengaturan lengket untuk formulir kontak kami. Pilih 'Pengaturan baris', lalu pilih pengaturan kolom 1.
Di bawah tab Advanced, navigasikan ke 'Scroll Effects'. Di sinilah kita akan mengatur parameter lengket.
- Posisi Lengket: Menempel ke Atas
- Tongkat Offset Atas: 15px
- Batas Lengket Bawah: Garis
Dan itu saja! Anda sekarang telah menambahkan pengaturan tempel ke kolom 1, membuat formulir kontak dan judul Anda lekat saat Anda menggulir halaman ke bawah. Anda akan melihat isi kolom 2 gulir di sebelah formulir kontak.
Hasil akhir
Sekarang mari kita lihat formulir kontak lengket kami beraksi.
Unduh DIVI Sekarang!!!
Kesimpulan
Jadi ! Itu saja untuk artikel ini. Pengaturan lengket Divi adalah cara mudah untuk meningkatkan tampilan formulir kontak Anda – atau elemen lain dari halaman Anda. Anda dapat menerapkan setelan tempel untuk bagian, baris, atau modul mana pun, merender apa saja di . Anda situs jaringan lengket.
Jika Anda ingin mempelajari lebih lanjut tentang apa yang dapat Anda lakukan dengan fitur lengket Divi, lihat tutorial kami. Misalnya, Anda dapat berkonsultasi dengan tutorial kami di Cara menambahkan formulir kontak ke tajuk global.
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.
...
