Eléments de média Chapitre 6

ÉLÉMENTS DE MÉDIA

CHAPITRE 6 : GALERIE D'IMAGES

MODULE 5

Le module Galerie d'images

Partager une collection d'images est toujours un excellent moyen d'impliquer visuellement les utilisateurs dans votre contenu.

Le module Galerie vous permet de créer et d'organiser des galeries n'importe où sur votre site Web. Le module Divi Builder est disponible en for- mat grille et curseur et prend en charge les grandes galeries avec pagination.

Comment ajouter un module

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.

Comment ajouter un module de galerie à votre page

Localisez le module de la galerie 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 "galerie" puis cliquer sur "entrer" pour trouver et ajouter automatiquement le module de la galerie!

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 une galerie d'images pleine largeur à la photo de dé- monstration

L'ajout d'une galerie à votre page de photographie est un excellent moyen de promouvoir votre travail et d'accroître votre crédibilité auprès de vos clients.

Dans cet exemple, je vais vous montrer comment vous pouvez utiliser le module Galerie pour ajouter une galerie d'images avec une grille qui s'étend sur toute la largeur de la page.

Les images n'ont pas d'espacement entre elles ce qui leur donne une présentation pratique et esthétique.

Et n'oublions pas que chaque image ouvre une fenêtre popup pour faire défiler des versions plus grandes des images de la galerie.

En utilisant le Visual Builder, ajoutez une nouvelle section sous la section d'en-tête avec une ligne pleine largeur (1 colonne). Ajoutez ensuite le module Galerie à la ligne.

Options de contenu

Options de conception

Sauvegarder les paramètres

Galerie Images: Cliquez sur la galerie mise à jour et sélectionnez les images que vous voulez inclure dans la galerie.

Nombre d'images: 12

Titre et légende de l'émission: NON Afficher la pagination: NON

Disposition: Grille

Orientation des vignettes: Paysage Zoom Icône Couleur: #ffffff

Couleur de superposition de survol: rgba (0,0,0,0,0.48) Icône de sélection du survol: par défaut

Il ne reste plus qu' à se débarrasser de tout l'espace autour des images.

Retournez en arrière et sélectionnez les paramètres de ligne. Sous l'onglet Conception, mettez à jour ce qui suit:

Faire cette rangée Pleine largeur: OUI

Utiliser la largeur de gouttière personnalisée: OUI

Largeur de gouttière: 1

Il est important de se rappeler que la valeur numérique "1" pour la largeur de gouttière est en réalité nulle (pas de largeur du tout).

Options du contenu de la galerie

Images de la galerie

Nombre d'images

Afficher le titre et la légende

Cliquez sur le bouton Mettre à jour la galerie pour lancer la médiathèque WordPress où vous pouvez choisir les images que vous souhaitez afficher dans votre galerie.

Définissez le nombre d'images à afficher par page. Lorsque plus d'images que celles autorisées sur chaque page sont incluses dans votre galerie, la pagination apparaîtra sous les images.

Si un titre d'image ou une légende a été ajouté, ils apparaîtront sous l'image dans la galerie. Si vous souhaitez désactiver ces éléments de texte, vous pouvez le faire en utilisant cette option.

Afficher la pagination

Étiquette Admin

Options de conception de la galerie

Lorsque plus d'images que celles autorisées sur chaque page sont incluses dans votre galerie, la pagination apparaîtra sous les images. Si vous souhaitez supprimer la pagination, vous pouvez désactiver ce paramètre.

Ceci changera l'étiquette du module dans le constructeur pour une identification facile. Lorsque vous utilisez la vue WireFrame dans le Visual Builder, ces étiquettes apparaîtront dans le bloc module de l'interface Divi Builder...

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.

Disposition

Orientation des vignettes

Zoom Icône Couleur

Par défaut, les galeries sont affichées sous forme de grille d'images. Vous pouvez également choisir d'afficher votre galerie sous la forme d'un curseur image.

Vous pouvez choisir de formater vos galeries en format portrait ou paysage. Si vous changez de mode, vous devrez peut-être régénérer vos vignettes.

Lorsque vous survolez un élément dans le module galerie, une icône de superposition apparaît. Vous pouvez ajuster la couleur utilisée à partir de cette icône en utilisant le sélecteur de couleur dans ce paramètre.

Couleur de superposition de survol

Icône de survol Picker

Couleur du texte

Lors du survol d'un élément dans le module Galerie, une superposition de couleurs s'estompe au-dessus de l'image et au-dessous du titre et de l'icône du portfolio.

Par défaut, une couleur blanche semi-transparente est utilisée. Si vous souhaitez utiliser une couleur différente, vous pouvez ajuster la couleur à l'aide du sélecteur de couleurs dans ce paramètre.

Ici, vous pouvez choisir une icône personnalisée qui sera affichée lorsqu'un visiteur survolera les éléments de la galerie dans le module.

Ici, vous pouvez choisir si votre texte doit être clair ou foncé.

Si vous travaillez sur un fond foncé, votre texte doit être clair. Si votre arrière-plan est clair, votre texte doit être noir.

Police de titre

Taille de police du titre

Couleur du texte de titre

Vous pouvez changer la police de votre texte de titre en sélectionnant la police désirée dans le menu déroulant.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.

Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Ici, vous pouvez ajuster la taille de votre texte de titre.

Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé.

Si vous souhaitez changer la couleur de votre texte de titre, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

Espacement des lettres de titre

Hauteur de la ligne de titre

Police de légende

L'espacement des lettres affecte l'espace entre chaque lettre.

Si vous souhaitez augmenter l'espace entre chaque lettre de votre titre, utilisez le curseur de champ pour ajuster l'espace ou entrez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de distance pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Vous pouvez changer la police de votre texte de légende en sélectionnant la police désirée dans le menu déroulant.

Divi est livré avec des douzaines de polices de caractères géniales optimisées par Google Polices.

Par défaut, Divi utilise la police Open Sans pour tout le texte de votre page. Vous pouvez également personnaliser le style de votre texte en utilisant les options gras, italique, toutes majuscules et souligné.

Taille de police de légende

Couleur du texte de légende

Espacement des lettres de légendes

Ici, vous pouvez ajuster la taille de votre texte de légende. Vous pouvez faire glisser le curseur de plage pour augmenter ou diminuer la taille de votre texte, ou vous pouvez saisir la taille de texte désirée directement dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Par défaut, toutes les couleurs de texte dans Divi apparaîtront en blanc ou gris foncé. Si vous souhaitez changer la couleur de votre texte de légende, choisissez la couleur désirée dans le sélecteur de couleurs à l'aide de cette option.

L'espacement des lettres affecte l'espace entre chaque lettre.

Si vous souhaitez augmenter l'espace entre chaque lettre du texte de votre légende, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie situé à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

Hauteur de la ligne de légende

Utiliser la bordure

Couleur de la bordure

La hauteur de ligne affecte l'espace entre chaque ligne de votre légende Si vous souhaitez augmenter l'espace entre chaque ligne, utilisez le curseur de gamme pour ajuster l'espace ou saisissez la taille d'espacement souhaitée dans le champ de saisie à droite du curseur.

Les champs de saisie prennent en charge différentes unités de mesure, ce qui signifie que vous pouvez saisir "px" ou "em" en fonction de votre taille pour modifier son type d'unité.

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.

Largeur de bordure

Style de bordure

Par défaut, les bordures ont une largeur de 1 pixel. 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.

Les bordures prennent en charge huit styles différents, y compris: solide, pointillé, pointillé, pointillé, double, rainuré, faîtage, encoches et début. Sélectionnez le style désiré dans le menu déroulant pour l'appliquer à votre bordure.

Galerie Options avancées

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é

Visibilité

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.

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.

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.

MERCI