Point culminant du plugin Divi – Module Gravity Divi

Gravity Forms est l'un des plugins de formulaires les plus populaires pour WordPress. Il est compatible avec Divi en utilisant des shortcodes, mais cela ne profite pas pleinement de ce qui est possible avec les modules Divi. Heureusement, il existe un plugin tiers, appelé Gravity Divi Module, qui ajoute Gravity Forms au Divi Builder.

Gravity Divi Module est un plugin tiers de CodeCraters qui intègre pleinement Gravity Forms, vous êtes vos mises en page Divi et Extra. Il vous permet de styliser vos formulaires à l'aide des personnalisations du module Divi. Dans ce point culminant du plugin, nous examinerons ce que le module peut faire. Pour les exemples, j'utilise des modèles fournis par Gravity Forms et des images de Unsplash.com.

Pour plus d'informations sur Gravity Forms, consultez les articles sur les thèmes élégants :

• Gravity Forms – Un aperçu détaillé de l'édition personnelle
• Comment styliser les formes de gravité pour ressembler à Divi (+ des looks bonus !)

Installation et réglages du module Gravity Divi

Tout d'abord, Gravity Forms doit être installé pour pouvoir utiliser ce plugin. Une fois que vous avez installé Gravity Forms, téléchargez et activez le plugin Gravity Divi Module. Une fois le plugin activé, il ajoutera un nouveau module au Divi Builder appelé Gravity Divi. Aucune configuration n'est requise.

Le paramètre Contenu vous permet de choisir votre formulaire, d'afficher le titre du formulaire, d'afficher la description, d'activer AJAX, de choisir la couleur du texte et d'ajuster l'arrière-plan.

Les paramètres de conception incluent des ajustements de texte pour le titre du formulaire, la description, les éléments et le texte lui-même. L'espacement pour les marges et le remplissage ainsi que le style des boutons sont également inclus. Ces paramètres vous donnent plus de contrôle que l'utilisation d'un shortcode Gravity Forms dans un module de texte. Les paramètres avancés incluent un index de tabulation où vous pouvez spécifier l'onglet de départ pour les champs du formulaire.

Sélectionnez vos formulaires dans la liste déroulante. Si vous n'avez pas encore créé votre formulaire lorsque vous créez votre page Divi, vous pouvez en créer un en cliquant sur le lien dans les paramètres de contenu sous Choose Gravity Form. Une fois le formulaire créé, il apparaîtra dans cette liste déroulante.

Faire des ajustements

Il s'agit du formulaire de contact avancé utilisant le style par défaut. Il correspond au style Divi. Faire des ajustements est facile.

Voici un aperçu de quelques personnalisations de base. J'ai augmenté la taille de la police du texte d'en-tête, modifié les couleurs de toutes les polices, ajouté une image d'arrière-plan avec une superposition sombre et ajouté un rembourrage.

Dans cet exemple, j'ai désactivé le titre du formulaire.

Dans celui-ci, j'ai sélectionné un nouveau formulaire dans la liste déroulante. Il conserve les paramètres des polices et de l'arrière-plan car ces ajustements ont été effectués dans le module. Ceci est un exemple rapide avec une courte description. J'ai le titre du formulaire désactivé et la description activée.

Module Gravity Divi dans les exemples de mises en page Divi

Le plus grand avantage de Gravity Module est le Divi Builder avec ses paramètres de module, ce qui signifie que les paramètres de module auxquels vous êtes habitué sont disponibles pour Gravity Forms. Voici quelques exemples au sein des mises en page Divi.

Formulaire de contact avancé dans la disposition du module Personne

Il s'agit du formulaire de contact avancé intégré dans une mise en page simple avec une image de fond. Pour aider le formulaire à se fondre dans la conception de la page, j'ai modifié le texte en clair, augmenté la taille de la police du titre à 40 et modifié le texte des éléments de formulaire en rouge.

J'ai placé la ligne du module dans la même section que les modules Person afin que l'image d'arrière-plan s'étende au module Gravity. Le formulaire s'intègre dans la conception de la page plutôt que de donner l'impression que je viens de joindre un formulaire au bas de la page.

Mise en page d'inscription

Cet exemple utilise certains des éléments de mise en page de la mise en page gratuite de la page d'accueil pour les universités et les collèges.

Le module Gravity est placé dans une disposition 2/3, 1/3 avec un module de texte.

J'ai activé le titre du formulaire et AJAX afin que le formulaire multipage ne recharge pas la page lorsque l'utilisateur clique sur Suivant. La police du titre du formulaire est définie sur 30 %. Il s'intègre bien dans le style de la mise en page. Aucun autre changement n'était nécessaire.

Mariage RSVP

Celui-ci utilise des couleurs douces et des polices élégantes qui se fondent avec la photo (elles peuvent être difficiles à voir sur cette image. J'utiliserais normalement un contraste plus élevé, mais un contraste plus doux est préférable pour un site Web de mariage). Les couleurs sont extraites de la photo elle-même, puis assombries pour améliorer la lisibilité.

Cette mise en page est un module unique avec un arrière-plan dans la section. J'ai changé toutes les polices en Tangerine, augmenté la taille de la police et les ai rendues en gras, et ajusté les couleurs à un bronzage ou un rouge en fonction des couleurs de l'image.

Formulaire de commande de pizza

Cet exemple utilise le modèle de formulaire Créer une pizza de Gravity Forms.

Cette mise en page utilise une mise en page 1/3, 2/3 avec un module Gravity et plusieurs modules image. J'ai ajouté un arrière-plan dans la section et une superposition dans la rangée avec un rembourrage pour que tout rentre dans l'espace conçu.

J'ai défini le texte sur Light, changé les polices en Arimo et ajusté la taille de la police pour chacun des éléments du formulaire séparément.

J'ai défini le texte et la bordure du bouton sur blanc et j'ai ajusté le rayon de la bordure du bouton à 30.

Thème supplémentaire avec formulaire de contact avancé dans la disposition du module Personne

Le module de gravité est également compatible avec Extra. Voici un aperçu du premier exemple (Formulaire de contact avancé dans la disposition du module Personne) avec Extra. Pour la page dans Extra, j'utilise un modèle de page pleine largeur. Elle ressemble à la page Divi.

Le seul changement que j'ai fait est le style des boutons. Le bouton bleu ne s'est pas aussi bien mélangé et le texte blanc a fière allure sur le fond bleu.

Licence et assistance

Le plugin est livré avec une licence illimitée, vous pouvez donc l'installer sur autant de sites Web que vous le souhaitez pour vous et vos clients. Il comprend également des mises à jour à vie et une assistance de 6 mois.

Le module Gravity Divi peut être acheté dans la boutique du développeur.

Dernières pensées

Le module Gravity Divi offre un excellent moyen d'intégrer vos formulaires Gravity dans vos mises en page Divi. Il ajoute plus de fonctionnalités que la simple utilisation des codes courts de Gravity Forms. Tous les avantages de Gravity Forms sont renforcés par le Divi Builder et les paramètres du module, qui incluent les paramètres d'arrière-plan tels que l'image, les superpositions et les dégradés, les paramètres de police et de boutons, le remplissage, etc.

Si vous souhaitez utiliser Gravity Forms avec Divi Builder, le module Gravity Divi pourrait être la solution dont vous avez besoin.

Maintenant c'est ton tour. Avez-vous utilisé Gravity Divi Module ? Faites-nous savoir ce que vous en pensez dans les commentaires ci-dessous.

Image en vedette via Bloomicon / shutterstock.com