Le guide ultime des modules Divi (officiel + tiers)

Si vous utilisez le thème Divi ou Divi Builder, vous travaillerez régulièrement avec des modules. Ce sont les éléments constitutifs 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 beaux sites Web.

Le problème, c'est que lorsque vous êtes en train de concevoir ou d'essayer de vous frayer un chemin dans 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.

 

Contenu[Montrer]

Cet article est l'un de nos nombreux Avis sur Divi que CollectiveRay a fait pour couvrir les différents aspects du thème et du constructeur Divi.

Besoin d'obtenir Divi à un prix avantageux? Nous avons actuellement une réduction exclusive sur les thèmes élégants:

Obtenez Divi pour 10% de réduction sur Mai 2021 Seulement

Modules Divi officiels

Il y a 46 modules Divi actuellement disponibles.

1. Accordéon

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

Audio

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

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

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

Blurb

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

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

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

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

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

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

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

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

Cloison

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

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

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 portefeuille intégrés et le Divi Builder les a également, mais ce module en ajoute encore plus.

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

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. S'identifier

S'identifier

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

Map

Le module Divi Map prend l'élément de carte standard et ajoute des options de personnalisation supplémentaires et une intégration transparente dans une page. Comme les cartes peuvent jouer un rôle essentiel dans certains sites, c'est un addon 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

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

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

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

Post Navigation

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

Poster curseur

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

Titre de l'article

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

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.

Rechercher

La recherche est une autre de ces fonctionnalités qui est généralement loin d'être idéale. La fonction de recherche WordPress par défaut peut être lente et manquer l'évidence. Certains thèmes incluent la recherche qui déçoit souvent. Le module Divi Search change tout cela.

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

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

Sidebar

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

Slider

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

Suivre les médias sociaux

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

Tabs

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

TÉMOIGNAGES

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

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

cabillot

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

Vidéos

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

Slider 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

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

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

Image pleine largeur

Image pleine largeur est la version pleine largeur d'Image, mais fonctionne de manière transparente dans les conceptions pleine largeur. Il a également les mêmes options d'affichage et de personnalisation.

41. Carte pleine largeur

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

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

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

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

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

Curseur pleine largeur

Le curseur pleine largeur prend le module curseur et fait de même. Le fait fonctionner parfaitement avec un design pleine largeur. Il s'agit d'un module plus utile avec un contrôle total sur l'apparence et la sensation 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

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

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

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.

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

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

Module Ajouter au panier Woo

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

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

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 Meta Module

Module méta Woo

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

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

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

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.

Module de produits connexes à Woo

Le module d'informations supplémentaires de Woo devrait nécessiter peu d'introduction. Les magasins prospèrent grâce à la vente croisée et à la vente incitative et ce module vous explique comment procéder. Vous pouvez ajouter une section Produits associés à une page et ajouter des informations de support selon vos besoins.

Chaque magasin doit utiliser la vente croisée et si les options standard de WooCommerce ne suffisent pas, ce module fonctionne de manière transparente avec Divi.

14. Module Woo Upsell

Module de vente incitative Woo

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

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

Module Avis 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. Divi Tweaker

Divi Tweaker

Divi Tweaker est un module très intelligent qui permet d'accélérer Divi Builder et WooCommerce, supprime les chaînes de requête qui peuvent ralentir le chargement de la page 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

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

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 minces. Cela change é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

Extension de cartes d'article

Article Cards Extension était apparemment le tout premier module Divi d'Elegant Themes. C'est tellement 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

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 que vous pouvez 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

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

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

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

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 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!

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

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. Pack d'en-têtes Divi

Pack d'en-têtes Divi

Le pack d'en-têtes Divi est énorme. Il ajoute plus de 750 nouveaux en-têtes, certains fonctionnels, certains nouveaux designs. Il ajoute des options de menu hors canevas, des en-têtes réactifs, des effets de menu, des 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 Supreme Pro

Divi Supreme 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

Calendrier des événements Divi

Le calendrier des événements Divi peut être utilisé pour créer un site Web de gestion d'événements complet ou être utilisé pour ajouter des événements à un site standard. Il utilise le Divi Builder standard 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. Fabricant de table

Fabricant de table

Certaines personnes trouvent les tables faciles tandis que d'autres les trouvent un désordre frustrant. Si vous êtes dans ce dernier camp, le module Table Maker 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

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

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!

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

Divi MadMenu ajoute plus d'options à la section de menu de Divi Builder. Si les paramètres par défaut ne suffisent pas, ce module en ajoute plus. Il décompose également un en-tête en sections séparées 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.

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 décrire 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 car 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 la classe React Component qui permet à Divi Builder de rendre le module.

Créez un fichier et appelez-le SimpleHeader.jsx

Collez ce qui suit et enregistrez-le

// Dépendances externes
importer React, {Component, Fragment} de 'react';
// Dépendances internes
import './style.css';
class SimpleHeader étend le composant {
  slug statique = 'simp_simple_header';
  render () {
    revenir (
      
        {this.props.content ()}
      
    );
  }
}
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 [
  SimpleHeader,
];

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, {Component, 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 option d'en-tête simple.

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?

A propos de l'auteur
David Attard
Auteur: David AttardSite Web : https://www.linkedin.com/in/dattard/
David travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possède une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plates-formes numériques disponibles aujourd'hui.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez 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.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...