Comment créer un collage d'images interactif à l'aide des options de position de Divi
Publié: 2020-01-29Les nouvelles options de position de Divi ouvrent la porte à la création de mises en page de collage d'images uniques à l'aide de la propriété de position absolue. Cela vous permet de faire des placements plus précis pour chaque élément de votre conception. Et une fois que vous avez combiné cela avec les innombrables combinaisons de paramètres de conception au sein de Divi, vous pouvez concevoir des collages d'images assez étonnants.
Dans ce tutoriel, je vais vous montrer comment utiliser les options de position intégrées de Divi pour créer un magnifique collage d'images interactif pour votre site Web Divi en quelques minutes.
Commençons!
Aperçu
Voici un aperçu rapide de la mise en page interactive du collage d'images que nous allons construire dans ce didacticiel.
Téléchargez la mise en page GRATUITEMENT
Pour mettre la main sur la mise en page du collage d'images de ce tutoriel, vous devrez d'abord la 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 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.
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 sur votre page, extrayez simplement le fichier zip et faites glisser le fichier JSON 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 :
- Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
- Choisissez l'option « Construire à partir de zéro ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Création du collage d'images interactif avec les options de position de Divi
Optimiser la ligne et la colonne
Pour commencer, créez une ligne à une colonne.
Paramètres de ligne
Ensuite, nous devons mettre à jour la ligne afin de ne pas avoir d'espace supplémentaire entre les modules (via la largeur de la gouttière), nous allons donc définir la largeur de la gouttière sur 1. Nous devons également nous assurer que la ligne couvre toute la largeur de la fenêtre du navigateur. nous pouvons donc profiter des unités de longueur vw pour positionner nos images (l'unité de longueur vw (viewport width) est liée à la largeur de la fenêtre du navigateur). Avec la largeur définie sur 100 %, nous pouvons utiliser les unités de longueur vw pour positionner nos images dans la ligne/colonne afin que la position reste intacte sur toutes les largeurs de navigateur pour une conception réactive transparente. Et pour masquer tout débordement d'image en dehors de la ligne, nous devons définir le débordement sur masqué.
Pour ce faire, optimisez les paramètres de ligne comme suit :
Réglage de la hauteur de la colonne
Par défaut, la hauteur de la colonne est déterminée par la hauteur du contenu (ou des modules Divi) qu'elle contient. Les modules Divi (comme tous les divs en HTML) auront une position statique par défaut, ce qui signifie qu'ils ajouteront un espace/une hauteur réelle à sa colonne parente car elle est positionnée dans le flux normal de la page. Cependant, les modules Divi qui ont une position absolue, sortent du flux normal et ne créeront pas d'espace/hauteur réel pour la colonne. Pour cette raison, nous devons ajouter une hauteur spécifiée pour la colonne afin que nous puissions ensuite positionner les images dans un espace prédéterminé.
Pour ce faire, ouvrez les paramètres de ligne et mettez à jour les paramètres de colonne en ajoutant le CSS personnalisé suivant à l'élément principal.
height: 40vw;
Sous l'onglet téléphone, restaurez la hauteur à son état par défaut, car nous modifions également les images en position statique sur le téléphone. Ajoutez le CSS personnalisé suivant à l'onglet du téléphone :
height: auto !important;
Ajout du texte du titre
Avec la hauteur de colonne définie, nous pouvons commencer à ajouter nos éléments positionnés de manière absolue à la colonne. Commençons par ajouter un module de texte pour le titre de notre mise en page de collage d'images.
Contenu du module de texte
Mettez ensuite à jour le texte avec le contenu suivant :
<h2>Recent Work</h2>
Paramètres du module de texte
Mettez ensuite à jour les paramètres du module de texte comme suit :
- Police du titre 2 : Limelight
- Titre 2 Alignement du texte : au centre
- Titre 2 Couleur du texte : #24005b
- Titre 2 Taille du texte : 5vw (ordinateur de bureau et tablette), 50px (téléphone)
- Largeur : 100 %
- Largeur maximale : 35 vw (ordinateur de bureau et tablette), 100 % (téléphone)
- Position : Absolu (ordinateur de bureau), Par défaut (téléphone)
- Décalage horizontal (bureau): 35vw
Création et positionnement d'images
Maintenant que le titre est en place, créons la première image de notre collage d'images interactif. L'idée est de créer le premier avec toutes les optimisations en place afin que nous puissions le dupliquer pour faciliter la création et le positionnement du reste des images pour le collage.
Optimisation de la première image avec les effets de survol, la visionneuse et le positionnement absolu.
Tout d'abord, ajoutez un module image sous le module texte.
Ensuite, téléchargez une image dans le module et choisissez l'option pour ouvrir l'image dans une lightbox. Maintenant, l'image s'affichera dans une lightbox au clic.
Mettre l'image à l'échelle au survol
En plus de l'interaction avec la visionneuse, ajoutez un effet de survol qui agrandit un peu l'image. Pour ce faire, mettez à jour l'option de transformation suivante :
- Échelle de transformation (survol): 115%
Positionnement absolu avec priorité à l'index Z au survol
Pour positionner notre image, nous utiliserons une position absolue avec des unités de longueur vw. Mettez à jour les options de position comme suit :
Sur ordinateur de bureau (et tablette)
- Position : absolue
- Emplacement : en haut à gauche
- Décalage vertical : 5vw
- Décalage horizontal : -2vw
Au téléphone
- Poste : Par défaut
En vol stationnaire
- Indice Z : 2
Conception d'image et paramètres réactifs
Ensuite, mettez à jour les éléments suivants :
- Alignement de l'image : à gauche (bureau), au centre (téléphone)
- Largeur : 75 % (téléphone)
- Largeur maximale : 20 vw (ordinateur de bureau et tablette), 100 % (téléphone)
- Marge (téléphone): 30px bas
- Box Shadow : voir capture d'écran
- Saturation : 0 % (ordinateur de bureau), 100 % (survol)
Utilisation de la première image comme modèle pour créer et positionner rapidement les autres images
Une fois la première image terminée, il est vraiment facile de créer de nouvelles images pour construire le collage d'images interactif. C'est également un outil de conception puissant car vous pourrez faire glisser les images en place et ajuster la taille tout en visualisant la conception en temps réel.
Voici le processus…
- Dupliquez l'image en cliquant sur l'icône dupliquer. L'image dupliquée sera positionnée absolument au même endroit directement au-dessus de l'image que vous dupliquez.
- Faites glisser l'image en place. Étant donné que l'image en double hérite de l'unité de longueur vw de l'image précédente, vous pouvez utiliser l'icône de déplacement pour positionner l'image exactement où vous le souhaitez dans la ligne.
- Mettez à jour l'image avec une nouvelle.
- Ajustez la taille de l'image à l'aide des options de taille intégrées.
Voici une illustration de ce à quoi cela ressemblerait lors de la création de la deuxième image.
La partie intéressante de ce processus est que la position (décalages verticaux et horizontaux) sera déterminée chaque fois que vous faites glisser l'image en place. Pas besoin de mettre à jour les positions de décalage manuellement dans les paramètres.
Mais, pour que vous puissiez voir les décalages que j'ai utilisés pour cet exemple, je les inclurai pour chaque image ci-dessous avec les ajustements de taille.
Mises à jour de l'image #2
- Décalage vertical : 10,06 vw
- Décalage horizontal : 16,51 vw
- Largeur maximale : 18 vw
Image #3 Mises à jour
- Décalage vertical : 24.25vw
- Décalage horizontal : 7.13vw
- Largeur maximale : 20 vw
Image #4 Mises à jour
- Décalage vertical : 17.69vw
- Décalage horizontal : 31.91vw
- Largeur maximale : 18 vw
Image #5 Mises à jour
- Décalage vertical : 12vw
- Décalage horizontal : 46,82vw
- Largeur maximale : 15 vw
Image #6 Mises à jour
- Décalage vertical : 19.13vw
- Décalage horizontal : 58,84 vw
- Largeur maximale : 12 vw
Mises à jour de l'image #7
- Décalage vertical : 28.24vw
- Décalage horizontal : 54,2 vw
- Largeur maximale : 10 vw
Mises à jour de l'image #8
- Décalage vertical : 32,5 vw
- Décalage horizontal : 74.04vw
- Largeur maximale : 8 vw
Mises à jour de l'image #9
- Décalage vertical : 1.01vw
- Décalage horizontal : 75.5vw
- Largeur: 27vw
- Largeur maximale: 27vw
Ajouter une image d'arrière-plan
Pour une touche finale, ajoutez une image de fond à la section et le tour est joué !
Résultat final
Voici à quoi ressemblera la galerie d'images interactive sur ordinateur et tablette. Remarquez les effets de survol qui amènent l'image au premier plan, affichent la version en couleur de l'image et agrandissent l'image. Ensuite, vous pouvez cliquer sur l'image pour afficher l'effet lightbox.
Voici le design sur l'écran du téléphone.
Modification du point d'emplacement des images pour différentes conceptions de mise en page
Étant donné que les décalages pour chacune des images sont relatifs au point de localisation, nous pouvons modifier le point de localisation d'origine des images pour voir notre conception provenant de différentes directions en quelques secondes.
Pour ce faire, utilisez la fonction de multi-sélection de Divi pour sélectionner tous les modules d'image. Ensuite, ouvrez l'un des paramètres du module d'image pour afficher le modal des paramètres de l'élément.
Ensuite, vous pouvez modifier l'emplacement de chacun des quatre coins pour différentes structures de la mise en page.
Emplacement du coin supérieur droit
Emplacement du coin inférieur gauche
Emplacement du coin inférieur droit
Dernières pensées
Les nouvelles options de position de Divi sont à la fois puissantes et pratiques. Et comme nous l'avons vu dans ce didacticiel, ils nous fournissent de merveilleux outils de conception pour concevoir des mises en page uniques pour nos images. Espérons que ce collage d'images interactif servira de petite inspiration pour votre prochain projet.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!