Tout ce que vous devez savoir sur les lignes imbriquées de Divi 5

Divi est depuis longtemps un favori pour les utilisateurs de WordPress qui souhaitent créer de beaux sites Web fonctionnels. Avec Divi 5, nous prenons la flexibilité de nouveaux sommets, en introduisant des fonctionnalités qui redéfinissons la façon dont nous abordons la conception de la disposition. Parmi ceux-ci figurent la dernière fonctionnalité de Divi 5, les lignes imbriquées. Il fournit un moyen plus intuitif de construire des dispositions dynamiques complexes.

Dans cet article, nous plongerons dans tout ce que vous devez savoir sur les rangées imbriquées de Divi 5. Nous expliquerons ce qu'ils sont et comment ils fonctionnent, et fournir quelques exemples pour susciter la créativité pour votre prochain projet de conception Web.

Divi 5 est prêt à l'emploi sur les nouveaux builds de site Web, mais pas entièrement prêts à transférer ceux existants.

Plongeons-nous.

Que sont les lignes imbriquées dans Divi 5?

Les lignes imbriquées en divi 5 vous permettent de placer des lignes à l'intérieur d'autres lignes, créant des structures de mise en page infiniment nichées dans le constructeur visuel. Avec cette fonctionnalité, les utilisateurs Divi peuvent créer des conceptions complexes et couchées en intégrant des lignes dans les colonnes d'une ligne parentale, offrant un meilleur contrôle sur la hiérarchie de leur disposition. Contrairement aux lignes traditionnelles, les lignes imbriquées permettent aux concepteurs d'empiler et d'organiser le contenu de manière plus dynamique et flexible tout en maintenant l'interface classique de glisser-déposer de Divi.

Dans Divi 4, la création de dispositions imbriquées était difficile en raison de la structure rigide du constructeur visuel. Les concepteurs étaient limités aux sections spécialisées, qui offraient des dispositions imbriquées prédéfinies mais manquaient de flexibilité pour les conceptions personnalisées.

La réalisation de dispositions plus complexes nécessitait souvent un CSS personnalisé, ce qui a ajouté de la complexité pour les débutants. Les lignes imbriquées dans Divi 5 éliminent cette barrière, offrant une solution native qui s'intègre parfaitement dans le constructeur.

Ils peuvent être utilisés pour créer diverses mises en page, telles que des sections de héros multi-colonnes, des blocs de contenu en couches ou des grilles de portefeuille complexes, le tout dans l'interface familière de Divi. En permettant une nidabilité infinie, les concepteurs peuvent expérimenter des dispositions uniques, ce qui facilite la vie de leur vision. C'est un grand gain de temps et améliore le potentiel créatif des débutants et des utilisateurs de Divi expérimentés.

Caractéristiques clés des lignes imbriquées

Les lignes imbriquées ont plusieurs fonctionnalités clés. Des possibilités de mise en page infinies aux options de dimensionnement des colonnes améliorées, Divi 5 facilite la création de dispositions complexes.

Rows imbriqués infinis

L'une des caractéristiques remarquables des rangées imbriquées dans Divi 5 est leur nidabilité infinie. Il n'y a pas de limite au nombre de lignes qui peuvent être imbriquées les unes dans les autres, permettant aux concepteurs de créer facilement des dispositions uniques. Que ce soit une page simple ou une disposition à plusieurs niveaux sophistiquée, les lignes imbriquées vous permettent de repousser les limites créatives tout en gardant le contrôle de chaque élément.

NOUVELLE TAB Row dans Visual Builder

L'accès aux lignes imbriquées est transparente dans Divi 5. Pour ajouter une ligne imbriquée, cliquez pour ajouter un nouveau module ou une nouvelle ligne et recherchez un nouvel onglet appelé nouvelle ligne dans le constructeur. Cet onglet offre des options de structure de ligne familières de Divi, vous permettant de choisir rapidement une disposition qui convient à vos besoins.

Nouveaux champs de dimensionnement pour les colonnes

Les lignes imbriquées sont complétées par des commandes de dimensionnement de colonne améliorées de Divi 5, offrant une plus grande précision de conception de disposition. Les utilisateurs peuvent affiner les largeurs de colonne dans les lignes parentales et imbriquées, assurer des ajustements parfaits sur les pixels et faciliter la création de dispositions équilibrées et visuellement attrayantes.

Contrôles de conception réactifs

Divi 5 garantit que les lignes imbriquées sont entièrement réactives, avec des paramètres personnalisables pour les appareils de bureau, de tablette et mobiles. Les utilisateurs peuvent ajuster les propriétés des lignes et des colonnes - comme l'espacement, l'alignement et la visibilité - spécifiques à chaque appareil, garantissant que les dispositions sont polies sur toutes les tailles d'écran.

Avec des commandes réactives, vous pouvez créer en toute confiance des dispositions imbriquées complexes qui s'adaptent de manière transparente à n'importe quel appareil, ce qui facilite la conception de manière plus facile.

Ils complimentent d'autres caractéristiques divi 5

Les lignes imbriquées s'intègrent parfaitement aux autres fonctionnalités Divi 5, créant un flux de travail de conception cohérente. Par exemple, ils fonctionnent aux côtés des variables de conception, permettant un style cohérent à travers des éléments imbriqués et des unités avancées, qui permettent des mesures précises dans diverses unités, comme Rem, Calc () ou clamp ().

De plus, la conception prédéfinie permet aux utilisateurs d'enregistrer et d'appliquer des configurations de ligne sur leur site à l'aide de groupes d'options et de préréglages d'éléments, rationalisant des tâches répétitives. Cela garantit que les lignes imbriquées améliorent la flexibilité de mise en page et s'inscrivent dans l'écosystème plus large de Divi 5 des outils de conception modernes.

Avantages de l'utilisation de lignes imbriquées

Les lignes imbriquées en divi 5 améliorent les capacités de conception que vous avez lors de la création de sites Web. Vous pouvez débloquer des possibilités créatives pour améliorer le flux de travail car les lignes imbriquées offrent des avantages tangibles pour les concepteurs de tous niveaux.

1. Flexibilité de mise en page supplémentaire

Avec la possibilité de nicher les lignes, les utilisateurs peuvent créer des conceptions complexes comme des sections de héros en couches, des grilles ou tout ce dont ils peuvent rêver, sans être limité à des structures de lignes rigides. Cette liberté encourage la liberté de conception et le contrôle précis, permettant aux concepteurs de sortir de ce qui est possible dans Divi 4. Quel que soit le type de mise en page que vous souhaitez, les lignes imbriquées fournissent une polyvalence dans la création de pratiquement n'importe quelle conception.

2. Designs complexes simplifiés

Divi 5 élimine le besoin de sections spécialisées de CSS personnalisés pour créer des dispositions sophistiquées. Dans le passé, les concepteurs ont eu recours à des solutions de contournement à imiter les lignes imbriquées, ce qui a ajouté de la complexité et, dans certains cas, de code le ballonnement pour créer des dispositions en dehors des capacités de Divi 4. Maintenant, les lignes imbriquées vous permettent de créer rapidement des dispositions complexes, ce qui permet aux utilisateurs de produire plus facilement des dispositions professionnelles accrocheuses sans codage.

3. Meilleure efficacité de conception

Le nouvel onglet de ligne dans le constructeur visuel permet aux utilisateurs de sélectionner rapidement dans diverses options de ligne, réduisant le temps de configuration. Les fonctionnalités de glisser-déposer et le dimensionnement des colonnes personnalisés rendent la conception de sections complexes plus rapides et plus accessibles. Avec une courbe d'apprentissage minimale, vous pouvez obtenir des résultats polis, permettant aux utilisateurs de se concentrer sur la créativité plutôt que sur les obstacles techniques.

4. Réactivité améliorée

En nichant les lignes, vous obtenez plus de contrôle granulaire sur la façon dont les éléments de conception s'empilent et réorganisent sur différentes tailles d'écran. Vous pouvez ajuster les largeurs de colonne et la visibilité des lignes intérieures indépendamment de la ligne extérieure, conduisant à une meilleure expérience utilisateur sur les appareils mobiles et tablettes.

Comment utiliser les lignes imbriquées dans divi 5

Pour démontrer à quel point il est simple de travailler avec des lignes imbriquées dans Divi 5, nous utiliserons le pack de mise en page de mise en scène à domicile pour Divi pour ajouter une section d'équipe à la page du pack. Créez une nouvelle page sur votre site Web Divi et chargez la page à propos de la mise en page. Avec le constructeur visuel activé, cliquez pour ajouter une disposition à 4 colonnes à la page.

Ajoutez une image, un titre et un module de texte à la première colonne.

Cliquez sur l' icône Gray + pour ajouter un nouveau module sous le texte.

Lorsque la boîte de dialogue s'ouvre, cliquez sur l' onglet nouvelle ligne et ajoutez une ligne imbriquée 2/3 + 1/3 .

Ajoutez # 687d65 dans les paramètres de la ligne comme couleur d'arrière-plan.

Cliquez sur l' onglet Conception et définissez le rembourrage supérieur et inférieur sur 0px .

Avec la ligne en place, ajoutez un module de bouton à la première colonne.

Dans la deuxième colonne, ajoutez un module d'icône et sélectionnez l'icône LinkedIn .

Réglez la couleur de l'icône sur le blanc et la taille de l'icône sur 24px .

De là, copiez la première colonne principale pour répéter le style des colonnes restantes. Une fois terminé, vos rangées imbriquées seront impeccables sur toutes les tailles d'écran. Vous pouvez combiner des styles, créer des préréglages de groupe d'options pour la réutilisation, et plus encore sans compter sur les contrôles de transformation ou CSS pour aligner les éléments de votre ligne.

Cas d'utilisation de la ligne imbriquée

Les rangées imbriquées en divi 5 ouvrent un monde de possibilités, ce qui facilite la création de superbes dispositions étonnantes et fonctionnelles. Voici quelques exemples pratiques de mise à profit des lignes imbriquées dans vos projets.

Sections de héros

Les rangées imbriquées sont idéales pour créer des sections de héros qui attirent l'attention. Par exemple, une ligne parent peut contenir deux colonnes avec un gros titre audacieux, une copie de support et une ligne imbriquée de trois boutons, tandis que l'autre a une image d'arrière-plan. Cette approche permet un contrôle précis sur l'espacement et l'alignement, ce qui se traduit par une section de héros professionnels qui engage les visiteurs lorsqu'ils atterrissent sur votre site.

Construire des dispositions multi-colonnes

Les lignes imbriquées vous permettent de créer des dispositions de type grille pour les portefeuilles, les pages de service ou les vitrines de produits. Par exemple, vous pouvez utiliser une ligne parentale avec plusieurs colonnes contenant une ligne imbriquée pour afficher des éléments individuels avec des images, des titres, des descriptions et des liens de bouton. Cette flexibilité permet des tailles de colonnes variées et un contenu imbriqué, créant facilement des dispositions visuellement attrayantes.

Pages de destination interactives

Les lignes imbriquées vous permettent d'organiser plus facilement le contenu pour les pages de destination dynamiques et engageantes. Vous pouvez nicher les lignes pour séparer des sections comme les témoignages, les reflets des fonctionnalités ou les formulaires de capture de plomb. Par exemple, une page de destination peut utiliser une ligne imbriquée pour placer un module vidéo aux côtés d'un formulaire d'inscription, garantissant une disposition équilibrée qui guide les utilisateurs vers la conversion.

Améliorer les pages de commerce électronique

Les lignes imbriquées sont parfaites pour structurer les pages de produits WooCommerce avec un contenu imbriqué. Vous pouvez utiliser une ligne parentale pour organiser l'image et les détails du produit principal, avec des lignes imbriquées pour des sections supplémentaires telles que les avis des clients, les descriptions de produits ou les produits connexes. Par exemple, une ligne imbriquée pourrait contenir un module d'onglet pour les spécifications ou les FAQ de produits, tandis qu'un autre affiche un bouton Acheter maintenant à côté d'une bannière de réduction.

Conclusion

Les lignes imbriquées en divi 5 améliorent la façon dont vous concevez les pages Web. Ils offrent la flexibilité de créer des dispositions modernes et captivantes sans codage personnalisé. En incorporant des lignes imbriquées dans votre flux de travail de conception, vous éliminez les limites des versions antérieures de Divi, vous permettant de tout construire, des sections de héros aux pages de commerce électronique engageantes sans section de spécialité.

Êtes-vous prêt à explorer les lignes imbriquées? Plongez dans le dernier alpha public divi 5 et expérimentez-le pour construire des dispositions uniques et réactives qui ajoutent de la profondeur à vos projets. Nous vous encourageons à partager vos créations avec la communauté Divi sur les réseaux sociaux, les forums Reddit ou par le bouche à oreille, et à rejoindre la conversation sur l'avenir passionnant de Divi 5. Développer Divi 5 a été un long processus, et nous sommes impatients d'entendre vos pensées!

Divi 5 est prêt à l'emploi sur les nouveaux builds de site Web, mais pas entièrement prêts à transférer ceux existants.