Divi 5 fonctionnalités exclusives (jusqu'à présent)

Nous déployons de nouvelles fonctionnalités Divi 5 à un rythme rapide, et chacune est conçue pour améliorer les performances, rationaliser votre flux de travail et apporter de puissantes capacités de conception au bout des doigts. Besoin d'un aperçu? Ce message s'attaquera aux fonctionnalités exclusives Divi 5 qui méritent d'être vérifiées. Et ce n'est que le début. Nous avons de nouvelles fonctionnalités passionnantes comme Flexbox et The Loop Builder qui sortent bientôt. Nos mises à jour traitent des points de douleur courants que nous avons entendus des concepteurs et des développeurs qui utilisent quotidiennement Divi.

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

8 fonctionnalités exclusives à Divi 5 (et comment elles fonctionnent)

Divi 5 introduit des mises à niveau innovantes à la conception du site Web et utilise un éventail d'outils qui réinventent et accélèrent les tâches de conception, ce qui les rend plus intuitives. Les huit caractéristiques suivantes démontrent le potentiel de notre Divi nouvellement réapprovisionné:

1. Points d'arrêt personnalisables

Feature publiée le 6 février 2025

Divi 5 introduit une amélioration de la flexibilité dans la conception réactive avec son système de points d'arrêt personnalisable. La plupart des constructeurs de pages restreignent les utilisateurs à seulement trois vues standard, mais Divi 5 permet jusqu'à sept points d'arrêt uniques, qui peuvent tous être définis sur des valeurs de pixel personnalisées.

Cela donne aux utilisateurs plus de contrôle que les autres constructeurs populaires, qui s'en tiennent généralement à des tailles de périphériques fixes et offrent des options de réglage limitées. Alors que de nombreuses plates-formes vous obligent à concevoir dans des limites rigides, Divi 5 vous permet de cibler les largeurs d'écran exactes où votre conception a besoin d'une attention particulière.

Au-delà du trio standard

La plupart des constructeurs de sites Web s'en tiennent au bureau, à la tablette et au trio mobile, car il est simple. Divi 5 a reconnu que cela ne correspond pas à la façon dont les gens parcourent réellement le Web aujourd'hui, sur des dizaines de tailles d'écran différentes.

Avec Divi 5, vous pouvez définir des points d'arrêt pour:

• Téléphone (<767px)
• Téléphone large (<860px) - parfait pour la visualisation mobile du paysage
• Tablette (<980px)
• Tablette large (<1024px) - attrape des tablettes plus grandes et des appareils similaires
• Bureau (> 981px)
• Écran large (> 1280px)
• Ultra large (> 1440px)

D'autres constructeurs de pages WordPress offrent un contrôle de point d'arrêt, mais aucun ne correspond à la précision et à la facilité d'utilisation de Divi 5. Le système reste intuitif, avec les mêmes commandes de divi familières appliquées sur tous les points d'arrêt.

Manipulation des points d'arrêt visuel

Divi 5 introduit la mise à l'échelle de Canvas, une fonctionnalité qui la différencie de la plupart des autres constructeurs. Au lieu d'être limité à la commutation entre les prévisualistes des périphériques fixes, vous pouvez faire glisser le bord de la toile pour voir votre disposition à n'importe quelle largeur que vous souhaitez.

Cette approche vous donne des commentaires immédiats et réalistes, presque comme travailler directement dans un navigateur Web. Lors de la conception de points d'arrêt plus larges que votre fenêtre actuelle, la toile s'ajuste proportionnellement, vous obtenez donc un aperçu précis de votre conception, même sur des écrans plus petits.

L'expérience reste cohérente lorsque vous vous déplacez entre les points d'arrêt. Les commandes se comportent de la même manière, et votre disposition ne change pas de manière inattendue. Cette fiabilité réduit les conjectures et le dépannage de la conception réactive, qui peut être un mal de tête dans d'autres constructeurs de pages.

Apprendre encore plus

2. Préréglages du groupe d'options

Feature publiée le 11 mars 2025

Option Group Presets est l'une des nouvelles fonctionnalités les plus excitantes de Divi 5, élargissant vos capacités de construction d'un système de conception qui fonctionne pour vous. Les préréglages du groupe d'options sont les blocs de construction de votre conception. Alors que les préréglages d'élément vous verrouillent dans le style d'un élément particulier, les préréglages du groupe d'options de Divi 5 fonctionnent sur n'importe quel type d'élément.

Vous pouvez créer des styles réutilisables pour des propriétés de conception spécifiques, comme la typographie, les bordures, les ombres ou les arrière-plans, et mélanger ces styles sur différents éléments. Par exemple, vous pouvez créer un préréglage pour votre style de cap, un autre pour le style de bouton et un troisième pour les ombres de boîte.

Une fois configuré, vous pouvez appliquer ces styles à n'importe quel élément compatible avec un clic, qu'il s'agisse d'un module texte, d'un texte de présentation, d'un appel à l'action ou même de conteneurs comme des sections et des lignes.

Pourquoi cela compte pour votre flux de travail

Ceci est un gain de temps où vous devez mettre à jour votre conception. Supposons que vous décidiez de changer le rayon de la frontière sur les éléments de votre site. Au lieu de traquer chaque bouton, image et section, vous modifiez simplement le préréglage de la frontière une fois, et chaque élément utilisant ce préréglage met à jour automatiquement.

La capacité de travailler sur différents types d'éléments rend les préréglages du groupe d'options de Divi 5 vraiment utiles. Le même style de bordure peut s'appliquer sur un module, une colonne, une ligne ou une section. Cette compatibilité croisée d'éléments permet d'économiser des heures de travail de style répétitif.

Cette flexibilité va plus loin. Les préréglages du groupe d'options de Divi s'étendent au-delà des options de style de base. Ils couvrent également les fonctionnalités basées sur le script telles que les écrans conditionnels, les vidéos d'arrière-plan HTML et les effets de défilement. Cela vous donne un contrôle cohérent sur le style statique et les comportements interactifs sur votre site.

Apprendre encore plus

3. Unités avancées

Feature publiée le 19 mars 2025

Divi 5 a amélioré sa manipulation des unités CSS, ce qui facilite la conception réactive.

Maintenant, vous pouvez accéder à la gamme complète des unités CSS nécessaires pour la conception Web d'aujourd'hui directement à l'intérieur du constructeur. Cela signifie que vous pouvez utiliser des pixels (PX), des pourcentages (%), EMS (EM), Root EMS (REM), des unités de fenêtre (VW, VH, VMIN, VMAX) et des choix encore plus avancés comme la largeur du caractère (CH) ou les unités fractionnaires (FR) pour les grilles.

Cela peut ressembler à une mise à jour mineure au début, mais cela vous donne en fait beaucoup plus de flexibilité pour créer des dispositions réactives.

Pourquoi différentes unités comptent

Lorsque vous construisez des sites que vous souhaitez bien paraître sur les téléphones, les tablettes et les ordinateurs de bureau, l'utilisation uniquement de pixels peut créer des maux de tête. Un élément de large de 300px a l'air bien sur le bureau, mais pourrait casser votre disposition sur mobile.

Avec des unités avancées telles que la fenêtre, vous pouvez définir ce même élément sur 80 VW (80% de la largeur de la fenêtre), et il évoluera parfaitement sur tous les appareils. Ou utilisez des unités REM pour garder le texte proportionnel à votre taille de police de base, ce qui facilite les ajustements d'accessibilité.

Maintenant, combinez des unités avec des fonctions CSS comme calc (), min (), max () et clamp () et voir la vraie magie se produire. Divi 5 prend en charge tous ces éléments, vous permettant de créer des dispositions vraiment fluides qui s'adaptent à n'importe quelle taille d'écran.

Par exemple, vous pouvez définir une hauteur de section sur CALC (80VH - 60px) pour le faire prendre la plupart de l'écran tout en laissant de la place pour une en-tête. Ou utilisez la pince (16px, 4vw, 22px) pour le texte qui se développe avec l'écran mais reste dans des limites lisibles.

La flexibilité de la clamp ()

La fonction CLAMP () mérite une attention particulière car elle résout de nombreux problèmes de conception réactifs. Il vous permet de définir des tailles minimales, préférées et maximales en une seule fois, faisant de la fonction () une fonctionnalité préférée de nombreux concepteurs de sites Web.

Vous voudrez peut-être des titres qui poussent avec la taille de l'écran mais restez lisibles. Dans un module d'en-tête, vous pouvez définir la taille du texte sur CLAMP (36px, 5vw, 72px). Le titre ne sera pas inférieur à 36 pix ou supérieur à 72px, mais entre ces tailles, il évoluera à 5% de la largeur de la fenêtre.

Cela crée des transitions lisses entre les tailles d'écran sans points d'arrêt. Le texte trop grand sur les tablettes ou trop petit sur de grands moniteurs ne sera pas un problème. Votre typographie respire avec la disposition.

Nous comprenons également que différents éléments de conception ont besoin d'unités différentes, c'est pourquoi les unités avancées de Divi 5 présentent malable, pas seulement avec la typographie, mais les marges, le rembourrage et d'autres valeurs d'espacement:

• Pour le texte, les unités REM gardent tout en proportion. Si vous définissez le texte de votre corps sur 1REM et les titres sur 2.5REM, la modification de la taille de la police de base met à jour tout proportionnellement.
• Pour les dispositions, vous pouvez essayer de mélanger les unités fixes et fluides. Une barre latérale peut fonctionner le mieux à 300px, tandis que le contenu principal pourrait utiliser CALC (100% - 350px) pour remplir l'espace restant.
• Pour l'espacement, les unités EM créent un rembourrage qui évolue avec la taille du texte. Cela maintient vos proportions de conception cohérentes même lorsque les tailles de texte changent.

Joue également bien avec d'autres fonctionnalités discutées

Ce qui est particulièrement agréable, c'est que vous n'avez pas besoin d'écrire des CSS personnalisés pour utiliser ces unités. Ils sont construits directement dans l'interface visuelle. Vous pouvez expérimenter avec différentes valeurs et voir les résultats instantanément, ce qui rend la courbe d'apprentissage beaucoup plus douce que le codage de ces solutions à la main.

Ces unités sont intégrées à d'autres fonctionnalités de Divi 5. Vous pouvez stocker votre valeur, en utilisant n'importe quelle unité que vous préférez, comme variables de conception, puis les appliquer à l'échelle du site via des préréglages de groupe d'options. Cela crée une réaction en chaîne d'un bon design qui traverse tout votre site. Par exemple:

• Créez une variable numérique comme la taille de la taille: clamp (26px, 5vw, 82px); pour vos titres H1. Appliquez cette variable à votre préréglage de texte de cap. Vos titres seront désormais en douceur entre 26px sur mobile et 82px sur le bureau, avec un calcul de 5vw fluide entre ces tailles.
• Définition d'une variable de nombre pour serrer (20px, 5vw, 80px), puis en l'utilisant comme marges, vous avez un espacement serré sur une salle de respiration mobile et généreuse sur le bureau, avec une transition en douceur entre.
• Définissez un espacement de base à l'aide d'un numéro d'espace variable de variable: 20px et utilisez-le avec calc () dans vos préréglages de mise en page. Par exemple, appliquez Calc (var (–space-unit) * 2) pour les lacunes plus grandes et le calc (var (–space-unit) / 2) pour les espaces plus serrés. Lorsque vous mettez à jour la valeur de base, tout l'espacement dérivé ajuste proportionnellement.

Cela se gratte la surface. En mélangeant ces configurations, vous pouvez créer des sites Web qui exploitent la simplicité de Divi et les capacités nouvelles.

Apprendre encore plus

4. Variables de conception

Feature publiée le 3 avril 2025

La plupart des constructeurs de sites Web ont des moyens de définir des couleurs et des polices mondiales. Divi 5 prend cette idée et court avec. Vous pouvez créer des variables non seulement pour les couleurs et les polices, mais aussi pour les nombres, les images, le texte brut et même les liens Web.

Pensez à ceci: la plupart des constructeurs vous permettent de définir une couleur primaire qui se met à jour partout. Mais que se passe-t-il si vous souhaitez modifier votre numéro de téléphone sur plusieurs pages? Ou échanger une image récurrente utilisée sur votre site? Divi 5 gère facilement ces situations.

Toutes vos variables vivent dans un panneau simple dans la barre latérale du constructeur visuel. Il est propre, facile à trouver et met tout au même endroit.

Un match parfait avec les préréglages

Les variables de conception et les préréglages (deux préréglages de groupe d'options et les préréglages d'éléments) fonctionnent ensemble pour créer une conception maintenable et évolutive. Vous pouvez créer des préréglages qui font référence à vos variables, créant un système de conception flexible.

Par exemple, vous pouvez créer une variable de conception pour votre police d'en-tête principale, puis utiliser cette variable dans votre typographie de tête préréglé. Si vous décidez de modifier votre police plus tard, vous n'avez besoin de mettre à jour la variable qu'une seule fois, pas le préréglage lui-même. Cela crée une autre couche de contrôle que la plupart des constructeurs n'offrent tout simplement pas.

Cette approche à deux couches vous donne plus de contrôle que les autres constructeurs. Vous séparez à quoi ressemble quelque chose (variables) d'où il apparaît (préréglages).

Vous pouvez utiliser des variables de nombre avec des fonctions CSS comme calc () et clamp () pour créer des conceptions réactives qui s'adaptent parfaitement aux différentes tailles d'écran. Définissez une variable pour le rythme d'espacement de votre site et appliquez-le tout au long de votre disposition dans des proportions cohérentes qui évoluent à merveille.

Lorsque vous modifiez une variable, tout ce qui l'utilise se met à jour immédiatement. Cela transforme les heures de travail en quelques secondes de clic.

Comment cela aide à créer un design maintenable

Regardons quelques exemples pratiques de variables de conception en action:

• Gardez votre marque la même chose partout: configurez des variables pour vos couleurs, polices et espacement. Utilisez-les dans des préréglages sur votre site pour un look cohérent.
• Exécutez une vente de vacances: créez des variables d'image pour les graphiques de campagne et les variables de texte pour une copie promotionnelle. À la fin de la saison, mettez-les à jour une fois pour rafraîchir l'ensemble de votre site.
• Styles de bordure: créez une variable numérique pour le rayon de bordure, comme 10px, et appliquez-la à tous les préréglages de bouton, modules d'image et cartes. Si votre direction de conception change, une mise à jour affecte tous les coins arrondis sur votre site.
• Rendre les mises à jour des clients faciles: lors de la création de sites pour les clients qui devront faire des mises à jour, les variables de conception brillent. Configurer des variables pour le contenu qu'ils changeront souvent, comme les coordonnées ou les heures d'ouverture. Ils peuvent les mettre à jour sans toucher des paramètres de conception.

Les variables de conception fonctionnent également avec le constructeur de thème de Divi. Cela signifie que vos en-têtes, pieds de page et modèles utilisent le même pool variable que vos pages. Contrairement à d'autres systèmes qui vous enferment dans des motifs rigides, les variables de Divi 5 gardent les choses flexibles tout en vous aidant à rester organisé.

Apprendre encore plus

5. Viens imbriqués

Feature publiée le 17 avril 2025

Divi 5 introduit les lignes imbriquées, ce qui vous donne plus de contrôle sur les dispositions. Cet ajout vous permet de placer des lignes à l'intérieur des colonnes, créant des dispositions complexes qui n'étaient pas possibles dans les versions précédentes sans code personnalisé.

Avec les lignes imbriquées, vous pouvez créer des dispositions avancées de grille, des blocs de contenu de style magazine et des conceptions basées sur des cartes avec beaucoup moins d'efforts. Besoin d'une section avec des colonnes qui contiennent leurs propres dispositions multi-colonnes? Maintenant, vous pouvez le faire correctement dans le constructeur.

Bâtiment avec profondeur

L'ajout d'une ligne imbriquée fonctionne comme l'ajout de n'importe quel module. Sélectionnez une section, cliquez sur le bouton Plus et choisissez «Row» dans vos options. De là, vous pouvez ajouter une ligne pour créer une ligne imbriquée et la remplir de contenu.

Ce changement apparemment simple ouvre de nombreuses possibilités de conception. Vous pouvez créer des widgets de barres latérales avec leurs propres structures de colonne, construire des vitrines de produits avec des galeries imbriquées ou des tables de comparaison de fonctionnalités avec des dispositions complexes.

La meilleure partie est de savoir à quel point il s'intègre naturellement dans votre flux de travail. Il n'y a rien de nouveau à apprendre. Vous utilisez simplement des lignes dans plus d'endroits. Si vous savez comment construire avec Divi, vous savez déjà comment utiliser des lignes imbriquées.

Les lignes imbriquées résolvent de vrais problèmes pour les constructeurs de sites. Vous voulez créer une section Services où chaque service a sa propre mise en page à deux colonnes? Auparavant, vous auriez besoin de CSS personnalisés ou de contournement complexes. Maintenant, il est construit tout de suite.

Pour les sites de contenu, vous pouvez créer des dispositions de style magazine avec des largeurs de colonnes mixtes et des zones de contenu imbriquées. Chaque article ou fonction peut avoir sa propre structure de colonne tout en maintenant la disposition de la page.

Juste la première étape

Les rangées imbriquées ne sont que le début de l'évolution de la disposition de Divi 5. L'équipe travaille vers un système de mise en page complet basé sur Flexbox pour rendre Divi encore plus flexible.

Les futures mises à jour présenteront des contrôles de mise en page supplémentaires, vous offrant encore plus d'options pour créer des conceptions complexes sans code personnalisé. Cette approche méthodique garantit que chaque nouvelle fonctionnalité fonctionne parfaitement avant de passer à la suivante.

Plutôt que de se précipiter à moitié cuit, l'équipe de développement Divi construit une base solide pour l'avenir de la conception de la disposition. Chaque étape s'appuie sur le dernier, créant un système à la fois à l'épreuve des futurs et faciles à utiliser.

Apprendre encore plus

6. Groupes de modules

Fonction publiée le 1er mai 2025

La création de sites Web signifie souvent créer les mêmes modèles de contenu à plusieurs reprises. Vous concevez une carte de membre de l'équipe parfaite, puis passez vingt minutes à la recréer pour la prochaine personne. Les groupes de modules résolvent cela en vous permettant d'emballer des éléments liés ensemble dans des unités réutilisables.

Voici ce qui change: au lieu de traiter chaque pièce séparément, vous travaillez avec des blocs complets. Une carte de produit devient une chose que vous déplacez, pas six modules différents que vous devez sélectionner individuellement. Lorsque vous devez ajuster l'espacement sur cinquante cartes de produits, vous mettez à jour le modèle de groupe une fois au lieu de modifier chaque carte manuellement.

Le véritable avantage apparaît sur des sites plus grands. Les projets clients avec des dizaines de membres de l'équipe, de catalogues de produits ou de listes de services deviennent gérables. Vous ne faites pas de travail d'assemblage répétitif - vous vous concentrez sur le contenu et le réglage fin.

Création de combinaisons de modules personnalisés

Les groupes de modules ouvrent les possibilités que les modules uniques ne peuvent généralement pas gérer. Créez une carte de service où vous avez besoin d'une image d'arrière-plan, d'une icône superposée, d'un titre, d'une description et de deux boutons d'action: «Apprenez plus» et «Obtenez la citation».

Avec des groupes de modules, vous superposez ces éléments exactement comme vous les voulez. Cela devient utile pour le contenu qui ne correspond pas aux modèles standard.

Pour les tables de tarification, vous pouvez utiliser trois lignes imbriquées dans un groupe de modules: une rubrique dans la première ligne, les détails des prix dans le second et une liste de fonctionnalités dans le troisième. Cela vous donne un contrôle individuel sur les polices, les couleurs et l'espacement que le module de table de tarification intégré n'offre pas.

La même approche fonctionne pour les témoignages à l'aide de l'icône, de l'image, du titre et des modules de texte disposés dans la structure du groupe. Vous obtenez plus de flexibilité de mise en page que le module de témoignage standard tout en gardant tout gérable en une seule unité.

L'avantage clé est de combiner le contrôle de disposition de la construction à partir de zéro avec la commodité de traiter plusieurs éléments comme une seule pièce.

Construire des bibliothèques de composants réutilisables

Une fois que vous avez créé des groupes de modules efficaces, enregistrez-les en tant qu'éléments mondiaux. Cela crée une bibliothèque de composants qui se développe avec chaque projet. Lorsque vous affinez le style, votre disposition des témoignages se met à jour sur vingt pages, et votre vitrine de produit reste cohérente pendant que vous ititez sur la conception.

Au lieu de partir de zéro chaque fois que vous construisez une page, vous commencez par des dispositions cohérentes et les adaptez à de nouvelles pages et aux exigences de mise en page.

Embrassez la facilité de l'intégration de Divi Cloud. Avec cet outil, les composants peuvent passer sans effort de projet à l'autre. Supposons que vous développez un ensemble robuste de groupes de modules pour un site client particulier; Vous pouvez désormais les tirer partis comme base pour les affectations à venir. De cette façon, chaque projet obtient l'avantage des solutions antérieures mais conserve son esthétique distincte.

Fonctionne de manière transparente avec le système de conception de Divi 5

Les groupes de modules deviennent vraiment intéressants lorsque vous les utilisez avec des variables de conception et des préréglages de groupe d'options. Dites que vous construisez un groupe de témoignages: citation, nom de l'auteur, entreprise et photo.

Au lieu de définir des couleurs fixes, vous référez les variables de couleur de votre marque. Pour le style de devis, vous créez un préréglage de groupe d'options pour la typographie qui comprend votre police, taille et hauteur de ligne personnalisés. Pour le nom de l'auteur, vous appliquez un préréglage de groupe d'options de cap.

Enregistrez maintenant ce groupe de modules en tant qu'élément global. Ces préréglages de groupe d'options connectent chaque témoignage sur votre site à votre système de conception. Si le client veut un gris plus foncé, modifiez la variable une fois et que tous les modules de groupe de témoignages se mettent à jour. Si vous devez ajuster le style de devis, modifiez une fois le groupe d'options de typographie une fois; Chaque devis de témoignage changera instantanément.

Cela bat la gestion des modules individuels dispersés partout. Vos groupes de modules utilisent des préréglages de groupe d'options pour les bordures, les arrière-plans et le style de texte, donc la mise à jour de tout préréglage passe automatiquement à travers tous vos éléments groupés.

Apprendre encore plus

7. Manager d'attribut

Fonction publiée le 16 mai 2025

Vous avez stylé un bouton dans un module d'appel à l'action. Les couleurs fonctionnent et les effets de survol sont bons. Vous voulez maintenant ces mêmes styles de bouton sur un formulaire de contact, mais ne voulez pas que le titre ou l'arrière-plan du CTA.

P-coller régulier ne fonctionnera pas ici: vous obtiendrez tout ou rien. Divi 5 vous permet de copier uniquement les parties du bouton grâce à sa fonction de gestion d'attribut. Cliquez avec le bouton droit sur le CTA, choisissez quoi copier,

Collez ensuite uniquement ces styles de bouton sur le formulaire de contact.

Choisissez ce qui voyage

Divi 5 divise chaque élément en différents types d'attributs. Vous choisissez ceux à copier:

• Tous les attributs - tout est copié
• Attributs de conception - couleurs, espacement, préréglages, mais pas de texte ou d'images
• Attributs de style - juste vos changements personnalisés
• Attributs de contenu - texte et images uniquement
• Presets - Affectations prédéfinies uniquement

Dites que vous voulez un style d'un bouton mais pas son texte. Copier les attributs de conception. Vous voulez un préréglage d'arrière-plan d'une section mais pas son rembourrage? Copiez les préréglages uniquement.

Fonctionne entre différents modules

Vous pouvez copier des attributs à partir d'un type de module et les coller sur un type différent. Par exemple, vous pouvez copier à partir d'un module d'appel à l'action et le coller sur un formulaire de contact. Divi 5 détermine quels paramètres fonctionnent sur les deux modules et ignorent le reste.

Cela aide lors de la construction de sites qui ont besoin du même style sur différents types de modules. Vous n'avez pas à recréer les couleurs de votre bouton pour chaque formulaire, témoignage ou autre module qui utilise des boutons.

Raccourcis au niveau du groupe

Le système d'attributs va plus profondément avec la gestion sélective des groupes. Évitez complètement les panneaux de paramètres. Cliquez avec le bouton droit et appliquez des groupes d'attribut spécifiques directement à partir du menu contextuel.

Avez-vous copié un module avec le préréglage de bouton parfait? Vous pouvez coller juste ce bouton prédéfini sur d'autres éléments via le menu sélectif. Il n'y a pas de chasse à l'onglet et pas de plongeon.

La même précision fonctionne pour la réinitialisation. Essuyez tous les attributs de conception tout en gardant le contenu intact. Ou réinitialisez simplement les préréglages tout en préservant les remplacements de style personnalisés.

Vitesse à travers les raccourcis

Chaque action obtient des raccourcis clavier qui apparaissent directement dans les menus de contexte. Apprenez quelques combinaisons clés et les accélertes de style. Les raccourcis restent cohérents sur tous les types d'attributs, donc vos doigts apprennent rapidement les modèles.

Cela va au-delà de la sauvegarde des clics. Lors de la construction de sites avec des centaines d'éléments, ces micro-efficacités se composent en heures de temps économisé. Le travail manuel répétitif devient des actions rapides et ciblées.

Joue bien avec votre système de conception

Le gestionnaire d'attributs se connecte directement à l'écosystème prédéfini de Divi 5. Ces connexions système se déplacent lorsque vous copiez un module à l'aide de préréglages de groupe d'options et de variables de conception.

Coller des attributs qui incluent des préréglages et ces nouveaux éléments se connectent immédiatement à votre système de style mondial. Mettez à jour un préréglage plus tard, et chaque élément copié reflète automatiquement le changement. Votre système de conception reste connecté lorsque vous construisez rapidement et en double les éléments.

Apprendre encore plus

8. Paramètres Recherche et filtrage

Fonction publiée le 29 mai 2025

La création de sites Web signifie peaufiner les paramètres. Les modules Divi emballent des dizaines d'options dans leurs panneaux et la chasse à travers des onglets pour ce champ de couleur peut manger votre journée. Divi 5 ramène la fonction de recherche de Divi 4, mais le rend mieux.

Vous obtenez une barre de recherche en haut de chaque panneau de paramètres. Tapez ce dont vous avez besoin et Divi affiche uniquement les options de correspondance. Vous cherchez «Border»? Chaque cadre lié à la frontière apparaît tandis que tout le reste s'estompe. Besoin de régler le «rembourrage»? Tous les commandes d'espacement apparaissent instantanément.

Cela élimine le clic et le défilement qui ralentit votre travail. Au lieu d'ouvrir des onglets et de chasser les groupes, vous pouvez trouver ce dont vous avez besoin en quelques secondes.

Filtre par ce que vous avez changé

L'agrément en temps réel est le filtre «modifié». Cliquez dessus et ne voyez que les paramètres que vous avez déjà ajustés. Cela aide lorsque vous prenez un pack de mise en page ou un site de démarrage et que vous souhaitez voir ce qui a été personnalisé.

Dites que vous importez une disposition commerciale mais que vous souhaitez changer les couleurs. Appuyez sur le filtre modifié et repérez chaque choix de couleur personnalisé sans creuser dans chaque module. Vous pouvez voir quelles polices ont été modifiées, quel espacement a été modifié et quels effets ont été ajoutés.

Cela fonctionne également très bien pour les projets clients. Lorsque quelqu'un demande ce que vous avez personnalisé sur son site, le filtre modifié montre clairement votre travail.

Options de filtrage intelligent

Au-delà du filtre modifié, vous obtenez le tri en définissant les types. Lors de la mise à jour de votre palette, le filtre «couleurs» affiche chaque champ de couleurs à la fois. Lorsque des modifications de typographie sont nécessaires, les filtres «familles de polices» et «poids de police» révèlent des paramètres de texte sur tous vos modules.

Le système sait quels paramètres comptent le plus. Les couleurs et les polices obtiennent leurs filtres parce que ce sont les changements les plus courants que les gens apportent. Les tailles sont regroupées car les ajustements d'espacement se produisent fréquemment.

Ces filtres enregistrent des clics lorsque vous apportez des modifications à l'échelle du site. Au lieu d'ouvrir chaque module individuellement, vous travaillez à travers des listes filtrées des paramètres que vous devez modifier.

Apprendre encore plus

Comment divi 5 s'accumule par rapport aux options populaires

Le marché du builder du site Web est bondé d'options, mais Divi 5 se démarque grâce à certaines fonctionnalités véritablement nouvelles. Voici un aperçu de ce qui rend Divi 5 différent:

Ce que cela signifie pour vos projets

La combinaison de fonctionnalités de Divi 5 crée un système de conception que d'autres constructeurs ne peuvent pas tout à fait correspondre. Les groupes de groupes d'options et les groupes de modules à eux seuls mettent divi 5 avant les concurrents.

Lorsque les variables de conception fonctionnent avec des préréglages et des groupes de modules, vous obtenez quelque chose de polyvalent. Variables de référence à l'intérieur des préréglages, appliquez-les aux éléments groupés et modifiant les valeurs met à jour chaque élément automatiquement sur votre site. Ajoutez les prochaines fonctionnalités Flexbox et Loop Builder au mélange, et vous vous retrouverez à créer un site Web sans avoir besoin de codage personnalisé.

Qu'est-ce qui va suivre?

La feuille de route Divi 5 montre des mises à jour continues qui atterriront bientôt. Nos développeurs, divisés en sept équipes, travaillent à plein temps sur différentes fonctionnalités, les mises à jour de l'expédition au moins toutes les deux semaines. Voici un aperçu de ce à quoi vous pouvez vous attendre dans les semaines à venir:

Dispositions de flex

Le plus grand changement est le système complet de mise en page Flexbox, qui est à quelques semaines de l'achèvement. Cela remplacera complètement la façon dont vous construisez les dispositions. Vous obtiendrez de nouveaux modèles de lignes, un centrage vertical automatique, un emballage de contenu et une distribution d'espacement via des commandes visuelles au lieu de CSS personnalisé.

Les groupes de modules viennent d'être expédiés comme des conteneurs qui regroupent les modules liés ensemble. Combiné avec Flexbox, vous pouvez créer des dispositions de magazines, des vitrines de produits avec des hauteurs correspondantes et des alignements complexes qui nécessitaient auparavant des solutions de contournement. Les sections de spécialité disparaissent une fois que Flexbox arrive.

Mises à jour de Loop Builder et WooCommerce

S'appuyant sur le système de disposition Flexbox et les groupes de modules, le constructeur de boucle vous permettra de répéter quoi que ce soit: modules uniques, groupes ou sections entières. Contrairement aux autres constructeurs qui vous verrouilleront dans les modèles, vous définiras ce qui se répète et le connectera au contenu dynamique. Les boucles imbriquées fonctionneront également. Par exemple, les catégories de blog qui traverseront les articles, chaque publication montrant des critiques en boucle.

Les modules WooCommerce seront reconstruits à partir de zéro à l'aide de l'architecture de Divi 5. Les modules actuels fonctionneront par compatibilité vers l'arrière mais n'interagiront pas avec les préréglages ou les variables. Les nouveaux modules de produits seront terminés en quelques semaines, mettant le support WooCommerce sur la bonne voie pour la version bêta.

Couleurs avancées

Les couleurs relatives avec teinte, saturation et le support de légèreté (HSL) vous permettent de créer des relations de couleur mathématique. Réglez votre couleur primaire une fois, puis générez automatiquement des variations: «Blue primaire mais 20% plus léger» ou des nuances complémentaires qui mettent à jour lorsque vous modifiez la base.

Planification bêta et migration

La version bêta commence lorsque les trois objectifs sont terminés: amélioration de la compatibilité en arrière pour les sites existants, le support de module WooCommerce complet et les corrections de bogues continues basées sur les commentaires alpha.

Si nous allons par progression actuelle, cela suggère une version bêta dans quelques mois. L'équipe travaille également sur le backend afin que les sites divi 4 puissent migrer sans nécessiter de modifications. Les modules tiers du marché Divi ont besoin d'une compatibilité complète.

Pour les nouveaux projets, Divi 5 Alpha offre suffisamment de capacité pour la plupart des versions. Les améliorations des performances à elles seules justifient le commutateur. Les sites existants bénéficient de l'attente de la version bêta, sauf si de nouvelles fonctionnalités spécifiques sont nécessaires.

Lorsque la version bêta arrive, vous obtenez l'ensemble de fonctionnalités complet plus la confiance des tests approfondis. La version officielle suit peu de temps après, vous offrant une base solide pour les projets futurs.

Prêt à essayer Divi 5? Voici comment commencer

Ces fonctionnalités exclusives divi 5 fonctionnent ensemble pour créer quelque chose de différent. Au lieu de combattre votre constructeur pour des conceptions cohérentes, vous avez mis en place des systèmes qui se maintiennent. Au lieu de reconstruire les mêmes styles à plusieurs reprises, vous créez une fois et réutilisez partout - et ce n'est que le début!

Alors, allez de l'avant sur la courbe aujourd'hui en créant un nouveau site Web en utilisant Divi 5. Il est disponible pour tous les membres Divi gratuitement. Rendez-vous simplement dans la zone de votre compte et prenez une copie.

Une fois que WordPress est installé, téléchargez DiVI 5 comme vous téléchargez un thème normal: Apparence> Thèmes> Ajouter nouveau> Télécharger le thème. Activez le thème, connectez-vous avec vos informations d'identification et construisez! Votre première version vous montrera pourquoi nous avons tout reconstruit à partir de zéro.

N'oubliez pas: utilisez maintenant Divi 5 pour de nouveaux sites Web. Nous ne recommandons pas de migrer des sites existants pendant la phase alpha.