Point culminant du plugin Divi : personnalisation de style Caldera Forms pour Divi et Extra

Caldera Forms s'intègre parfaitement au style de votre site Web. Et si vous vouliez le styler à l'aide des outils de style familiers de Divi et du personnalisateur de thème supplémentaire ? Vous pouvez le faire avec un plugin tiers appelé Caldera Forms Style Customizer pour Divi et Extra.

Les formulaires Caldera peuvent être stylisés à l'aide des options de personnalisation de thème standard, cependant, ces options stylisent le thème. Cela signifie que si vous modifiez le style du texte de votre formulaire, vous modifiez également le style du corps du texte de votre site Web. Si vous vouliez styliser vos formulaires séparément de votre contenu, vous devriez normalement styliser à la main avec CSS. Caldera Forms Style Customizer pour Divi et Extra résout ce problème en ajoutant des fonctionnalités de style au Thème Customizer.

Dans ce point culminant du plugin, nous examinerons le plugin Caldera Forms Style Customizer pour Divi et Extra et verrons à quel point il est facile à utiliser. Ce plugin tiers peut être acheté via Caldera Forms. Comme son nom l'indique, il fonctionne à la fois avec Divi et Extra.

Installation et activation

Téléchargez et activez le plugin comme d'habitude. Il n'y a pas de paramètres à régler. Les fonctionnalités sont prêtes à l'emploi.

Personnaliser un formulaire

J'ai inséré le formulaire de contact par défaut dans une page avec tous les styles par défaut. Je vais faire tous mes ajustements à ce formulaire un à la fois. Ensuite, nous verrons un ou deux exemples.

Les nouvelles fonctionnalités de style sont ajoutées au personnalisateur de thème. Ouvrez le personnalisateur de thème (ou le personnalisateur de module - ils fonctionnent tous les deux) et cliquez sur Caldera Forms Style Customizer .

Cela ajoute 20 nouveaux onglets de personnalisation pour personnaliser chaque aspect du formulaire, y compris le texte, les boutons, les champs, les commutateurs à bascule, le sélecteur de date, le fil d'Ariane, etc. Voici un aperçu de chaque paramètre.

Champs de texte

Champs de texte modifie la couleur du texte, de l'espace réservé et de la bordure, ainsi que la largeur de la bordure, le rayon de la bordure et la hauteur d'une seule ligne des champs.

Survol des champs de texte

Le survol des champs de texte modifie les couleurs du texte, du champ et de la bordure.

Champs de texte Focus

Le focus des champs de texte change la couleur du texte, de l'arrière-plan et de la bordure du champ qui a le focus. Dans cet exemple, le champ au centre a le survol mais le champ avec l'arrière-plan sombre a le focus.

Sélection déroulante

La sélection déroulante personnalise les couleurs d'arrière-plan, de texte, de flèche et de bordure. Vous pouvez également ajuster la largeur et le rayon de la bordure.

Liste déroulante Sélectionnez Hover

Dropdown Select Hover contrôle la couleur de l'arrière-plan, du texte, de la flèche et de la bordure lors du survol.

Cases à cocher et boutons radio

Cases à cocher et boutons radio ajuste la couleur des éléments sélectionnés de vos cases à cocher et boutons radio.

Commutateurs à bascule

Les commutateurs à bascule ajustent les couleurs de l'arrière-plan, de la police et de la bordure des commutateurs non sélectionnés et sélectionnés individuellement. Vous pouvez également ajuster la largeur et le rayon de la bordure des deux commutateurs ensemble.

Basculement des commutateurs

Commutateurs à bascule Le survol ajuste indépendamment les couleurs de l'arrière-plan, de la police et de la bordure du commutateur sélectionné et non sélectionné. C'est le commutateur non sélectionné.

Le bleu est le commutateur sélectionné.

Bouton de soumission

Le bouton Soumettre contrôle les couleurs d'arrière-plan, de police et de bordure, ainsi que le rayon de la bordure, la largeur du bouton et son emplacement. Vous pouvez également ajuster la taille de la police et l'espacement des lettres. Une fonction de transformation de texte modifie la casse du texte. Choisissez minuscules, majuscules, majuscules, initiales ou hériter.

Survol du bouton Soumettre

Le survol du bouton d'envoi contrôle les couleurs de survol pour l'arrière-plan, la police et la bordure.

Bouton de réinitialisation

Le bouton de réinitialisation contrôle les couleurs d'arrière-plan, de police et de bordure. Vous pouvez également ajuster la taille de la police et l'espacement des lettres, la largeur du bouton, la position du bouton, la largeur de la bordure et le rayon de la bordure. Celui-ci a également une transformation de texte.

Survol du bouton de réinitialisation

Le survol du bouton de réinitialisation ajuste les couleurs des boutons pour l'arrière-plan, le texte et la bordure.

Autres boutons

Caldera a plusieurs autres types de boutons. Les autres boutons contrôlent tout sauf Soumettre et Réinitialiser. Ajustez les couleurs de la police, de la bordure et de l'arrière-plan, ainsi que la largeur et le rayon de la bordure. Dans cet exemple, j'ai créé les boutons Précédent et Suivant.

Survol d'autres boutons

Autres boutons Hover contrôle les couleurs de survol des polices, des bordures et de l'arrière-plan.

Sélecteur de date

Le sélecteur de date inclut des couleurs régulières et de survol dans le même onglet. Ajustez les couleurs de la police et de l'arrière-plan. Dans cet exemple, je survole le 10 et le 12 est sélectionné.

Télécharger la liste des fichiers

La liste des fichiers de téléchargement contrôle les couleurs de l'arrière-plan et du texte dans la liste des fichiers téléchargés.

Saut de section

Le saut de section contrôle la couleur du saut de section, la largeur de la bordure et les marges supérieure et inférieure.

Chapelure

Le fil d'Ariane vous permet de choisir les couleurs des polices pour la page active et les autres liens, le séparateur, l'arrière-plan et la bordure. Ajustez la largeur et le rayon de la bordure.

Alerte de réussite

L'alerte de réussite ajuste la police, l'arrière-plan et les couleurs de la bordure, ainsi que le rayon et la largeur de la bordure. Il ajuste également la hauteur de la boîte.

Divers

Divers vous permet de contrôler les couleurs de l'icône requise, les champs d'erreur, le texte de description, la couleur de la carte de crédit et la position de l'icône de la carte de crédit. Le texte de description comprend la taille de la police, l'espacement des lettres et les options de transformation du texte. J'ai choisi les majuscules.

Exemples

J'ai créé un formulaire de téléchargement de CV (en fait, il est intégré à Caldera Forms, mais j'ai cliqué sur le bouton pour le sélectionner) et je l'ai défini comme modal. Je veux d'abord styliser la page avec le Divi Builder.

J'ai ajouté une image d'arrière-plan et sélectionné des couleurs qui contrastent plutôt que de se fondre avec l'arrière-plan.

Celui-ci utilise les mêmes paramètres avec un arrière-plan différent. Cette fois, je n'ai pas utilisé le formulaire dans un modal. Plutôt que d'avoir un fond blanc, les champs du formulaire sont placés directement sur l'image.

Importer / Exporter

Il est facile d'importer ou d'exporter vos styles Caldera Forms que vous avez créés dans le personnalisateur. Dans le tableau de bord, accédez à Caldera Forms , Styles – Import / Export . Cela importe et exporte les styles sous forme de fichier JSON, ce qui vous permet d'utiliser facilement vos styles Caldera Form sur n'importe quel site Web qui utilise ce plugin. Tout votre style sera remplacé par le style du fichier importé.

Licence et assistance

Le plugin peut être acheté sous forme de licence d'un an (récurrent annuel). La licence permet au plugin d'être utilisé sur un, cinq ou quinze sites Web (selon le niveau que vous choisissez) et comprend un an de support et de mises à jour.

Dernières pensées

Il a trouvé ce plugin facile à utiliser. Les paramètres de personnalisation sont intuitifs. Ils sont bien étiquetés et disposés de manière logique. Je n'ai eu aucun mal à trouver les réglages que je voulais. J'aimerais voir un moyen simple de revenir aux paramètres par défaut d'un seul coup ou d'effectuer des ajustements globaux (tels que l'augmentation ou la diminution de l'obscurité globale de toutes les couleurs). Ce n'est probablement pas réaliste, mais cela semble intéressant.

Il n'est pas possible de styliser des formulaires individuels avec les paramètres de personnalisation. Tous les formulaires utilisent ce même style comme paramètre global et devront être stylisés individuellement à l'aide des fonctions de style de Caldera. C'est la nature du personnalisateur de thème. Si vous souhaitez styliser vos formulaires Caldera à l'échelle mondiale, il n'y a pas de moyen plus simple de le faire que d'utiliser Caldera Forms Style Customizer pour Divi et Extra.

Nous voulons de vos nouvelles. Avez-vous essayé le plugin Caldera Forms Style Customizer pour Divi et Extra ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette via Irina Strelnikova / shutterstock.com