Please enable the breadcrumb option to use this shortcode!

Les modules Divi > La Base

Module image, accordéon, compteur cercle ... Les modules de Divi sont indispensables à ton thème Divi. Qui sont-ils ? Comment s'en servir ?

Hop hop hop … Je te vois rechercher dans ton moteur de recherche un nouveau plugin ?!
Es-tu sûr(e) que ton thème Divi n’intègre pas déjà cette option ?
Divi est puissant et a prévu pour toi la plupart des fonctionnalités de base en un clic.

Voici une liste des modules compris dans ton thème pour cerner en un coup d’oeil ce que Divi a sous le capot.
Tu trouveras aussi dans cet article les manipulations communes à tous les modules. Tu sais en personnaliser un ? Tu sais TOUS les personnaliser !

La liste

Divi propose 37  modules qui sont rangés par ordre alphabétique quand tu cliques sur ajouter > module.
Divi en français ajoute à sa documentation le détail de chacun d’eux.
Si le descriptif du module existe, clique sur son nom et tu auras sa description spécifique.

  1. Accordéon
  2. Appel d’action
  3. Audio
  4. Barre Latérale
  5. Bascule
  6. Blog
  7. Boutique
  8. Bouton
  9. Carte
  10. Chercher
  11. Code
  12. Commentaires
  13. Compteur Barre
  14. Compteur Cercle
  15. Compteur nombre
  16. Compteur à Rebours
  17. Curseur de défilement des posts
  18. Curseur de défilement vidéo
  19. Diapo
  20. email Optin
  1. Formulaire de Contact
  2. Galerie
  3. Image
  4. Navigation dans les Posts
  5. Onglets
  6. Personne
  7. Portefeuille
  8. Portefeuille filtrable
  9. Résumé
  10. Se connecter
  11. Suivez nous sur les réseaux sociaux<
  12. Séparateur
  13. Tableaux des tarifs
  14. Texte
  15. Titre du Poste
  16. Témoignage
  17. Vidéo

37 modules : une seule méthode pour tous les personnaliser !

Le Visual Builder

Pour créer et modifier les modules directement sur le visuel de ton site, tu dois activer le visual builder. L’article Découvrir le Visual Builder t’explique comment faire.

Ajouter un Module

Les modules doivent se positionner à l’intérieur d’une rangée (cadre vert). 

Pour ajouter une rangée, clique sur le bouton + vert et choisis une colonne.

Pour en savoir plus, tu pourras consulter les articles  Comprendre les sections Divi et Comprendre les rangées Divi  (quand ils seront écrits …)

Pour ajouter un module, clique sur un bouton + gris présent à l’intérieur des rangées.

Une petite fenêtre s’ouvre avec un menu sous forme de cartes.

Les modules sont rangés par ordre alphabétique : Fais défiler le menu vers le bas jusqu’à ton choix ou utilise la barre de recherche tout en haut de la fenêtre de module.

La configuration du Module

La configuration des modules Divi se présente sous la forme de trois onglets :

  • Contenu
    Tu indiques ici quels sont les textes et les images ou icones que tu veux utiliser dans ton module. Dans cette partie tu entres le contenu sans te soucier de son aspect.
  •  Style
    Tu donnes dans cette partie le style de ton choix aux éléments que tu as entrés dans la partie contenu.
  • Avancé
    Tu préféres coder ? Tu peux t’exprimer ici pour personnaliser le style du module en .css.
Onglet Contenu
Partie Images

Poue les modules qui peuvent intégrer une image, un icône ou une image de fonc, le processus est toujours identique.

Divi te propose  deux possibilités pour sélectionner simplement tes images  :

Bibiothèque de Média, te permet de sélectionner des images que tu as déjà mises en ligne précedemment.

Envoyer des fichiers, te permet de charger des images depuis ton ordinateur et de les stocker dans ton site.

Pour en savoir plus, reporte-toi à l’article insérer une image qui explore ces trois possibilités en détail.

 

Partie étiquette admin

L’étiquette permet de se répérer si tu travailles parfois avec le générateur divi sans utiliser le visuel.
Par défaut, toutes les étiquettes portent le nomde leur module (Texte, séparateur, image, personne …). Tu peux modifier leurs noms pour te faciliter leurs repérages.

Onglet Style

Gagne du temps !

Si ton personnaliseur de thème est bien configuré, les polices et couleurs par défaut sont celles que as toi-même choisies. Tu n’as donc pas grand chose à faire dans la partie design.

Pour configurer tes polices et couleurs par défaut, lis l’article sur le personnaliseur de thème.

Texte

Modifie l’apparence de tes textes rapidement pour garantir une bonne lisibilité.

Sur un fond foncé, choisis un texte clair. Sur un fond clair, choisis un texte foncé. 

Titre Texte

Modifier ici l’apparence des titres.

La police par défaut utilisée par Divi pour tous tes textes est la police Open Sans ou celle que tu as paramétré dans ton personnaliseur de thème.

Tu peux dans cette option choisir une apparence spécifique pour les textes de chaque module. 400 polices sont disponibles dans le menu déroulant !

Tu peux également déterminer les couleurs de tes textes et les mettre en gras, en italique ou en majuscule.

Si ton personnaliseur de thème est bien configuré, les polices et couleurs choisies sont celles que tu avez paramétrées pour votre site et non plus celles par défaut. Vous n’aurez donc pas grand chose à faire dans la partie design.

Bordure

Encadre ton module si tu le désires en sélectionnant une couleur et une épaisseur de bordure.

Dimensionnement 

Donne une largeur maximale à votre module

Espacement 

Définis les marges internes et externes pour ton module. Tu peux aussi spécifier les marges à appliquer pour chaque appareil (ordinateur, mobile, tablette).

Animation

Si tu souhaites que ton module ne soit pas fixe sur votre page mais apparaisse subrepticement avec un effet (à utiliser avec beaucoup de modération)

Onglet Avancé
  • Parties Css (Id et classes Css, Personnalier Css) : Tu préféres coder ? Tu peux t’exprimer ici pour personnaliser le style du module en utilisant le langage .css.
  • Visibilité : Si ton module n’est pas adapté pour la vue ordinateur, mobile ou tablette, tu peux le désactiver sur un ou plusieurs de ces appareils. Coche les appareils où le module n’apparaitra PAS.

Sauvegarde les changements

r

N’oublie pas de cliquer sur « Sauvegarder les changements » pour « enregistrer les modifications » apportées sur le visual builder.

Le bouton « Sauvegarder les changements » se trouve tout en bas de ta page. Il est représenté par une bulle violette comportant trois petits points. Clique sur la bulle violette en bas au centre de votre page. En se dépliant elle découvre le bouton « Sauvegarder » sur lequel il faut cliquer.

Offre à la une

Offre Divi

  • + Licence Divi
  • + Mises à jour automatiques

60€ au lieu de 89€

Site clé en mains

GAGNE DU TEMPS

Une équipe d'experts met ton site sur les rails et te forme à l'utilisation de Divi

Newsletter

Autres ressources « démarrer avec divi »

Insérer une image

Insérer une image

Télécharge une image dans ta bibliothèque de médias directement depuis tes options divi, tes modules ou tes sections pour illustrer ton thème

Ajouter le logo

Ajouter le logo

Divi te permet de placer facilement ton logo sur ton site en modifiant les options du thème

Ajouter son Favicon

Ajouter son Favicon

Ajoute un favicon qui sera reconnu par tous les navigateurs sans entrer dans le code

Effectuer les Mises à Jour Divi

Effectuer les Mises à Jour Divi

Effectue les mises à jour Divi

Le thème Divi se répand à toute vitesse. Il convient aussi bien aux débutants qu'aux développeurs et leurs clients. Vous aussi rejoignez nous.

Thèmes Gratuits Inclus

Utilisateurs

Polices d'écriture pré-installées

Contacte Nous

En cochant la case ci-dessus tu affirmes avoir pris connaissance de notre politique de confidentialité. Tu peux demander la suppression de tes données à tout moment en suivant la procédure et en nous contactant à l’adresse hello+rgpd@bee-too-bee.com.