Souhaitez-vous ajouter des formes gravitaires à votre page ou design Divi? Le style de votre forme de gravité peut souvent être difficile et nécessite un CSS personnalisé.

Souhaitez-vous utiliser Divi Visual Builder pour formater des formulaires gravitaires? Maintenant, vous pouvez avec notre plugin premium pour le thème Divi et Extra de Elegant Themes.

Dans ce court tutoriel, nous allons vous montrer comment utiliser Gravity Forms avec Divi en utilisant Gravity Forms Divi Plugin. Nous allons vous montrer comment utiliser les paramètres par défaut, puis ajouter vos styles uniques à l’aide des paramètres de personnalisation de thème dans WordPress.

Avant de commencer

Pour ce tutoriel, nous nous attendons à ce que vous ayez déjà installé WordPress, le thème Divi et le plugin Gravity Forms sur votre site Web.

Notre solution fonctionne à la fois avec le thème Extra et le thème Divi.

Commençons pour que vous puissiez profiter de la beauté des formes divi et gravitationnelles.

Étape 1 – Installez notre plugin pour concevoir votre forme de gravité

Avant de commencer à créer votre formulaire, il est préférable d’installer le plugin Gravity Forms Divi.

Téléchargez le Gravity Forms Divi Plugin Ici, vous pouvez vous inscrire pour une version d’essai gratuite.

Vous devez maintenant installer et activer cela Gravity Forms Divi Plugin. (Nous proposons un essai gratuit de 7 jours afin que vous puissiez l’essayer avant de vous engager à acheter l’outil.)

Une fois le plugin installé, vous serez invité à l’installer également Cadre de personnalisation Kirki. Cela est nécessaire pour que les outils de style dans le personnalisateur de conception fonctionnent. Nous utilisons Kirki pour personnaliser les outils de thème dans WordPress. Cela nous fait gagner beaucoup de temps.

Conseil important: Videz le cache de votre serveur et le cache de votre navigateur. Cela garantira que les nouveaux styles se chargent et correspondent à votre style Divi.

Étape 2 – Passez en revue vos formes de gravité existantes

Une fois le plugin activé, la plupart de vos formes de gravité ont déjà un niveau de style. Allez-y et vérifiez chacun d’eux. Ils ressemblent beaucoup aux paramètres par défaut de Divi Form.

Vous verrez qu’une tonne de nouveaux styles ont été ajoutés. La forme est maintenant bien meilleure et beaucoup plus « à la Divi ». Tout comme dans l’exemple du formulaire de contact ci-dessous.

Formulaire avec des styles standard appliqués

Si vous utilisez l’éditeur frontal, nous vous recommandons de supprimer vos codes courts et de remplacer les formulaires intégrés à l’aide de notre module Divi. C’est un excellent moyen de formater votre forme de gravité à l’aide de l’éditeur Wedelend. Cela vous donne également les résultats les plus cohérents.

Nous avons également un style global dans le plugin. Le personnalisateur de thème vous permet de définir un style global pour toutes vos formes de gravité. Je configure généralement cela comme la première étape sur un nouveau site. C’est pour que toutes mes formes aient fière allure dès le début.

Le style global définit également les paramètres par défaut dans le module Divi pour les formes de gravité.

Étape 3 – Personnalisez vos styles de forme de gravité à l’aide du personnalisateur de thème

Accédez à la zone d’administration de WordPress et accédez à votre personnalisateur de thème (vous pouvez le trouver dans votre tableau de bord WordPress ci-dessous) Divi> Personnalisateur de thème). Une fois que vous êtes dans le personnalisateur de thème, recherchez et cliquez sur La gravité ultime crée le style. Ici, vous pouvez mettre en forme tous vos éléments de formulaire. Il s’agit des paramètres globaux par défaut de vos formulaires.

Personnalisateur de thème de plug-in Gravity Forms

Voici les paramètres ci-dessous et rappelez-vous qu’ils sont pour toutes les personnes Formulaire unique sur votre site web:

Général – Vous permet de définir une couleur d’arrière-plan ou de changer le rembourrage.

Titre – Contrôlez la police, la taille, le style, la couleur et l’espacement. Ce sont les caractéristiques de rangement standard.

la description – C’est le contrôle sur le texte descriptif. Vous pouvez activer cette fonctionnalité dans votre insert de formulaire par gravité.

Étiquettes – Ce sont les étiquettes au-dessus de chacun de vos articles. Utilisez à nouveau les fonctions de style standard de Divi.

entrée – Contrôlez la police, la couleur, le style, la hauteur de ligne, etc.

Bouton de forme – Définissez votre style de bouton, y compris la couleur d’arrière-plan, la couleur flottante, la police, l’icône, l’alignement, la taille, la bordure, etc. Toutes les fonctionnalités standard de Divi.

Indicateur de progression – Définissez la couleur d’arrière-plan et la couleur de la police.

Marge de forme – Si vous voulez un cadre de formulaire, vous pouvez définir le style, la taille et la couleur du cadre.

Erreur – Cette option vous permet de personnaliser le message d’erreur s’il apparaît.

Vous pouvez trouver une liste actuelle ici la page produit.

Étape 4 – Publiez et vous avez terminé!

Lorsque vous avez terminé, vous pouvez cliquer Publier et vous êtes prêt à partir!

Cela signifie que maintenant, lorsque vous insérez un formulaire de gravité sur votre site Web, les mêmes styles seront appliqués à tous vos formulaires. C’est un excellent résultat qui prend très peu de temps! Vous pouvez désormais vous concentrer sur la création de vos formulaires au lieu de passer du temps à les styliser chaque fois que vous ajoutez un nouveau formulaire. Cela fait gagner beaucoup de temps.

Et si votre style ne fonctionne pas

Parfois, cela se produit à cause du CSS Divi Builder. C’est très courant avec le bouton Soumettre. La meilleure façon de gérer cela est d’utiliser notre module personnalisé. Ceci est accessible via le générateur de page.

le Module Divi pour vos formes de gravité fonctionne dans toutes les formes de Divi Builder, y compris le constructeur visuel.

Et si vous voulez différents styles de formulaire?

Dans ce cas, le module Divi Gravity Shapes est l’outil qu’il nous faut. Vous pouvez mettre en forme chaque formulaire comme une entrée de formulaire individuelle.

Module frontal de forme par gravité

Ceci est une brève introduction à la Gravity Forms Divi Plugin par MRK WP. Puisqu’il s’agit d’un produit premium, nous vous recommandons de devenir membre premium. Nous espérons que vous trouverez le plugin utile et que vous pourrez commencer à créer de jolies formes de gravité!

Si vous avez des commentaires, veuillez nous en informer via le service d’assistance. Vous pouvez nous envoyer un e-mail et nous vous répondrons généralement dans quelques heures.



Source link

Recent Posts