Evidenziazione del plug-in Divi - Modulo Gravity Divi

Gravity Forms è uno dei plugin di moduli più popolari per WordPress. È compatibile con Divi che utilizza gli shortcode, ma questo non sfrutta appieno ciò che è possibile con i moduli Divi. Fortunatamente è disponibile un plug-in di terze parti, chiamato Gravity Divi Module, che aggiunge Gravity Forms a Divi Builder.

Gravity Divi Module è un plug-in di terze parti di CodeCraters che integra completamente Gravity Forms con i tuoi layout Divi ed Extra. Ti consente di modellare i tuoi moduli utilizzando le personalizzazioni del modulo Divi. In questo momento saliente del plugin daremo un'occhiata a cosa può fare il modulo. Per i campioni sto usando modelli forniti da Gravity Forms e immagini da Unsplash.com.

Per ulteriori informazioni su Gravity Forms, vedere gli articoli sui temi eleganti:

• Gravity Forms – Uno sguardo dettagliato alla Personal Edition
• Come modellare le forme Gravity in modo che assomiglino a Divi (+ look bonus!)

Installazione e impostazioni del modulo Gravity Divi

Innanzitutto, Gravity Forms deve essere installato per poter utilizzare questo plugin. Una volta installato Gravity Forms, carica e attiva il plugin Gravity Divi Module. Una volta attivato, il plugin aggiungerà un nuovo modulo al Divi Builder chiamato Gravity Divi. Non è richiesta alcuna configurazione.

L'impostazione Contenuto consente di scegliere il modulo, mostrare il titolo del modulo, mostrare la descrizione, abilitare AJAX, scegliere il colore del testo e regolare lo sfondo.

Le impostazioni di progettazione includono le regolazioni del testo per il titolo del modulo, la descrizione, gli elementi e il testo stesso. È inclusa anche la spaziatura per i margini e il riempimento e lo stile dei pulsanti. Queste impostazioni ti danno più controllo rispetto all'utilizzo di uno shortcode Gravity Forms in un modulo di testo. Le impostazioni avanzate includono un indice di schede in cui è possibile specificare la scheda iniziale per i campi del modulo.

Seleziona i tuoi moduli dalla casella a discesa. Se non hai ancora creato il tuo modulo quando crei la tua pagina Divi, puoi crearne uno facendo clic sul collegamento nelle impostazioni del contenuto sotto Scegli Gravity Form. Una volta creato il modulo, apparirà in questa casella a discesa.

Effettuare le regolazioni

Questo è il modulo di contatto avanzato che utilizza lo stile predefinito. Si abbina allo stile Divi. Effettuare le regolazioni è facile.

Ecco alcune personalizzazioni di base. Ho aumentato la dimensione del carattere del testo dell'intestazione, cambiato i colori per tutti i caratteri, aggiunto un'immagine di sfondo con sovrapposizione scura e aggiunto imbottitura.

In questo esempio ho disabilitato il titolo del modulo.

In questo ho selezionato un nuovo modulo dalla casella a discesa. Mantiene le impostazioni per i caratteri e lo sfondo perché tali regolazioni sono state eseguite nel modulo. Questo è un rapido esempio con una breve descrizione. Ho il titolo del modulo disabilitato e la descrizione abilitata.

Modulo Gravity Divi negli esempi di layout Divi

Il più grande vantaggio di Gravity Module è il Divi Builder con le sue impostazioni del modulo, il che significa che le impostazioni del modulo a cui sei abituato sono disponibili per Gravity Forms. Ecco alcuni esempi all'interno dei layout Divi.

Modulo di contatto avanzato nel layout del modulo persona

Questo è il modulo di contatto avanzato integrato in un semplice layout con un'immagine di sfondo. Per aiutare il modulo a fondersi con il design della pagina, ho modificato il testo in chiaro, aumentato la dimensione del carattere del titolo a 40 e modificato il testo degli elementi del modulo in rosso.

Ho posizionato la riga del modulo nella stessa sezione dei moduli Persona in modo che l'immagine di sfondo si estenda al modulo Gravità. Il modulo si adatta al design della pagina anziché sembrare come se avessi appena allegato un modulo in fondo alla pagina.

Layout di registrazione

Questo esempio utilizza alcuni degli elementi del layout del layout della home page gratuito per università e college.

Il modulo Gravity è posizionato all'interno di un layout 2/3, 1/3 con un modulo di testo.

Ho abilitato il titolo del modulo e AJAX in modo che il modulo multipagina non ricarichi la pagina quando l'utente fa clic su Avanti. Il carattere del titolo del modulo è impostato al 30%. Si adatta bene allo stile del layout. Non sono state necessarie altre modifiche.

Risposta di matrimonio

Questo utilizza colori tenui e caratteri eleganti che si fondono con la foto (potrebbero essere difficili da vedere in questa immagine. Normalmente userei un contrasto più elevato, ma è preferibile un contrasto più morbido per un sito Web di matrimoni). I colori sono presi dalla foto stessa e poi scuriti per migliorare la leggibilità.

Questo layout è un singolo modulo con uno sfondo nella sezione. Ho cambiato tutti i caratteri in Tangerine, ho aumentato la dimensione del carattere e li ho resi in grassetto e ho regolato i colori su un marrone chiaro o rosso in base ai colori all'interno dell'immagine.

Modulo d'ordine pizza

Questo esempio usa il modello di modulo Build a Pizza di Gravity Forms.

Questo layout utilizza un layout 1/3, 2/3 con un modulo Gravity e diversi moduli immagine. Ho aggiunto uno sfondo nella sezione e una sovrapposizione nella riga con imbottitura per far sì che tutto si adatti allo spazio progettato.

Ho impostato il testo su Light, cambiato i caratteri in Arimo e regolato la dimensione del carattere per ciascuno degli elementi del modulo separatamente.

Ho impostato il testo e il bordo del pulsante su bianco e ho regolato il raggio del bordo del pulsante su 30.

Tema extra con modulo di contatto avanzato nel layout del modulo persona

Gravity Module è compatibile anche con Extra. Ecco uno sguardo al primo esempio (modulo di contatto avanzato nel layout del modulo persona) con extra. Per la pagina in Extra sto usando un modello di pagina a larghezza intera. Sembra uguale alla pagina Divi.

L'unico cambiamento che ho fatto è lo stile dei pulsanti. Il pulsante blu non si fondeva bene e il testo bianco sembra fantastico sullo sfondo blu.

Licenza e supporto

Il plug-in viene fornito con una licenza illimitata, quindi puoi installarlo su tutti i siti Web che desideri sia per te che per i tuoi clienti. Include anche aggiornamenti a vita e 6 mesi di supporto.

Il modulo Gravity Divi può essere acquistato dal negozio dello sviluppatore.

Pensieri finali

Il modulo Gravity Divi offre un ottimo modo per integrare i tuoi Gravity Forms all'interno dei tuoi layout Divi. Aggiunge più funzionalità rispetto al semplice utilizzo degli shortcode Gravity Forms. Tutti i vantaggi di Gravity Forms sono migliorati dal Divi Builder e dalle impostazioni del modulo, che includono impostazioni di sfondo come immagini, sovrapposizioni e sfumature, impostazioni di caratteri e pulsanti, riempimento, ecc.

Se sei interessato a utilizzare Gravity Forms con Divi Builder, Gravity Divi Module potrebbe essere la soluzione di cui hai bisogno.

Ora è il tuo turno. Hai usato il modulo Gravity Divi? Fateci sapere cosa ne pensate nei commenti qui sotto.

Immagine in primo piano tramite Bloomicon / shutterstock.com