Please enable the breadcrumb option to use this shortcode!

Les modules Divi > Le Module Image

Ajoute les images de ton choix à Divi en toute simplicité

Les images peuvent être placées où tu le souhaites dans ton site. Elles s’adapteront à l’espace que tu leur as réservé et ne nuiront pas au chargement de ta page grâce à la technique du lazy loading intégrée à Divi.

Activer le Visual Builder
Pour créer et modifier le module image 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 Image

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 un type de rangée. Par exemple : rangée normale / 1 colonne.

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.

Sélectionne le module Image.

Pour en savoir plus, consulte les articles Comprendre les sections Divi et Comprendre les rangées Divi.
La configuration du Module

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

  • Contenu
    Tu peux ici placer ton image. Si tu souhaites que ton image soit cliquable, ajoute également un lien vers lequel elle devra pointer.
  • Style
    Tu peux modifier ici la disposition, les marges, la taille et les bordures de ton image.
  • Avancé
    Tu préféres coder ? Tu peux t'exprimer ici pour personnaliser le style du module en .css.
Onglet Contenu
IMAGE

Clique sur « Mettre en ligne ».

Divi propose trois possibilités pour mettre en ligne simplement une image :

Bibiothèque de Médias, te permet de sélectionner une image que tu as déjà mise en ligne précedemment.

Envoyer des fichiers, te permet de charger une image depuis ton ordinateur et de la stocker dans ton site.

Le champ Url, te permet d’indiquer l’adresse url exacte de ton image.

Si tu souhaites en savoir plus, l’article insérer une image explore ces trois possibilités en détail.

Partie FOND

Cette partie se compose de 4 onglets te permettant de choisir :

  • Une couleur de fond
  • Une couleur de fond avec dégradé
  • Une photo téléchargée depuis ton ordinateur ou prise sur ta bibliothèque de médias
  • Une vidéo
Pour en savoir plus consulte l’article : Modifier les fonds des Modules.
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 des modules image seront nommées …Image. Tu peux en modifier le nom pour te faciliter leur repérage.

Onglet Style

Cette partie permet de définir l’apparence de votre texte (taille, couleur, police, disposition).

  • Texte : Modifie l’apparence de ce que tu as écrit sur ton site ou dans la partie contenu.
  • En-tête Texte est utile si une partie de ce texte est spécifié comme étant un titre H1, H2, H3, H4, H5 ou H6

Tu peux aussi régler le design du module en entier (l’ensemble du conteneur).
Astuce : Pour visualiser le conteneur, indique une couleur de fond provisoire dans l’onglet contenu, fond

  • Bordure  : Encadre ton module
  • Dimensionnement : Donne une largeur maximale à ton 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 : Utile si tu souhaites que ton module ne soit pas fixe sur ta 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.

Sauvegarder tes 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 ta page. En se dépliant elle découvre le bouton "Sauvegarder" sur lequel il faut cliquer.

Newsletter

Rejoins-nous !

Besoin d'aide, une question sur Divi ? Like la page Divi en français, rejoins-nous sur le Groupe Facebook, trouve des solutions et participe toi aussi ! Plus on est de fous plus on aime Divi 😉

Offre à la une

Offre Divi

  • + Licence Divi
  • + Mises à jour automatiques

60€ au lieu de 89€

Les formations

GAGNE DU TEMPS

Il y a forcément une formation adaptée à tes besoins

1 Commentaire

  1. lam

    Bonjour, comment changer la forme de l’image car je souhaite faire des bulles et pas des carrés

    Réponse

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Autres ressources « Modules 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. Toi aussi rejoins-nous !

Modules de contenu

Utilisateurs

Polices d'écriture pré-installées

Maîtriser Divi sans perdre de temps

Les Formations Divi

Divi en un tour de Main

Débutant

Cette formation t'accompagne dans toutes les fonctionnalités de bases de Divi.
Un gain de temps inestimable !

Devenez Développeur Wordpress

Avancé

Webmarketing, expérience utilisateur, développement, référencement, sécurité, performance : Devenez un expert en travaillant sur de vrais projets acompagnés par des pros.

Terminer votre cursus avec le module travailler en Agence ou Devenir Auto-Entrepreneur.

Soyez Apte à recevoir votre première rémunération de dev. dès la fin de la formation !

Faire des sites pro sans coder

Confirmé

Tu veux construire tes sites ou ceux des autres sans apprendre le code ?
Avec la puissance de Divi et une formation Class-Active, deviens performant rapidement !

Formations Sur-mesure

Bénéficiaire d'un financement

Tu bénéficies d'un financement à la formation pour te reconvertir ou développer tes savoir-faire ?

Fais nous part de ton objectif pour que nous te proposions une formation qui correspond précisément à ton projet, à ton niveau actuel et à tes besoins.

https://class-active.fr/

Contacte Class:active

Le centre de formation aux métiers du web, 100% online, qui propose des workshops et formations coachés par des professionnels

Tél : 01 84 25 39 48
Web : class-active.fr

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.