10 dispositions de grille faites avec des lignes imbriquées de Divi 5 (téléchargement gratuit)

Les dispositions de grille offrent un moyen structuré mais flexible d'organiser le contenu, d'améliorer l'expérience utilisateur et d'assurer une réactivité transparente entre les appareils. Avec la sortie de Divi 5 Public Alpha, les concepteurs de sites Web ont un nouvel ensemble d'outils pour créer de belles mises en page de grille qui repoussent les limites créatives. Avec un constructeur visuel entièrement repensé et de nouvelles fonctionnalités puissantes telles que les lignes imbriquées, les unités avancées et les groupes de modules, vous pouvez facilement construire des dispositions complexes en couches.

Dans cet article, nous présenterons les dispositions de grille que vous pouvez facilement construire avec Divi 5, des grilles de fonctionnalités symétriques aux blogs de maçonnerie dynamiques et aux vitaux de portefeuille interactifs. Que vous conceviez un portefeuille, une boutique de commerce électronique ou un site Web d'entreprise, ces dispositions vous inspireront à élever vos conceptions et à captiver votre public.

Explorons comment les fonctionnalités avancées de Divi 5 rendent ces dispositions créatives de style grille.

Divi 5 est prêt à être utilisé sur de nouveaux sites Web, mais nous ne recommandons pas encore de convertir les sites existants en Divi 5.

Caractéristiques clés divi 5 pour les dispositions de grille

La fondation reconstruite de Divi 5 présente des fonctionnalités qui facilitent la création de dispositions de grille plus faciles que jamais. Ces outils permettent aux concepteurs de créer des grilles complexes et visuellement attrayantes avec précision et efficacité, tout en maintenant la flexibilité entre les appareils. Ci-dessous, nous explorons les principales fonctionnalités de Divi 5 qui rendent possible la fabrication de belles mises en page de grille.

Abonnez-vous à notre chaîne YouTube

Rangées imbriquées

La fonction de lignes imbriqués de Divi 5 vous permet de placer des lignes dans les lignes, offrant une nidabilité infinie pour créer des structures de grille complexes avec une interface de glisser-déposer intuitive. Cette fonctionnalité simplifie la conception de grilles multicouches, vous donnant un contrôle précis sur le placement des modules.

Que la construction d'une vitrine de produit complexe ou d'une grille de portefeuille en couches, les lignes Nexted vous permettent d'organiser le contenu plus intelligemment, ce qui rend vos dispositions dynamiques et visuellement engageantes.

Points d'arrêt personnalisables

La conception réactive est essentielle pour les sites Web modernes, et les points d'arrêt personnalisables de Divi 5 facilitent l'autorisation de vous assurer que vos grilles sont parfaites sur n'importe quel appareil. Vous pouvez utiliser sept ordinateurs de bureau, tablettes et points d'arrêt mobiles, permettant aux grilles de s'adapter de manière transparente à diverses tailles d'écran.

Associé à la mise à l'échelle de Canvas, qui fournit des aperçus en temps réel de vos dispositions à différents points d'arrêt au sein du constructeur visuel, cette fonctionnalité garantit que vos grilles sont optimisées pour la réactivité, offrant une expérience utilisateur cohérente sur tous les appareils.

Groupes de modules

Les groupes de modules rationalisent le processus de conception et de maintien d'une esthétique cohérente de la grille. En regroupant des modules, vous pouvez appliquer le style collectif et réutiliser ces groupes sur plusieurs pages, gagner du temps et assurer la cohérence de la conception.

Ceci est particulièrement utile pour les dispositions de grille comme les articles de blog ou les cartes de produits, où des éléments de conception cohérents - tels que les polices, les couleurs ou les effets de survol - sont essentiels pour un look cohérent sur votre site.

Variables de conception

Avec les variables de conception, Divi 5 offre une gestion centralisée d'éléments de conception clés comme les couleurs, les polices, les liens, la typographie, etc. Cette fonctionnalité garantit l'uniformité dans vos dispositions de grille - et votre site Web entier - ce qui facilite le maintien d'une identité visuelle cohérente. Les styles sont définis dans le gestionnaire de variables et peuvent être appliqués où vous voulez

Besoin de mettre à jour un style de couleur ou de police? Les variables de conception vous permettent d'apporter des modifications en un seul endroit, en les appliquant instantanément sur toutes les sections et pages, à rationaliser votre flux de travail et à garder vos conceptions polies.

Unités avancées

Les unités avancées de Divi 5 vous donnent un contrôle granulaire sur l'espacement et le dimensionnement avec des options comme VW, VH, REM et EM. Ces unités permettent des dispositions de grille dynamiques et réactives qui s'allongent parfaitement sur les appareils. Vous pouvez ajuster le rembourrage, les marges ou les tailles d'éléments avec le gestionnaire variable. Les unités avancées offrent la flexibilité d'aligner et d'échelle précisément les composants de la grille, garantissant que vos dispositions sont fonctionnelles et visuellement harmonieuses.

Gestion des attributs

Attribut Management accélère le processus de conception en vous permettant de copier, coller et de réinitialiser les attributs entre les éléments de conception. Cette fonctionnalité est primordiale pour appliquer des styles cohérents, tels que l'effet de survol ou l'espacement, à plusieurs modules. En réduisant les tâches répétitives, la gestion des attributs vous permet de vous concentrer sur la créativité tout en accélérant le développement de dispositions de grille complexes.

Ces fonctionnalités divi 5 fonctionnent ensemble pour offrir une flexibilité et une efficacité inégalées, ce qui facilite la création de dispositions de grille étonnantes et réactives qui améliorent l'expérience utilisateur et élèvent vos conceptions Web.

10 Exemples de mise en page créative dans Divi 5

Les dispositions de grille sont une pierre angulaire de la conception Web moderne, et avec Divi 5, les construire n'a jamais été aussi simple. Que vous présentiez des produits, des portefeuilles, des membres de l'équipe ou des FAQ, Divi 5 est capable de construire des dispositions fonctionnelles et visuellement étonnantes. Regardons 10 exemples de dispositions de grille que vous pouvez créer avec Divi 5.

1. Grille de caractéristiques symétriques

Les grilles de caractéristiques symétriques offrent un excellent moyen de présenter des produits, des services ou des articles de portefeuille proprement et organisés. Ce style de grille est parfait pour mettre en évidence le contenu structuré et est polyvalent dans son application. Ils peuvent être utilisés pour les sites Web d'entreprise, les portefeuilles et les pages de destination, offrant un look poli qui guide les utilisateurs à travers des informations sans effort.

Dans l'exemple ci-dessous, nous avons construit une grille à quatre colonnes pour présenter une entreprise d'apothicaire. Nous pouvons réaliser un aspect professionnel et poli en minutes en utilisant des lignes imbriquées, des groupes de modules et une gestion des attributs.

2. Grille de maçonnerie

Une grille de maçonnerie est une disposition dynamique de style Pinterest qui organise des articles de blog, des articles de portefeuille ou même des recettes de hauteurs variables dans une grille visuellement engageante et étroitement emballée. Contrairement aux grilles traditionnelles avec des hauteurs de lignes fixes, les grilles de maçonnerie permettent au contenu de s'écouler naturellement, en remplissant les lacunes verticales pour créer un aspect organique transparent. Ce style de grille est parfait pour les sites Web qui priorisent la narration visuelle, tels que des blogs, des magazines ou des portefeuilles créatifs. Avec les fonctionnalités natives de Divi 5, la création d'une grille de maçonnerie élégante et réactive est intuitive et efficace.

Dans l'exemple ci-dessous, nous avons combiné des lignes imbriquées et des groupes de modules pour créer une grille de maçonnerie pour les recettes, en utilisant les raccourcis de Divi pour dupliquer les groupes plus rapidement.

3. Grille de portefeuille interactive

Une disposition de grille de portfolio interactive fournit un moyen engageant de présenter votre travail. Vous pouvez incorporer des fenêtres de lumière, des effets de survol, des boutons, et plus encore pour permettre aux utilisateurs d'explorer votre contenu. Ce style de grille est excellent pour les sites Web qui visent à captiver leur public avec un travail visuel, tels que la photographie, le design ou les deux, tout en fournissant une navigation et une interactivité transparentes.

Avec les fonctionnalités avancées de Divi 5, les concepteurs peuvent créer des grilles de portefeuille réactives et conviviales qui mettent en évidence efficacement le travail créatif.

4. Grille de vitrine du produit

Une grille de vitrine de produits offre une façon unique de présenter vos meilleurs vendeurs, produits en vedette ou nouveaux produits que vous introduisez au monde. Vous pouvez créer une disposition structurée et visuellement attrayante avec des images, des titres, des prix et des boutons optimisés pour les magasins de commerce électronique. À l'aide d'une disposition de grille, vous pouvez créer une disposition propre et organisée pour faciliter la navigation des utilisateurs et prendre des décisions d'achat.

Avec Divi 5, vous pouvez utiliser des fonctionnalités puissantes pour créer des dispositions réactives et cohérentes qui stimulent l'engagement et les conversions.

5. Grille des membres de l'équipe

Les grilles des membres de l'équipe vous permettent de présenter des profils d'équipe avec des images, des noms, des rôles et des liens sociaux. Ce style de grille crée une présentation professionnelle et accessible, ce qui le rend idéal pour les sites Web mettant en évidence l'expertise et la personnalité de leur équipe. Les réseaux d'équipe sont parfaits pour les sites d'entreprise, les agences ou les organisations à but non lucratif, mais peuvent être appliquées sur n'importe quel site où vous devez présenter les gens.

Dans l'exemple ci-dessous, nous utilisons une grille à trois colonnes avec des lignes imbriquées et appliquons des variables de conception pour contrôler la taille de la police de manière responsable.

6. Grille de services

Une disposition de grille est un excellent moyen de présenter les services d'une entreprise. Il met en évidence les services dans un format organisé et numérisable, ce qui le rend idéal pour les sites Web qui doivent communiquer leurs propositions de valeur. Parfait pour les agences, les pigistes ou les entreprises basées sur les services, le réseau utilise les fonctionnalités avancées de Divi 5 pour créer des dispositions réactives et engageantes qui mobilisent les demandes et les conversions des clients.

Dans l'exemple ci-dessous, nous avons utilisé une ligne à quatre colonnes, attribué une formule CALC () pour l'espacement des lignes et incorporé des groupes de modules et des lignes imbriquées pour accélérer le processus de conception.

7. Grille des horaires des événements

Le style de grille des horaires des événements est parfait pour organiser et présenter des informations sensibles au temps professionnellement et épurées, ce qui le rend idéal pour les sites Web organisant des événements tels que des conférences, des ateliers ou des rassemblements communautaires. Les fonctionnalités de Divi 5 vous permettent d'ajouter des dates, des titres et des descriptions dans un format de grille, ce qui permet aux visiteurs de trouver facilement ce qu'ils veulent.

L'exemple ci-dessous présente une disposition à trois colonnes avec des lignes imbriquées pour afficher les événements fonctionnellement et esthétiquement.

8. Grille de table de prix

Divi 4 (et divi 5) sont livrés avec un module de tarification, mais il est limité aux prix, à un bouton et à des puces. Pour ceux qui cherchent à développer les fonctionnalités natives de Divi et à construire une grille de tarification répondant à leurs besoins, Divi 5 fournit un moyen de le faire. Vous pouvez créer une grille de tarification qui affiche étonnamment votre contenu en utilisant des lignes imbriquées, des groupes de modules et une gestion des attributs.

Par exemple, vous pouvez créer une disposition à trois colonnes qui fournit des prix, des fonctionnalités et plusieurs boutons sans avoir à se conformer aux limites du module de tarification intégré. Vous pouvez modifier les paramètres réactifs pour les écrans plus petits, puis créer un groupe de groupe d'options pour des colonnes de largeur de 50%, en s'assurant que vos colonnes s'alignent parfaitement sur tablette et mobile.

9. Grille d'accordéon FAQ

Avoir une section FAQ sur votre site Web peut aider les utilisateurs à accéder à une liste de questions fréquemment posées, en leur donnant une meilleure idée de ce que vous offrez. Ce style de grille combine la clarté d'une grille avec l'interactivité des modules d'accordéon, ce qui le rend idéal pour les sites Web qui ont besoin de fournir des informations concises et accessibles. Parfait pour les pages de support, les centres d'aide ou les sites d'information, la grille FAQ exploite les fonctionnalités robustes de Divi 5 pour créer des dispositions réactives et engageantes qui améliorent l'expérience utilisateur.

Dans cet exemple, nous avons utilisé des lignes imbriquées pour créer une section FAQ engageante avec des vidéos d'information et des questions / réponses pour fournir aux utilisateurs les informations pertinentes dont ils ont besoin pour prendre une décision éclairée.

10. grille de galerie d'images

Une grille de galerie avec une popup Lightbox est une façon visuellement frappante de présenter la photographie, des exemples de portefeuille ou d'autres images. Ce style de grille est parfait pour présenter la narration visuelle, ce qui le rend idéal pour les sites Web qui hiérarchisent des images époustouflantes, comme les galeries d'art, les blogs de voyage ou la photographie. Avec Divi 5, les concepteurs peuvent créer des grilles de galerie réactives et engageantes qui captivent.

Dans l'exemple ci-dessous, nous utilisons une disposition simple à quatre colonnes pour présenter des images. Pour une touche supplémentaire, nous avons activé Lightbox sur les images et ajouté un module de partage social dans le coin inférieur droit de chaque photo.

Conseils pour créer des dispositions de grille efficaces dans Divi 5

Grâce aux fonctionnalités puissantes et flexibles de Divi 5, la construction de dispositions efficaces de grille est plus facile que jamais. Que vous créiez une grille de fonctionnalités ou une galerie d'images dynamiques avec des éléments de superposition, ces conseils vous aideront à maximiser les capacités de Divi 5 pour créer des conceptions réactives, cohérentes et efficaces qui augmentent l'expérience utilisateur de votre site Web.

1. Tirer les lignes imbriquées

La fonction de lignes imbriqués de Divi 5 crée des structures de grille complexes et multicouches. Vous pouvez organiser le contenu en nilitant des lignes dans des lignes, telles que la mise en place d'images et de texte dans une seule cellule de grille pour un alignement précis. Les lignes imbriquées sont parfaites pour construire des dispositions comme des grilles de portefeuille ou des horaires d'événements, vous offrant la flexibilité de concevoir des grilles créatives et structurées.

2. Optimiser la réactivité

À l'aide de la mise à l'échelle des toiles et des points d'arrêt personnalisables, vous pouvez vous assurer que vos grilles sont parfaites sur chaque appareil. Test des dispositions au sein du constructeur visuel en temps réel pour prévisualiser comment ils s'adaptent sur les appareils de bureau, de tablette et mobiles. Vous pouvez ajuster les largeurs de colonne, l'espacement ou les tailles de police à des points d'arrêt spécifiques pour maintenir la convivialité et l'attrait visuel. Avec les points d'arrêt personnalisables de Divi 5, vous pouvez assurer une expérience transparente pour tous les utilisateurs, des grands écrans aux smartphones.

3. Utilisez des groupes de modules pour l'efficacité

Les groupes de modules dans Divi 5 peuvent rationaliser votre flux de travail en regroupant des éléments de grille similaires, tels que les cartes de produits ou les profils de membres de l'équipe. Vous pouvez simultanément appliquer un style cohérent - polices, couleurs, effets de survol, etc. - à plusieurs modules et les réutiliser sur les pages. Il s'agit d'un gain de temps pour maintenir l'uniformité dans les grilles comme les tables de tarification ou les FAQ, réduisant les modifications répétitives et assurant un aspect poli.

4. Maintenir la cohérence avec les variables de conception

Utilisez des variables de conception pour centraliser le contrôle sur les couleurs, les polices, l'espacement, les liens, etc. En définissant ces éléments en un seul endroit, vous pouvez mettre à jour les styles à l'échelle mondiale, parfaits pour garder les grilles de service ou les dispositions de galerie visuellement harmonieuses.

5. Expérimentez avec des unités avancées

Améliorez la flexibilité de vos grilles en utilisant des unités avancées comme VH, VW, REM, CALC () ou CLAMP () pour l'espacement et le dimensionnement dynamiques. Ces unités permettent à vos éléments de grille d'évoluer de manière fluide en fonction de la taille de la fenêtre ou des paramètres de police, garantissant la réactivité et l'équilibre visuel.

Téléchargez gratuitement les dispositions de la section de la grille

Vous voulez commencer à utiliser les dispositions de grille à 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!

Libérer la créativité avec Divi 5

La suite de fonctionnalités de Divi 5, des lignes imbriquées à l'attribut de la gestion, permet aux concepteurs de créer facilement des mises en page polyvalentes, réactives et visuellement époustouflantes. Divi 5 offre une flexibilité, une précision et une efficacité inégalées pour créer n'importe quelle disposition de grille, des grilles de fonctionnalité aux portefeuilles interactifs. Que vous créiez un site Web de commerce électronique, une page à propos ou une section FAQ, l'interface moderne de Divi 5 et des capacités améliorées rendent la vie à votre vision créative.

Êtes-vous prêt à explorer les possibilités? Plongez dans le divi 5 public alpha pour expérimenter la création de vos dispositions de grille. Comme mentionné précédemment, Divi 5 convient aux nouveaux sites Web, mais nous ne recommandons pas de l'utiliser sur les sites existants, du moins pas encore.

Nous aimerions voir vos créations. Partagez vos dispositions de grille uniques sur nos réseaux sociaux ou commentez ci-dessous.