Rows imbriqués vs sections spécialisées dans Divi 5 (et pourquoi nous les déprécions)

Divi est depuis longtemps une centrale pour construire de beaux sites Web. Les sections de spécialité ont étendu les capacités de mise en page de Divi pendant des années en permettant des structures de colonne complexes et imbriquées que les sections régulières ne pouvaient pas gérer. Mais cette approche est venue avec sa complexité et ses limites, liées profondément à l'ancien cadre de Shortcode de Divi.

Maintenant, Divi 5 est livré avec des lignes imbriquées - une fonctionnalité native qui vous permet de placer des lignes à l'intérieur des colonnes n'importe où, dans des sections régulières. Cette fonction supprime les contraintes précédentes et unifie le bâtiment de mise en page sous un seul type de section flexible. Avec les lignes imbriquées, vous pouvez construire les mêmes dispositions asymétriques complexes que les sections de spécialité permettent, mais plus intuitivement.

Dans cet article, nous discuterons de l'éloignement des sections spécialisées et de la façon dont les lignes imbriquées et le système de disposition redessiné de Divi 5 offrent un meilleur moyen de créer des dispositions complexes. L'avenir de Divi est là, et il est plus simple, plus flexible et conçu pour une créativité illimitée.

Abonnez-vous à notre chaîne YouTube

Divi 5 est prêt à être utilisé sur de nouveaux sites Web aujourd'hui.

Une rétrospective des sections spécialisées

Des sections de spécialité ont été introduites dans Divi (2014) pour répondre aux limites des sections régulières. Ils ont permis des structures de colonnes plus complexes, y compris des barres latérales et des dispositions asymétriques, qui étaient impossibles avec des sections régulières.

La complexité de mise en page limitée fondamentalement limité basée sur les raccourcis de Divi en restreignant la profondeur de nidification et en introduisant des goulots d'étranglement de performance. Les dispositions imbriquées complexes étaient difficiles à construire et susceptibles de résoudre les problèmes, ils n'étaient donc pas possibles avant les sections spécialisées.

Cependant, ils ont introduit une complexité supplémentaire car les sections spécialisées étaient leur propre truc (remarquez la colonne supplémentaire passant et les options CSS pour ces sections). Ce n'étaient pas mauvais, mais ils se sont définitivement comportés différemment des sections, des lignes et des colonnes ordinaires.

Les sections de spécialité ont ajouté un rembourrage supplémentaire et des champs de classe / ID CSS qui étaient nécessaires mais incongruents avec le reste des options de constructeur.

Les sections de spécialité ont permis des structures de colonnes pseudo-frites en pliant les règles de shortcode, créant ce qui n'était pas possible dans les sections régulières.

Ne serait-il pas bien si les sections régulières étaient assez puissantes pour faire ce dont vous avez besoin?

Lignes imbriquées et une meilleure façon de construire des pages

Avec Divi 5, les lignes imbriquées permettent officiellement à la place de placer des lignes (et leurs colonnes) à l'intérieur d'autres lignes et colonnes. Cela signifie que vous pouvez créer des dispositions profondément imbriquées avec des colonnes et des lignes illimitées les unes dans les autres. Il élimine le besoin de sections spécialisées.

Cette nouvelle fonctionnalité a également ajouté des options de dimensionnement aux colonnes, ce qui signifie qu'il existe un moyen cohérent de taille et de style tous les éléments des conteneurs.

Comment recréer facilement une section spécialisée avec des rangées imbriquées

Le pack de mise en page de location de scooter (en particulier la section des héros de la page d'accueil) utilise une section spécialisée pour positionner les éléments clés. Cependant, au lieu d'utiliser une section de spécialité avec ses paramètres uniques, nous utiliserons les lignes imbriquées pour obtenir un effet similaire.

Remarque: Divi 5 a actuellement des sections de spécialité, mais ils seront finalement obsolètes (mais ils fonctionneront toujours et seront duplicables sur les pages où ils existent actuellement).

Ajoutez une section standard à votre page et définissez la couleur d'arrière-plan en noir (si vous avez importé la mise en page sur votre page, vous avez l'image de cercle à points à utiliser comme image d'arrière-plan avec une position centrale supérieure et une taille réelle).

Réglez la largeur de la section et la largeur maximale à 100%.

Assurez-vous que la ligne à l'intérieur de la section a une structure à deux colonnes et une division 3/5 + 2/5. Réglez également la largeur et la largeur maximale de la ligne à 100%.

Si vous souhaitez utiliser d'autres nouvelles fonctionnalités, ajoutez une seule colonne avec deux groupes de modules à l'intérieur. Vous utiliserez des options de dimensionnement pour les groupes au lieu de compter sur les structures de colonne par défaut de Divi.

La colonne de gauche abritera le côté le plus compliqué (en termes de modules), et la colonne de droite abritera la grande image en vedette.

Nous ajouterons tous nos modules pour avoir une idée de la mise en page. Cela inclut d'abord un module d'en-tête ou de texte, puis une ligne imbriquée (deux colonnes de largeur égale), un module d'image dans la colonne de gauche, et un module de texte et un module de bouton dans la colonne de droite. Sauf à la ligne parent, dans la colonne de droite, ajoutez un module d'image.

Nous ne reproduirons que l'espacement / dimensionnement sur le bureau pour illustrer comment nous pouvons recréer la section spécialisée à l'aide de lignes imbriquées. Allez-y et ajoutez le contenu et les images (encore une fois, des images sont disponibles lors de l'importation de la mise en page dans une page de votre site). Vous pouvez également modifier le texte et les styles de couleurs assortis comme bon vous semble. L'image principale de la colonne de droite doit être appliquée comme image d'arrière-plan et le module d'image avec l'image d'accent que nous aurons plus tard.

Pour la colonne de gauche de la ligne directement sous la section, ajoutez ~ 10% de rembourrage gauche pour l'espacer du côté gauche (le faire de cette façon signifie que vous devrez redimensionner les choses pour chaque point d'arrêt).

Maintenant, ouvrez les paramètres de la colonne de droite directement sous la ligne parent. Utilisez une image d'arrière-plan de colonne.

Le module d'image à l'intérieur de cette colonne doit avoir un filtre> Blend> superposition réglé. En position avancée>, l'image est absolument positionnée et ancrée en bas à gauche.

Et c'est presque cela pour la recréation de la section spécialisée (sur le bureau). Puisque nous avons utilisé la structure de la colonne prédéfinie (3/5 + 2/5 colonnes), Divi a un dimensionnement et un positionnement par défaut à divers points d'arrêt qui doivent être traités. Vous pouvez éviter cela en utilisant une colonne monoparentale mais des groupes de modules pour maintenir le contenu des côtés gauche et droit de cette section.

Mais au moins à ce stade, vous savez qu'il est possible de nicher des lignes et de recréer des sections spécialisées.

Entrer dans un nouvel avenir

Divi 5 est proche d'une version bêta, mais nous avons déjà fait des efforts importants pour réviser le système de conception de Divi.

• Disposés Flexbox (à venir bientôt) : offrira plus de contrôle sur l'alignement et la distribution de l'espace dans les lignes.
• Rows imbriqués : nidification sans fin des structures de lignes et de colonnes pour créer pas mal de complexité avec le système de lignes flottantes natifs.
• Dimensionnement avancé de la colonne : Ajout de commandes de dimensionnement manquant pour les largeurs et hauteurs de la colonne.
• Groupes de modules : permet le regroupement de modules pour une gestion et un style plus faciles.
• Variables de conception : définir et réutiliser les variables globales (couleurs, polices, espacement, images, texte) sur tous les éléments et champs.
• Couleurs relatives avec HSL (à venir bientôt) : contrôle des couleurs dynamique et cohérente basé sur la teinte, la saturation et la légèreté.

Ces caractéristiques font toutes partie de la réinvention de Divi et sont essentielles à son retour. Nous prouvons que la fondation que nous avons construite au cours des deux dernières années en valait la peine. Nous pouvons construire des fonctionnalités qui n'étaient pas possibles sur D4, et nous en faisons chacun en quelques semaines.

Divi 5 est prêt à être utilisé sur de nouveaux sites Web aujourd'hui.

Télécharger divi 5learn plus sur Divi 5