Comment construire efficacement vos pages avec divi 5

Publié: 2025-05-29

Reconnu à partir de zéro, Divi 5 possède des performances rapides et introduit de nouvelles fonctionnalités telles que les variables de conception pour le style à l'échelle du site, les lignes imbriquées pour la profondeur de disposition infinie et la conception prédéfinie pour augmenter votre flux de travail. Avec un constructeur visuel moderne et remanié, Divi 5 vous permet de créer des sites Web professionnels avec peu d'efforts, en partant de zéro ou en tirant parti des milliers de dispositions prédéfinies.

Dans cet article, nous mettons en évidence les fonctionnalités uniques de Divi 5 et les améliorations de l'interface utilisateur, et comment elles vous aident à construire vos pages plus efficacement. De la mise en place de dispositions réactives à l'exploitation de fonctionnalités innovantes telles que les groupes de modules et Divi AI, vous verrez comment Divi 5 transforme la conception Web en une expérience plus rapide, plus intelligente et plus créative.

Une note avant de plonger: Divi 5 est prête à être utilisée sur de nouveaux sites Web, mais nous ne recommandons pas encore de convertir les sites existants en Divi 5.

Cela dit, plongeons.

Table des matières
  • 1 Comprendre l'interface utilisateur moderne de Divi 5
    • 1.1 Évolution du constructeur visuel
    • 1.2 Navigation intuitive
    • 1.3 Contrôles de conception réactifs
  • 2 Construire votre page avec les fonctionnalités uniques de Divi 5
    • 2.1 1. Variables de conception pour un style efficace
    • 2.2 2. Conception prédéfinie avec des préréglages de groupe d'options
    • 2.3 3. Viens imbriqués pour les dispositions flexibles
    • 2.4 4. Groupes de modules pour le contenu organisé
    • 2.5 5. Unités avancées pour la conception dynamique
    • 2.6 6. Intégration Divi Ai
  • 3 meilleures pratiques pour créer des pages Web avec Divi 5
  • 4 Créez des pages Web plus intelligentes avec Divi 5

Comprendre l'interface utilisateur moderne de Divi 5

L'interface de Divi 5 est une refonte complète de son prédécesseur, conçu pour la vitesse, la flexibilité et la conception intuitive sans code. Le Visual Builder propose une modification frontale en temps réel avec un panneau de paramètres plus propre, des bascules de conception réactifs et une interface de couches imbriquées pour la navigation transparente des sections, des lignes, des colonnes et des groupes de modules.

Amélioré par une base plus rapide, Divi 5 introduit des fonctionnalités uniques comme les lignes imbriquées pour la profondeur de mise en page infinie, les groupes de modules pour la gestion des modules rationalisés et les variables de conception pour un style cohérent. Ces progrès rendent divi 5 accessible aux débutants et puissants pour les professionnels, transformant la façon dont les sites Web sont construits sur WordPress.

Évolution du constructeur visuel

Visual Builder de Divi 5 possède une interface redessinée avec une expérience rationalisée puissante et conviviale. Par rapport à Divi 4, Divi 5 introduit un panneau de paramètres plus propre et plus intuitif qui réduit l'encombrement et organise logiquement les options, ce qui facilite les ajustements.

Interface divi 5

La nouvelle conception réactive fait basculer entre plusieurs vues de bureau, de tablette et mobiles, garantissant que les conceptions semblent impeccables sur tous les appareils. Ces améliorations de l'interface utilisateur rendent divi 5 accessible aux débutants tout en offrant la demande des professionnels de la précision.

Divi 5 Points de rupture réactifs

Navigation intuitive

Navigation de dispositions complexes est sans effort avec l'interface couches de Divi 5. Cette interface organise des sections, des lignes, des colonnes, des modules et de nouveaux groupes de modules en une structure claire et hiérarchique. Il vous permet de percer facilement dans les éléments de votre conception, que ce soit en ajustant un seul module ou en restructurant une section entière.

L'interface de glisser-déposer simplifie les choses, tandis que le mode wireframe fournit une vue sur les oiseaux de la structure de votre page. En combinant ces outils, Divi 5 rend la construction et la modification des dispositions complexes intuitives, gagnant du temps et réduisant la frustration.

Contrôles de conception réactifs

Divi 5 introduit des points d'arrêt personnalisables pour un contrôle précis sur la façon dont vos conceptions s'adaptent sur les appareils. Vous pouvez choisir parmi sept points d'arrêt prédéfinis ou définir des valeurs personnalisées pour faire correspondre des résolutions de périphériques spécifiques. Cela garantit des dispositions parfaites sur les pixels sans ajustements manuels CSS.

Ce contrôle granulaire, combiné à des unités avancées comme CLAMP () pour l'échelle des fluides, garantit que vos conceptions restent cohérentes et visuellement attrayantes sur toutes les tailles d'écran.

Construire votre page avec les fonctionnalités uniques de Divi 5

Divi 5 introduit des outils innovants qui redéfiniront la façon dont vous utilisez Divi. Les lignes imbriquées permettent une nidification de ligne infinie pour les dispositions complexes, tandis que les groupes de modules simplifient le style et la gestion de plusieurs modules en une seule unité. Les variables de conception permettent la cohérence à l'échelle du site pour les couleurs, les polices, etc., et les unités avancées prennent en charge les fonctions CSS dynamiques comme CLAMP () et CALC () pour les conceptions réactives. La conception prédéfinie avec un groupe d'options préréglage rationalise le style sur les éléments et Divi AI accélère la création de contenu. Ensemble, ces fonctionnalités permettent aux utilisateurs de créer efficacement des sites Web professionnels et réactifs.

Ci-dessous, nous détaillons comment utiliser ces outils pour créer une page Web.

1. Variables de conception pour un style efficace

Les variables de conception sont des paramètres globaux qui peuvent être utilisés pour les couleurs, les polices, les nombres, les images, le texte et les liens qui peuvent être appliqués à l'échelle du site. Vous pouvez définir des variables en cliquant sur l'icône des variables globales dans le constructeur visuel.

L'avantage de l'utilisation des variables de conception est que vous pouvez les mettre à jour une fois pour mettre à jour toutes les instances de cette variable, en garantissant la cohérence et le temps d'économie. Par exemple, si vous établissez des valeurs de nombre pour attribuer des calculs CLAMP () aux titres, vous établissez une hiérarchie globale pour le texte sur votre site Web. Si vous devez apporter une modification rapide, tout module de rubrique ou de texte avec les variables appliquées mettra à jour sur votre site, vous permettant d'apporter des modifications de conception rapides qui peuplent à chaque instance.

Comment utiliser les variables de conception

Pour maximiser le potentiel des variables de conception, incorporez-les tôt dans votre processus de conception. L'établissement de variables au début crée un cadre cohérent, vous libérant de vous concentrer sur la créativité plutôt que sur les tâches répétitives. Commencez par cliquer sur l'icône du gestionnaire de variables dans le constructeur visuel.

Divi 5 Variables de conception

Lorsque la boîte de dialogue apparaît, vous pouvez ajouter des variables pour créer les bases de votre conception. Par exemple, vous pouvez utiliser des variables de nombre pour établir une typographie réactive.

Les variables de nombre peuvent également être utilisées pour l'espacement. Par exemple, vous pouvez établir un espacement standard pour toutes les colonnes et les lignes sur votre site Web. L'utilisation d'une formule calc (), telle que CALC (80% - 60px) établit la largeur d'un élément de conception comme 80% du conteneur, tout en ajoutant 30px de rembourrage de chaque côté. Sélectionnez Calc dans le menu déroulant pour appliquer la formule.

calc () dans divi 5

Entrez la formule calc () dans le champ de valeur . Cliquez sur le bouton Enregistrer les variables pour l'ajouter au gestionnaire de variables.

calc () dans divi 5

Une fois vos variables enregistrées, Divi facilite les appliquer tout au long de votre conception. Pour utiliser l'espacement, cliquez sur une ligne, une colonne ou un module, accédez à l'onglet Design et recherchez le champ Largeur.

Variables de conception dans Divi 5

Enfin, cliquez sur l'icône d'insertion de contenu dynamique pour sélectionner la variable d'espacement globale.

Variables de conception dans Divi 5

Comme indiqué précédemment, l'application d'une variable de conception garantit la cohérence sur votre site. La mise à jour de ses propriétés dans le gestionnaire de variables synchronise instantanément toutes les instances, vous évitant les heures d'ajustements manuels.

Conseils pour utiliser les variables de conception

  • Organisez vos variables de manière réfléchie: les variables de noms de manière descriptifs pour les rendre faciles à identifier dans des projets complexes.
  • Tirez parti des préréglages: combinez des variables de conception avec les préréglages mondiaux de Divi pour créer des modèles de style réutilisables pour les modules, en réduisant le temps de configuration pour de nouvelles pages.
  • Réactivité de test: des conceptions de prévisualisation axées sur les variables sur les appareils du constructeur visuel pour garantir que toutes les variables fonctionnent comme prévu.

2. Conception prédéfinie avec des préréglages de groupe d'options

Le système de conception préréglé de Divi 5 révolutionne le style avec deux outils puissants: les préréglages d'éléments et les préréglages de groupe d'options. Ces fonctionnalités vous permettent d'enregistrer et de réutiliser les configurations, d'assurer la cohérence et de rationaliser votre flux de travail de projet.

Divi 5 Éléments préréglages

Divi 5 Éléments préréglages

Les préréglages des éléments vous permettent d'enregistrer la configuration d'un module - y compris le texte, les couleurs, la typographie, l'espacement et les effets de survol - pour la réutilisation sur votre site Web. Par exemple, vous pouvez créer un module de bouton entièrement de style avec une police spécifique, un arrière-plan de gradient et une animation de survol. Une fois enregistré en tant que préréglage d'élément, vous pouvez l'appliquer à n'importe quel bouton de votre site en un seul clic, en maintenant un style identique. Si vous mettez à jour le préréglage, comme modifier l'arrière-plan en couleur solide, chaque instance de ce bouton se met automatiquement à jour, éliminant automatiquement les modifications répétitives et assurant un look unifié.

Divi 5 Préréglages du groupe d'options

En revanche, les préréglages du groupe d'options se concentrent sur des groupes de style réutilisables, tels que la typographie, les frontières ou les ombres, qui peuvent être appliqués à différents éléments pour les conceptions cohésives. Par exemple, vous pouvez créer un préréglage de groupe d'options pour une bordure noire 1px avec un rayon de 5px et l'utiliser sur des boutons, des images et des lignes.

Si vous ajustez plus tard le préréglage à une bordure 2px, tous les éléments liés se mettent à jour instantanément, gagnant du temps et en maintenant la cohérence. Cette approche modulaire vous permet de mélanger et de faire correspondre les groupes de style à travers les éléments, offrant une flexibilité sans sacrifier le contrôle.

Comment utiliser efficacement les préréglages

Les préréglages d'éléments sont déjà présents lorsque vous commencez par un site de démarrage ou une disposition pré-avant. Cependant, lors de la création d'un site Web à partir de zéro, vous devrez les créer en premier. La création de ces préréglages vous permet d'accélérer le processus de conception en stylisant instantanément des modules similaires sur votre site Web.

Création d'un élément préréglé

Pour créer un élément préréglé, coiffez un module avec les paramètres souhaités. Ensuite, cliquez sur le menu prédéfini dans le coin supérieur droit des paramètres du module.

Élément préréglages en divi 5

Cliquez sur le nouveau préréglage à partir des styles actuels pour créer un nouveau préréglage.

Élément préréglages en divi 5

Donnez un nom au préréglage, choisissez si vous devez l'attribuer par défaut et enregistrez-le. Si vous le choisissez comme préréglage par défaut, chaque accordéon que vous ajoutez à votre site sera stylé de manière identique, ce qui facilite la création de vos pages Web plus rapidement et plus efficacement.

Élément préréglages en divi 5

Créer un groupe de groupes d'options

Le processus de création d'un groupe de groupe d'options est légèrement différent. Plutôt que d'appliquer un préréglage à un module, vous pouvez attribuer des préréglages aux aspects d'un module qui peut être transporté à d'autres types de modules, colonnes, lignes ou même sections. Les préréglages du groupe d'options sont parfaits pour styliser les bordures, l'ajout de commandes de transformation, de filtres, d'ombres de boîte, etc., vous permettant de garder des éléments plus petits cohérents tout au long.

Par exemple, vous souhaitez créer un style de bordure pour les images et les colonnes. Sélectionnez un module d'image, accédez à l'onglet de conception et survolez les paramètres de la bordure jusqu'à ce que l'icône de préréglage de groupe se sélectionne apparaît.

groupe d'options préréglages en divi 5

Ensuite, cliquez sur Ajouter un nouveau préréglage .

Ajouter un nouveau préréglage

Style la bordure, nommez-le et enregistrez le préréglage.

Conseils pour utiliser les préréglages basés sur la conception de Divi 5

La combinaison des préréglages d'élément et des préréglages de groupe d'options vous permet de créer un système de conception évolutif. Voici quelques conseils pour les utiliser efficacement pour créer une page Web avec Divi 5:

  • Utilisez-les pour l'efficacité: créez des préréglages d'élément ou des préréglages de groupe d'options pour accélérer la création de pages, en particulier pour les grands sites Web. Cette méthode vous évite de styliser à plusieurs reprises un module, une ligne ou une section. Vous créez des styles à l'avance et les appliquez partout où cela est nécessaire.
  • Établir la cohérence de la conception: les préréglages garantissent un style uniforme sur les éléments, renforçant votre identité de marque et votre polissage professionnel.
  • Modifier les préréglages Lorsque votre site nécessite des modifications de conception: les préréglages vous permettent de mettre à jour les styles globaux sans modifier manuellement les éléments individuels, ce qui les rend idéaux pour les itérations de conception ou les révisions du client.
  • Utilisez-les pour l'évolutivité: vous pouvez combiner des préréglages avec des variables de conception pour créer un cadre robuste pour les sites qui nécessitent souvent des mises à jour. Besoin d'ajouter une page sur la route? Les préréglages vous permettent de le faire plus rapidement et plus efficacement.

3. Vows imbriqués pour les dispositions flexibles

Les lignes imbriquées dans Divi 5 remplacent les sections de spécialité de Divi 4 par un système plus flexible et infiniment nichable. Contrairement aux lignes traditionnelles, les lignes imbriquées peuvent être placées dans des colonnes, vous permettant d'empiler des lignes, des modules ou des lignes imbriquées supplémentaires dans pratiquement n'importe quelle configuration.

Pour créer une ligne imbriquée, ajoutez-en une à une colonne - ou sous un module dans une colonne - via le constructeur visuel et remplissez-le avec des modules ou d'autres lignes imbriquées.

Rangées imbriquées dans divi 5

Cette fonctionnalité vous permet de créer des dispositions complexes et couchées. Par exemple, dans une section à propos, vous pouvez placer une ligne imbriquée à 3 colonnes sous un module de texte pour ajouter des boutons pour guider les utilisateurs vers différentes pages.

Les commandes Flexbox à venir dans Divi 5 amélioreront les options de positionnement, offrant un alignement précis et un espacement pour des conceptions complexes comme des tables de tarification, des portefeuilles ou des sections de contenu à plusieurs niveaux.

Comment utiliser les lignes imbriquées

Pour exploiter le pouvoir des rangées imbriquées, suivez ces étapes du constructeur visuel:

Commencez par insérer une ligne standard dans la disposition de votre page. Cela servira de fondation. Ensuite, cliquez sur l'onglet nouvelle ligne pour révéler les options de colonne pour votre nouvelle ligne imbriquée.

Rangées imbriquées dans divi 5

Ensuite, choisissez le module pour la première colonne. Pour cet exemple, une image.

Rangées imbriquées dans divi 5

Dans la deuxième colonne, ajoutez une autre image. Vous pouvez créer des préréglages de groupe d'options pour les bordures, les ombres de boîte et transformer les effets à partir de là.

Groupe d'options préréglages en divi 5

Vous pouvez ajouter des lignes imbriquées à l'autre colonne ou sous la première. Les possibilités sont infinies.

Rangées imbriquées dans divi 5

Vous pouvez créer des dispositions avancées qui sont profondes de plusieurs niveaux. Par exemple, vous pouvez faire une table de tarification avec une ligne imbriquée pour comporter deux boutons côte à côte, une fonctionnalité dépourvue de versions antérieures de Divi. Il existe plusieurs façons d'utiliser des lignes imbriquées , ce qui en fait une fonctionnalité polyvalente lors de la création d'une page Web avec Divi. Ils sont parfaits pour construire des sections de héros, des pages d'équipe, des en-têtes, des pieds de page et plus encore.

Conseils pour utiliser les lignes imbriquées

  • Planifiez d'abord votre mise en page: Avant d'ajouter des lignes imbriquées, esquissez le plan de la structure de votre page pour déterminer où les ajouter fournit de la valeur, comme pour les sections de héros multicouches, les tables de tarification ou les grilles d'équipe.
  • Utiliser pour les conceptions modulaires: créer des lignes imbriquées pour les composants réutilisables, comme une ligne avec une image et un texte pour les témoignages, puis les dupliquer ou les enregistrer pour un style cohérent sur l'ensemble de votre site Web.
  • Mélanger avec les groupes de modules: Associez les lignes imbriquées avec des groupes de modules pour organiser des dispositions complexes.
  • Utiliser les points d'arrêt réactifs de Divi: tester les lignes imbriquées à travers les sept points d'arrêt de Divi 5 en utilisant des bascules réactifs pour garantir que les éléments imbriqués s'alignent correctement sur tous les appareils.

4. Groupes de modules pour le contenu organisé

Les groupes de modules agissent comme des conteneurs dans Divi 5 qui vous permettent de regrouper plusieurs modules dans une colonne. Vous pouvez les styliser, les déplacer ou les dupliquer en une seule unité. Ils peuvent simplifier votre flux de travail, en particulier pour les conceptions complexes et préparer la voie à la prise en charge de Flexbox à venir, débloquer des options de positionnement encore plus précises.

À partir de là, vous pouvez ajouter des modules de conception et des lignes imbriquées ou appliquer des préréglages de groupe d'options au groupe pour créer des dispositions stylisées que vous pouvez facilement dupliquer ou enregistrer dans la bibliothèque Divi ou Divi Cloud.

Comment utiliser des groupes de modules

Pour créer un groupe de modules, ajoutez une nouvelle ligne et sélectionnez une structure de colonne. Sélectionnez le module de groupe dans les options disponibles de Divi 5.

Groupes de modules divi 5

À l'intérieur du groupe de modules, vous pouvez ajouter des modules, comme du texte, des images, des boutons ou même des lignes imbriquées. Par exemple, vous pouvez créer un groupe contenant un titre, un texte, une image et un bouton pour une section d'appel à l'action.

Groupes de modules divi 5

Une fois stylisé, vous pouvez enregistrer ou dupliquer le groupe de modules en cliquant sur le menu Ellipsis dans le coin supérieur droit du groupe.

Groupes de modules divi 5

Les groupes de modules peuvent créer des sections de membres de l'équipe, des sections d'appel à l'action, des en-têtes de page intérieure, etc. Mais plus important encore, les groupes de modules deviendront extrêmement utiles une fois que des fonctionnalités telles que Flexbox et le Builder Loop seront publiées.

Conseils pour utiliser des groupes de modules

  • Planifier les groupes de modules stratégiquement: utilisez des groupes de modules pour les composants réutilisables, comme les CTA, les témoignages, les membres de l'équipe ou les cartes de produits. Ils aident à rationaliser le processus de construction et à maintenir l'organisation.
  • Combinez les groupes de modules avec les préréglages: appliquez des préréglages de groupes d'options aux groupes de modules pour un style cohérent, tels que des ombres ou des frontières uniformes, sur plusieurs groupes.
  • Utilisez Divi Cloud: Enregistrez les groupes de modules fréquemment utilisés pour Divi Cloud pour un accès rapide sur les projets, en particulier pour les clients ayant des besoins de conception similaires.

À l'aide de groupes de modules, vous pouvez créer des conceptions modulaires et organisées qui sont faciles à gérer et à l'échelle, ce qui les rend idéales pour construire des pages Web simples ou plus complexes.

5. Unités avancées pour la conception dynamique

La fonction des unités avancées de Divi 5 prend en charge une gamme plus large d'unités CSS (PX, VW, REM,%, etc.) et des fonctions comme Calc (), Clamp (), Min () et Max () dans un seul champ de saisie, permettant des conceptions dynamiques et réactives. Par exemple, vous pouvez définir la largeur d'une section sur calc (100% - 40px) ou serrer (20px, 3vw, 40px) pour la typographie fluide qui évolue en fonction de la taille de la fenêtre.

Les unités avancées peuvent également être utilisées comme variables de conception pour définir des règles globales et maintenir des conceptions cohérentes sur votre site.

Unités avancées dans Divi 5

Comment utiliser des unités avancées

Il existe quelques façons d'utiliser des unités avancées, mais le moyen le plus efficace est de les combiner avec des variables de conception pour la cohérence de conception. Cependant, il peut y avoir des cas où vous souhaitez les affecter au niveau du module.

Un bon exemple est avec le texte. Bien sûr, vous pouvez définir des formules CLAMP () dans le gestionnaire de variables pour contrôler la taille de l'ensemble de votre site, mais que se passe-t-il si vous voulez rendre un titre plus impactant en ajoutant de l'espace pour le faire ressortir mieux? C'est là que les unités avancées entrent en jeu.

Pour démontrer, cliquez pour ajouter un module d'en-tête à votre page Web. Dans l'onglet Design, accédez au champ de dimensionnement.

Unités avancées dans Divi 5

À côté du champ de largeur, cliquez sur l' icône - pour révéler les options d'unité avancées.

Unités avancées dans Divi 5

Dans le menu déroulant, sélectionnez VW (largeur de la fenêtre) et entrez 50 . Cela indiquera à l'attention pour occuper 50% de la largeur de la fenêtre. La fenêtre est la zone visible de la fenêtre du navigateur Web. Donc, quelle que soit la largeur de la fenêtre du navigateur, ce sera toujours la moitié de la largeur de la fenêtre du navigateur.

Unités avancées dans Divi 5

Lorsque vous apercevez à quoi ressemblera le titre sur les autres tailles d'écran, vous remarquerez que le titre reste de la même largeur, malgré tout.

Conseils pour utiliser des unités avancées

  • Commencez simple: commencez par des unités de base comme PX ou% pour les conceptions simples, puis expérimentez avec CLAMP (), CALC (), VH ou VW pour des effets réactifs.
  • Utilisez CLAMP pour la typographie: appliquez la clamp () à des tailles de police ou à l'espacement pour créer des conceptions fluide et accessibles qui s'adaptent à n'importe quelle taille d'écran sans points d'arrêt manuel.
  • Combinez avec des variables de conception: Stockez les unités fréquemment utilisées pour les titres et le texte du corps en tant que variables de conception pour maintenir la cohérence et simplifier les mises à jour.

Les unités avancées vous donnent la précision de CSS personnalisés dans l'interface sans code de Divi, ce qui facilite la création de pages Web dynamiques et professionnelles qui s'adaptent parfaitement à n'importe quel appareil.

6. Intégration Divi Ai

Divi AI améliore le processus de conception en générant du texte, des images, du code ou des sections entières et des dispositions en fonction des invites en langage naturel. Il fonctionne au sein du constructeur visuel dans Divi 5, ce qui facilite l'obtention d'un peu de conception ou de rédaction en cas de besoin.

Par exemple, vous pouvez utiliser une invite comme «Créer une section de héros moderne avec un titre, un bouton et une image d'arrière-plan». Divi Ai produira une disposition entièrement de style, que vous pouvez affiner manuellement pour correspondre à votre vision.

Avec Divi AI, vous pouvez accélérer le processus de conception, surmonter le bloc de l'écrivain ou obtenir un peu de poussée créative en cas de besoin.

Comment utiliser divi ai

Pour tirer le meilleur parti de Divi AI lors de la création d'une page Web dans Divi 5, vous pouvez l'utiliser pour vous aider à écrire une copie sur la marque, à créer des images, à ajouter des CSS aux modules existants ou même à générer des sections. Divi Ai peut vous aider à créer de belles pages Web qui résonnent avec vos visiteurs.

Pour utiliser Divi Ai sur un module de texte existant, survolez la zone de texte et cliquez sur l'icône Divi Ai dans l'onglet Contenu.

activer divi ai

Une boîte de dialogue avec plusieurs options apparaîtra. Vous pouvez écrire et remplacer le contenu existant, allonger, le raccourcir ou le simplifier, réparer l'orthographe et la grammaire, le traduire ou même changer le ton.

Options de divi AI

Une fois que vous avez choisi une option, Divi AI modifiera la copie en fonction du contenu existant. Une fois terminé, vous pouvez utiliser le texte, réessayer, l'améliorer avec l'IA ou affiner le résultat avec quelques mots directeurs.

Divi ai dans divi 5

Conseils pour utiliser Divi Ai

  • Soyez précis avec vos invites: incluez des détails tels que le ton, les couleurs ou les préférences de disposition lorsque vous utilisez Divi AI pour créer des images ou des sections. Il en va de même pour le texte et le code. Plus la sortie est spécifique, meilleure est la sortie.
  • Itérer selon les besoins: si la sortie initiale n'est pas idéale, affinez votre invite ou générez plusieurs variations pour trouver le meilleur ajustement.
  • Utilisez-le pour l'inspiration: L'une des meilleures façons d'utiliser Divi AI est de réfléchir aux idées, comme générer des concepts de mise en page ou des étiquettes, même si vous prévoyez de personnaliser beaucoup votre page Web.

Meilleures pratiques pour créer des pages Web avec divi 5

L'adoption d'une approche stratégique des caractéristiques de Divi 5 est essentielle pour maximiser son potentiel. Commencez par planifier votre système de conception à l'avance. Définissez les variables de conception de base, telles que les couleurs primaires et secondaires, les liens pertinents, les paramètres de typographie et les polices.

Lorsque vous construisez votre page, établissez des préréglages de groupe d'options pour des styles réutilisables comme des effets de survol, des ombres ou une typographie, qui accélèrent votre flux de travail et maintiennent une esthétique cohérente sur votre site.

Groupe d'options préréglages en divi 5

Tester tôt et souvent est également crucial pour les résultats positifs. Utilisez des points d'arrêt réactifs de Divi 5 pour prévisualiser les unités avancées pour vous assurer qu'elles sont belles sur tous les appareils. Les bascules réactifs de Divi 5 vous donnent sept points d'arrêt à explorer, vous donnant une meilleure idée de la façon dont votre conception apparaîtra sur différentes écrans de taille.

Utilisation de points d'arrêt réactifs de Divi 5

Combinez les préréglages des éléments avec des préréglages de groupe d'options pour équilibrer la flexibilité et la cohérence. Utilisez des préréglages d'élément pour des modules spécifiques, comme un module CTA stylé. En revanche, pour maintenir l'uniformité, appliquez des préréglages de groupe d'options pour les propriétés partagées, comme les styles de bordure ou les ombres. Lorsque des mises à jour sont nécessaires, vous pouvez ajuster ces groupes prédéfinis pour les changements mondiaux plutôt que d'éditer manuellement des éléments individuels.

Enfin, gardez vos conceptions simples pour maintenir les performances et la convivialité. Évitez les lignes trop nidiques ou comptez sur des formules CALC () complexes à moins que ce soit nécessaire, car celles-ci peuvent compliquer l'édition. De même, créez des groupes de modules pour les conceptions essentielles que vous prévoyez de réutiliser sur votre site Web.

Créez des pages Web plus intelligentes avec Divi 5

Divi 5 redéfinit la conception Web WordPress, vous permettant de créer facilement des pages Web étonnantes et réactives. Son constructeur visuel moderne, ses contrôles intuitifs, ses fonctionnalités innovantes et son divi AI rationalisent le processus, garantissant des résultats professionnels avec un minimum d'effort. Quel que soit votre niveau de compétence, ces outils rendent la construction de sites Web efficaces et dynamiques plus rapidement, plus intelligents et plus créatifs.

Prêt à explorer le potentiel de Divi 5? Téléchargez la version Divi 5 Alpha aujourd'hui et expérimentez ses dernières fonctionnalités pour donner vie à votre vision. Divi 5 convient à de nouveaux sites mais n'est pas encore recommandé pour la conversion de celles existantes.

Nous aimerions entendre vos pensées! Partagez vos commentaires en commentant ci-dessous. Mieux encore, publiez sur votre expérience divi 5 sur les réseaux sociaux pour aider à passer le mot.

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