Présentation de la grille CSS pour Divi 5

C'est un gros problème. Nous avons construit le meilleur constructeur de grille CSS, et il est disponible pour Divi 5 aujourd'hui. C'est mieux que Elementor. C'est mieux que les briques. Que vous souhaitiez maîtriser la grille ou simplement utiliser les nouveaux modèles de grille de Divi, vous allez adorer cette mise à jour.

Découvrez la vidéo suivante pour voir la nouvelle fonctionnalité en action.

Grille CSS pour tout le monde

Divi 5 est loin de son prédécesseur. Nous avons transformé Divi en une centrale de conception Web, avec de nouvelles fonctionnalités comme Flexbox, des unités avancées, des préréglages et des variables de conception. CSS Grid est le prochain grand pas en avant.

Dans le même temps, nous ne voulons pas que les utilisateurs existants se sentent perdus ou enterrés dans de nouveaux paramètres. Nous avons trouvé le bon équilibre entre donner aux utilisateurs avancés les outils nécessaires tout en rendant les dispositions de grille accessibles aux débutants.

Modèles de grille pour chaque occasion

Si vous n'avez jamais entendu parler de CSS Grid et que vous n'avez aucune envie d'apprendre les tenants et les aboutissants des dispositions de grille, ne vous inquiétez pas - vous n'en avez pas besoin. Profitez des nouveaux modèles de grille prédéfinis!

La beauté de l'utilisation de modèles de grille est que la grille est contrôlée au niveau du conteneur, et lorsque vous ajoutez de nouveaux articles, ils se conforment automatiquement à la grille. Il est beaucoup plus intuitif et débloque une nouvelle variété de conceptions.

Divi a des modèles de grille pour chaque situation, et les appliquer au contenu existant est facile.

Contrôle complet des experts en réseau

Si vous êtes un expert en réseau CSS chevronné, les options de grille de Divi ne vous retiennent pas. Vous pouvez aller directement au point, définir manuellement vos modèles de grille de colonne et de ligne et créer des dispositions de grille variées en utilisant l'édition de décalage, que je toucherai plus tard.

Bien sûr, vous pouvez également renoncer à l'interface et appliquer des règles de grille en utilisant également le panneau CSS personnalisé; Tout ce qui vous convient le mieux.

Options de grille intuitive pour les assembleurs Web

Si vous êtes quelque part entre les deux, alors le générateur de grille de Divi 5 brille vraiment.

Nous avons transformé les paramètres de la grille CSS en paramètres pour créer des grilles verticales ou horizontales, personnaliser les dimensions de la colonne et des lignes, la direction de la grille, l'alignement et la justification des éléments, et plus encore.

De plus, le groupe d'options de dimensionnement comprend de nouvelles options de colonne et de ligne qui vous permettent d'ajuster la largeur, la hauteur et la position d'un élément de grille individuel dans la grille.

Édition de décalage de la grille

L'un des aspects les plus uniques de Divi 5 Grid Builder est l'éditeur de décalage, que vous pouvez utiliser pour créer des motifs de grille non symétriques répétitifs au niveau du conteneur. Permettez-moi de vous donner un exemple du monde réel.

J'ai créé un modèle de blog dans la vidéo ci-dessous à l'aide de Loop Builder de Divi 5; Chaque colonne est un élément de boucle rempli de contenu dynamique. Lorsque j'activez le style de mise en page de la grille sur le conteneur parent, les colonnes se conforment automatiquement à la grille.

Je peux ajuster le nombre de colonnes, entrer des modèles de colonne ou de ligne personnalisés, modifier les tailles d'écart et faire beaucoup d'autres choses.

De plus, je peux utiliser l'éditeur de décalage pour appliquer des règles à des éléments spécifiques de la grille.

Au lieu d'un motif de colonne standard qui se répète sur chaque ligne, je peux créer des modèles de décalage en, par exemple, en ayant chaque 4ème élément de deux colonnes, à partir des deuxième et troisième élément. Ces modèles de décalage donnent aux modèles de ligne pré-construits de Divi 5 tant de variétés.

CSS Grid Demos (téléchargement gratuit)

Vous pouvez créer des dispositions spectaculaires à l'aide de la grille CSS qui n'a jamais été possible auparavant. Si vous voulez l'inspiration, regardez ces superbes dispositions créées par notre équipe de conception en utilisant la dernière version de Divi 5.

Vous pouvez les télécharger gratuitement et les tester vous-même.

Essayez Divi 5 aujourd'hui

CSS Grid pour Divi 5 est disponible aujourd'hui et est l'une des nombreuses fonctionnalités à venir cette année.

Vous pouvez suivre au fur et à mesure que nous progressons dans la version finale de Divi 5 et au-delà, avec des mises à jour toutes les deux semaines. Selon vos priorités, vous pouvez utiliser Divi 5 maintenant pour créer de nouveaux sites Web ou attendre que nous ajoutions plus de fonctionnalités, tout ce qui vous convient le mieux.

Comme indiqué dans le calendrier de libération multi-phases original de Divi 5, le divi 5 public alpha est comme «divi 5 lite». Il manque quelques fonctionnalités et peut ne pas convenir aux sites Web existants, mais il est prêt à être utilisé sur de nouveaux sites Web si vous préférez l'expérience à Divi 4.

Nous voulons que vous l'essayiez, et si vous l'aimez, utilisez-le; Quand tout le monde l'aime, nous le rendrons officiel.

Avez-vous essayé des attributs personnalisés pour Divi 5?

Au cas où vous l'auriez manqué, nous avons récemment publié les nouveaux attributs personnalisés, qui vous permettent d'ajouter n'importe quel attribut, tel que Alt, Title, Rel et Aria-Label, aux éléments et à la plupart des sous-éléments.

Divi a pris en charge des attributs spécifiques, tels que la classe et l'ID, mais vous pouvez maintenant ajouter n'importe quel attribut à n'importe quel élément. Ceci est particulièrement important pour l'accessibilité, vous permettant, par exemple, d'ajouter du texte alt aux images, des rôles et des étiquettes à des éléments non sémantiques comme un bouton basé sur l'icône.

Regardez cette vidéo pour tous les détails.

Plus de mises à jour divi 5 sont en route

2025 est l'année de Divi 5 . Le travail fastidieux est derrière nous. Nous avons construit la fondation super rapide, et maintenant il est temps pour Divi pour faire son retour.

Si vous êtes ici pour le retour Divi, faites-nous une énorme faveur et faites-le nous savoir en aimant cette vidéo et en laissant un commentaire. Cela signifie beaucoup pour nous de vous voir applaudir divi, et il est essentiel de nourrir l'algorithme et de faire passer le mot.

N'oubliez pas de nous suivre sur YouTube et abonnez-vous à la newsletter Divi afin de ne jamais manquer une mise à jour. Je vous verrai bientôt pour une autre annonce de fonctionnalité Divi 5, ce qui, je le promets, sera au coin de la rue.