Sélectionner une page

Module image

1, Avr 2019

Introduction

Le module image de Divi est le second module Divi le plus utilisé, enfin par moi. Il n’y a rien de plus ennuyeux que de lire des lignes et des lignes de texte sans aucune illustration.
Je vais donc vous aider à créer un module image pour y insérer une image. Dans un second temps, je vous détaillerais les différents menus et réglages possibles sachant que certains sont communs à tous les modules, donc je m’y attarderais pas.

Ajouter une image avec le module image de Divi

Pour insérer une image, vous pouvez utiliser le module Image de Divi. Pour cela, cliquez sur insérer un module et chercher le module image dans la liste des modules ou taper dans la barre de recherche “Image” ou pour les plus productiviste uniquement “Im”.
Le menu du module va s’ouvrir. Comme pour le module Texte de Divi dont nous avons vu l’utilisation la semaine dernière (insérer lien), vous allez retrouver toutes les fonctions pour personnaliser votre module.

Pour insérer une image, vous n’aurez qu’à cliquer sur la croix (cf image ci-contre). Cela ouvrira le menu de gestion des image. Vous n’aurez donc plus qu’à ouvrir une image que vous avez déjà téléchargé sur votre site ou plus certainemenent, vous devez choisir une image sur votre ordinateur, la télécharger sur la librairie média de WordPress, puis ensuite vous pourrez la sélectionner et l’intégrer dans votre module Image de Divi et donc dans votre page ou article.

Copie écran du menu qui permet le choix des modules avec le module image entouré

Cliquez sur l’image pour l’agrandir

En cliquant sur la flèche du réglage image, vous ouvrez le sélecteur image de WordPress

Cliquez sur l’image pour l’agrandir

Les réglages du module image de divi

Menu Contenu

Image

Comme nous l’avons vu juste au-dessus, c’est avec la fonction Image que vous pouvez insérer une image. Vous avez donc réussi à intégrer une image grâce à ce module.

Lien

Si vous souhaitez que votre image soit cliquable, c’est-à-dire renvoie vers un lien, vous pourrez ici entrer l’adresse du lien vers lequel l’utilisateur se rendra s’il clique sur l’image.

Bouton qui permet d'activer le réglage ouvrir dans une visionneuse

Une autre fonction, très intéressante, est la visionneuse. En effet, si vous décidez que votre image est trop grande, vous pouvez la réduire en utilisant la fonction Style > Dimensionnement. Le problème est que votre image sera probablement pas lisible. En activant la fonction, vous pourrez permettre à l’internaute de cliquer sur l’image pour qu’elle s’ouvre dans une visionneuse pour que l’image apparaisse en pleine écran. Si vous activez la fonction, vous vous apercevrez que la fonction lien disparaît. En effet, vous ne pouvez insérer des liens sur une même image.

Pour ma part, j’utilise souvent cette fonction comme vous avez pu le remarquer dans les articles précédents.

Fond

Le fond n’a aucune utilité pour ce module.

Étiquette Admin

Comme je vous le disiez dans l’article consacré au module texte (insérer un lien), l’étiquette est pratique quand vous utilisez la vue bloc  car vous ne voyez pas le contenu du module.

Menu Style

Alignement

La fonction alignement du module Image de Divi vous permet de positionner votre image à droite, au centre ou à gauche souvent de la page. Si vous n’avez pas réduit la taille de l’image grâce à la fonction suivante vous ne verrez rien. Par contre, je vous conseille d’activer la fonction toujours centrer l’image sur mobile.

Dimensionnement

Deux réglages sont à votre disposition dans votre fonction Dimensionnement du module Image de Divi.

Le premier vous permet de mettre l’image en pleine largeur afin de couvrir toute la largeur de la page. Si vous l’utilisez, vous n’aurez pas accès au second.

Avec le second, vous pourrez réduire la taille de vos images afin de mieux les intégrer dans vos articles ou avec vos autres modules sur votre page. Vous pourrez réduire de 0 à 100 %. Si vous réduisez à 0%, cela veut dire que l’image disparaît. Inversement si vous choisissez 100%, l’image apparaîtra dans sa taille initiale. Attention, ce réglage ne permet en aucun cas d’agrandir une image. Il permettra tout au plus d’afficher l’image à sa taille réelle.

Espacement

La fonction espacement du module Image de Divi fonctionne de la même manière que celle du module texte. Vous pouvez également retrouver l’article que j’ai rédigé sur le sujet. Pour rappel, la marge permet d’ajouter une marge à l’extérieur du module, alors que la marge interne, permet d’ajouter une marge à l’intérieur du module.

Le fonction espacement vous aidera également pour déplacer votre image sur votre article ou page.

Bordure

La fonction bordure du module Image de Divi, vous permet non seulement d’ajouter une bordure qui aura une épaisseur et des couleurs à choisir, mais vous permettra également d’arrondir les coins du module. (cf module texte)

Box Shadow

Avec la fonction Box Shadow du module Image de Divi, vous pourrez ajouter une ombre et la personnaliser à votre image. C’est très pratique pour mettre en relief votre image. (cf module texte)

Filters

La fonction Filters du module Image de Divi est très utile car il vous permettra de retoucher dans une certaine mesure votre image grâce à un certain nombre de réglages comme la teinte, la saturation, Brightness (le brillant), Contrast (le contraste), Invert (permet l’inversion des couleurs comme noir et blanc), Sepia, Opacity (réglage de l’opacité) et Blur (gestion du flou).
Vous pouvez également utiliser des réglages prédéfinis dans le Blend Mode.

Transform

La fonction Transform du module Image de Divi, est, comme je vous le disais la semaine dernière, une nouvelle fonction intégrée par Elegant Themes en 2019.

Elle vous permettra de transformer la forme de votre image ou de la déplacer sans modifier les espacements. Vous avez 5  modes :

  •  il permet d’agrandir votre Image
  •  vous pouvez déplacer votre image
  •  faire pivoter votre image grâce à ce réglage
  •  étirer les coins de votre image
  •  j’avoue que pour l’instant, je n’ai pas encore découvert à quoi cela peut servir….

Animation

Cette fonction Animation du module Image de Divi, vous permet de faire apparaître vos modules de façon ludique type animations Powerpoint. Mais attention à ne pas trop en abuser. Je vous verrez une démonstration dans la vidéo, ce sera plus explicite.

    Menu Avancé

    Concernant les fonctions du menu Avancé, vous retrouverez les mêmes que pour le module Texte de Divi à l’exception de la fonction Attributs

    Attributs

    C’est une fonction que vous devez utiliser afin d’améliorer la visibilité de votre site mais aussi pour aider les personnes malvoyantes à mieux comprendre les images.

    En effet, les moteurs de recherche ne savent pas (encore) lire des photos. Donc pour cela, il faut ajouter non seulement des titres mais aussi des descriptions pour qu’ils comprennent.

    Ensuite pour les personnes malvoyantes, un descriptif sera d’une grande aide pour les outils qui vocalisent les textes.

    Dans le réglage texte alternatif, vous devez décrire l’image. Par exemple, s’il s’agit d’un voilier sur l’océan, vous pouvez mettre : “voilier avec ses voiles déployées qui avance sur la mer avec un soleil éclatant”
    Dans le réglage texte du titre, vous devez mettre le titre que vous lui donnez. Pour le même voilier, vous pouvez mettre voilier sur l’océan.

    Rappel des autres fonctions

    Pour rappel ID et classes CSS, vous permet de nommer un module et d’y faire référence dans un lien pour qu’en cliquant dessus l’internaute puisse directement voir le module (méthode de l’ancre).

    Personnaliser CSS est une fonction pour les pros du CSS qui sauront eux à quoi cela sert. Si vous êtes novice, ne l’utilisez pas pour éviter de faire des bêtises sauf si vous suivez un tutoriel qui vous demande de l’utiliser.

    Pour la visibilité, vous pouvez choisir d’exclure certaines images de certains formats d’écrans (Ordinateur, Tablette ou Smarphone) en fonction de vos besoins.

    Enfin la fonction transitions, vous permet de régler non seulement la durée mais également de décaler l’apparition d’une image.

    Conclusion

    Le module image de Divi est très utilisé. C’est le plus utilisé après le module texte. Normal, d’abord vous taper votre message et après vous l’illustrer. Pour pouvoir pleinement travailler vos images, je vous conseille de vous mettre en affichage ordinateur et ensuite de tester les différents réglages. Vous verrez tout de suite ce qui fonctionne et ce qui ne fonctionne pas.
    Le module image étant très visuel par nature, vous pourrez donner libre court à votre imagination.