Want to make creations as awesome as this one?

Eléments de média Chapitre 1

Transcript

ÉLÉMENTS DE MÉDIA

CHAPITRE 1 : IMAGES

MODULE 5

Le module Image

Divi facilite l'ajout d'images n'importe où sur la page. Toutes les images prennent en charge lazy-lady, et viennent avec 5 styles d'animation différents qui rendent la navigation de votre site Web amusant et engageant.

Découvrez la démo en ligne: www.elegantthemes.com/preview/Divi/image/

Comment ajouter, configurer et personnaliser le module d'image Divi

Divi facilite l'ajout d'images n'importe où sur la page.

Toutes les images prennent en charge le téléchargement paresseux, et sont livrées avec 4 styles d'animation différents qui rendent la navigation sur votre site Web amusante et engageante.

Les modules image peuvent être placés dans n'importe quelle colonne que vous créez, et leur taille sera ajustée pour s'adapter.


Comment ajouter un module d'image à votre page

Avant de pouvoir ajouter un module image à votre page, vous devez d'abord sauter dans le Divi Builder.


Une fois que le thème Divi a été installé sur votre site Web, vous remarquerez un bouton Utiliser Divi Builder au-dessus de l'éditeur de messages chaque fois que vous construisez une nouvelle page.

Cliquez sur ce bouton pour activer le Divi Builder, vous donnant accès à tous les modules du Divi Builder.


Ensuite, cliquez sur le bouton Utiliser Visual Builder pour lancer le constructeur en mode Visual. Vous pouvez également cliquer sur le bouton Utiliser Visual Builder lorsque vous naviguez sur votre site Web si vous êtes connecté à votre tableau de bord WordPress.


Une fois que vous êtes entré dans le Visual Builder, vous pouvez cliquer sur le bouton gris plus pour ajouter un nouveau module à votre page. Les nouveaux modules ne peuvent être ajoutés qu'à l'intérieur des rangées.


Si vous commencez une nouvelle page, n'oubliez pas d'ajouter une ligne à votre page. Nous avons quelques bons tutoriels sur la façon d'utiliser les éléments de ligne et de section de Divi.



Localisez le module image dans la liste des modules et cliquez dessus pour l'ajouter à votre page. La liste des modules est interrogeable, ce qui signifie que vous pouvez également taper le mot "image" puis cliquer sur "entrer" pour trouver et ajouter automatiquement le module image!

Une fois le module ajouté, vous serez accueilli avec la liste d'options du module. Ces options sont divisées en trois groupes principaux: Contenu, Design et Avancé.


Exemple d'utilisation : Ajouter des images superposées pour illustrer les services sur une page de services

Il existe de nombreuses façons d'utiliser le module image. Pour cet exemple, je vais vous montrer comment ajouter des images à une page de services pour un site Web de petite entreprise.


C'est ici que je vais ajouter les images. Chaque cercle rouge représente une image.

Puisque l'ajout d'une image à une page est un processus assez simple et direct, je vais ajouter un peu de style personnalisé pour positionner mes images de façon à ce qu'elles se chevauchent, créant ainsi un effet d'empilement.


Commençons par le début

Utilisez le visual builder pour ajouter une section standard avec une disposition 1/4 1/4 1/4 1/2. Ajoutez ensuite un élément de texte dans la 1/2 colonne droite de votre rangée.

Saisissez un en-tête et une description du service.

Ajoutez ensuite un Module Image à l'extrême gauche de la colonne 1/4.

Pour plus d'informations sur les éléments globaux, assurez-vous de lire notre tutoriel sur les modules globaux.

Nous avons également un excellent tutoriel qui explique comment utiliser la fonction de synchronisation sélective.

Une fois que vous avez rempli toutes les informations nécessaires, cliquez sur "Sauvegarder" pour terminer le processus et ajouter votre nouvel élément à la bibliothèque.


Commençons par le début

Mettez à jour les paramètres du module Image comme suit :
Options de contenu
URL de l'image:[Entrer l'URL ou télécharger l'image avec les dimensions 500×625]) Options de conception
Marge personnalisée: -60px droite Options avancées
Animation: De gauche à droite

Commençons par le début

Ajoutez un autre module Image dans la deuxième colonne 1/4 (ou colonne du milieu) et mettez à jour les paramètres image comme suit:
Options de contenu

URL de l'image:[Entrer l'URL ou télécharger l'image avec les dimensions 500×625]) Options de conception
Marge personnalisée: 100px en haut, -60px gauche Options avancées
Animation: De droite à gauche

Voilà pour la première partie. Maintenant pour la prochaine section de service, nous pouvons dupliquer la section que nous venons de créer pour la première section de service. Une fois la section dupliquée, changez la structure des colonnes de la ligne en une disposition 1/2 1/4 1/4 colonne (l'inverse de la précédente).



Ensuite, faites glisser l'élément de texte avec l'en-tête et la description du service dans la 1/2 colonne à l'extrême gauche. Assurez-vous de faire glisser les deux modules image pour remplir chaque colonne 1/4 (maintenant à droite).

Puisque les modules d'images sont des doublons, nous devons télécharger les nouvelles images pour cette section de service particulière. De plus, les modules ont toujours les paramètres de marge personnalisés comme les deux premiers modules image créés. Changeons tout ça.

En commençant par le module Image dans la colonne 1/4 à l'extrême droite, mettez à jour les réglages d'image suivants :


Options de contenu

URL de l'image:[Entrer l'URL ou télécharger l'image avec les dimensions 500×625])

Options de conception

Marge personnalisée: -60px gauche (uniquement)

Onglet Avancé

Animation: De droite à gauche

Enfin, mettez à jour les paramètres d'image pour le module d'image 1/4 colonne du milieu avec ce qui suit:

Options de contenu

URL de l'image:[Entrer l'URL ou télécharger l'image avec les dimensions 500×625])

Options de conception

Marge sur mesure: 100px en haut, -60px à droite

Onglet Avancé

Animation: De gauche à droite

Sauvegarder les paramètres


Maintenant regardez la page !



Options du contenu de l'image

Dans l'onglet Contenu, vous trouverez tous les éléments de contenu du module, tels que le texte, les images et les icônes.


Tout ce qui contrôle ce qui apparaît dans votre module sera toujours trouvé dans cet onglet.

Options du contenu de l'image

Placez ici une adresse URL d'image valide, ou choisissez/transférez une image via la médiathèque WordPress.

URL de l'image

Ouvrir dans Lightbox

URL du lien

URL ouverture

Étiquette Admin

Ici, vous pouvez choisir si votre image s'ouvrira ou non dans une Lightbox lorsque vous cliquez dessus.

Placez une URL Web valide dans ce champ pour transformer votre image en lien. Laisser ce champ vide laissera simplement votre image comme élément statique.

Ici, vous pouvez choisir si votre lien s'ouvre ou non dans une nouvelle fenêtre.

Ceci changera l'étiquette du module dans le constructeur pour une identification facile.

Les images apparaîtront toujours à gauche justifiées dans leurs colonnes et couvriront toute la largeur de votre colonne.


Cependant, votre image ne sera ja- mais plus grande que sa taille de téléchargement originale. La hauteur de l'image est déterminée par le rapport d'aspect de votre image originale.


Si cette option est activée, votre image "zoomera" sur sa taille maximale lorsque vous cliquez dans une fenêtre modale. C'est une excellente fonction pour les portefeuilles.


Lorsque vous utilisez la vue WireFrame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc module de l'interface Divi Builder.


Options de conception d'image

Dans l'onglet Design, vous trouverez toutes les options de style du module, telles que les polices de caractères, les couleurs, le dimensionnement et l'espacement.

C'est l'onglet que vous utiliserez pour modifier l'apparence de votre module.


Chaque module Divi dispose d'une longue liste de paramètres de conception que vous pouvez utiliser pour modifier pratiquement n'importe quoi.


Options de conception d'image

Si cette option est activée, une couleur et une icône de superposition seront affichées lorsqu'un visiteur survolera l'image.

Superposition d'image

Couleur de l'icône de superposition

Couleur de superposition de survol

Icône de survol Picker

Supprimer l'espace sous l'image

Ici, vous pouvez définir une couleur personnalisée pour l'icône de superposition.

Ici, vous pouvez définir une couleur personnalisée pour la superposition.

Ici, vous pouvez définir une icône personnalisée pour la superposition.

Cette option n'affecte les images que lorsqu'elles sont le dernier module d'une colonne.

Lorsqu'elle est activée, la distance entre le bas de l'image et la section suivante est supprimée, ce qui permet à l'image de délimiter le haut de la section suivante de la page.


Options de conception d'image

Ici, vous choisissez la direction dans laquelle votre image flotte à l'intérieur de la colonne. Vous pouvez faire flotter l'image à gauche, à droite ou au centre.

Alignement de l'image

Toujours centrer l'image sur le mobile

Utiliser la bordure

Couleur de la bordure

Largeur de bordure

Souvent, les petites images sont souvent plus agréables à regarder sur les appareils mobi- les lorsqu'elles sont centrées.

Activer cette option placera une bordure autour de votre module. Cette bordure peut être personnalisée à l'aide des paramètres conditionnels suivants.

Cette option affecte la couleur de votre bordure. Sélectionnez une couleur personnalisée dans le sélecteur de couleurs pour l'appliquer à votre bordure.

Par défaut, les bordures ont une largeur de 1 pixel.

Au fur et à mesure que les colonnes se décomposent, les images qui étaient alignées vers la gauche ou la droite dans des colonnes plus petites deviennent orphelines lorsque les colonnes se décomposent et deviennent 100% de largeur.


Activer cette colonne en forçant les images à s'aligner au centre de la colonne sur mobile sans affecter l'alignement des images sur les ordinateurs de bureau.


Vous pouvez augmenter cette valeur en faisant glisser le curseur de plage ou en saisissant une valeur personnalisée dans le champ de saisie à droite du curseur.

Unités de mesure personnalisées des mesures prises en charge, ce qui signifie que vous pouvez changer l'unité par défaut de "px" à quelque chose d'autre, comme em, vh, vw, etc.


Options de conception d'image

Les bordures prennent en charge huit styles différents, y compris: solide, pointillé, pointillé, pointillé, double, rainuré, faîtage, encoches et début.

Style de bordure

Largeur maximale de l'image

Force Largeur pleine largeur

Marge personnalisée

Par défaut, la largeur maximale de l'image est réglée sur 100%.

Par défaut, les images sont affichées à leur largeur native.

La marge est l'espace ajouté en dehors de votre module, entre le module et l'élément sui- vant en haut, en bas ou à gauche et à droite de celui-ci.

Sélectionnez le style désiré dans le menu déroulant pour l'appliquer à votre bordure.


Cela signifie que l'image sera affichée à sa largeur naturelle sauf si la largeur de l'image dépasse la largeur de la colonne parent, auquel cas l'image sera limitée à 100% de la largeur de la colonne.

Si vous souhaitez restreindre davantage la largeur maximale de l'image, vous pouvez le faire en saisissant ici la valeur de largeur maximale souhaitée.


Par exemple, une valeur de 50% limite- rait la largeur de l'image à 50% de la largeur de la colonne parent.


Cependant, vous pouvez choisir de forcer l'image pour étendre la largeur totale de la colonne parent en activant cette option.


Vous pouvez ajouter des valeurs de marge personnalisées à n'importe lequel des quatre côtés du module.

Pour supprimer une marge personnalisée, supprimez la valeur ajoutée du champ de saisie.


Par défaut, ces valeurs sont mesurées en pixels, mais vous pouvez saisir des unités de mesure personnalisées dans les champs de saisie.


Options avancées d'image

Dans l'onglet Avancé, vous trouverez des options que les concepteurs Web plus expérimentés peuvent trouver utiles, comme les attributs CSS et HTML personnalisés.

Ici, vous pouvez appliquer des CSS personnalisés à n'importe lequel des nombreux éléments du module.


Vous pouvez également appliquer des classes CSS et des identifiants personnalisés au module, qui peuvent être utilisés pour personnaliser le module dans le fichier style.css de votre thème enfant.


CSS ID

Classe CSS

CSS personnalisé

Entrez un ID CSS optionnel à utiliser pour ce module. Un ID peut être utilisé pour créer un style CSS personnalisé ou pour créer des liens vers des sections particulières de votre page.

Entrez les classes CSS facultatives à utiliser pour ce module. Une classe CSS peut être utilisée pour créer un style CSS personnalisé.

Vous pouvez ajouter plusieurs classes, séparées par un espace. Ces classes peuvent être utilisées dans votre Thème Divi Child ou dans le CSS personnalisé que vous ajoutez à votre page ou votre site Web en utilisant les Options du Thème Divi ou les Paramètres de page du Générateur de Divi.

Le CSS personnalisé peut également être appliqué au module et à n'importe quel élément interne du module. Dans la section Personnaliser CSS, vous trouverez un champ texte dans lequel vous pouvez ajouter des CSS personnalisés directement à chaque élément.


Les entrées CSS dans ces paramètres sont déjà emballées dans des balises de style, vous n'avez donc qu'à entrer des règles CSS séparées par des point-virgules.


Animation

Visibilité

Texte de l'image Alt Texte

Utilisez ce menu déroulant pour spécifier l'animation de chargement paresseux de votre image.

Vous pouvez choisir de faire défiler l'image à partir de la droite, de la gauche, du bas ou du haut.

Cette option vous permet de contrôler sur quels périphériques votre module apparaît. Vous pouvez choisir de désactiver votre module sur des tablettes, des téléphones intelligents ou des ordinateurs de bureau individuellement.

C'est utile si vous voulez utiliser différents modules sur différents appareils, ou si vous voulez simplifier le design mobile en éliminant certains éléments de la page.

Le texte alternatif fournit toutes les informations nécessaires si l'image ne se charge pas, ne s'affiche pas correctement ou dans toute autre situation où un utilisateur ne peut pas voir l'image.

Il permet également la lecture et la reconnaissance de l'image par les moteurs de recherche.


MERCI