Si vous utilisez le thème Divi ou Divi Builder, vous travaillerez régulièrement avec des modules Divi. Ce sont les blocs de construction du thème qui vous permettent d'ajouter des éléments de page, de les styliser, de les contrôler et de les utiliser pour créer de magnifiques sites Web.
Le problème, c'est que lorsque vous êtes en train de concevoir ou d'essayer de naviguer à votre guise Divi Builder, il est difficile de voir exactement ce qui est disponible.
Ce guide complet des modules Divi décrira les 46 modules de base contenus dans Divi. Il mettra également en évidence certains modules gratuits et premium de développeurs tiers.
Tout cela pour que vous puissiez tirer le meilleur parti de Divi pour vos sites Web ou ceux de vos clients.
Cet article est l'un de nos nombreux Avis sur Divi qui CollectiveRay a fait pour couvrir les différents aspects du thème et du constructeur Divi. Consultez également notre liste de exemples d'utilisation du thème Divi pour créer des sites Web époustouflants.
Besoin de vous procurer Divi à un prix avantageux ? Nous avons actuellement une remise exclusive de Elegant Themes:
Obtenez Divi à 10 % de réduction en mars 2024 uniquement
Si vous aviez besoin de plus de motivation pour acheter Divi et expérimenter les nombreux modules Divi ici, une récente mise à jour des performances le fera.
Divi a récemment révolutionné son code pour qu'il soit plus rapide et plus léger que jamais.
Dans le cadre de l'amélioration, Divi a réduit le CSS de 94% et introduit un CSS dynamique qui ne charge que ce qui est requis, introduit des styles intelligents pour réduire les doublons et la taille des fichiers, supprimé CSS bloquant le rendu, optimisé JavaScript et ajouté un framework PHP dynamique pour augmenter l'efficacité des fonctions.
Modules Divi officiels
Il y a 46 modules Divi actuellement disponibles.
1. Accordéon
L'accordéon ajoute un module de curseur d'accordéon à une page. Vous savez quand vous voyez une boîte de contenu avec un élément sélectionnable et qu'elle glisse vers le bas pour révéler plus de contenu? C'est un accordéon.
Pour Divi, un module d'accordéon est un élément sélectionnable contenant du contenu. Sélectionnez la première ligne et elle se développe pour révéler une brève explication ou un aperçu. Sélectionnez la ligne suivante et la première ligne se ferme et la seconde s'ouvre. C'est une manière élégante d'inclure beaucoup de contenu dans un petit espace.
2. acoustique
Le module Audio fournit un lecteur audio que vous pouvez placer n'importe où sur une page. Vous pouvez lier le lecteur à un fichier audio hébergé localement afin qu'il soit lu chaque fois qu'un utilisateur le sélectionne.
Dans Divi, le module Audio est un simple lecteur audio mais si vous connaissez un peu le CSS, vous pouvez le styliser vous-même.
3. Comptoirs de bar
Les compteurs de barres sont les barres de progression que vous voyez sur les sites Web partout sur Internet. Bien faits, ils sont une mesure immédiatement compréhensible de quelque chose et peuvent très bien fonctionner dans la bonne situation.
Les compteurs de barre Divi peuvent être colorés, personnalisés pour convenir à presque tous les usages, être configurés manuellement pour des niveaux spécifiques et être utilisés de différentes manières.
4. Blog
Le module Blog Divi vous permet de placer des articles de blog n'importe où sur une page. Vous pouvez non seulement positionner ces publications n'importe où, mais vous pouvez également les personnaliser en fonction de votre thème.
Le module Divi Blog offre une liberté totale sur où et comment vous affichez vos articles de blog. Vous n'êtes plus lié à l'endroit où WordPress ou votre thème pense que vous devriez les avoir avec ce module.
5. Présentation
Le module Blurb est un élément de contenu complet avec des icônes et des animations optionnelles. Ceux-ci sont utiles pour les descriptions de produits ou de services sur les pages car l'aspect d'animation facultatif peut ajouter un peu d'intérêt à une page.
Le module Divi Blurb propose une gamme d'icônes, de couleurs et d'options d'animation en fonction de la façon dont vous les utilisez. Certains sont contenus par défaut dans le module tandis que d'autres peuvent être implémentés avec CSS.
6. Bouton
Le module Divi Button permet d'ajouter des boutons n'importe où sur votre site, dans n'importe quelle couleur et dans une large gamme de formes et de tailles. La conception peut être contrôlée dans le personnalisateur de thème et les liens et effets configurés en même temps.
Ils sont une extension simple mais efficace des options de boutons existantes dans Divi.
7. Appel à l'action
Les appels à l'action jouent un rôle essentiel dans la conversion. Plus vous pouvez les rendre convaincants, plus ils peuvent être efficaces. C'est là que ce module entre en jeu.
Le module Appel à l'action de Divi offre un moyen facile de créer vos propres appels à l'action en utilisant un mélange de boîte CTA, de titre, de contenu et de bouton pour aider à augmenter les conversions n'importe où sur votre site Web.
8. Compteur de cercle
Le module Compteur de cercle fonctionne de la même manière que les compteurs de barres, mais utilise plutôt un graphique en cercle complet. Plutôt qu'une simple barre, le module ajoute un cercle complet avec des zones couvertes en fonction du pourcentage que vous marquez comme terminé.
Le compteur de cercle fonctionne avec le personnalisateur de thème et peut être entièrement personnalisé pour convenir à n'importe quel thème.
9. Code
Le module Divi Code est un élément de code personnalisé que vous pouvez ajouter à n'importe quelle page. Il accepte les codes courts, CSS et HTML et peut vous aider à accomplir une multitude de choses dans une page.
Ils fonctionnent de la même manière que les éléments CSS personnalisés dans les thèmes, vous seul pouvez les placer n'importe où et leur faire faire presque n'importe quoi car ils ne sont pas contraints par le thème.
10. commentaires
Le module Divi Comments vous permet d'ajouter un commentaire depuis votre blog n'importe où sur la page. Par exemple, une recommandation ou un commentaire d'un commentaire de blog peut être présenté sur une page de produit.
Plutôt que d'utiliser une image, vous pouvez inclure la chose réelle, puis créer un lien vers le commentaire principal, ce qui ne fait qu'ajouter à l'authenticité.
11. Formulaire de contact
Le module Formulaire de contact est utile si vous ne souhaitez pas utiliser un plugin de formulaire de contact tiers. Vous pouvez implémenter un formulaire n'importe où sur la page et le styliser à l'aide du personnalisateur de thème.
Vous pouvez créer plusieurs formulaires, utiliser la validation de champ et la logique conditionnelle pour faire fonctionner n'importe quel formulaire.
12. Compte à rebours
Les comptes à rebours sont souvent utilisés pour les sorties de produits, les comptes à rebours vers des offres spéciales ou des ventes ou pour créer une anxiété de temps chez les lecteurs.
Le module Compte à rebours vous aide à cela en vous permettant de styliser une minuterie, d'ajouter votre propre compte à rebours et de le placer n'importe où sur la page.
13. Séparateur
Les diviseurs sont des moyens petits mais importants de diviser les pages Web et de donner au public une petite pause avant la section suivante. La plupart des thèmes Web semblent les inclure après coup, c'est là que Divi entre en jeu.
Le thème Divi a des diviseurs mais le module Divider en ajoute plus.
14. Inscription aux e-mails
Les formulaires d'inscription par e-mail sont essentiels pour créer des listes de diffusion et pour accroître l'engagement. Le courrier électronique est toujours un outil de marketing incroyablement puissant et le module d'activation par courrier électronique vise à y contribuer.
Vous pouvez créer des formulaires, des inscriptions à la newsletter et des éléments générateurs de leads à l'aide de ce module, puis le lier à votre programme de messagerie pour aider à le gérer efficacement.
15. Portfolio filtrable
Le module Portfolio filtrable est idéal pour inclure une section de portefeuille attrayante dans une page. Vous pouvez le styliser, configurer vos propres catégories et filtres et créer un portefeuille entièrement interactif.
Certains thèmes Divi sont livrés avec des éléments de portfolio intégrés et le Divi Builder les a aussi mais ce module ajoute encore plus.
16. Galerie
Le module Divi Gallery fait à peu près la même chose pour les galeries. Il vous permet de présenter des images et des vidéos n'importe où sur une page.
La galerie peut être entièrement personnalisée et inclure n'importe quelle image que vous aimez. Vous pouvez définir le style sous forme de grille ou de curseur et contrôler de nombreux aspects de son apparence et de sa convivialité à partir du personnalisateur.
17. Image
Le module Divi Image ajoute une gamme d'options lors de l'affichage d'images sur une page. Vous pouvez ajouter des effets lightbox, implémenter le chargement paresseux, ajouter des animations et faire ressortir vos images.
Les images ont un effet puissant sur l'engagement et le temps passé sur la page, il est donc parfaitement logique de rendre justice à vos images. Ce module peut vous aider.
18. Identifie-toi
Le module Divi Login ajoute un formulaire de connexion aux pages en utilisant le style familier de votre thème. Le module peut être conçu en fonction de la page pour s'asseoir en arrière-plan ou se démarquer et être remarqué.
La page de connexion connectera automatiquement l'utilisateur au site sans rediriger vers la page de connexion WordPress par défaut.
19. Carte
Le module Divi Map prend l'élément de carte standard et ajoute des options de personnalisation supplémentaires et une coutureless intégration dans une page. Comme les cartes peuvent jouer un rôle essentiel dans certains sites, il s'agit d'un module complémentaire très utile à utiliser !
Map s'intègre à Google Maps pour mettre en évidence des emplacements ou ajouter des éléments interactifs. Il peut également être conçu pour correspondre à votre page.
20. Compteur de nombres
Le module Compteur de nombres est un autre dispositif graphique pour communiquer avec votre public. Plutôt que d'utiliser des graphiques en barres ou en cercles, ce module utilise des nombres simples pour communiquer.
Cela fonctionne de la même manière que les autres. Donnez-lui un style dans le personnalisateur de thème et placez-le n'importe où sur la page.
21. Personne
Le module Personne ajoute des personnalités à votre site Web. Que vous souhaitiez présenter des auteurs, donner un aperçu de votre équipe ou autre chose, le module Personne vous explique comment procéder.
Vous pouvez ajouter une image, une copie de la biographie, des liens vers les réseaux sociaux et la publier n'importe où sur votre site Web. Il existe également des options de personnalisation si vous en avez besoin pour s'intégrer dans un thème existant.
22. Portefeuille
Le module Portfolio s'appuie sur les options fournies par Gallery en vous permettant de présenter votre travail de plusieurs manières. Si vous êtes un pigiste ou une petite entreprise et que vous souhaitez montrer votre travail, voici comment.
Le module peut fonctionner avec des grilles, des mises en page pleine largeur, proposer des filtres de catégorie et une pagination. Vous pouvez également appliquer certaines personnalisations si vous en avez besoin.
23. Navigation après la publication
La navigation de publication prend les options par défaut de lecture suivante ou précédente et les rend plus attrayantes. Alors que WordPress et de nombreux thèmes ont ces fonctionnalités, l'option Divi ajoute encore plus d'utilité.
Le module vous permet d'inclure des boutons attrayants précédent et suivant au bas des articles pour permettre aux lecteurs de se frayer un chemin dans votre blog.
24. Curseur de publication
Le module Post Slider est un excellent moyen de présenter vos articles de blog. Il utilise un curseur pour parcourir une série définie d'articles de blog pour montrer votre travail et attirer les clics.
Alors que de nombreux autres plugins proposent de répertorier ou d'afficher des articles de blog, un curseur peut inclure une image colorée et un extrait qui ne manquera pas de s'engager. Des personnalisations mineures sont également possibles avec ce module.
25. Titre du message
Le module Titre de l'article est un petit mais utile ajout qui utilise le style Divi pour les titres des articles. Il affiche le titre et a également la possibilité d'ajouter une image en vedette et toutes les métadonnées que vous voudrez peut-être afficher également.
Le module dispose de quelques options de personnalisation que vous pouvez utiliser pour l'intégrer dans un thème, mais les valeurs par défaut fonctionnent assez bien pour la plupart des utilisations.
26. Tableaux de prix
Les tableaux de prix sont l'un de ces éléments que très peu de thèmes WordPress semblent bien comprendre. Divi n'en fait pas partie. Les tableaux de thème par défaut fonctionnent assez bien, mais vous pouvez les surcharger avec le module Tableaux de tarification.
Ce module ajoute un tableau personnalisable que vous pouvez insérer sur n'importe quelle page. Vous pouvez modifier les couleurs, les devises, le nombre de fonctionnalités et d'effets selon vos besoins.
27. Chercher
La recherche est une autre de ces fonctionnalités qui est généralement less qu'idéal. La fonction de recherche par défaut de WordPress peut être lente et manquer l'évidence. Certains thèmes incluent la recherche qui déçoit souvent. Le module Divi Search change tout ça.
Il s'agit d'un champ de recherche simple que vous pouvez placer n'importe où et le style en fonction de votre thème. Simple, rapide et très efficace.
28. Boutique
Le module Divi Shop est une excellente extension de WooCommerce. Si vous exploitez déjà une boutique, ce module vous permet de présenter des produits dans un élément autonome n'importe où sur votre site. C'est une excellente opportunité de vente croisée ou de vente incitative.
Le module vous permet de trier les produits, de styliser l'élément et d'effectuer également quelques personnalisations de l'affichage.
29. Barre latérale
Le module de la barre latérale est l'un des plus utiles de tous les modules de cette liste. Il prend une barre latérale standard et vous donne un contrôle total sur son apparence, ses fonctionnalités et son fonctionnement.
Le module vous permet de créer des barres latérales personnalisées à l'aide du personnalisateur de thème et de les placer sur toutes les pages, certaines pages ou des pages spécifiées.
30. Curseur
Les curseurs peuvent être des sujets litigieux, mais il ne fait aucun doute qu'ils peuvent être efficaces s'ils sont correctement stylisés. C'est exactement ce que fait le module Divi Slider.
C'est un simple curseur que vous pouvez placer n'importe où sur la page et personnaliser pour l'adapter au design. Vous pouvez également utiliser la vidéo, les images, contrôler le type de diapositive et bien plus encore.
31. Réseaux sociaux Suivre
Les boutons de suivi sont une autre fonctionnalité de page que peu de thèmes parviennent à faire. Ils sont une fonctionnalité si simple mais peuvent souvent sembler maladroits, ne pas fonctionner correctement ou avoir l'air d'avoir été ajoutés avec un plugin.
Le module de suivi des médias sociaux est différent. Il ajoute des icônes attrayantes avec des liens et vous permet de les personnaliser en fonction de vos besoins.
32. Onglets
Si le module Accordion n'est pas ce que vous recherchez, peut-être que le module Tabs l'est. C'est une autre façon de présenter beaucoup de texte sans surcharger la page.
Cet addon vous permet de créer un élément de contenu avec un certain nombre d'onglets horizontaux pouvant contenir des copies, des images ou des vidéos.
33. Témoignage
Le module Témoignage ajoute une preuve sociale à une page. Nous savons tous à quel point la preuve sociale est importante et ce module vous permet de l'ajouter n'importe où.
Vous avez plusieurs options de style pour adapter le module à la page, vous pouvez présenter une image, une copie et des liens en fonction de vos besoins.
34. Texte
Le module Texte vous permet d'accéder à l'éditeur de texte WordPress pour ajouter du texte personnalisé où vous le souhaitez. C'est un autre addon mineur mais utile qui offre beaucoup plus de liberté en termes de placement de texte sur une page.
35. Basculer
Le module Divi Toggle fonctionne de la même manière que Accordion en ce sens qu'il bascule les zones de contenu pour qu'elles s'ouvrent et se ferment. Là où Accordion utilise une seule boîte avec plusieurs diapositives, Toggle utilise des boîtes individuelles que chaque diapositive individuellement.
C'est une alternative utile à Accordion où vous ne pouvez avoir que quelques éléments que vous souhaitez utiliser ou souhaitez que tous les éléments soient ouverts en même temps.
36. Vidéo
Vous pouvez déjà intégrer une vidéo dans WordPress, mais vous devez utiliser l'intégralité de l'URL iFrame dans la vue de code. Le module Divi Video enregistre tout cela.
Le module vous permet d'intégrer une vidéo téléchargée ou liée n'importe où sur une page. Vous pouvez également définir une image personnalisée au lieu de la première image et personnaliser le bouton de lecture.
37. Curseur vidéo
Le module Video Slider prend la vidéo et ajoute un curseur. Vous pouvez définir une vidéo principale et en présenter plusieurs autres en dessous et laisser le curseur basculer entre elles.
Le module vous permet de personnaliser la première image et le bouton de lecture, d'utiliser des vidéos téléchargées ou liées et de les placer n'importe où sur une page.
38. Code pleine largeur
Le module Code pleine largeur fonctionne avec des thèmes Divi pleine largeur et vous permet d'incorporer du code sur une page tout en conservant le formatage. C'est un module simple mais efficace qui pourrait être utile pour les sites Web pratiques, les sites Web de développeurs ou autre chose.
39. En-tête pleine largeur
Le module En-tête pleine largeur vous permet de créer un en-tête en utilisant toute la largeur de la page. Simple mais très efficace. Vous pouvez présenter un titre, un sous-en-tête et une copie avec jusqu'à deux boutons.
40. Image pleine largeur
L'image pleine largeur est la version pleine largeur de l'image mais fonctionnelessly dans des conceptions pleine largeur. Il possède également les mêmes options d'affichage et de personnalisation.
41. Carte pleine largeur
Le module Fullwidth Map fonctionne comme Maps mais pour les pages pleine largeur. Vous bénéficiez également de la même compatibilité Google Map, des mêmes options de personnalisation et de la même facilité d'utilisation que ce module.
42. Menu pleine largeur
Le menu pleine largeur fournit un menu personnalisé qui s'étend sur une page. Il prend le menu WordPress standard et le présente dans un élément personnalisé. Vous pouvez ensuite personnaliser le menu de la manière habituelle.
43. Portefeuille pleine largeur
Ce module prend le module Portfolio standard et le fait fonctionner avec des pages pleine largeur. Il a les mêmes personnalisations et fonctionnalités mais fonctionne avec cette mise en page.
44. Curseur de publication pleine largeur
Le curseur de publication pleine largeur prend le module de curseur de publication et le fait fonctionner sur toute la largeur d'une page. Il a le même utilitaire et les mêmes options de personnalisation que ce module, offrant un contrôle total sur son apparence à l'utilisateur.
45. Titre du message pleine largeur
Le titre du message pleine largeur est le même que le titre du message mais fonctionne en pleine largeur. C'est quelque chose que nous imaginons que vous utiliseriez avec parcimonie sur une page, mais ce module Divi vous permet de présenter des titres pleine largeur sans aucun codage.
46. Curseur pleine largeur
Le Fullwidth Slider prend le module Slider et fait de même. Le fait fonctionner défautlessly avec une conception pleine largeur. Il s'agit d'un module plus utile avec un contrôle total sur l'apparence et la convivialité des diapositives.
Modules Divi de WooCommerce
WooCommerce est très bien servi par Divi. Certains étendent les fonctionnalités existantes dans les pages WooCommerce tandis que d'autres vous permettent de présenter certains éléments de magasin dans des pages non commerciales.
Chacun vaut la peine d'être vérifié si vous recherchez plus de flexibilité dans la conception de votre magasin.
1. Module d'Ariane Woo
Les fil d'Ariane sont fréquemment utilisés sur les sites Web pour faciliter la navigation. Le module Woo Breadcrumb pour Divi fait la même chose pour votre boutique. Les options sont simples et incluent une page de cours, une page actuelle et un lien et un séparateur facultatifs.
C'est un module simple mais efficace qui vous permet de placer un fil d'Ariane descriptif en haut de la page pour aider vos utilisateurs à naviguer.
2. Module de titre Woo
Ce module vous permet d'avoir un contrôle total sur les titres des produits. Vous pouvez modifier le titre, le styliser et ajouter des liens, des arrière-plans et le configurer selon vos besoins. Il s'appuie sur l'option de titre par défaut en ajoutant plus d'outils de conception et un espacement avancé.
De plus, lorsque vous mettez à jour un titre avec ce module, vous pouvez le configurer pour qu'il se mette à jour automatiquement partout sur votre site.
3. Module d'image Woo
Le module d'image Woo offre un contrôle total sur les images de produits dans votre magasin. Les options par défaut sont bonnes, mais cela va plus loin. Vous pouvez ajouter un certain nombre d'images, utiliser un curseur de vignettes et ajouter des badges ou des couches graphiques pour les offres ou autre chose.
Le module dispose de quelques options de personnalisation que vous pouvez utiliser pour styliser l'image, puis vous permet de la placer où vous le souhaitez sur n'importe quelle page.
4. Module Galerie Woo
Le module Galerie Woo s'appuie sur le module Image en incorporant des images dans une galerie de produits. Il offre des options similaires au module Divi Gallery que nous avons mentionné précédemment et offre la possibilité de styliser la galerie et de la placer n'importe où, sur n'importe quelle page.
Les images vendent des produits, c'est donc une excellente option si la capacité d'image par défaut de WooCommerce ne fournit pas ce dont vous avez besoin.
5. Module de prix Woo
Le module de prix Woo étend les prix et vous permet de présenter des produits et des prix sur n'importe quelle page, pas seulement sur les pages de magasin. C'est un élément personnalisable qui affiche le prix actuel, l'ancien prix, le prix de vente et conçoit ces prix en fonction de votre thème.
Bien que le plugin WooCommerce standard comporte de nombreuses options de tarification intégrées, ce module va encore plus loin et inclut la possibilité de promouvoir sur des pages non-produit.
6. Module Woo Ajouter au panier
Le module Woo Add to Cart offre un contrôle total sur l'achat réel. Avec lui, vous pouvez personnaliser le bouton Acheter maintenant comme vous le souhaitez. De ce qu'il dit à son apparence et séparez le bouton de la mise en page WooCommerce par défaut.
Si, pour une raison quelconque, le prix par défaut et la disposition des boutons ne fonctionnent pas pour votre thème, ce module vous aide. Vous pouvez le placer n'importe où, le styliser, afficher une option de quantité et même un affichage du stock restant.
7. Module d'évaluation Woo
Les cotes sont tout dans la vente au détail. Les produits très bien notés surpassent de beaucoup les produits non notés. La montée des critiques et de la preuve sociale peut être à vous avec le module de notation Woo.
Il vous permet de donner une note à une page, d'afficher des avis, d'afficher le nombre et la note moyenne de ces avis et des liens vers eux. Chaque magasin devrait utiliser des évaluations et voici comment le faire.
8. Module de stock Woo
Le module Woo Stock fait exactement ce qu'il dit sur la boîte. Il vous permet d'afficher un numéro de stock précis dans l'affichage de votre produit. Cela peut aider à augmenter l'urgence, ce qui à son tour augmente la conversion.
Vous pouvez styliser chaque affichage pour répondre à cette urgence en mettant en évidence le stock faible en rouge ou le stock élevé en vert, ajouter le texte «Rupture de stock» et le placer n'importe où sur la page.
9. Woo Méta Module
Le Woo Meta Module s'occupe de petits détails tels que l'affichage du SKU, des balises, des catégories et des données supplémentaires sur une page. Si vous souhaitez inclure autant de données que possible sur les pages, ce module vous aidera.
Ce n'est pas un module de forme libre, mais peut prendre des méta internes et les afficher à la vue de tous. Vous pouvez cependant styliser le design.
10. Module de description de Woo
Le module de description de Woo vous permet d'afficher une description de produit pour un produit spécifique n'importe où dans un thème Divi.
C'est un module basique mais utilisable qui vous permet de promouvoir des produits sur des pages de blog ou de services et de personnaliser pleinement l'apparence de cette description.
11. Module Woo Tabs
Le module Woo Tabs fonctionne de la même manière que le module Divi Tabs. Il installe un élément de contenu à onglets sur une page que vous pouvez remplir avec le contenu de votre choix.
Les onglets peuvent être utiles pour combiner plusieurs sources d'informations sur une seule page. Par exemple, les détails du produit, les spécifications du produit, les options de livraison et les avis dans une seule boîte avec un onglet pour chacun.
12. Module d'informations supplémentaires Woo
Le module d'informations supplémentaires de Woo est destiné à ceux qui en veulent plus. Vous avez des produits avec des options supplémentaires? C'est le module à utiliser. Par exemple, des tailles ou des couleurs différentes seraient présentées ici.
Vous pouvez le styliser comme vous le souhaitez et le placer sur une page à l'aide du personnalisateur standard. Un autre ajout simple mais précieux.
13. Module de produits liés à Woo
Le module d'informations supplémentaires Woo devrait nécessiter peu d'introduction. Magasins thrive sur la vente croisée et la vente incitative et ce module explique comment procéder. Vous pouvez ajouter un Produits annexes section à une page et ajoutez les informations complémentaires souhaitées.
Chaque magasin doit utiliser la vente croisée et si les options standard de WooCommerce ne suffisent pas, ce module fonctionne parfaitementlessment avec Divi.
14. Module Woo Upsell
Le module Woo Upsell fait à peu près la même chose. Vous pouvez l'ajouter aux pages de produits ou à n'importe quelle page de votre site pour vendre des produits incitatifs.
Les produits présentés dans ce module seront ceux que vous avez définis comme options de vente incitative dans WooCommerce. Ce module vous permet simplement de les placer n'importe où sur une page.
15. Module d'avis de Woo Cart
Le module d'avis de panier Woo est une option à valeur ajoutée qui ajoute un simple avis à une page de produit informant l'utilisateur qu'il a ajouté un produit au panier. C'est un élément d'interaction simple mais utile qui peut distinguer un bon magasin d'un bon magasin.
Les notifications peuvent être des styles et avec des couleurs et des polices. Le paramètre par défaut utilisera la couleur de votre thème, mais vous pouvez facilement le remplacer si vous préférez.
16. Module de révision Woo
Le module Avis Woo vous permet de placer des avis produits pour vos articles sur n'importe quelle page de votre site. Il est utile pour les pages de promotion ou les articles de blog d'ajouter cette preuve sociale vitale pour aider à influencer une décision d'achat.
Le module vous permet de définir des champs spécifiques, d'afficher le nombre de commentaires et d'influencer la couleur et le style. C'est un module utile si vous faites la promotion dans des endroits autres que vos pages de produits.
10 des meilleurs modules Divi gratuits
Il existe une large gamme de modules Divi gratuits et tous ne sont pas créés égaux. Nous pensons que ces 10 modules Divi gratuits valent la peine d'être essayés.
1. Ajusteur Divi
Divi Tweaker est un module très intelligent qui permet d'accélérer le Divi Builder et WooCommerce, supprime les chaînes de requête qui peuvent ralentir le chargement des pages et peuvent remplacer les fichiers de thème locaux par des fichiers servis à partir d'un CDN.
Le module ajoute également des fonctionnalités de conception supplémentaires pour les mobiles et les ordinateurs de bureau, des animations et des effets, des transitions de page, des options de mise en page et bien plus encore.
2. Module de texte avancé Divi
Le module de texte avancé de Divi est un module petit mais très utile qui élargit les options de texte existantes et ajoute des outils utiles. Si vous travaillez beaucoup avec du texte, comme nous le faisons, la possibilité de modifier la largeur et la hauteur de l'élément de texte fait une énorme différence lorsque vous essayez de perfectionner une mise en page. Ce module fait cela.
Il ajoute également un outil de téléchargement d'images qui raccourcit les temps de conception d'une manière petite mais importante.
3. Divi SlimBuilder
Divi Slimbuilder est idéal si vous créez des pages de destination ou des pages de site plus longues avec le Divi Builder. Il modifie la disposition de la fenêtre principale afin que les éléments de la page soient plus fins. Il modifie également la façon dont les titres de section sont affichés pour rendre l'ensemble du processus de conception beaucoup plus fluide.
C'est une petite chose, mais cela signifie que vous pouvez voir beaucoup plus de ce qui se passe avec le back-end de la conception sans avoir à continuer à faire défiler de haut en bas.
4. Extension de cartes d'article
Article Cards Extension était apparemment Elegant Themes' tout premier module Divi. Il est si utile qu'il est toujours là et toujours populaire aujourd'hui. C'est un autre module modeste qui ajoute plus d'options de style au module Divi Blog pour changer la façon dont les cartes de blog sont affichées.
Les changements sont modestes et incluent des effets d'ombre, des couleurs d'arrière-plan, la possibilité de styliser la grille du blog et de changer la position du titre et de la méta du blog.
5. Pack d'extension d'icônes Divi
Le pack d'extension Divi Icon fait exactement ce qu'il dit. Il ajoute une série d'icônes dessinées à la main au Divi Builder à utiliser dans votre conception. Il y a des centaines de choix et vous pouvez tous les personnaliser en fonction de votre thème.
Il existe une version gratuite et une version premium de ce module. La prime ajoute plus d'icônes et d'options de personnalisation.
6. Développer Divi
Expand Divi est un autre module Divi explicite. Il ajoute une gamme de fonctionnalités à Divi, notamment Lightbox, une nouvelle section d'articles connexes, de nouvelles boîtes d'auteur, un nouvel élément d'articles récents, un animateur pour le préchargement des pages, des outils Font Awesome et bien plus encore.
Le module n'a pas été mis à jour depuis un moment mais nous l'avons testé sur la dernière version de WordPress et Divi et cela a bien fonctionné.
7. Combinaison de combat pour Divi
En plus d'avoir un nom très cool, Battle Suit for Divi a beaucoup à offrir. C'est un module d'extension qui ajoute plus d'options de publication, de pied de page, de galerie et d'image, ajoute Lightbox pour l'image et la vidéo, ajoute des effets d'image, des options de titre et de méta de publication et une tonne d'autres outils.
Étant donné qu'il s'agit d'un module gratuit, il se passe beaucoup de choses ici et le module rend tout accessible et très facile à utiliser.
8. Shortcode Divi simple
Simple Divi Shortcode prend un outil très puissant dans WordPress, les shortcodes, et vous permet de les placer n'importe où dans d'autres modules. C'est un autre outil très simple qui peut faire une énorme différence si vous utilisez beaucoup de shortcodes dans vos pages.
Il existe une version gratuite et une version premium de ce plugin, mais l'option gratuite fait tout ce dont vous aurez probablement besoin.
9. Extras Surbma Divi
Surbma Divi Extras ajoute quelques fonctionnalités supplémentaires à Divi que certains d'entre vous pourraient trouver utiles. L'option de logo textuel est une chose qui le distingue. Vous n'aurez peut-être pas besoin de l'utiliser souvent, mais lorsque vous le faites, cet outil à lui seul rend ce module utile.
Le module ajoute également des options de style, de mise en page, de menu et de pied de page et dispose d'une option centrale verticale très soignée pour la copie dans un module. C'est un autre de ces outils qui peut être une véritable bouée de sauvetage!
10. Popups pour Divi
Popups for Divi est très utile si vous souhaitez créer un seul popup mais ne voulez pas utiliser un plugin popup dédié pour WordPress. Il ajoute une fonctionnalité où vous pouvez créer un élément dans le constructeur et l'utiliser comme une fenêtre contextuelle pour le marketing.
C'est une solution simple à un problème grave et idéale pour créer des popups de base dans une page sans avoir à utiliser ou à payer pour un plugin popup.
10 modules Divi Premium
Il existe des centaines de modules Divi premium. Certains valent l'investissement et d'autres pas tellement. Ces 10 valent vraiment votre argent!
1. Module carrousel Divi 2.0
Divi Carousel Module 2.0 vous aide à créer des carrousels pour presque tout dans Divi. Ils peuvent être utiles pour les produits, services, témoignages et toutes sortes de fonctionnalités promotionnelles. Ce plugin les rend possibles.
Il vous permet de créer autant de carrousels que vous le souhaitez et de les enregistrer en tant que modèles à utiliser n'importe où. Vous avez un contrôle total sur leur apparence et leur apparence et toute la conception est effectuée dans le constructeur. Une superbe option pour les écrans.
2. Commerce électronique Divi
Divi Ecommerce fonctionne avec Divi et WooCommerce pour créer un raccourci vers la création d'une boutique en ligne. Il propose quelques modèles à utiliser comme modèles, des éléments de page personnalisés, du contenu de démonstration pour vous permettre de démarrer rapidement et tout ce dont vous avez besoin pour créer un magasin de base.
Le module est même livré avec des barres latérales, le partage social, des options de mise en page du produit, des horloges de compte à rebours, des modules de produits tendance et bien d'autres options. Si vous n'aimez aucune des démos de Divi, ce module pourrait être fait pour vous.
3. Divi Headers Pack
La Divi Headers Pack est énorme. Il ajoute plus de 750 nouveaux en-têtes, certains fonctionnels, certains nouveaux designs. Il ajoute off-canvas options de menu, en-têtes réactifs, effets de menu, animations de menu et une tonne d'outils pour styliser les en-têtes.
Ce module a un objectif très étroit, mais il vaut bien l'investissement si vous avez du mal à trouver l'en-tête parfait. Si vous ne le trouvez pas ici, vous ne le trouverez nulle part!
4. Divi Suprême Pro
Divi Supreme Pro comprend une gamme de modules pour améliorer votre créativité tout en utilisant Divi. Les modules incluent le texte dégradé, la Flipbox, le diviseur de texte, la saisie Divi, le bouton suprême, le flux Facebook et un certain nombre d'autres.
Il y a beaucoup de contenu dans ce module, plus de 40 modules différents et 7 extensions premium. Vu le prix, Divi Supreme Pro est une bonne affaire!
5. Calendrier des événements Divi
Le calendrier des événements Divi peut être utilisé pour créer un site Web complet de gestion d'événements ou pour ajouter des événements à un site standard. Il utilise la norme Divi Builder pour aider à créer des événements et a tout ce dont vous avez besoin pour les styliser et les afficher.
Ce module comprend un calendrier, un carrousel, un flux d'événements et un module de page pour vous aider à créer un site Web d'événements ou une section d'événements entièrement fonctionnel et vaut le détour.
6. Table Maker
Certaines personnes trouvent les tables faciles tandis que d'autres les trouvent un gâchis frustrant. Si vous êtes dans ce dernier camp, le Table Maker module est fait pour vous. Il vous permet d'intégrer rapidement un tableau dans une page et de tout styliser.
Vous pouvez ajouter des images, des icônes, des textes, des boutons et même réduire des lignes pour mobile. C'est un plugin très puissant qui simplifie l'ajout et la mise en forme de tableaux sur n'importe quelle page et pour cela, il vaut la peine d'être acheté.
7. Fenêtre contextuelle Divi Modal
Si vous souhaitez utiliser des popups et des Popups pour Divi ne suffit pas, Divi Modal Popup le sera. C'est un module riche en fonctionnalités qui permet de créer rapidement des fenêtres contextuelles à partir du chargement de la page, du délai et d'une gamme d'autres déclencheurs.
Plus important encore, vous pouvez inclure la gamme complète d'éléments de page, placer votre popup n'importe où, le faire déclencher par n'importe quoi sur la page et ajouter des animations à la popup elle-même. Si vous souhaitez augmenter l'engagement avec les popups, c'est ce que vous utilisez.
8. Assistant réactif Divi
Le Divi Responsive Helper est un outil pour vous aider à voir exactement comment votre page se chargera sur mobile depuis le Builder. Vous pouvez également modifier son apparence, son chargement, modifier l'ordre des éléments et contrôler totalement l'apparence de votre site sur les appareils mobiles.
Le module comprend également un outil de réparation automatique très intelligent qui peut rééquilibrer les phrases ou les paragraphes afin qu'ils aient une meilleure apparence. Cela seul en vaut la peine!
9. Galerie Divi Maçonnerie
La Divi Masonry Gallery est idéale si vous voulez plus d'un portfolio ou d'une page de blog. Il prend la disposition de maçonnerie standard et ajoute la possibilité de créer différentes formes, de modifier les colonnes, d'ajouter ou de supprimer de l'espace, d'ajouter des fenêtres contextuelles modales et de configurer une galerie spécifique pour mobile.
Si vous concevez un site Web riche en images et que vous souhaitez en faire plus avec la maçonnerie, ce module vous permet de tout faire à partir de l'interface familière de Builder.
10. Divi MadMenu
Divi MadMenu ajoute plus d'options à la section menu de Divi Builder. Si les paramètres par défaut ne suffisent pas, ce module en ajoute plus. Il divise également un en-tête en sections distinctes pour une personnalisation facile.
Le module vous permet de contrôler le fonctionnement du menu sur différentes tailles d'écran, de définir différentes dispositions pour différents appareils, d'ajouter des éléments Ajax pour les produits, d'ajouter des appels aux actions et d'autres éléments. C'est un moyen puissant de maîtriser les en-têtes.
Si vous recherchez des fonctionnalités supplémentaires, consultez notre article sur Plugins Divi ou vérifier notre avis sur DiviFlash.
Comment développer votre propre module Divi personnalisé
Envie de développer votre propre module Divi? Vous avez un problème qui n'est pas couvert par un module existant?
Cette partie de l'article est là pour vous aider.
Nous allons vous présenter les bases du développement de votre propre module Divi personnalisé. Vous aurez besoin de compétences de base en PHP pour compléter cette section en tant que Divi Builder définit les modules comme des classes PHP.
Vous devrez d'abord créer une extension Divi. Vous devez d'abord le faire car votre module Divi personnalisé est implémenté dans une extension, un thème ou un thème enfant et l'extension est la plus simple à créer.
Lisez ce guide pour créer votre extension. Une fois que vous avez terminé, revenez ici pour créer votre module.
Ouvrez votre extension et localisez les inclus / modules
Créez un répertoire appelé SimpleHeader
Créez un fichier dans SimpleHeader et appelez-le SimpleHeader.php
Collez ce qui suit dans le fichier et enregistrez
La classe SIMP_SimpleHeader étend ET_Builder_Module {
public $ slug = 'simp_simple_header';
public $ vb_support = 'sur';
public function init () {
$ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
}
fonction publique get_fields () {
tableau de retour (
'header' => tableau (
'label' => esc_html __ ('Heading', 'simp-simple-extension'),
'type' => 'texte',
'option_category' => 'option_de base',
'description' => esc_html __ ('Entrez le titre souhaité ici.', 'simp-simple-extension'),
'toggle_slug' => 'main_content',
),
'content' => tableau (
'label' => esc_html __ ('Contenu', 'simp-simple-extension'),
'type' => 'tiny_mce',
'option_category' => 'option_de base',
'description' => esc_html __ ('Le contenu saisi ici apparaîtra sous le texte de l'en-tête.', 'simp-simple-extension'),
'toggle_slug' => 'main_content',
),
);
}
public function render ($ unocessed_props, $ content = null, $ render_slug) {
}
}
nouveau SIMP_SimpleHeader;
Si vous connaissez votre PHP, vous verrez un en-tête de base qui peut être utilisé par Divi Builder. Vous verrez un en-tête, du contenu et un arrière-plan.
Ajoutez maintenant du HTML au fichier pour qu'il puisse être rendu.
Ajoutez ce qui suit après 'public function render ($ unocessed_props, $ content = null, $ render_slug) {'
retour sprintf (
' % 1 $ s
% 2 $ s ',
esc_html ($ this-> props ['titre']),
$ this-> props ['content']
);
}
}
nouveau SIMP_SimpleHeader;
Votre fichier complet devrait ressembler à ceci:
La classe SIMP_SimpleHeader étend ET_Builder_Module {
public $ slug = 'simp_simple_header';
public $ vb_support = 'sur';
public function init () {
$ this-> name = esc_html __ ('Simple Header', 'simp-simple-extension');
}
fonction publique get_fields () {
tableau de retour (
'header' => tableau (
'label' => esc_html __ ('Heading', 'simp-simple-extension'),
'type' => 'texte',
'option_category' => 'option_de base',
'description' => esc_html __ ('Entrez le titre souhaité ici.', 'simp-simple-extension'),
'toggle_slug' => 'main_content',
),
'content' => tableau (
'label' => esc_html __ ('Contenu', 'simp-simple-extension'),
'type' => 'tiny_mce',
'option_category' => 'option_de base',
'description' => esc_html __ ('Le contenu saisi ici apparaîtra sous le texte de l'en-tête.', 'simp-simple-extension'),
'toggle_slug' => 'main_content',
),
);
}
public function render ($ unocessed_props, $ content = null, $ render_slug) {
retour sprintf (
' % 1 $ s
% 2 $ s ',
esc_html ($ this-> props ['titre']),
$ this-> props ['content']
);
}
}
nouveau SIMP_SimpleHeader;
Si c'est le cas, il est maintenant temps de créer le React Classe de composant qui permet Divi Builder rendre le module.
Créez un fichier et appelez-le SimpleHeader.jsx
Collez ce qui suit et enregistrez-le
// Dépendances externes
importer React, { Composant, Fragment } de 'react';
// Dépendances internes
import './style.css';
class SimpleHeader étend le composant {
slug statique = 'simp_simple_header';
render () {
revenir (
{this.props.content ()}
</div>
);
}
}
exporter par défaut SimpleHeader;
Accédez à includes / modules / index.js dans votre fichier d'extension
Ajoutez et enregistrez les éléments suivants
// Dépendances internes
importer SimpleHeader depuis './SimpleHeader/SimpleHeader';
par défaut d'exportation [
En-tête simple,
];
Ajoutez ce qui suit à SimpleHeader.jsx après
render () {
revenir (
Et enregistrez-le.
{this.props.heading}
Le fichier complet devrait maintenant ressembler à ceci:
// Dépendances externes
importer React, { Composant, Fragment } de 'react';
// Dépendances internes
import './style.css';
class SimpleHeader étend le composant {
slug statique = 'simp_simple_header';
render () {
revenir (
{this.props.heading}
{this.props.content ()}
);
}
}
exporter par défaut SimpleHeader;
Ouvrez le style.css de votre module et ajoutez
.simp-simple-header-header {
margin-bottom: 20px;
}
Voilà pour développer votre module Divi. Il ne vous reste plus qu'à le tester!
Ouvrez le Divi Builder, localisez votre module Simple Header et essayez de l'utiliser sur une page. Si vous avez le bon code, vous verrez une simple option d'en-tête.
Tour d'horizon des modules Divi
Nous avons inclus plus de 70 modules Divi gratuits et premium couvrant tout, de la création de fenêtres contextuelles à l'ajout de fonctionnalités de conception supplémentaires à Divi Builder. Certains sont des modules de niche que vous n'utiliserez pas très souvent, mais certains sont essentiels pour une utilisation fluide et efficace de Divi Builder.
Nous pensons qu'ils représentent un aperçu de ce qui est disponible, de ce qui fonctionne et de ce qui est proposé à un prix raisonnable. Qu'en penses-tu?
Utilisez-vous l'un de ces modules Divi? Avez-vous des modules à suggérer?
Veuillez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!
Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.
et beaucoup plus ...