Perlu menggabungkan bidang sebaris dan bidang lebar penuh modul Formulir Kontak de Divi ?
Le formulir kontak adalah elemen penting untuk disertakan di situs web Anda jika Anda ingin menangkap email dan mengonversi pengunjung Anda menjadi pelanggan.
Modul Formulir Kontak de Divi dapat dengan mudah disesuaikan untuk dibuat bentuk kartu kontak yang menarik dan menawan untuk semua jenis situs web. Modul ini hadir dengan dua opsi tampilan yang dapat diterapkan ke setiap bidang formulir: en ligne ou lebar penuh.
Dalam tutorial ini, kami akan menyajikan empat kemungkinan tata letak unik untuk Anda formulir kontak Divi menggunakan bidang sebaris dan lebar penuh.
Mari kita mulai!
penelitian
Berikut adalah preview dari apa yang akan kita rancang.
Tata letak pertama
Tata letak kedua
Tata letak ketiga
Tata letak keempat
Apa yang Anda butuhkan untuk memulai
Sebelum kita mulai, instal dan aktifkan tema Divi dan pastikan Anda memiliki Divi versi terbaru di situs web Anda.
Sekarang Anda siap untuk memulai!
4 tata letak contoh untuk modul Formulir Kontak Divi menggunakan bidang sebaris dan lebar penuh
Pilih tata letak yang telah ditentukan sebelumnya
Masing-masing dari 4 templat dimodifikasi dari tata letak Halaman Kontak Perbaikan Sepatu Paket Tata Letak Perbaikan Sepatu, yang dapat Anda temukan di perpustakaan Divi.
Tambahkan halaman baru ke situs web Anda dan beri judul, lalu pilih opsi Gunakan Divi Builder.
Kami akan menggunakan tata letak pra-dibuat dari perpustakaan Divi untuk contoh ini, jadi pilih Jelajahi Tata Letak.
Temukan dan pilih tata letak Halaman Kontak Perbaikan Sepatu.
Sélectionnez Gunakan Tata Letak Ini untuk menambahkan tata letak ke halaman Anda.
Kami sekarang siap untuk merancang contoh kami.
Tata letak pertama
Pertama, pindahkan baris yang berisi modul Formulir Kontak ke bagian di atas, tepat di bawah baris dengan modul Blurb. Kemudian Anda dapat menghapus bagian kosong yang tersisa.
Buka pengaturan garis dan tambahkan padding kiri dan kanan,
- Padding (Kiri dan Kanan): 15%
Pilih opsi responsif dan setel padding untuk seluler.
- Padding (Kiri dan Kanan): 5%
Mengubah tata letak formulir kontak dengan bidang sebaris dan lebar penuh
Untuk tata letak ini, kami akan membuat dua bidang terpisah untuk nama depan dan nama belakang.
Buka pengaturan modul Formulir Kontak dan ubah bidang ID dan Judul untuk bidang Nama belakang menjadi Nama depan.
Tambahkan bidang baru di bawah bidang Nama Depan. Setel bidang ID dan Judul ke Nama.
Di pengaturan bidang nama, buka pengaturan tata letak dan atur Make Fullwidth ke No.
- Jadikan Lebar Penuh: TIDAK
Kemudian, di bawah pengaturan formulir kontak, ubah urutan subjek dan telepon sehingga nomor telepon tercantum sebelum subjek.
Buka pengaturan tata letak bidang Subjek dan atur bidang ke lebar penuh.
- Jadikan Lebar Penuh: YA
Kustomisasi desain formulir kontak
Sekarang mari ubah beberapa pengaturan untuk menyelesaikan desain. Arahkan ke tab Desain dari pengaturan modul Formulir Kontak.
Pertama, ubah warna latar belakang tombol.
- Latar Belakang Tombol: #DBC2B3
Tambahkan margin atas ke tombol.
- Margin Tombol (Atas): 10px
Terakhir, buka pengaturan batas dan tambahkan sudut bulat ke bidang.
- Input Sudut Bulat: 30px
Lihat juga: Divi: Cara menambahkan logo responsif ke modul "Menu Lebar Penuh"
Hasil akhir contoh 1
Berikut adalah hasil akhir di desktop dan seluler.
Contoh kedua
Untuk contoh kedua kami, kami akan memindahkan modul Blurb ke sisi kiri halaman dan menempatkan formulir kontak di sisi kanan halaman. Pindahkan modul Blurb ke kolom.
Ubah tata letak baris.
Buka pengaturan desain garis dan matikan Gunakan Lebar Talang Kustom.
- Gunakan Lebar Talang Kustom: TIDAK
Tambahkan kode ke CSS khusus elemen utama untuk menyelaraskan modul Blurb dan Formulir Kontak secara vertikal.
align-items:center;
Sekarang kita perlu menghapus batas tipis antara kolom. Buka pengaturan baris, lalu buka pengaturan kolom 1. Di bawah tab Desain, buka pengaturan batas dan hapus batas.
- Lebar Batas Kanan: 0px
Selanjutnya, buka pengaturan kolom 2 dan ulangi langkah-langkah untuk menghapus batas.
- Lebar Batas Kanan: 0px
Setel teks "Hubungi Kami" agar berada di tengah.
Pindahkan formulir kontak ke kolom kanan. Hapus bagian kosong yang tersisa.
Mengubah tata letak formulir kontak dengan bidang sebaris dan lebar penuh
Tata letak ini juga akan memiliki dua bidang terpisah untuk nama depan dan nama belakang. Buka pengaturan modul Formulir Kontak dan ubah bidang ID dan Judul untuk bidang Nama belakang menjadi Nama depan.
Tambahkan bidang baru di bawah bidang Nama Depan. Setel bidang ID dan Judul ke Nama.
Di pengaturan bidang nama, buka pengaturan tata letak dan atur Make Fullwidth ke No.
- Jadikan Lebar Penuh: TIDAK
Ubah urutan kolom telepon dan subjek sehingga telepon muncul sebelum subjek.
Buka pengaturan bidang untuk Email, Telepon, dan Subjek, dan atur tata letak ke lebar penuh.
- Jadikan Lebar Penuh: YA
Kustomisasi desain formulir kontak
Buka pengaturan baris, lalu buka pengaturan kolom 2. Atur warna latar belakang.
- Latar belakang: #DBC2B3
Di pengaturan kolom 2, buka tab Desain dan tambahkan padding.
- Padding (Atas, Bawah, Kiri dan Kanan: 50px
Pilih ikon seluler untuk mengubah pengaturan responsif. Setel padding untuk seluler.
- Padding (Atas, Bawah, Kiri dan Kanan): 30px
Kemudian tambahkan bayangan kotak ke kolom.
Terakhir, buka pengaturan modul Formulir Kontak dan ubah warna teks bidang.
- Warna Teks Kolom: #000000
Hasil akhir contoh 2
Berikut adalah hasil akhir dari tata letak kedua.
Contoh ketiga
Untuk tata letak ketiga, kita akan memiliki formulir kontak di sebelah kiri dan modul Blurb di sebelah kanan. Mari kita mulai dengan mengubah struktur kolom dari baris yang berisi modul Blurb.
Pindahkan modul alamat ke kolom kanan.
Selanjutnya, pindahkan modul Teks "Hubungi AS" ke kolom kiri, lalu hapus baris kosong yang tersisa.
Pindahkan Modul Formulir Kontak ke kolom kiri, di bawah modul Teks "Hubungi AS". Hapus bagian kosong yang tersisa.
Buka pengaturan garis, di bawah tab Desain dan matikan Gunakan Lebar Talang Kustom
- Gunakan Lebar Talang Kustom: TIDAK
Tambahkan kode ke CSS khusus elemen utama untuk menyelaraskan modul Blurb dan Formulir Kontak secara vertikal.
align-items:center;
Buka pengaturan baris, lalu buka pengaturan kolom 1. Di bawah tab Desain, buka pengaturan batas dan hapus batas. Ulangi langkah-langkah untuk menghapus batas dari kolom 2.
- Lebar Batas Kanan: 0px
Mengubah tata letak formulir kontak
Kami akan membiarkan lebar bidang sebagaimana adanya untuk desain ketiga, namun, buka pengaturan formulir kontak dan ubah urutan nomor telepon dan bidang subjek sehingga telepon didahulukan.
Hasil akhir contoh 3
Berikut adalah hasil akhir dari tata letak ketiga.
Baca juga: Divi: Cara menampilkan modul Fullwidth Header di layar penuh
Contoh keempat
Untuk tata letak keempat dan terakhir, modul Formulir Kontak akan berada di sebelah kiri dan modul Blurb di sebelah kanan. Sekali lagi, kita akan mulai dengan mengubah struktur kolom dari baris yang berisi modul Blurb.
Pindahkan modul alamat ke kolom kanan.
Selanjutnya, pindahkan modul Formulir Kontak ke kolom kiri. Hapus bagian kosong yang tersisa.
Buka pengaturan garis, di tab Desain dan nonaktifkan Gunakan Lebar Talang Kustom.
- Gunakan Lebar Talang Kustom: TIDAK
Tambahkan kode ke CSS khusus elemen utama untuk menyelaraskan modul Blurb dan Formulir Kontak secara vertikal.
align-items:center;
Buka pengaturan baris, lalu buka pengaturan kolom 1. Di bawah tab Desain, buka pengaturan batas dan hapus batas.
- Lebar Batas Kanan: 0px
Selanjutnya, buka pengaturan kolom 2 dan ulangi langkah-langkah untuk menghapus batas.
- Lebar Batas Kanan: 0px
Buka pengaturan modul Teks untuk teks "Hubungi kami" dan tengahkan teks.
- Perataan Teks: Terpusat
Mengubah tata letak formulir kontak dengan bidang sebaris dan lebar penuh
Untuk desain ini, semua bidang kita akan memiliki lebar penuh. Buka pengaturan modul Formulir Kontak, lalu buka pengaturan untuk setiap bidang. Pada tab Desain, pilih tata ruang dan tentukan Jadikan Lebar Penuh di YES.
Setelah Anda membuat setiap bidang dengan lebar penuh, formulir akan terlihat seperti ini.
Sekarang ubah bidang ID dan Judul untuk bidang Nama Belakang menjadi Nama Depan.
Tambahkan bidang baru di bawah bidang Nama Depan. Setel bidang ID dan Judul ke Nama.
Ubah urutan kolom telepon dan subjek sehingga telepon muncul sebelum subjek.
Menyesuaikan desain modul Formulir Kontak
Di pengaturan modul, di tab Desain, atur warna teks bidang menjadi hitam.
- Warna Teks Kolom: #000000
Buka pengaturan bagian dan tambahkan warna latar belakang.
- Latar belakang: #DBC2B3
Terakhir, tambahkan topeng latar belakang.
- Topeng Latar Belakang: Arch
- Transformasi Topeng: horizontal
Untuk membuat topeng latar bekerja lebih baik di ponsel, mari gunakan pengaturan responsif.
- Mask Transform (Telepon): horizontal dan rotasi
Hasil akhir
Berikut adalah hasil akhir dari tata letak keempat.
Hasil akhir
Mari kita lihat semua contoh kita sekali lagi.
Contoh pertama
Contoh kedua
Contoh ketiga
Contoh keempat
Unduh DIVI sekarang!!!
Kesimpulan
Memiliki formulir kontak yang menarik dapat meningkatkan konversi Anda dan memungkinkan pengunjung terhubung langsung dengan Anda.
Seperti yang telah kami tunjukkan dalam artikel ini, Anda dapat menggunakan opsi bidang sebaris dan lebar penuh untuk membuat tampilan dan tata letak yang berbeda untuk formulir Anda, dan opsi desain bawaan Divi memungkinkan Anda membuat desain yang unik dan menarik untuk membantu formulir menonjol.
Semoga teknik ini akan menambah keterampilan desain lain yang berguna untuk proyek-proyek masa depan.
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 membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan 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.
...
