Les galeries d’images en pleine largeur semblent toujours être parfaite sur les sites web. Une galerie pleine largeur doit s’étendre sur toute la largeur de la fenêtre du navigateur. Utiliser tout l’espace d’une fenêtre de navigateur permet aux images de conserver une taille plus grande, ce qui est excellent pour l’expérience utilisateur. Et le disposition de la grille offre un design esthétique qui organise les images en colonnes qui s’ajusteront parfaitement à toutes les largeurs de navigateur.

Dans ce tutoriel, je vais vous montrer comment créer une galerie d’images pleine largeur avec le module Divi Gallery. Vous serez peut-être surpris de la facilité qu’on peut avoir avec Divi. Je vais également mentionner quelques façons d’utiliser l’espacement personnalisé pour vous donner plus de contrôle sur votre galerie pleine largeur sur mobile.

Commençons.

L’avant et l’après.

Voici le module Divi Gallery par défaut avec 12 images.

Voici un exemple de galerie d’images pleine largeur que vous pouvez facilement créer.

Préparer vos éléments de conception.

Pour ce tutoriel, vous aurez besoin du thème Divi installé et actif. Vous aurez également besoin de 12 images ajoutées à votre médiathèque pour pouvoir construire la galerie d’images. Pour un module de galerie Divi utilisant une disposition en grille, la taille de vos images doit être d’environ 1500 pixels sur 800 pixels si vous envisagez de l’ouvrir en mode lightbox, de manière à ce qu’il remplisse bien l’écran de la plupart des ordinateurs de bureau.

Pour ce tutoriel, j’utiliserai des images de la mise en page prédéfinie de la page Restaurant Gallery, disponible gratuitement à partir de Divi Builder.

 

Implémentation du module Fullwidth Divi Gallery.

Mise en place d’une nouvelle page.

Pour commencer, créez une nouvelle page, donnez un titre à votre page et déployez Divi Builder. Sélectionnez l’option “Build from Scratch”, puis publiez votre page. Puis cliquez pour construire sur le front-end.

 

Création de la galerie d’images

Une fois Divi Builder déployé, créez une nouvelle section avec une ligne à une colonne et ajoutez un module Galerie Divi.

Divi remplira le module de la galerie avec des images de votre médiathèque dans une grille comme celle-ci :

Dans les paramètres du module de la galerie Divi, cliquez sur l’icône grise plus pour ajouter 12 images à la galerie.

Puis mettez à jour les paramètres du module Divi Gallery comme suit :


Nombre d’images : 12
Afficher le titre et la légende : NON
Montrer la pagination : NON

Création d’une mise en page pleine largeur pour la galerie d’images

Pour créer la mise en page pleine largeur de la galerie d’images, sauvegardons nos paramètres de galerie pour le moment et ouvrons les paramètres de ligne. Sous l’onglet Conception, mettez à jour les éléments suivants :

Rendre cette ligne pleine largeur : OUI
Largeur de gouttière : 1

C’est le moyen le plus simple d’obtenir une galerie d’images pleine largeur opérationnelle. Si vous choisissez «Rendre cette ligne pleine largeur» et que vous définissez la largeur de gouttière sur «1», la galerie couvrira toute la largeur de la section (sur toutes les tailles de navigateur) et réduira l’espacement entre les images.

Et la galerie continuera également à couvrir toute la largeur de la page sur mobile.

Personnalisation des options de superposition de survol d’image.

Pour compléter la conception de votre galerie d’images pleine largeur, nous vous conseillons de personnaliser les options de superposition de survol d’images intégrées aux paramètres du module Divi Gallery. Vous pouvez modifier l’icône de zoom, la couleur de l’icône et la couleur de superposition. Pour ce faire, ouvrez les paramètres de la Galerie et mettez à jour les éléments suivants :

Couleur de l’icône de zoom : #ffffff
Survol de la couleur de recouvrement : # 333d48
Survolez l’icône : voir la capture d’écran

Voyons maintenant la conception finale.

Plus d’options d’espacement de la galerie d’images pleine largeur.

Création d’une disposition en largeur totale avec un espacement de largeur de gouttière.

Le moyen le plus simple de personnaliser l’espacement entre vos images dans le module Divi Gallery consiste à régler la largeur de la gouttière de la rangée parent. La largeur de gouttière fait référence à l’espacement entre les colonnes. Avec tout élément Divi Row, les valeurs optionnelles pour la largeur de gouttière vont de 1 à 4.

1 représente une marge nulle entre les colonnes.
2 représente une marge droite de 3% entre les colonnes.
3 représente une marge droite de 5,5% entre les colonnes.
4 représente une marge droite de 8% entre les colonnes.

Puisque nous utilisons le module de galerie Divi, la largeur de gouttière fait également référence à l’espacement entre les éléments de la galerie. Ainsi, l’ajout de largeur de gouttière à la rangée ajustera l’espacement des éléments / images de la galerie dans le module Galerie.

Utilisation de la largeur personnalisée pour un meilleur contrôle de l’espacement sur le mobile.

 

Si l’option «Rendre cette ligne pleine largeur» est définie sur OUI et que la largeur de la gouttière est égale ou supérieure à 2 (tout sauf 1), Divi ajustera automatiquement la largeur de la ligne pour fournir un espacement extérieur supplémentaire. Cela est nécessaire car la largeur de la gouttière s’applique uniquement à l’espacement entre les colonnes / éléments de la galerie et non à la ligne elle-même. Toutefois, cela peut ajouter un espacement de marge supérieur à celui souhaité sur mobile. Par exemple, si vous avez l’option «Rendre cette ligne pleine largeur» active avec une largeur de 2 gouttières, la largeur réelle de votre ligne sera de 89% sur mobile (et non de 100%). Par conséquent, si vous souhaitez que la ligne couvre 100% sur mobile, vous pouvez utiliser l’option Largeur personnalisée. En donnant à la ligne une largeur personnalisée de 100%, la largeur de la ligne restera 100% quelle que soit la valeur de la largeur de la gouttière. Maintenant, vous pouvez simplement ajouter l’espacement extérieur de la ligne en utilisant un remplissage de ligne. Cela vous donnera plus de contrôle sur l’espacement extérieur sur le bureau, la tablette et le smartphone.

 

Voici un exemple de la façon dont cela fonctionnerait. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Largeur personnalisée : 100%
Largeur de gouttière : 2

Notez qu’il n’y a pas de marge à droite ou à gauche de la galerie.

Ajoutez maintenant le remplissage personnalisé suivant à la ligne :

Rembourrage personnalisé (bureau): 5% en haut, 5% en bas, 5% à gauche, 5% à droite.
Rembourrage personnalisé (smartphone) 5% en haut, 5% en bas, 0% à gauche, 0% à droite.

Les 5% de remplissage sur le bureau (et la tablette) fourniront l’espacement extérieur nécessaire pour faire correspondre l’espace entre les éléments de la galerie.

Et en supprimant les rembourrages personnalisés à droite et à gauche du smartphone, les images couvrent toute la largeur du navigateur, ce qui leur donne plus de visibilité.

Ajout d’espacement personnalisé aux éléments de la galerie sans largeur de gouttière.

 

Si vous souhaitez maîtriser davantage l’espacement de votre module Divi Gallery, vous pouvez en fait ajouter votre propre espacement personnalisé entre les éléments de la galerie au lieu d’utiliser Largeur de gouttière. Pour ce faire, vous devez définir la largeur de gouttière sur 1, puis ajouter un espacement entre les éléments de votre galerie dans les paramètres du module Galerie de Divi. Pour plus d’informations, consultez le didacticiel complet sur l’utilisation du module Divi Gallery pour créer une galerie d’images avec un espacement personnalisé.

Dernières pensées

 

Espérons que ce tutoriel vous aidera à comprendre comment utiliser le module Divi Gallery pour créer de superbes galeries d’images en pleine largeur sur votre prochain projet. Et n’oubliez pas d’explorer toutes les options de conception intégrées de Divi et les effets de survol pour que vos galeries d’images se démarquent encore plus.

À bientôt.

Traduit du tuto d’Elegant Theme (voir le tuto d’origine)

Share This