Divi Eklentisi Vurgusu – Yerçekimi Divi Modülü

Gravity Forms, WordPress için en popüler form eklentilerinden biridir. Kısa kodlar kullanarak Divi ile uyumludur, ancak bu, Divi modülleriyle mümkün olanlardan tam olarak yararlanmaz. Neyse ki, Divi Builder'a Gravity Forms ekleyen Gravity Divi Module adlı bir üçüncü taraf eklentisi var.

Gravity Divi Modülü, Divi ve Extra düzenleriniz olan Gravity Forms'u tamamen entegre eden CodeCraters'ın üçüncü taraf eklentisidir. Divi modül özelleştirmelerini kullanarak formlarınızı şekillendirmenize olanak tanır. Bu eklenti vurgusunda, modülün neler yapabileceğine bir göz atacağız. Örnekler için Gravity Forms tarafından sağlanan şablonları ve Unsplash.com'dan gelen görüntüleri kullanıyorum.

Yerçekimi Formları hakkında daha fazla bilgi için Zarif Temalar makalelerine bakın:

• Yerçekimi Formları – Kişisel Sürüme Ayrıntılı Bir Bakış
• Divi Gibi Görünmek İçin Yerçekimi Formlarını Nasıl Stillendirirsiniz (+ Bonus Görünümler!)

Gravity Divi Modülü Kurulumu ve Ayarları

Bu eklentiyi kullanabilmek için öncelikle Gravity Forms kurulu olmalıdır. Gravity Forms'u yükledikten sonra Gravity Divi Module eklentisini yükleyin ve etkinleştirin. Eklenti etkinleştirildiğinde, Gravity Divi adlı Divi Builder'a yeni bir modül ekleyecektir. Kurulum gerekli değildir.

İçerik ayarı, formunuzu seçmenize, formun başlığını göstermenize, açıklamayı göstermenize, AJAX'ı etkinleştirmenize, metin rengini seçmenize ve arka planı ayarlamanıza olanak tanır.

Tasarım ayarları, form başlığı, açıklama, öğeler ve metnin kendisi için metin ayarlamalarını içerir. Ayrıca kenar boşlukları ve dolgu için boşluk ve düğme stili dahildir. Bu ayarlar size bir metin modülünde Gravity Forms kısa kodu kullanmaktan daha fazla kontrol sağlar. Gelişmiş ayarlar, form alanları için başlangıç ​​sekmesini belirtebileceğiniz bir sekme dizini içerir.

Açılır kutudan formlarınızı seçin. Divi sayfanızı oluştururken henüz formunuzu oluşturmadıysanız, içerik ayarlarında Yerçekimi Formunu Seçin altındaki bağlantıya tıklayarak form oluşturabilirsiniz. Formu oluşturduktan sonra, bu açılır kutuda görünecektir.

Ayarlamalar Yapmak

Bu, varsayılan stili kullanan Gelişmiş İletişim Formu'dur. Divi stiline uygundur. Ayarlama yapmak kolaydır.

İşte bazı temel özelleştirmelere bir bakış. Başlık metninin yazı tipi boyutunu artırdım, tüm yazı tiplerinin renklerini değiştirdim, koyu kaplamalı bir arka plan resmi ekledim ve dolgu ekledim.

Bu örnekte form başlığını devre dışı bıraktım.

Bunda açılır kutudan yeni bir form seçtim. Bu ayarlar modülde yapıldığı için yazı tipi ve arka plan ayarlarını tutar. Bu kısa bir açıklama ile hızlı bir örnektir. Form başlığını devre dışı bıraktım ve açıklamayı etkinleştirdim.

Divi Düzenleri Örneklerinde Gravity Divi Modülü

Gravity Modülünün en büyük avantajı, modül ayarlarına sahip Divi Builder'dır; bu, alışık olduğunuz modül ayarlarının Gravity Forms için mevcut olduğu anlamına gelir. Divi düzenleri içindeki birkaç örneğe bir göz atın.

Kişi Modül Düzeninde Gelişmiş İletişim Formu

Bu, bir arka plan görüntüsü ile basit bir düzen içinde entegre edilmiş Gelişmiş İletişim Formu'dur. Formun sayfa tasarımıyla uyum sağlamasına yardımcı olmak için metni açık hale getirdim, başlık yazı tipi boyutunu 40'a yükselttim ve form öğeleri metnini kırmızıya çevirdim.

Modülün satırını Kişi modülleriyle aynı bölüme yerleştirdim, böylece arka plan görüntüsü Yerçekimi modülüne uzanıyor. Form, sayfanın altına bir form ekledim gibi görünmek yerine, sayfanın tasarımına uyuyor.

Kayıt Düzeni

Bu örnek, üniversiteler ve kolejler için ücretsiz ana sayfa düzeninden bazı düzen öğelerini kullanır.

Yerçekimi modülü, bir metin modülü ile 2/3, 1/3 düzenine yerleştirilmiştir.

Kullanıcı İleri'yi tıklattığında çok sayfalı formun sayfayı yeniden yüklememesi için form başlığını ve AJAX'ı etkinleştirdim. Form başlığı yazı tipi %30 olarak ayarlanmıştır. Düzenin stiline iyi uyuyor. Başka bir değişikliğe gerek yoktu.

Düğün LCV'si

Bu, fotoğrafla uyum sağlayan yumuşak renkler ve zarif yazı tipleri kullanıyor (bu resimde görmek zor olabilir. Normalde daha yüksek bir kontrast kullanırdım, ancak bir düğün web sitesi için daha yumuşak bir kontrast tercih edilir). Renkler fotoğrafın kendisinden alınır ve ardından okunabilirliği artırmaya yardımcı olmak için koyulaştırılır.

Bu düzen, bölümde arka planı olan tek bir modüldür. Tüm yazı tiplerini Mandalina olarak değiştirdim, yazı tipi boyutunu büyütüp kalın yaptım ve resimdeki renklere göre renkleri ten rengi veya kırmızıya ayarladım.

Pizza Sipariş Formu

Bu örnek, Gravity Forms'dan Build a Pizza form şablonunu kullanır.

Bu düzen, Yerçekimi modülü ve birkaç görüntü modülü ile 1/3, 2/3 düzenini kullanır. Her şeyi tasarlanan alana sığdırmak için bölüme bir arka plan ve satıra dolgulu bir bindirme ekledim.

Metni Light olarak ayarladım, yazı tiplerini Arimo olarak değiştirdim ve formun her bir öğesi için yazı tipi boyutunu ayrı ayrı ayarladım.

Düğme metnini ve kenarlığını beyaza ve düğme kenarlığının yarıçapını 30'a ayarladım.

Kişi Modül Düzeninde Gelişmiş İletişim Formu ile Ekstra Tema

Yerçekimi Modülü Extra ile de uyumludur. Ekstra ile ilk örneğe (Kişi Modülü Düzeninde Gelişmiş İletişim Formu) bir göz atın. Extra'daki sayfa için tam genişlikte bir sayfa şablonu kullanıyorum. Divi sayfasıyla aynı görünüyor.

Yaptığım tek değişiklik düğme stili. Mavi düğme de karışmadı ve beyaz metin mavi arka plana karşı harika görünüyor.

Lisans ve Destek

Eklenti sınırsız lisansla birlikte gelir, böylece hem siz hem de müşterileriniz için istediğiniz kadar web sitesine yükleyebilirsiniz. Ayrıca ömür boyu güncellemeler ve 6 aylık destek içerir.

Gravity Divi Modülü, geliştiricinin mağazasından satın alınabilir.

Son düşünceler

Gravity Divi Modülü, Gravity Formlarınızı Divi düzenlerinize entegre etmenin harika bir yolunu sunar. Gravity Forms kısa kodlarını kullanmaktan daha fazla özellik ekler. Gravity Forms'un tüm avantajları, Divi Builder ve modülün görüntü, bindirmeler ve degradeler, yazı tipi ve düğme ayarları, dolgu vb. gibi arka plan ayarlarını içeren ayarlarıyla geliştirilmiştir.

Divi Builder ile Gravity Forms'u kullanmakla ilgileniyorsanız, Gravity Divi Modülü ihtiyacınız olan çözüm olabilir.

Şimdi senin sıran. Gravity Divi Modülünü kullandınız mı? Aşağıdaki yorumlarda ne düşündüğünüzü bize bildirin.

Bloomicon / Shutterstock.com aracılığıyla Öne Çıkan Görsel