Sorotan Produk Divi: Modul Penata Bentuk Gravitasi untuk Divi

Modul Gravity Forms Styler untuk Divi adalah plugin yang tersedia di Divi Marketplace yang memudahkan untuk sepenuhnya menyesuaikan gaya Gravity Forms Anda langsung dalam antarmuka Divi Builder yang sudah dikenal. Dengan plugin ini, Anda dapat menambahkan Gravity Forms ke tata letak Divi Anda seperti yang Anda lakukan pada modul lainnya. Dengan menggunakan opsi di tab desain, Anda memiliki kendali penuh atas setiap aspek formulir.

Salah satu fitur unik dari plugin ini adalah Anda dapat melihat pratinjau seluruh formulir, formulir dengan kesalahan validasi, dan halaman pesan konfirmasi langsung di Divi Builder. Dalam sorotan produk ini, kita akan melihat lebih dekat Modul Gravity Forms Styler untuk Divi dan membantu Anda memutuskan apakah itu produk yang tepat untuk Anda.

Mari kita mulai!

Memasang Modul Gravity Forms Styler untuk Divi

Pertama, pastikan plugin Gravity Forms diinstal dan diaktifkan di situs Anda. Selain itu, beli plugin Gravity Forms Styler Module untuk Divi dari Divi Marketplace dan unduh file plugin.

Untuk menginstal plugin, buka halaman Add New di bawah judul Plugins di dashboard WordPress. Klik tombol Unggah Plugin, lalu klik Pilih File untuk memilih file plugin dari komputer Anda. Terakhir, klik Instal Sekarang, dan plugin akan ditambahkan ke situs web Anda.

Setelah plugin diinstal, klik Aktifkan Plugin.

Modul Penata Bentuk Gravitasi untuk Divi

Modul Gravity Forms Styler untuk Divi adalah modul yang ditambahkan ke Divi Builder, yang berarti Anda dapat menambahkan Gravity Forms di mana pun Anda dapat menambahkan modul Divi lainnya, memberi Anda fleksibilitas tertinggi dalam tata letak dan desain Anda. Mulailah dengan menambahkan halaman baru ke situs Anda dan pilih opsi Divi Builder.

Di halaman baru, klik ikon plus berwarna abu-abu untuk menyisipkan modul. Pilih modul Gravity Form dari daftar.

Pengaturan isi

Buka opsi untuk modul Gravity Form. Opsi pertama, berjudul “Form” memungkinkan Anda memilih Gravity Form yang ingin Anda tampilkan.

Anda juga dapat menyesuaikan judul dan deskripsi yang ditampilkan pada formulir. Anda dapat menyembunyikan masing-masing elemen ini, mengatur judul atau deskripsi khusus, atau menampilkan kumpulan judul atau deskripsi di pengaturan Gravity Forms.

Selanjutnya, Anda dapat mengaktifkan Ajax untuk pengiriman formulir. Jika diaktifkan, halaman tidak akan dimuat ulang setelah pengiriman formulir. Anda dapat menentukan indeks tab awal untuk bidang formulir dan nilai bidang default di pengaturan konten.

Latar belakang

Di tab konten, Anda juga dapat menambahkan latar belakang ke modul Gravity Forms. Dengan menggunakan opsi latar belakang Divi yang luas, Anda dapat menambahkan warna latar belakang, gradien, gambar, video, pola, atau topeng untuk membuat tata letak unik untuk formulir Anda.

Pengaturan Desain

Sekarang, mari beralih ke tab desain. Di sinilah Anda dapat sepenuhnya menyesuaikan desain setiap elemen dalam formulir.

huruf

Di bawah tab font, Anda dapat mengatur gaya teks dalam formulir. Di bagian ini, Anda dapat mengatur font, berat font, gaya, perataan, warna, ukuran teks, spasi huruf, tinggi garis, dan bayangan teks. Di sini, saya mengatur font dan warna font.

Judul Formulir

Dalam pengaturan judul formulir, Anda bisa mengkustomisasi gaya font judul formulir, font judul, padding dan margin, batas, dan latar belakang. Dengan opsi ini, Anda dapat sepenuhnya menyesuaikan bagian judul secara terpisah dari formulir lainnya. Untuk contoh ini, saya memperbesar ukuran teks judul formulir.

bidang

Bagian pengaturan bidang adalah tempat Anda dapat mengatur gaya bidang formulir, termasuk warna latar belakang, warna teks, gaya fokus, margin dan padding, gaya font, dan gaya batas. Di bagian ini, saya mengatur warna bidang menjadi putih.

Saya juga mengaktifkan batas fokus. Ini menerapkan gaya unik pada batas bidang aktif, seperti yang Anda lihat di tangkapan layar.

Kesalahan Bidang

Selanjutnya, bagian kesalahan bidang adalah tempat Anda dapat mengatur gaya teks, latar belakang, dan warna batas untuk kesalahan bidang formulir.

Label

Di bagian label, Anda dapat mengatur gaya teks label, mengatur padding dan margin, mengatur gaya batas, dan menambahkan latar belakang atau bayangan kotak. Untuk contoh ini, saya memperbesar ukuran teks label dan mengubah warnanya. Saya juga melepas bantalan bawah.

Teks yang Diperlukan

Bagian selanjutnya adalah tempat Anda dapat menata gaya teks yang diperlukan. Opsinya memungkinkan Anda memberi gaya pada tanda bintang yang muncul di sebelah bidang yang wajib diisi.

Sub Label

Berikutnya adalah pengaturan sub label. Di sini, Anda dapat menyesuaikan gaya teks sub label, padding dan margin, gaya batas, latar belakang, dan bayangan kotak. Saya mengatur warna teks sub label menjadi abu-abu dan menyesuaikan margin atas.

Deskripsi Bidang

Pengaturan deskripsi bidang mirip dengan yang terakhir, di mana Anda dapat menyesuaikan gaya teks, padding dan margin, gaya batas, latar belakang, dan bayangan kotak. Saya menyesuaikan margin dalam contoh ini untuk mendekatkan deskripsi dan judul.

Selanjutnya, Anda dapat mengatur gaya font validasi bidang di pengaturan validasi bidang. Selain itu, Anda dapat menyesuaikan padding dan margin, gaya batas, latar belakang, dan bayangan kotak.

Pemberitahuan Kesalahan

Pengaturan pemberitahuan kesalahan sangat mirip, dengan opsi untuk menyesuaikan font, spasi, batas, latar belakang, dan bayangan kotak.

Pesan konfirmasi

Bagian selanjutnya adalah untuk menyesuaikan pesan konfirmasi. Anda dapat menggunakan opsi pratinjau di bagian atas untuk melihat tata letak pesan konfirmasi.

Tombol radio

Di pengaturan tombol radio, Anda dapat mengatur warna radio, gaya teks, dan spasi daftar. Di sini, saya memodifikasi warna latar belakang yang dicentang.

kotak centang

Demikian pula, Anda dapat mengubah warna kotak centang, gaya teks, dan spasi daftar di bagian ini.

Unggahan File

Bagian unggah file dapat disesuaikan di sini. Anda dapat menyesuaikan gaya font, spasi, batas, latar belakang, dan bayangan kotak.

Istirahat Bagian

Di sini Anda dapat menyesuaikan gaya font untuk deskripsi dan judul hentian bagian serta menyesuaikan spasi, batas, latar belakang, dan bayangan kotak.

Bidang Harga

Anda juga dapat menyesuaikan bidang harga Gravity Forms menggunakan modul ini. Anda dapat menentukan gaya bidang harga produk, harga pengiriman, dan harga total.

Bilah Kemajuan

Berikutnya adalah opsi bilah kemajuan. Bilah kemajuan muncul di formulir jika ada beberapa halaman dan memberikan indikator visual tentang seberapa jauh Anda sudah menguasai formulir. Dalam pengaturan desain, Anda dapat menyesuaikan gaya bilah kemajuan. Anda dapat mengatur warna, tinggi bilah, menyesuaikan opsi font, menambahkan batas, dan menyesuaikan jarak.

Formulir Catatan Kaki

Dalam opsi footer formulir, Anda dapat mengatur perataan tombol, spasi, gaya batas, latar belakang, dan gaya bayangan kotak.

Penataan Tombol

Berikutnya adalah empat bagian di mana Anda dapat menyesuaikan tombol dalam bentuk: Tombol Kirim, Tombol Navigasi Halaman, Tombol Simpan dan Lanjutkan, dan Tombol Pilih Semua. Di setiap bagian ini, Anda bisa mengaktifkan gaya tombol kustom untuk mengubah gaya agar sesuai dengan desain formulir Anda.

Perekat

Dalam pengaturan ukuran, Anda dapat mengatur lebar, tinggi, dan perataan formulir. Di sini, saya mengatur lebar menjadi 75% dan perataannya ke tengah.

Jarak

Selanjutnya, Anda dapat mengubah margin dan padding untuk formulir. Saya menambahkan beberapa padding ke setiap sisi untuk contoh ini.

Berbatasan

Dalam pengaturan perbatasan, Anda bisa menambahkan batas di sekitar formulir. Di sini, saya menambahkan batas biru.

Bayangan Kotak

Selanjutnya, Anda bisa menambahkan bayangan kotak ke formulir.

Filter

Di sini, Anda dapat menggunakan filter berbeda untuk mengubah cara formulir ditampilkan.

Mengubah

Dalam pengaturan transformasi, Anda dapat menyesuaikan tampilan formulir menggunakan pengaturan skala, terjemahan, rotasi, kemiringan, dan asal transformasi.

Animasi

Terakhir, Anda dapat menerapkan efek animasi pada form di bagian ini. Anda dapat memilih dari tujuh gaya animasi yang berbeda dan menyesuaikan durasi animasi, penundaan, intensitas, dan lainnya.

Tata Letak yang Telah Dirancang Sebelumnya

Modul Gravity Forms Styler untuk Divi juga dilengkapi dengan akses ke beberapa tata letak yang telah dirancang sebelumnya untuk formulir dengan gaya penuh. Anda dapat mengunduh tata letak dari situs pembuat plugin. Tata letak ini adalah cara terbaik untuk memulai proses penataan gaya.

Modul Gravity Forms Styler untuk Contoh Tata Letak Divi

Berikut adalah salah satu contoh cara menata Gravity Form Anda menggunakan Modul Gravity Forms Styler untuk Divi.

Halaman pertama

Halaman Kedua

Kesalahan Validasi

Halaman konfirmasi

Beli Modul Gravity Forms Styler untuk Divi

Modul Gravity Forms Styler untuk Divi tersedia di Divi Marketplace. Biayanya $39 untuk penggunaan situs web tanpa batas dan 1 tahun dukungan dan pembaruan. Harganya juga sudah termasuk jaminan uang kembali 30 hari.

Pikiran Terakhir

Modul Gravity Forms Styler untuk Divi menghadirkan semua fungsi dan fleksibilitas desain Divi ke formulir Anda yang dibuat dengan Gravity Forms. Dengan banyaknya cara untuk menyesuaikan gaya setiap elemen, pilihan desain praktis tidak terbatas. Jika Anda bosan menggunakan CSS Khusus untuk mendapatkan gaya formulir dan menginginkan cara mudah untuk menyesuaikan Formulir Gravitasi menggunakan Divi Builder, ini mungkin produk hebat untuk Anda. Kami ingin sekali mendengar pendapat Anda! Sudahkah Anda mencoba Modul Gravity Forms Styler untuk Divi? Beri tahu kami pendapat Anda tentang hal ini di komentar!