6 nouvelles galeries d'images construites avec des lignes imbriquées de Divi 5 (téléchargement gratuit)

Si vous avez déjà essayé de construire une galerie d'images manuellement, vous savez à quelle vitesse les choses deviennent désordonnées. Des images inégales, des lignes mal alignées et des designs insensibles transforment une galerie simple en un cauchemar de mise en page.

Même dans Divi 4, les structures d'images complexes signifiaient souvent empiler plusieurs lignes et sections de spécialité, ajustement d'espacement et heures de personnalisation manuelle. Mais avec Divi 5, vous pouvez ignorer tout cela.

Grâce à sa nouvelle fonctionnalité de lignes imbriqués, vous pouvez créer des structures de galerie d'images plus avancées. Dans cet article, nous vous montrerons comment et vous fournirons 6 conceptions de disposition de la galerie pour vous donner une longueur d'avance.

Divi 5 est prêt à être utilisé sur de nouveaux sites Web, mais attendez un peu avant de migrer les existants.

Utilisation de lignes imbriquées pour construire des dispositions complexes

Divi 4 avait déjà tout ce dont vous aviez besoin pour construire des galeries d'images, mais la création de dispositions complexes était souvent maladroite. Divi 5 présente des lignes imbriquées qui vous donnent un moyen plus rapide et plus propre de construire des dispositions de galerie avancées visuellement, sans hacks requis.

Abonnez-vous à notre chaîne YouTube

Que sont les lignes imbriquées?

Les lignes imbriquées sont une nouvelle fonction de mise en page puissante dans Divi 5 qui vous permet de placer une ligne à l'intérieur d'une autre, vous donnant plus de contrôle sur la façon dont vous structurez votre page. Cela permet de concevoir des sections complexes directement à l'intérieur du constructeur visuel sans avoir besoin d'écrire du code ou de s'appuyer sur des solutions de contournement.

La nidification d'une ligne, c'est comme ajouter un autre module. Il vous suffit de survoler l'élément où vous souhaitez placer votre ligne et cliquer sur le bouton Plus pour choisir une nouvelle ligne. Ensuite, vous pouvez choisir parmi toutes ces dispositions de lignes, qui sont parfaites pour diverses structures de galerie.

Cette rangée imbriquée se comporte exactement comme une rangée ordinaire. Vous pouvez choisir une structure de colonne, ajouter des modules et nid une autre ligne si nécessaire - grâce à sa nidabilité infinie. Vous pouvez également redimensionner les colonnes en faisant glisser, de sorte que l'ajustement des largeurs est intuitif et n'implique pas de mathématiques ou d'espacement des hacks.

Les lignes imbriquées sont également entièrement réactives par défaut. Dès le constructeur, vous pouvez modifier votre disposition sur divers écrans. Puisqu'il fait partie du cadre Divi 5, il fonctionne parfaitement avec d'autres fonctionnalités telles que les préréglages de groupe d'options et les variables de conception. Nous partagerons également des conseils pour combiner les lignes imbriquées avec les fonctionnalités avancées de Divi 5 afin d'optimiser votre flux de travail de conception de galerie.

Apprenez tout sur les rangées imbriquées de Divi 5

Qu'est-ce qui rend les lignes imbriquées différentes?

Dans Divi 4, la construction de dispositions de galerie d'images personnalisées impliquait de manière créative à l'aide de lignes, de sections de spécialité et de dispositions pour obtenir des conceptions plus avancées. Cela signifiait que ce serait difficile si vous n'aviez pas de savoir-faire du design. Et même si vous aviez l'expérience, vous étiez limité à quelques structures de mise en page.

Les rangées imbriquées offrent une approche plus intuitive. Vous n'avez plus à compter sur des lignes ou des sections spécialisées séparées. Vous pouvez facilement nicher les lignes et les mélanger et les assortir avec des modules pour créer des modèles de conception illimités. Vous voulez créer une vitrine de produit? Créez une ligne à deux colonnes, ajoutez votre image en vedette à gauche et description à droite, nichez une ligne à trois colonnes sous l'image de gauche et ajoutez des images prises en charge. Votre imagination est la limite!

6 dispositions de galerie d'images que vous pouvez construire avec des lignes imbriquées

Pour vous donner un aperçu de ce qui est possible, nous avons créé six conceptions de disposition de la galerie d'images avec des instructions sur la façon dont les lignes imbriquées ont été utilisées pour les concevoir. Passons en revue.

Disposition 1: Galerie CTA en ligne

La disposition de la grille en couches utilise une grille moderne de style magazine qui met en évidence un projet avec une combinaison de grands visuels, de plans de soutien et de texte soigneusement placé. La première section est une ligne imbriquée à 2 colonnes (imbriquée dans une autre ligne de 2 colonnes) avec deux images, et ensuite est une autre grande image. Une bannière de texte horizontale rompt la grille, ajoutant un contexte et un appel à l'action. La section inférieure apporte une autre disposition de trois colonnes pour continuer l'histoire, mais avec de la place pour une description de texte plus longue.

Cette conception est parfaite pour les portefeuilles, les vitrines immobilières ou les dispositions éditoriales qui nécessitent un rythme visuel et une hiérarchie de contenu claire. Il fonctionne magnifiquement à travers les tailles d'écran tout en se sentant structurés et intentionnels.

Comment le construire

Commencez avec une ligne à deux colonnes. Ajoutez une image à droite et nichez une autre ligne dans la colonne de gauche. Ajoutez des photos à tous. Ensuite, une autre rangée imbriquée est placée sous une bannière pour tenir un paragraphe de texte à côté d'un autre ensemble de visuels. Répétez toute la structure ou apportez quelques modifications, comme mettre la ligne de texte sur les images imbriquées.

Cette disposition est unique dans la façon dont les lignes imbriquées sont utilisées à l'intérieur de chaque section visuelle. Les lignes imbriquées de Divi 5 permettent une flexibilité structurelle, mélangeant des formats de ligne à l'intérieur d'une seule colonne et les superposant sous des éléments contextuels.

Disposition 2: Galerie de focus divisée

Une disposition à deux colonnes où la colonne de gauche empile une image verticale au-dessus d'un court bloc de texte, et la colonne de droite comporte une grande image suivie d'une ligne de trois images de support plus petites. Cet arrangement met en évidence un moment visuel principal tout en permettant un espace pour le contexte écrit et une bande d'image secondaire dans la même mise en page.

La disposition de la galerie Split Focus est parfaite pour le mariage, l'événement ou les galeries florales où chaque bloc visuel capture un moment ou une seule émotion. Cela fonctionne également bien lorsque vous souhaitez combiner une image focale audacieuse avec des vignettes privilégiées et une petite citation, un témoignage ou un message d'introduction à côté.

Comment le construire

Créez une ligne à 2 colonnes. Dans la colonne de gauche, empilez une image verticale en haut et un module de texte en dessous à l'aide de deux lignes distinctes. Dans la colonne de droite, insérez un seul module d'image en haut pour la photo en vedette, puis ajoutez une ligne imbriquée avec trois colonnes directement en dessous pour contenir des images de support plus petites.

La clé consiste à régler le rembourrage et à régler la largeur de gouttière sur 1 dans la ligne imbriquée pour garder tout serré et propre. Plus tard, lorsque vous avez ajouté les images, créez un préréglage de la bordure (réglez la largeur de bordure à 2 et la couleur de la bordure blanche ) et appliquez-la à tous les éléments.

Disposition 3: Galerie de projecteurs du projet

Cette disposition transforme votre galerie d'images en une vitrine de projets ou d'offres individuels. Au lieu d'afficher simplement des visuels, chaque élément obtient sa propre étiquette et son appel à l'action, ce qui le rend idéal pour les portefeuilles, les recettes, les reflets des produits ou les études de cas.

Une courte ligne à deux colonnes suit chaque image. Le côté gauche contient une description rapide ou un nom de projet, et le côté droit dispose d'un bouton invitant l'utilisateur à agir, comme commander maintenant . La disposition du projet Spotlight Gallery apporte plus de but et d'interaction à votre galerie.

Comment le construire

Sous chaque image, nous avons ajouté une ligne imbriquée à deux colonnes. Nous avons utilisé la colonne de gauche pour une courte description et la colonne de droite pour un bouton d'appel à l'action. Ensuite, nous avons stylé le bouton à l'aide de styles globaux et avons répété cette structure pour chaque élément de la galerie pour maintenir la cohérence. Pour faire la superposition de la ligne de l'image, nous avons réglé la position sur Absolute avec le décalage vertical 40px et Z index 1000.

Nous avons également ajouté un Preset Shadow à toutes les images, ce qui a non seulement donné à la galerie un look poli, mais m'a également fait gagner du temps en me permettant d'appliquer la marque cohérente sur plusieurs modules en quelques clics.

Disposition 4: Galerie de révélation de défilement

La disposition de la galerie de révélation de Scroll est conçue pour la narration visuelle qui se déroule à mesure que les utilisateurs défilent. Chaque section dispose d'une grande image associée à des visuels de support plus petits (créés en nichant plusieurs lignes ensemble).

Il est parfait pour les galeries éditoriales, les vitrines de recettes (mettant en évidence les étapes ou les ingrédients) ou les pages d'équipe de l'entreprise qui souhaitent capturer les moments de groupe de manière interactive. Au lieu de les téléspectateurs écrasants, il les guide visuellement à travers chaque histoire, un bloc à la fois.

Comment le construire

La structure est simple: créez une ligne à deux colonnes. Ajoutez un module d'image, un cap, un texte et un bouton à gauche. À droite, nidine une nouvelle ligne avec deux colonnes et insérez des modules d'image dans chacun pour prendre en charge les visuels. Ensuite, vous pouvez alternativement empiler les lignes uniques et deux colonnes pour créer une grille de type maçonnerie.

Le joueur clé de cette disposition est la section de gauche, qui colle. Pour créer votre section en vedette, vous devez créer un groupe de modules et activer les paramètres des effets de défilement . Cliquez sur votre groupe de modules et accédez à Paramètres> Avancé> Effets de défilement.

Faites en sorte que votre groupe de modules colle au sommet et réglez la limite collante inférieure à la zone du corps. Au fur et à mesure que les utilisateurs défilent vers le bas, l'image en vedette collera, tandis que les autres images continuent de monter.

Disposition 5: Galerie de produits échelonnés

Toutes les galeries n'ont pas besoin d'une image focale ou d'une structure complexe. Parfois, tout ce dont vous avez besoin est un ensemble d'images disposées dans une structure échelonnée, et c'est là que les lignes imbriquées brillent tranquillement.

Cette disposition est idéale pour le commerce électronique ou les sites axés sur le produit où vous souhaitez mettre en évidence une collection sans cela se sentir comme une grille typique. Il utilise beaucoup d'espace blanc et de lignes imbriquées pour briser la monotonie visuelle en mélangeant des lignes d'image d'une, deux et trois colonnes à l'intérieur d'une seule section. Le résultat est une mise en page bien équilibrée qui se sent fabriquée à la main et éditoriale, parfaite pour présenter les détails des produits, les gros plans matériels ou les articles complémentaires.

Il fonctionne particulièrement bien pour les marques avec des produits tactiles ou de luxe comme des articles en cuir, de la céramique ou des articles faits à la main où la narration visuelle est importante.

Comment le construire

Créez une ligne à deux colonnes. Ajoutez une disposition empilée d'images à l'aide de lignes imbriquées dans la colonne de gauche. Une ligne a deux petites photos côte à côte, et l'autre a une image verticale. Dans la colonne de droite, nidine une nouvelle ligne avec trois colonnes et insérez des images de produit. En dessous, placez votre texte et votre bouton.

Pour créer l'effet de sac à main qui se chevauche (comme dans la section à main) , ajoutez un module d'image dans sa ligne et utilisez un positionnement absolu (Advanced> Position> Absolute ). Utilisez ensuite les curseurs de décalage et l'index z pour le superposer entre les deux sections. Cela vous permet de créer des dispositions de style magazine où les images cassent la grille pour plus d'intérêt visuel.

Disposition 6: grille de portefeuille asymétrique

La disposition de grille de portefeuille asymétrique combine la narration et l'imagerie dans un format propre à deux colonnes. Utilisez la colonne de gauche pour introduire un projet avec un titre, une description courte et CTA. Dans la colonne de droite, une ligne imbriquée à trois colonnes vient au-dessus d'une grande image en vedette, donnant une occasion parfaite de montrer des visuels clés avec des plans de support.

Cette conception est idéale pour les concepteurs, les photographes ou les agences présentant des études de cas ou des portefeuilles organisés. Il maintient l'attention concentrée tout en offrant un rythme de défilement naturel et un flux adapté aux mobiles.

Comment le construire

Commencez avec une ligne à deux colonnes. Dans la colonne de gauche, ajoutez un module de texte pour votre titre et votre description, suivi d'un module de bouton (si vous le souhaitez).

Ajoutez une ligne imbriquée dans la colonne de droite. Choisissez la disposition à trois colonnes et empilez un autre module d'image. Insérez trois images de support dans la ligne imbriquée et une grande image dans le module d'image empilé. Utilisez d'autres structures de lignes pour créer plus de modèles.

Pour garder tout aligné, réglez la largeur de gouttière sur 1 et recadrez vos photos à des hauteurs cohérentes avant le téléchargement. Utilisez un préréglage d'image global (comme une bordure douce ou une ombre de chute) et de planer les effets pour garder les choses interactives mais raffinées.

Vous remarqueriez également une autre ligne imbriquée superposant l'image. Nous avons défini la position sur Absolute pour créer l'effet de superposition .

Conseils supérieurs pour construire des galeries d'images interactives

Une fois votre disposition en place, saupoudrez quelques détails supplémentaires pour rendre vos galeries plus polies. Voici comment:

1. Créer des effets de survol

L'ajout d'effets de survol est l'un des moyens les plus simples de rendre vos galeries d'images plus dynamiques. Il ajoute de l'interactivité sans distraire du contenu et aide les images à se sentir vivantes lorsque les utilisateurs s'engagent avec eux.

Dans Divi 5, l'ajout d'effets de survol à vos images est facile. Lors de l'édition, vous pouvez facilement passer à la survol (et aux modes réactifs) et personnaliser vos paramètres.

Vous n'avez pas à passer pour planer pour chaque image ou option de réglage différente; Il suffit de changer une fois, d'apporter des modifications à tous les éléments que vous souhaitez personnaliser et d'enregistrer. Nous avons changé la couleur de la bordure, mais vous pouvez également essayer les filtres, transformer, ajouter l'ombre et plus facilement.

Vous pouvez l'appliquer à des images individuelles ou l'enregistrer en préréglage si vous voulez que toutes vos images se comportent de la même manière. C'est un petit détail, mais cela rend votre galerie réfléchie et interactive, et Divi le rend sans effort.

2. Utilisez des attributs de copie / coller pour appliquer les styles aux images rapidement

La personnalisation manuelle de chaque image dans une galerie peut prendre du temps, en particulier lors de l'application de styles cohérents comme les bordures, les ombres ou les effets de survol. Bien que les préréglages soient parfaits pour les styles mondiaux, vous ne voudrez peut-être pas créer un nouveau préréglage pour chaque ajustement mineur.

Le système de gestion des attributs de Divi 5 propose une solution rationalisée. En quelques clics, vous pouvez copier des styles à partir d'une image et les appliquer à d'autres. Vous n'avez pas à répéter manuellement le même processus de personnalisation pour chaque image. Vous pouvez simplement copier et coller et maintenir la cohérence.

Par exemple, personnalisez un élément et copiez et collez ses attributs aux autres éléments pour reproduire le style.

Divi 5 permet également un contrôle plus granulaire. Par exemple, vous pouvez copier et coller des groupes d'attribut spécifiques, tels que uniquement les paramètres de conception ou uniquement les effets de survol. Cela rend votre flux de travail efficace et cohérent.

3. Utilisez une pince pour créer des images liquides et réactives

Dans une disposition de la galerie moderne, vos images ne devraient pas seulement évoluer mais aussi répondre intelligemment à différentes tailles d'écran. C'est exactement ce que la fonction CLAMP () vous aide à atteindre.

Divi 5 prend en charge CLAMP () et de nombreuses autres unités avancées qui vous permettent d'entrer manuellement les valeurs de taille n'importe où, y compris la largeur d'image, le rembourrage et les champs de marge. La clamp () est idéale pour la réactivité. Il vous permet de définir une valeur minimale, idéale et maximale, le tout en une seule ligne.

Par exemple, une pince (1200px, 30vw, 1400px) indique à Divi de ne jamais descendre en dessous de 1200px, à augmenter jusqu'à 30% de la largeur de la fenêtre, mais à plafonner à 1400px.

Ceci est particulièrement utile pour les bandes d'image ou les dispositions décalées où vous voulez une grille plus fluide sans points de rupture. Lorsqu'il est combiné avec des lignes imbriquées, CLAMP () aide chaque bloc à s'adapter naturellement sans avoir besoin de réglages mobiles séparés.

4. Aperçu et ajustement pour différents appareils

Une fois que votre mise en page a l'air bien sur le bureau, il est facile de les affiner pour les tablettes et le mobile à l'aide d'outils de montage réactifs intégrés de Divi. Basculez entre les vues de l'appareil et ajuster les paramètres comme la taille de l'image, l'espacement et l'alignement du texte pour chaque écran.

Par exemple, vous voudrez peut-être réduire différemment le rembourrage entre les lignes sur les colonnes mobiles ou piles pour une meilleure expérience de défilement. Prendre quelques minutes pour ajuster ces paramètres peut rendre votre galerie propre et professionnelle sur chaque écran.

Téléchargez gratuitement les dispositions de la galerie

Vous voulez commencer à utiliser les dispositions de la galerie à l'intérieur de Divi 5? Abonnez-vous ci-dessous pour accéder aux fichiers JSON. Vous pouvez les télécharger dans votre bibliothèque Divi et les importer sur vos pages par la suite.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons une copie du pack de mise en page Ultimate Divi Laying, plus d'autres ressources, astuces et astuces DiviM et gratuits. Suivez et vous serez un maître divi en un rien de temps. Si vous êtes déjà abonné, tapez 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 abonné avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder à des packs de mise en page de Divi Gratuit!

Construisez des galeries d'images imbriquées (et plus) avec Divi 5

Les lignes imbriquées de Divi 5 simplifient les dispositions complexes en vous permettant de placer des lignes dans les lignes. Ils offrent également une nidabilité infinie et un contrôle précis sur vos conceptions.

Les lignes imbriquées ne sont que l'une des fonctionnalités exclusives de Divi 5. Soyez à la recherche du nouveau système de mise en page basé sur Flexbox de Divi, qui introduit également une large gamme de nouveaux modèles de lignes et de commandes Flexbox pour vous donner tous les outils et la simplicité pour élaborer n'importe quelle disposition que vous pouvez imaginer.

Alors que nous continuons à améliorer Divi 5, vous pouvez vous attendre à encore plus de fonctionnalités qui améliorent vos capacités de conception et simplifient votre flux de travail.

Si vous avez construit des galeries à la dure, le moment est le moment idéal pour essayer Divi 5 et découvrir comment les lignes imbriquées et les outils de mise en page visuels peuvent tout simplifier.

Divi 5 est prêt à être utilisé sur de nouveaux sites Web, mais attendez un peu avant de migrer les existants.