Divi: Cara menyesuaikan modul "Formulir Kontak".

Apakah Anda ingin membuat formulir kontak ke situs web Anda berkat modulnya Formulir Kontak dari Divi? Berikut adalah 3 ide penyesuaian…

itu bentuk Detail kontak adalah bagian penting dari banyak situs web. Tujuan utama mereka adalah menjadi intuitif dan membantu pengunjung terhubung dengan mudah.

Namun bukan berarti itu semua bentuk kontak harus memiliki tampilan yang tepat dan telah ditentukan sebelumnya. Anda dapat dengan mudah menggabungkan pengalaman intuitif dengan desain yang indah. Inilah yang akan kita lakukan dalam tutorial ini.

Kami akan membagikan 3 desain modul yang unik Formulir Kontak de Divi yang dapat Anda buat hanya menggunakan opsi bawaan Divi.

Mari kita pergi!

Gambaran umum desain modul Formulir Kontak Divi

versi desktop

Mari kita mulai dengan melihat versi desktop dari berbagai desain modul Formulir Kontak yang akan kita desain pada tutorial ini.

tambahkan formulir kontak ke situs web Anda menggunakan modul Formulir Kontak Divi

Versi Seluler

Dan inilah tampilannya pada ukuran layar yang lebih kecil:

Unduh DIVI sekarang!!!

Cara menyesuaikan modul Formulir Kontak Divi: 3 contoh

Baca juga: Divi: Cara membuat bagian anggota tim sebagai korsel

Pembuatan formulir kontak #1

Tambahkan bagian baru

Latar belakang gradien

Mari kita mulai dengan contoh pertama! Tambahkan bagian baru, buka pengaturan latar belakang dan tambahkan latar belakang gradien.

Gradien Berhenti
- 34%: #4c00ff
- 34%: #ffd400
Jenis: Bulat
Arah Gradien: Kiri Bawah

jarak

Selanjutnya, buka opsi Spasi di tab Desain dan ubah pengaturannya sebagai berikut.

Padding (Atas dan Bawah): 200px

Tambahkan baris baru

Struktur kolom

Tambahkan baris baru menggunakan struktur kolom berikut:

Kolom 1: Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris, lalu pengaturan kolom 1 dan tambahkan warna latar belakang di bawah

Latar belakang: rgba(255,255,255,0.55)

Kolom 1: Gambar latar belakang

Tambahkan juga gambar latar belakang ke kolom pertama.

Pengulangan Gambar Latar Belakang: Tanpa Pengulangan
Campuran Gambar Latar Belakang: Layar

Kolom 2: Gambar latar belakang

Dan warna latar putih untuk kolom kedua.

Latar belakang: #ffffff

perekat

Kemudian ubah parameter ukuran.

Samakan Ketinggian Kolom: YA

jarak

Hapus juga semua padding kustom default.

Padding (Atas dan Bawah): 0px

Radius batas kolom

Tambahkan radius batas ke kedua kolom di tab lanjutan.

border-radius: 10px;

Tambahkan modul Teks ke kolom 1

Tambahkan konten

Saatnya untuk mulai menambahkan modul yang berbeda! Tambahkan modul Teks ke kolom pertama dengan konten pilihan Anda.

Pengaturan teks

Selanjutnya, buka tab Desain modul Teks dan buat beberapa perubahan.

Teks:
- Font: Memuaskan
- Warna Teks: #333333
- Ukuran: 100px
- Tinggi Garis: 1 em
- Perataan: Tengah

jarak

Juga tambahkan nilai isian khusus.

Padding (Atas): 600px
Padding (Bawah): 100px

Kotak bayangan

Untuk menambahkan kedalaman pada desain, gunakan bayangan kotak yang halus.

Kekuatan Buram Bayangan Kotak: 80px
Kekuatan Penyebaran Bayangan Kotak: -16px
Warna Bayangan: rgba (0,0,0,0.3)

Tambahkan modul Gambar ke kolom 2

Unggah gambar

Lanjutkan dengan menambahkan modul Gambar ke kolom kedua. Unggah gambar pilihan Anda.

perekat

Ubah pengaturan ukuran untuk modul ini.

Lebar: 25% (desktop), 50% (tablet), 60% (ponsel)
Penyelarasan Modul: Pusat

jarak

Buat tumpang tindih menggunakan margin atas negatif.

Margin (Atas): -60%

Perbatasan

Ubah batas gambar sebagai berikut:

Sudut Bulat: 100px (Semua sudut)

Tambahkan modul Teks #1 ke kolom 2

Tambahkan konten

Tepat di bawah modul Gambar, tambahkan modul Teks dengan konten.

Pengaturan teks

Edit pengaturan teks untuk modul ini.

Teks:
- Font: Memuaskan
- Warna Teks: #333333
- Ukuran Teks: 44px
- Orientasi: Pusat

Tambahkan modul Teks #2 ke kolom 2

Tambahkan konten

Kemudian tambahkan modul Teks lainnya.

Pengaturan teks

Ubah juga pengaturan teks untuk modul ini.

Teks:
- Jenis huruf: Arial
- Warna Teks: #ffd400
- Warna Teks: 18px
- Spasi Huruf: 2px
- Orientasi: Pusat

jarak

Kemudian tambahkan margin bawah.

Margin (Bawah): 100px

Tambahkan modul Formulir Kontak ke kolom 2

Aktifkan opsi "Jadikan Lebar Penuh" pada bidang Nama dan email

Modul terakhir yang dibutuhkan adalah modul Formulir Kontak. Sebelum melakukan hal lain, buka bidang nama dan email dan ubah tata letaknya.

Jadikan Lebar Penuh: ya

Tambahkan bidang subjek

Untuk membuat desain ini, kami menambahkan bidang lain untuk subjek.

Perlindungan spam yang

Kemudian nonaktifkan opsi captcha.

Gunakan Captcha Dasar: TIDAK

Pengaturan teks bidang formulir

Buat beberapa perubahan pada pengaturan teks bidang formulir modul Formulir Kontak ini

Bidang:
- Warna Latar: rgba(255,255,255,0)
- Jenis huruf: Arial
- Berat Huruf: Ringan
- Ukuran Teks: 16px
- Spasi Huruf: 2px

Pengaturan tombol

Kami juga mengubah tampilan tombol.

Gunakan Ukuran Khusus Untuk Tombol: YA
Tombol:
- Warna Teks: #ffd400
- Lebar Perbatasan: 0 piksel
- Spasi Huruf: 2px
- Jenis huruf: Arial
- Gaya tulisan: U
- garis bawah Warna: #4c00ff

jarak

Kemudian tambahkan beberapa nilai padding khusus.

Padding (Bawah): 100px
Padding (Kiri dan Kanan): 50px

Batas

Dan tambahkan batas bawah halus ke masing-masing bidang.

Masukan Lebar Perbatasan Bawah: 2px
Masukan Warna Batas Bawah: #efefef

Spasi bidang individu

Terakhir, tambahkan margin bawah ke masing-masing bidang kecuali bidang pesan.

Margin (Bawah): 20px