TUTORIELS DIVI
Découvrez nos tutoriels en français pour vous aider à réaliser facilement vos sites avec le thème Divi.
Ajoutez des fonctionnalités, personnalisez vos mises en pages et démarquez-vous des autres.
Suggérer une idée de tutoriel
Modifiez le ratio des images des modules blog, portfolio et galerie de Divi
Le ratio des images mises en avant des modules "blog" et "portefeuille" ainsi que les vignettes du module "galerie" de Divi ne convient pas toujours à la mise en page que l'on souhaite pour son...
Créer un menu horizontal scrollable sur mobile avec Divi
C'est une fonctionnalité que l'on croise de plus en plus régulièrement depuis quelques temps sur les sites mobiles et les applications : les menus horizontaux scrollables.Finis les menus hamburgers...
Comment ajouter une légende au module image de Divi
Parfois, une image seule ne suffit pas et il est nécessaire de lui adjoindre un texte de légende.Le Divi Builder le permet via le module "Galerie" mais pas si on utilise tout simplement le module...
Créez une page de blog personnalisée avec des effets au survol dans Divi
Vous en avez assez de la mise en page par défaut de la page listant vos articles de blog dans Divi ?Vous souhaitez dynamiser son design pour le rendre plus actuel ?Dans ce tutoriel, je vais vous...
Comment créer un carrousel dans Divi
La création de carrousel avec Divi est une demande récurrente et de longue date dans la communauté des utilisateurs de Divi.Si vous faites quelques recherches sur le web, vous trouverez des...
Comment personnaliser la largeur des colonnes dans Divi
Le Divi Builder permet de choisir parmi 20 configurations de colonnage différentes.Mais qu'en est-il si aucune de ces options ne correspond au design que vous souhaitez réaliser ?En 2017, nous vous...
Concevez une mise en page en damier dans Divi
Une mise en page en damier est composée d'une alternance de textes et d'images.Cette mise en forme est assez courante car elle fonctionne bien dans beaucoup de cas de figure.Ce n'est pas très...
Créez un menu plein écran avec le Theme Builder de Divi
Depuis longtemps, Divi propose un menu plein écran parmi ses diverses options d'affichage du header.Néanmoins, cette mise en forme est plutôt limitée car elle se contente d'afficher le menu...
Afficher ou masquer un long texte via un bouton dans Divi
Je suis sûr que vous avez déjà vu cet effet à la mode sur de plus en plus de sites d'actualités ou de sport : un texte tronqué, un petit effet dégradé et un bouton en-dessous pour afficher le reste...
Créer une page de recherche personnalisée avec le Thème Builder de Divi
Nous vous parlions récemment de toutes les possibilités offertes par l'arrivée du Theme Builder de Divi (constructeur de thème en français) et nous allons donc...
Utiliser Google reCaptcha v3 avec le module Formulaire de Divi
Google reCaptcha v3 est apparu sans crier gare dans Divi 4.0.7.Pour s'en apercevoir, il fallait lire le changelog de Divi ou tomber par hasard sur l'option lors de la création d'un nouveau...
Black Friday & Cyber Monday 2019 : les bons plans pour Divi
Le Black Friday commence aujourd'hui avec des réductions sur tous les produits liés à Divi. Il s'étendra jusqu'à lundi pour se terminer par le Cyber Monday, c'est donc le moment idéal pour...
Les bonnes pratiques pour mettre à jour son site Divi
Elegant Themes enchaine les mises à jour de Divi. Que ce soit de petits correctifs ou de grosses fonctionnalités, une mise à jour peut aisément casser votre site.Afin de ne pas vous mettre dans...
Corriger le double chargement du Divi Visual Builder
S'il y a bien une chose qui est énervante dans Divi, c'est le double chargement du Builder qui se produit dans certains cas.Au fil des derniers mois, Elegant Themes a publié plusieurs correctifs...
Ajouter un sélecteur de date au module formulaire de Divi
Le module Formulaire de Divi s'enrichit peu à peu au fil des mises à jour du builder.Néanmoins, quelques fonctionnalités lui font encore défaut pour être vraiment complet.L'une d'elles est la...
Ajoutez une vidéo de fond YouTube dans Divi
Nativement, le Divi Builder propose d'ajouter une vidéo en fond de section, ligne ou module.Mais le fichier vidéo doit être hébergé dans la bibliothèque de médias de WordPress, sur le serveur du...
Comment utiliser Sass avec Divi
Sass me tentait depuis quelques années déjà…Récemment, grâce à l'impulsion d'un ami développeur qui m'a fait quitter ma zone de confort, j'ai fait l'effort de m'y intéresser en détails et de voir...
Les effets de transformations et de survol dans Divi
Depuis avril 2018, le Divi Builder propose une option permettant de modifier les rendus au survol (hover) d'une grande majorité d'éléments.En mars 2019 est venu s'ajouter une fonctionnalité...
9 conseils pour gagner du temps dans Divi
Que vous utilisiez le thème Divi pour créer votre site personnel ou dans un environnement professionnel, passer plus de temps que nécessaire à effectuer des actions n'est jamais une bonne...
Créer des sites Divi en un clic avec Local By FlyWheel
Si vous utilisez principalement Divi et que vous venez régulièrement lire nos articles ici-même, il y a fort à parier que vous créez souvent des sites...
Ajoutez des effets de parallaxe avancés à Divi
Nativement, le Divi Builder permet de donner un effet de parallaxe aux images de fond des sections, lignes et modules.C'est assez intéressant car ça permet de dynamiser un peu le rendu de son site,...
Ajouter un menu latéral flottant fixe à Divi
Un menu latéral flottant fixe peut être un moyen efficace d'attirer l'oeil de vos visiteurs sur un service ou un produit particulier que vous proposez et améliorer ainsi votre taux de conversion....
Tout savoir sur les thèmes enfants pour Divi
Tous ceux qui débutent avec Divi (ou plus généralement WordPress), se sont un jour posé la question de savoir ce qu'était un thème enfant et s'ils en avaient besoin.Divi étant déjà très complet "out...
Créez un header animé dans Divi
Le header est la première chose que voit le visiteur en arrivant sur votre site. C'est donc une zone primordiale pour placer les informations les plus importantes.Par conséquent, son graphisme est à...
Créez un formulaire de type chatbot dans Divi
En ce moment, la mode est aux chatbots, ces logiciels qui peuvent (plus ou moins bien) tenir une conversation avec un utilisateur humain.Je me suis donc dit qu'il pouvait être amusant de recréer...
Créez une page contact avec une carte Google Maps plein écran dans Divi
Si vous êtes à la recherche d'une manière originale de mettre en forme une page contact, une approche graphique intéressante consiste à afficher un plan Google Maps qui occupe tout le fond d'écran...
Comment corriger l’erreur “Expiration du constructeur Divi”
"Oups, il semble que le constructeur Divi n'ait pas réussi à se charger…" ou alors en anglais "Divi Builder timeout…"Il s'agit d'une erreur que vous avez certainement déjà rencontrée au moins une...
Comment ajouter du code jQuery dans Divi
Le JavaScript, et notamment le framework jQuery, est devenu indispensable au bon fonctionnement d'un site Internet. Celui-ci permet de dynamiser les pages web en animant ou en manipulant les...
Comment remplacer les puces des listes par des icones dans Divi
Les listes à puces sont souvent négligées lors de la conception d'un site, que celui-ci soit construit avec Divi ou non.Pourtant, il s'agit d'une pièce importante de la mise en page car les listes...
Comment renommer les projets Divi
Le custom post type (type d'article personnalisé) présent dans Divi sous le nom de "Projets" a été conçu par Elegant Themes pour présenter les créations de l'utilisateur sous la forme d'un...
7 manières d’ajouter des CSS à Divi
Le thème Divi est un véritable couteau Suisse pour réaliser facilement des sites avec WordPress. Son côté multi-usage rend possible la création de n'importe quel type de site, que ce soit un site...
Formation Divi: que propose ElegantSchool
Nicolas Richer nous a donné l'occasion récemment de vous faire gagner sa formation vidéo Divi sur notre groupe Facebook Support Divi Community (merci à lui), alors on s'est dit qu'on allait vous...
Créer une page d’erreur 404 avec le Divi Builder sans plugin
La page d'erreur 404 est la page affichée par défaut par un thème WordPress lorsque la requête d'un visiteur n'aboutit à rien. Elle remplace une page inexistante (ou supprimée, donc attention aux...
Adaptez le module formulaire de Divi pour le rendre conforme au RGPD
Depuis la version 3.4.1 du 26 mai 2018, Divi intègre une option dans son module formulaire Dans le Visual Builder UNIQUEMENT, ouvrez les paramètres de votre module formulaire et dans les options du...
Module slider de Divi : modifier sa hauteur et faire un slider plein écran
La gestion de la hauteur des sliders dans Divi est un peu obscure étant donné qu'il n'y a pas d'option dédiée dans le builder.Voici donc quelques astuces qui pourront vous aider.J'en profite...
Appliquer un effet machine à écrire sur un texte
Encore un effet que l'on rencontre couramment sur de nombreux sites (et même sur la page d'accueil de Divi Community !), l'effet machine à écrire permet d'animer du texte, un titre, des mots-clés…...
Importer ou exporter un layout, une section, une rangée ou un module Divi
L'avantage de travailler avec Divi, c'est que vous pouvez facilement importer ou exporter des mises en page que vous avez créées ou téléchargées sur Internet d'un site à un autre en quelques clics....
Créez une rubrique offres d’emploi
Je vais vous expliquer comment créer une rubrique "offres d'emploi" pour votre site.Il s'agit d'une page sur laquelle les offres seront bien sûr listées mais où il y aura également un formulaire...
Ajoutez des icônes à vos menus Divi avec ou sans plugin
Ajouter des icônes à vos menus permet d'attirer rapidement l'oeil de vos visiteurs et de leur permettre de savoir ce qu'ils sont susceptibles de trouver sur vos différentes pages. Il existe...
Créer un fond de particules animées dans Divi
Il s'agit d'une animation que vous avez certainement déjà remarquée sur différents sites, car cet effet ne passe pas inaperçu. Peut-être vous êtes-vous déjà demandé comment le mettre en place sur...
Automatisez le traitement des soumissions de vos formulaires
Généralement, quand on évoque les données envoyées via un formulaire de contact, on pense immédiatement aux notifications reçues par mail. Mais sachez qu'il est possible d'appliquer des traitements...
Modifier le style du sélecteur de quantité de WooCommerce dans Divi
Je ne sais pas vous, mais personnellement le sélecteur de quantité de Divi pour WooCommerce me sort par les yeux. Plus laid et moins ergonomique, on ne fait pas ! Au cours de mes pérégrinations sur...
Agrandir le logo du thème Divi pour qu’il dépasse du menu
Récemment sur le groupe facebook Support Divi Community, quelqu'un se demandait comment faire dépasser le logo du menu pour arriver à ce genre de chose: Et comme cela peut servir à pas mal...
Forcer le footer de Divi à être tout en bas de l’écran
Lorsque vous créez une page avec très peu de contenu, comme une page de contact par exemple, vous avez sans doute remarqué que le footer est à la suite du contenu mais pas en bas de l'écran....
Comment ajouter des polices personnalisées à Divi
Auparavant, pour utiliser une police de caractère autre que celles présentes dans la liste proposée par Divi, il fallait soit insérer du code, soit passer par un plugin.Depuis octobre 2017, une mise...
Modifier le point de rupture du menu mobile de Divi
Le point de rupture du menu (ou breakpoint en anglais) du menu de Divi correspond au moment où le menu standard est remplacé par le menu mobile (le hamburger). Dans la majorité des cas, il est...
Une image de fond qui change aléatoirement
Je vais ici vous expliquer comment réaliser un effet assez sympa, facile à mettre en place, et qui permet de dynamiser le design de son site en donnant au visiteur une impression de nouveauté quand...
Utiliser un design avec 5, 6, 7, 8, 9 ou 10 colonnes avec Divi
Si vous utilisez un minimum Divi, vous vous rendrez vite compte que les mises en page proposées par défaut comportent au maximum 4 colonnes. Et bien pour outrepasser cette limite, je vous invite à...
Comment modifier des éléments au scroll
Si vous avez l'habitude de fréquenter le site d'Elegant Themes, vous avez certainement déjà remarqué en pied de chacune des pages du site, la section qui s'élargit et change de couleur peu après...
Insérez un bouton “sticky” en pied de votre site
Voici une petite astuce rapide qui vous permettra d'ajouter en pied de page de votre site, un bouton en position fixe et passant par-dessus votre contenu.Je vais tout d'abord vous expliquer comment...
Ajoutez de nouveaux icones de réseaux sociaux à Divi
Par défaut, Divi nous autorise via les Options du thème à ajouter, dans la barre de menu secondaire et dans le footer, des liens vers quelques réseaux sociaux (Facebook, Twitter et Google+) ainsi...
Personnaliser le bouton de retour en haut de page
Vous utilisez le bouton de retour en haut de page sur votre site Divi? Vous savez, c'est le bouton qui apparait quand on scrolle un peu vers le bas et qui ressemble à ça: Il est assez simple et...
Comment afficher une section Divi dans une modale plein-écran
ℹ️ Mise à jour mars 2020 pour assurer la compatibilité avec Divi 4.x Voici ma solution pour afficher une section Divi, avec une ou plusieurs lignes et les modules et shortcodes de notre choix, dans...
Traduire l’expression “Share this” du plugin Monarch
Si vous êtes en train de parcourir ce site, c'est que vous utilisez très probablement le thème Divi. Et il y a fort à parier que vous utilisez le plugin Monarch aussi. Il sert à afficher de beaux...
Changer la couleur du menu au passage de la souris (hover)
Véronique demandait sur le groupe facebook Divi Theme France si l'on pouvait modifier la couleur des liens du menu lorsque la souris passait dessus. (il y a d'ailleurs une solution autre que...
Ajouter un effet de zoom ou Ken Burns à ses images
Vous aimez l'effet de zoom sur les images des articles de la page d'accueil ? Et bien cet effet CSS très simple et sympa est très rapide à mettre en place. Vous pouvez l'utilisez sur une bonne...
Faites bouger la flèche de défilement vers le bas de l’entête plein écran
Lorsque vous utilisez l'entête plein écran sur votre site, vous pouvez y ajouter une flèche de défilement vers le bas de page de manière à montrer à vos visiteurs qu'il reste du contenu à parcourir....