Comment utiliser les options de position de Divi pour créer des ensembles d'images

Que vous recherchiez un nouveau look pour une galerie d'images ou que vous souhaitiez simplement un bel affichage pour les images de produits, ce didacticiel devrait vous aider. Normalement, lors de l'ajout d'images à un site Web Divi, nous pouvons limiter le design à une image par colonne. Bien qu'il s'agisse traditionnellement d'une conception sûre et propre, vous constaterez peut-être que le regroupement d'images dans la même colonne peut créer de superbes conceptions d'ensembles d'images qui ont fière allure dans des mises en page à une ou plusieurs colonnes.

Dans ce tutoriel, nous allons vous montrer comment utiliser les options de position intégrées de Divi pour concevoir 3 ensembles d'images créatives que vous pouvez utiliser pour votre site Web de toutes sortes de manières.

Commençons.

Aperçu

Voici un aperçu des conceptions que nous allons construire dans ce tutoriel.

Conception de paquet d'images #1

Commencer la conception de bâtiments #1

Conception de lot d'images #2

Commencer la conception de bâtiments #2

Conception de paquet d'images #3

Commencer la conception de bâtiments #3

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Concevoir l'ensemble d'images #1

Pour ce premier design de bundle d'images, nous allons positionner deux images (légèrement tournées) de chaque côté d'une image centrale.

Commencez par ajouter une ligne à une colonne à une section normale.

Ajouter l'image du milieu

A l'intérieur de la colonne, ajoutez un module image.

Ensuite, téléchargez une image dans le module.

Pour ces images, nous allons utiliser des captures d'écran du pack de mise en page Fitness Coach. Chacun d'eux doit mesurer 880px par 1200px.

Ouvrez les paramètres de l'image et mettez à jour les éléments suivants :

• Largeur : 50 %
• Alignement du module : centre

Ajoutez une ombre de boîte comme suit :

• box Shadow : voir capture d'écran
• Position verticale de l'ombre de la boîte : 0px
• Force du flou d'ombre de la boîte: 38px
• Force de propagation de l'ombre de la boîte: 5px
• Couleur de l'ombre : rgba(0,0,0,0.2)

Réglez ensuite l'index Z sur 1 pour qu'il reste au-dessus des autres images du lot.

• Indice Z : 1

Ajouter une image de gauche

Pour créer l'image de gauche dans l'ensemble, ajoutez une nouvelle image sous l'image du milieu.

Mettez à jour l'image avec une nouvelle (assurez-vous qu'elles sont toutes de la même taille pour les meilleurs résultats).

Sous l'onglet Conception, mettez à jour la largeur comme suit :

• largeur: 30%

Ajoutez ensuite l'ombre de la boîte comme suit :

• Box Shadow : voir capture d'écran
• Couleur de l'ombre : rgba(0,0,0,0.2)

Ensuite, donnez à l'image une position absolue à l'emplacement central gauche afin qu'elle soit adjacente à l'image du milieu sur le côté gauche.

• position : absolue
• Localisation : centre gauche

Pour donner à l'image une petite rotation, mettez à jour l'option de rotation de transformation comme suit :

Transformation Rotation Axe Z : -10 degrés

Ajouter la bonne image

Pour créer l'image de droite, ouvrez la zone Calques et dupliquez l'image de gauche.

Étiquetez les modules d'images (image de gauche, image de droite, etc.) afin de pouvoir les identifier facilement par la suite. Ouvrez ensuite les paramètres de l'image dupliquée et ajustez l'emplacement comme suit :

• emplacement : centre droit

Ajustez ensuite l'option de rotation de transformation comme suit :

• Transformer Rotation Index Z : 10deg

N'oubliez pas d'échanger l'image en double avec une nouvelle.

Maintenant, vérifiez le résultat jusqu'à présent.

Ajout d'un ensemble d'images à plusieurs colonnes

Étant donné que les images sont positionnées dans une colonne, vous pouvez facilement ajouter cette conception de groupe d'images à plusieurs mises en page de colonnes.

Pour ajouter le groupe d'images à plusieurs colonnes, dupliquez la ligne contenant le groupe d'images actuel.

Dans la ligne dupliquée, dupliquez la colonne pour créer une autre colonne avec le groupe d'images inclus. Cela créera les ensembles d'images dans une disposition à deux colonnes.

Pour créer une ligne de trois groupes d'images, dupliquez la ligne à deux colonnes, puis dupliquez l'une des colonnes de la ligne dupliquée. Cela vous donnera une disposition en trois colonnes.

Résultat final

Voici la conception finale du lot d'images #1.

Concevoir l'ensemble d'images #2

Cette conception suivante présente un ensemble d'images avec cinq images - une image au centre et quatre à chaque coin de la colonne.

Pour commencer, créez une nouvelle section régulière avec une ligne de colonne d'un quart et d'un demi-quart.

Ajouter une image centrale

Dans la colonne du milieu, ajoutez un module image.

Ensuite, téléchargez une image dans le module. Nous utilisons des images du pack de mise en page du magasin de meubles (chacune 800px par 1200).

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Couleur d'arrière-plan : #f7f3ec

• Largeur : 55%
• Alignement du module : centre

• Marge : 0px
• Rembourrage : 5 % en haut, 5 % en bas, 5 % à gauche, 5 % à droite

Sous l'onglet avancé, augmentez l'index Z de 1 pour vous assurer que l'image reste au-dessus des autres images dans l'espace Z.

• Indice Z : 1

Ajouter une image en haut à gauche

Pour ajouter l'image en haut à gauche, ajoutez un nouveau module d'image sous l'image centrale dans la colonne du milieu.

Téléchargez une nouvelle image dans le module.

Mettez ensuite à jour les paramètres de conception comme suit :

• Largeur : 40 %
• Marge : 0px en bas

Espacement des colonnes

La hauteur de la colonne est déterminée par la hauteur de l'image centrale et la quantité de remplissage supérieur et inférieur que nous ajoutons. Ainsi, pour donner à nos images positionnées de manière absolue l'espacement approprié, nous devons augmenter la hauteur de la colonne en augmentant le rembourrage supérieur et inférieur.

• Rembourrage (bureau) : 12% en haut, 12% en bas
• Rembourrage (tablette) : 24% en haut, 24% en bas

Ensuite, donnez à l'image en haut à gauche une position absolue comme suit :

• Position : Absolu
• Localisation : en haut à gauche

Ajouter une image en haut à droite

Maintenant que l'image en haut à gauche est en place, dupliquez l'image pour créer l'image en haut à droite.

(À ce stade, c'est une bonne idée d'ajouter des étiquettes à chacune des images pour une identification facile plus tard.)

Ouvrez l'image dupliquée (en haut à droite) et mettez à jour l'emplacement de la position absolue :

• Localisation : en haut à droite

Ajouter une image en bas à gauche

Pour créer l'image en bas à gauche, dupliquez l'image en haut à droite et mettez à jour les étiquettes si nécessaire.

Ouvrez les paramètres de l'image dupliquée (en bas à gauche) et mettez à jour l'emplacement de la position absolue :

• Emplacement : en bas à gauche

Ajouter une image en bas à droite

Pour créer l'image en bas à droite, dupliquez l'image en bas à gauche et mettez à jour l'étiquette si nécessaire. Mettez ensuite à jour l'image et attribuez-lui un nouvel emplacement :

• Localisation : en bas à droite

Ajouter un accent de conception d'ombre de boîte

Pour ajouter un joli accent de conception, nous pouvons ajouter une ombre de boîte à l'image en haut à gauche comme suit :

• Box Shadow : voir capture d'écran
• Position horizontale de l'ombre de la boîte : -170px
• Position verticale de l'ombre de la boîte : 170 px
• Couleur de l'ombre : rgba(36,57,74,0,07)

Ajoutez un accent de design box-shadow gratuit à l'image en haut à droite comme suit :

• Box Shadow : voir capture d'écran
• Position horizontale de l'ombre de la boîte : 170 px
• Position verticale de l'ombre de la boîte : 170 px
• Couleur de l'ombre : rgba(36,57,74,0,07)

Ajouter du texte à la colonne de gauche

Pour ajouter du texte à la conception, ajoutez un nouveau module de texte dans la colonne de gauche.

Teneur

Ensuite, mettez à jour le contenu avec les éléments suivants :

<h2>Image Bundle</h2>

Mise en forme du texte

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Police de la rubrique 2 : Montserrat
• Titre 2 Style de police : TT
• Titre 2 Alignement du texte : à droite
• Titre 2 Couleur du texte : #24394a
• Titre 2 Taille du texte : 34 px
• Espacement des lettres de l'en-tête 2 : 4px
• Titre 2 Hauteur de ligne : 1,3 em

Remplissage de la colonne de gauche

Pour réduire un peu le texte, ouvrez les paramètres de la colonne de gauche et mettez à jour le remplissage suivant :

• Rembourrage : 20 % restants

Ajouter du texte à la colonne de droite

Pour créer le texte de la colonne de droite, copiez le module de texte dans la colonne de gauche et collez-le dans la colonne de droite. Ensuite, ouvrez les paramètres de texte et mettez à jour les éléments suivants :

• Titre 2 Alignement du texte : à gauche

Remplissage de la colonne de droite

Tout comme nous l'avons fait pour la colonne de gauche, ajoutez le remplissage suivant à la colonne de droite (colonne 3) pour faire descendre le module de texte.

• Rembourrage : 33 % haut

Contexte de la section

Pour terminer la conception, ouvrez les paramètres de la section et ajoutez la couleur d'arrière-plan suivante :

• Couleur d'arrière-plan : #f7f3ec

Voici le résultat à ce jour.

Ajout d'un ensemble d'images à plusieurs colonnes

Pour ajouter ce groupe d'images à plusieurs colonnes, dupliquez la ligne, puis supprimez les colonnes de gauche et de droite dans la ligne dupliquée, en ne laissant que la colonne avec le groupe d'images.

À l'aide de la sélection multiple, sélectionnez l'image en haut à gauche et l'image en haut à droite. Ouvrez les paramètres et sortez la boîte-ombre.

Dupliquez ensuite la colonne une ou deux fois pour créer les colonnes multiples avec les ensembles d'images inclus.

Si vous créez une disposition à trois colonnes pour votre ensemble d'images, ouvrez les paramètres de colonne pour chaque colonne et mettez à jour le remplissage comme suit :

• rembourrage : 8% haut, 8% bas

Résultat final

Voici le résultat final.

Et le voici sur mobile.

Conception de paquet d'images #3

Pour cette dernière conception de groupe d'images, nous allons positionner 5 images côte à côte avec une subtile rotation 3D pour créer un bel affichage pour des éléments tels que des thèmes enfants ou des packs de mise en page.

Ajouter une rangée

Pour commencer, ajoutez une ligne à une colonne à une section normale.

Ajouter l'image du milieu

A l'intérieur de la ligne, ajoutez un module d'image.

Ensuite, téléchargez une image dans le module d'image. Nous utilisons les mêmes captures d'écran de 880px par 1200px du pack de mise en page Fitness Coach que nous avons utilisées pour la conception #1.

Sous l'onglet Conception, mettez à jour les options de dimensionnement comme suit :

• Largeur : 30%
• Alignement du module : centre

Ensuite, donnez à l'image une subtile ombre de boîte :

• Box Shadow : voir capture d'écran
• Position verticale de l'ombre de la boîte : -12px
• Force du flou de l'ombre de la boîte : 28px
• Couleur de l'ombre : rgba(0,0,0,0.11)

Ensuite, supprimez la marge inférieure par défaut en la définissant sur 0px.

• Marge : 0px en bas

Pour vous assurer que l'image reste au-dessus des autres images lors du chevauchement, ajustez l'index Z.

• Indice Z : 2

Ajouter une perspective de colonne

Avant d'ajouter le reste des images au groupe d'images, nous devons ajouter un CSS personnalisé à la colonne qui ajoutera de la perspective aux images lors de leur rotation à l'aide des options de transformation. Cela crée un effet 3D réaliste.

Ajouter une image au milieu à gauche

Maintenant que notre perspective est en place, nous pouvons commencer à ajouter les autres images.

Pour créer l'image du milieu à gauche, dupliquez l'image du milieu.

Mettez à jour les étiquettes d'image dans la zone Calques si nécessaire, puis mettez à jour le module d'image en double avec une nouvelle image.

Ouvrez les paramètres de l'image et mettez à jour l'emplacement de la position absolue et l'index Z comme suit :

• Emplacement : en bas à gauche
• Indice Z : 1

Ajoutez ensuite les options de transformation suivantes pour positionner et faire pivoter l'image.

• Transformer Translation Axe X : 75 %
• Transformation Rotation Axe X : 30 degrés

Ajouter une image de gauche

Pour créer l'image de gauche, dupliquez l'image du milieu à gauche que nous venons de créer.

Ouvrez les paramètres de la nouvelle image et mettez à jour la largeur :

• Largeur : 20%

Ajustez ensuite l'option de traduction de transformation comme suit :

• Transformer Traduire Axe X : 0px

Ajustez ensuite l'index Z pour que l'image reste derrière l'image du milieu à gauche.

• Indice Z : 0

Ajouter une image au milieu à droite

Ensuite, nous allons ajouter une image au milieu à droite au groupe d'images.

Pour créer l'image, ouvrez la fenêtre Calques. Ensuite, dupliquez l'image du milieu à gauche, faites glisser l'image dupliquée sous l'image de gauche, puis étiquetez-la en conséquence (c'est-à-dire « image du milieu de droite »).

Ouvrez les paramètres de l'image du milieu à droite et modifiez l'emplacement de la position absolue comme suit :

• Localisation : en bas à droite

Ajustez ensuite les options de transformation comme suit :

• Transformer traduire l'axe X : 75 %
• Transformer Rotation Axe X: -30deg

Ajouter l'image de droite

Pour créer l'image de droite (la dernière), on peut dupliquer l'image de gauche. Ensuite, faites glisser l'image en double sous l'image du milieu à droite et nommez-la « image de droite ».

Ouvrez les bons paramètres d'image et mettez à jour l'emplacement de la position absolue comme suit :

• Localisation : en bas à droite

Ensuite, ajustez la rotation de la transformation.

• Transformer Rotation Axe X: -30deg

Découvrez le résultat jusqu'à présent.

Et voici le même ensemble d'images ajouté à plusieurs colonnes.

Dernières pensées

Une fois que nous comprenons le fonctionnement de l'option de position absolue de Divi, nous pouvons l'utiliser pour créer des designs de bundles d'images assez impressionnants. La meilleure partie de ces ensembles d'images est qu'ils existent dans une seule colonne, de sorte qu'ils auront fière allure sur plusieurs colonnes et s'adapteront parfaitement sur mobile également.

J'espère que cela vous donnera de l'inspiration pour créer de superbes affichages d'images pour votre prochain projet.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!