Sorotan Plugin Divi – Modul Divi Gravitasi

Gravity Forms adalah salah satu plugin formulir paling populer untuk WordPress. Ini kompatibel dengan Divi menggunakan kode pendek, tetapi ini tidak memanfaatkan sepenuhnya apa yang mungkin dengan modul Divi. Untungnya ada plugin pihak ketiga yang tersedia, yang disebut Gravity Divi Module, yang menambahkan Gravity Forms ke Divi Builder.

Gravity Divi Module adalah plugin pihak ketiga dari CodeCraters yang sepenuhnya mengintegrasikan Gravity Forms Anda adalah tata letak Divi dan Extra Anda. Ini memungkinkan Anda untuk menata formulir Anda menggunakan penyesuaian modul Divi. Dalam sorotan plugin ini kita akan melihat apa yang dapat dilakukan modul. Untuk sampel saya menggunakan template yang disediakan oleh Gravity Forms dan gambar dari Unsplash.com.

Untuk informasi lebih lanjut tentang Gravity Forms, lihat artikel Elegant Themes:

• Bentuk Gravitasi – Pandangan Mendetail pada Edisi Pribadi
• Cara Menata Bentuk Gravitasi Agar Terlihat Seperti Divi (+ Tampilan Bonus!)

Instalasi dan Pengaturan Modul Gravity Divi

Pertama, Gravity Forms harus diinstal untuk menggunakan plugin ini. Setelah Anda menginstal Gravity Forms, unggah dan aktifkan plugin Gravity Divi Module. Setelah plugin diaktifkan, ia akan menambahkan modul baru ke Divi Builder yang disebut Gravity Divi. Tidak ada pengaturan yang diperlukan.

Pengaturan Konten memungkinkan Anda memilih formulir, menampilkan judul formulir, menampilkan deskripsi, mengaktifkan AJAX, memilih warna teks, dan menyesuaikan latar belakang.

Pengaturan desain mencakup penyesuaian teks untuk judul formulir, deskripsi, elemen, dan teks itu sendiri. Juga termasuk spasi untuk margin dan padding, dan penataan tombol. Pengaturan ini memberi Anda lebih banyak kontrol daripada menggunakan kode pendek Gravity Forms dalam modul teks. Pengaturan lanjutan menyertakan indeks tab tempat Anda dapat menentukan tab awal untuk bidang formulir.

Pilih formulir Anda dari kotak dropdown. Jika Anda belum membuat formulir saat membuat halaman Divi, Anda dapat membuatnya dengan mengklik tautan di pengaturan konten di bawah Pilih Formulir Gravitasi. Setelah Anda membuat formulir itu akan muncul di kotak dropdown ini.

Membuat Penyesuaian

Ini adalah Formulir Kontak Lanjutan menggunakan gaya default. Ini cocok dengan gaya Divi. Membuat penyesuaian itu mudah.

Berikut ini beberapa penyesuaian dasar. Saya telah meningkatkan ukuran font teks header, mengubah warna untuk semua font, menambahkan gambar latar belakang dengan overlay gelap, dan menambahkan padding.

Dalam contoh ini saya telah menonaktifkan judul formulir.

Dalam hal ini saya memilih formulir baru dari kotak dropdown. Itu menyimpan pengaturan untuk font dan latar belakang karena penyesuaian itu dilakukan di modul. Ini adalah contoh cepat dengan deskripsi singkat. Saya menonaktifkan judul formulir dan deskripsi diaktifkan.

Contoh Modul Divi Gravitasi dalam Tata Letak Divi

Keuntungan terbesar dari Gravity Module adalah Divi Builder dengan pengaturan modulnya, yang berarti pengaturan modul yang biasa Anda gunakan tersedia untuk Gravity Forms. Berikut adalah beberapa contoh dalam tata letak Divi.

Formulir Kontak Lanjutan Tata Letak Modul Orang

Ini adalah Formulir Kontak Lanjutan yang terintegrasi dalam tata letak sederhana dengan gambar latar belakang. Untuk membantu perpaduan formulir dengan desain halaman, saya telah mengubah teks menjadi terang, meningkatkan ukuran font judul menjadi 40, dan mengubah teks elemen formulir menjadi merah.

Saya menempatkan baris modul di dalam bagian yang sama dengan modul Person sehingga gambar latar belakang meluas ke modul Gravity. Formulir cocok dengan desain halaman daripada terlihat seperti saya baru saja melampirkan formulir ke bagian bawah halaman.

Tata Letak Pendaftaran

Contoh ini menggunakan beberapa elemen tata letak dari tata letak beranda gratis untuk universitas dan perguruan tinggi.

Modul Gravity ditempatkan dalam tata letak 2/3, 1/3, dengan modul teks.

Saya telah mengaktifkan judul formulir dan AJAX sehingga formulir multi-halaman tidak akan memuat ulang halaman ketika pengguna mengklik Berikutnya. Font judul formulir diatur ke 30%. Ini sangat cocok dengan gaya tata letak. Tidak ada perubahan lain yang diperlukan.

Pernikahan RSVP

Yang ini menggunakan warna lembut dan font elegan yang menyatu dengan foto (mungkin sulit dilihat dalam gambar ini. Saya biasanya menggunakan kontras yang lebih tinggi, tetapi kontras yang lebih lembut lebih disukai untuk situs web pernikahan). Warna diambil dari foto itu sendiri dan kemudian digelapkan untuk membantu meningkatkan keterbacaan.

Tata letak ini adalah modul tunggal dengan latar belakang di bagian. Saya telah mengubah semua font menjadi Tangerine, meningkatkan ukuran font dan membuatnya tebal, dan menyesuaikan warna menjadi cokelat atau merah berdasarkan warna di dalam gambar.

Formulir Pemesanan Pizza

Contoh ini menggunakan Templat formulir Bangun Pizza dari Gravity Forms.

Tata letak ini menggunakan tata letak 1/3, 2/3 dengan modul Gravity dan beberapa modul gambar. Saya telah menambahkan latar belakang di bagian dan overlay di baris dengan bantalan untuk membuat semuanya sesuai dengan ruang yang dirancang.

Saya telah mengatur teks ke Light, mengubah font menjadi Arimo, dan menyesuaikan ukuran font untuk setiap elemen formulir secara terpisah.

Saya mengatur teks tombol dan batas menjadi putih dan menyesuaikan radius batas tombol menjadi 30.

Tema Ekstra dengan Formulir Kontak Lanjutan Tata Letak Modul Orang

Modul Gravitasi juga kompatibel dengan Extra. Berikut ini adalah contoh pertama (Formulir Kontak Lanjutan Tata Letak Modul Person) dengan Extra. Untuk halaman di Extra saya menggunakan templat halaman lebar penuh. Tampilannya sama dengan halaman Divi.

Satu-satunya perubahan yang saya buat adalah penataan tombol. Tombol biru juga tidak menyatu dan teks putih terlihat bagus dengan latar belakang biru.

Lisensi dan Dukungan

Plugin ini hadir dengan lisensi tak terbatas, sehingga Anda dapat menginstalnya di sebanyak mungkin situs web yang Anda inginkan untuk Anda dan klien Anda. Ini juga mencakup pembaruan seumur hidup dan dukungan 6 bulan.

Modul Gravity Divi dapat dibeli dari toko pengembang.

Pikiran Akhir

Modul Divi Gravitasi menyediakan cara yang bagus untuk mengintegrasikan Formulir Gravitasi Anda dalam tata letak Divi Anda. Itu menambahkan lebih banyak fitur daripada hanya menggunakan kode pendek Gravity Forms. Semua keuntungan Gravity Forms ditingkatkan oleh Divi Builder dan pengaturan modul, yang mencakup pengaturan latar belakang seperti gambar, overlay, dan gradien, pengaturan font dan tombol, padding, dll.

Jika Anda tertarik menggunakan Gravity Forms dengan Divi Builder, Gravity Divi Module mungkin merupakan solusi yang Anda butuhkan.

Sekarang Giliran Anda. Sudahkah Anda menggunakan Modul Divi Gravitasi? Beri tahu kami pendapat Anda di komentar di bawah.

Gambar Unggulan melalui Bloomicon / shutterstock.com