Le thème Divi permet d’insérer des liens vers les réseaux sociaux dans le pied de page et une barre tout en haut. Par défaut les réseaux paramétrables sont facebook, Twitter, Google + et RSS. Pour le site d’un consultant je souhaitais ajouter un lien, avec icone, vers une page LinkedIn. Et bien c’est possible !
Pour réaliser cette action, il faudra que vous ayez un accès FTP aux fichiers de votre site WordPress et avoir un éditeur pour modifier légèrement le code PHP d’un fichier du thème.
On peut utiliser le module réseaux sociaux » du divi builder pour les contenus construits à l’intérieur d’une page ou d’un article. Mais pour générer automatiquement le lien en haut du site ou dans le pied de page, il faut modifier un fichier du thème Divi selon le processus ci-dessous :
Faire une copie du fichier social_icons.php (répertoire du thème : /wp-content/themes/Divi/includes).
Editer le fichier d’origine en y ajoutant des lignes à la fin, comme indiqué ci-dessous.
Le thème Divi est très souvent mis à jour. Un article, en anglais, de Elegant Theme, l’agence qui conçoit et commercialise le thème vient d’annoncer une avancée importante. L’article « Divi’s Website-Wide Design Editor » ( que l’on pourrait traduire par « Un éditeur Divi de design pour l’ensemble d’un site ») annonce bien la couleur :
Gérez les styles par défaut de votre site plutôt qu’adapter les modules à chaque création de nouvelles pages !
L’idée générale c’est que maintenant, on peut simplement modifier les caractéristiques par défaut de tous les modules identiques d’un même site. Il suffit de cliquer sur le petit onglet » Edit Global Texte Defaults » sur le côté en haut à droite de la fenêtre de réglage du module.
Si vous comprenez un peu l’anglais, je vous invite à aller lire l’article complet, qui contient une vidéo qui se comprend plutôt facilement.
Contact form 7 est une excellente extension pour les formulaires de contact. Et Divi est un excellent thème, auquel j’ai accès gratuitement via mon hébergerment web Infomaniak. Mais jusqu’à présent, je ne pouvais pas avoir un formulaire de contact qui sont fonctionnel ET beau.
Cet article a été mis à jour le 13/09/2019 suite à un gros dysfonctionnement de l’extension Contact Form Styler. On a maintenant deux solutions, l’une avec l’extension Contact Form Styler (qui a j’espère été réparée), et l’autre qui ne requière pas d’extension mais nécessite un peu de CSS.
Créer un formulaire de contact avec Contact Form 7
installer et activer contact form 7 de Takayuki Miyoshi puis créer un formulaire contact form 7 classique et noter le shortcode correspondant : [
Erreur : Formulaire de contact non trouvé !
].
En l’absence de feuille de style (css) dédiée, c’est assez moche… :
Option 1 sans ajout d’extension
L’amélioration passe par du CSS ajouté et par une toute petite modification du formulaire de contact
modification du formulaire de contact
Le formulaire de contact est exactement comme d’habitude sauf qu’une classe est ajoutée pour le bouton de soumission de la demande :
<p>[text* your-name placeholder "Vos prénom NOM (requis)"] </p>
<p>[email* your-email placeholder "Votre adresse mail (requis)"] </p>
<p>[tel tel-405 placeholder "Votre n° de téléphone (recommandé)"]</p>
<p>[textarea your-message 50x placeholder "Votre message"] </p>
<p>!! ATTENTION : si l'autorisation ci-dessous n'est pas cochée, votre message ne pourra pas être envoyé !!
[acceptance acceptance-443 default: on] J’autorise l’utilisation de mes données personnelles pour m'envoyer une réponse par mail. [/acceptance]</p>
[submit class:submit class:et_pb_button "Envoyer"]
<p>Pour plus d'informations, vous pouvez consulter la <a href="https://cohesiondurable.com/page-de-politique-de-confidentialite/" target="_blank">politique de confidentialité de ce site</a></p>
"class:submit class:et_pb_button" va indiquer que le bouton sera des deux classes submit et et_pb_button. Ainsi il va adopter le style défini pour les boutons dans la personnalisation du thème Divi.
Ajout de CSS
Dans la personnalisation du css (options du thème Divi, tout en bas de l’onglet général), on ajoute le code qui va permettre d’avoir un formulaire un peu plus attirant :
Notre formulaire est maintenant tout à fait présentable :
Un formulaire Contact Form 7 avec un peu de CSS et une classe pour le bouton Envoyer
Option 2 avec une extension (solution non recommandée)
J’ai trouvé cette solution, grâce à cet article, en anglais : » How to Make Contact Form 7 Look Like Divi « . Elle m’a bien plu mais j’ai rencontré des problèmes lors d’une mise à jour de l’extension Contact Form Styler. Je laisse les instructions pour l’utiliser mais je ne recommande pas cette solution.
Avec le constructeur Divi ou le Divi Builder, ajouter un nouveau module, et choisir « contact form 7 styler »
Choisir le formulaire à utiliser dans select form puis définir le style souhaité avec l’onglet style. je n’ai pas réglé grand-chose, simplement modifié les couleurs du « submit button », et la marge interne dans la partie dimensionnement. Et voici ce que cela donne :
c’est tout de même moins joli, non…
Et maintenant ?
Nous pouvons maintenant concilier la fonctionnalité de contact form 7 et l’esthétique de Divi. C’est chouette, non ?
J’utilise le thème DIVI depuis que j’ai choisi un hébergement chez Infomaniak car cet hébergeur donne un accès gratuit à ce thème premium et quelques extensions premium également.
J’ai déjà écrit plusieurs articles sur Divi (voir les articles de la série Utiliser le thème DIVI d’Elegant Themes. Dans celui ci, je souhaite faire un récapitulatif rapide de ce qu’il est possible de faire avec les « layouts », ou mises en pages prédéfinies.
L’utilisation de ces mises en page prédéfinies est décrite dans les articles, en anglais, suivants :
J’ai mis une copie d’écran d’une des pages qui peuvent être ainsi créés en bas de cet article. Pour voir d’autres exemples, on peut aller sur cette page, qui contient le catalogue de tous les « premade layouts » pour DIVI.
Lorsqu’on dispose des contenus en colonnes, on utilise flexbox pour avoir des colonnes de hauteur égale. Sous Divi, on fait la même chose.
Pour l’instant je n’ai pas eu l’occasion d’essayer. Je préfère conserver cet article en mémoire pour une prochaine fois : How to Set Equal Column Heights using Flexbox (article de Divi Space, en anglais).
Et je n’oublie pas l’excellent tutoriel, en anglais également, de CSS-tricks : « A Complete Guide to Flexbox« .
Je mettrai mon article à jour lorsque je réaliserai cette opération avec un thème Divi.
Commentaires récents