Perlu menggabungkan bidang sebaris dan bidang lebar penuh modul Formulir Kontak dari Divi ?
Formulir kontak adalah elemen penting untuk disertakan di situs web Anda jika Anda ingin menangkap email dan mengubah pengunjung Anda menjadi pelanggan.
Modul Formulir Kontak Divi Modul ini dapat dengan mudah dikustomisasi untuk membuat formulir kontak yang menarik dan interaktif untuk semua jenis situs web. Modul ini dilengkapi dengan dua opsi tampilan yang dapat diterapkan pada setiap kolom formulir: en ligne ou lebar penuh.
Dalam tutorial ini, kami akan memamerkan empat kemungkinan tata letak unik untuk formulir kontak Divi Anda 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 versi Divi terbaru di situs web Anda.
Sekarang Anda siap untuk memulai!
4 contoh tata letak 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 tersebut. 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 atas, tepat di bawah baris yang berisi 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
Selanjutnya, di bawah pengaturan formulir kontak, ubah urutan subjek dan nomor 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 kita ubah beberapa pengaturan untuk menyelesaikan desainnya. Buka tab Desain di 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 dari 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 kustom elemen utama untuk menyelaraskan modul Blurb dan Formulir Kontak secara vertikal.
align-items:center;
Sekarang kita perlu menghapus garis tipis di antara kolom. Buka pengaturan baris, lalu buka pengaturan untuk kolom 1. Di bawah tab Desain, buka pengaturan batas dan hapus batas tersebut.
- Lebar Batas Kanan: 0px
Selanjutnya, buka pengaturan kolom 2 dan ulangi langkah-langkah untuk menghapus batas.
- Lebar Batas Kanan: 0px
Atur 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 objek sehingga nomor telepon berada sebelum objek.
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
Pada pengaturan kolom 2, buka tab Desain dan tambahkan padding.
- Padding (Atas, Bawah, Kiri dan Kanan: 50px
Pilih ikon seluler untuk mengubah pengaturan responsif. Atur padding untuk perangkat 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 dari 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 sebelah kanan.
Selanjutnya, pindahkan modul Teks "Hubungi Kami" ke kolom kiri, lalu hapus baris kosong yang tersisa.
Pindahkan modul Formulir Kontak ke kolom kiri, di bawah modul Teks "Hubungi Kami". Hapus bagian kosong yang tersisa.
Buka pengaturan garis, di bawah tab Desain, dan nonaktifkan Gunakan Lebar Talang Kustom
- Gunakan Lebar Talang Kustom: TIDAK
Tambahkan kode ke CSS kustom elemen utama untuk menyelaraskan modul Blurb dan Formulir Kontak secara vertikal.
align-items:center;
Buka pengaturan baris, lalu buka pengaturan untuk kolom 1. Pada tab Desain, buka pengaturan batas dan hapus batasnya. Ulangi langkah-langkah ini untuk menghapus batas dari kolom 2.
- Lebar Batas Kanan: 0px
Mengubah tata letak formulir kontak
Kita akan membiarkan lebar kolom tetap seperti semula untuk desain ketiga; namun, buka pengaturan formulir kontak dan ubah urutan nomor telepon dan kolom subjek sehingga nomor telepon berada di urutan pertama.
Hasil akhir dari 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 sebelah kanan.
Selanjutnya, pindahkan modul Formulir Kontak ke kolom kiri. Hapus bagian kosong yang tersisa.
Buka pengaturan garis, masuk ke tab Desain, dan nonaktifkan. Gunakan Lebar Talang Kustom.
- Gunakan Lebar Talang Kustom: TIDAK
Tambahkan kode ke CSS kustom elemen utama untuk menyelaraskan modul Blurb dan Formulir Kontak secara vertikal.
align-items:center;
Buka pengaturan baris, lalu buka pengaturan untuk kolom 1. Di bawah tab Desain, buka pengaturan batas dan hapus batasnya.
- 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 tersebut.
- Perataan Teks: Terpusat
Mengubah tata letak formulir kontak dengan bidang sebaris dan lebar penuh
Untuk desain ini, semua kolom akan memiliki lebar penuh. Buka pengaturan modul Formulir Kontak, lalu buka pengaturan untuk setiap kolom. Di bawah 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 objek sehingga nomor telepon berada sebelum objek.
Menyesuaikan desain modul Formulir Kontak
Di pengaturan modul, pada tab Desain, atur warna teks kolom menjadi hitam.
- Warna Teks Kolom: #000000
Buka pengaturan bagian dan tambahkan warna latar belakang.
- Latar belakang: #DBC2B3
Terakhir, tambahkan masker latar belakang.
- Topeng Latar Belakang: Arch
- Transformasi Topeng: horizontal
Agar masker latar belakang berfungsi lebih baik di perangkat seluler, mari kita gunakan pengaturan responsif.
- Mask Transform (Telepon): horizontal dan rotasi
Hasil akhir
Berikut adalah hasil akhir dari tata letak keempat.
Hasil akhir
Mari kita lihat kembali semua contoh kita.
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 (inline) dan lebar penuh (full-width) untuk membuat tampilan dan tata letak yang berbeda untuk formulir Anda, dan opsi desain bawaan Divi memungkinkan Anda untuk membuat desain yang unik dan menarik agar formulir tersebut 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.
...