5 astuces pour naviguer dans l’interface Divi 5 comme un pro

Avec la sortie de Public Alpha de Divi 5, les utilisateurs peuvent désormais explorer les puissantes améliorations qui se préparent dans les coulisses d’Elegant Themes. Divi 5 est une mise à jour majeure, offrant une base remaniée pour une vitesse, une stabilité et une évolutivité améliorées. Que vous soyez un pro chevronné ou que vous débutiez tout juste avec Divi, ce nouveau Visual Builder vous permettra de créer des sites Web plus efficacement, avec moins d'étapes et des temps de chargement plus rapides. Participez à cette nouvelle mise à jour d’Elegant Themes et parcourez-la comme un pro.

Découvrez-en plus sur la Divi 5 Public Alpha et comment la télécharger.

Télécharger Divi 5 Public Alpha

5 astuces pour maîtriser l’interface Divi 5

Naviguer dans l’interface de Divi 5 peut être passionnant pour les utilisateurs nouveaux et expérimentés. L'interface mise à jour offre une nouvelle approche de la création de sites Web avec son design moderne et ses fonctionnalités améliorées. Voici quelques conseils que nous avons partagés pour vous aider à vous familiariser avec l’interface :

1. Accédez rapidement aux éléments via la vue Calques

Le panneau Calques n’est pas nouveau dans Divi 5. Nous avons la vue Calques dans Divi 4. Cependant, il a reçu une interface utilisateur améliorée avec un accès plus facile dans la barre latérale gauche. C'est également l'un des principaux panneaux ancrables que vous souhaiterez garder en vue lors de vos constructions. Cela change la donne dans la gestion des mises en page complexes, en particulier lorsque les éléments se chevauchent ou deviennent difficiles à sélectionner. Il est également utile de rechercher/filtrer selon les différents éléments que vous recherchez pour trouver rapidement plusieurs éléments sur de grandes pages.

Ouvrez le panneau Calques sur la gauche de votre écran pour afficher tous les éléments de votre mise en page, quelle que soit leur position ou leur visibilité sur le canevas. Vous pouvez sélectionner n’importe quel calque directement à partir de là, même s’il est caché derrière un autre module ou section.

Conseil de pro

Gardez toujours la vue des calques visible comme l’un de vos panneaux ancrés. C’est tout simplement trop utile et pratique pour l’ignorer.

Exemple pratique

Supposons que vous souhaitiez mettre à jour tous les boutons CTA de votre page avec du nouveau contenu. Dans Divi 5, vous pouvez utiliser le panneau des calques pour rechercher l’élément (bouton) souhaité afin de tous les afficher. Ensuite, d'un simple clic sur chaque bouton, vous pouvez mettre à jour les paramètres dans le panneau des paramètres, qui apparaîtra immédiatement. Ce flux de travail transparent change la donne pour la gestion de conceptions complexes et riches en contenu.

2. Accélérez les modifications avec les panneaux ancrables et en un seul clic

Les panneaux ancrables de Divi 5 et les fonctionnalités d'édition en un clic vous permettent de garder plusieurs panneaux de paramètres ouverts tout en apportant des modifications rapides en un seul clic. Cela permet des ajustements rapides et une navigation plus fluide dans les modules sans ouvrir et fermer les panneaux à plusieurs reprises.

Conseil de pro

Gardez les panneaux pertinents ancrés sur le côté de votre écran pour un accès rapide, en particulier lorsque vous travaillez simultanément sur plusieurs sections ou modules. Cela réduit le nombre de clics nécessaires et accélère votre flux de travail.

Exemple pratique

En reprenant l'exemple de notre premier conseil, vous devez ajuster le texte des boutons de tous les modules. En ancrant les calques et les panneaux des boutons du même côté, vous pouvez facilement basculer entre eux pour des modifications rapides en un seul clic, ce qui vous évite d'avoir à rouvrir les panneaux à chaque fois que vous devez effectuer des ajustements ou déplacer votre curseur d'un côté à l'autre. extrémité de l’écran à l’autre. Cette configuration est idéale lorsque vous travaillez sur plusieurs sections nécessitant des mises à jour.

3. Rationalisez la navigation avec le fil d'Ariane du panneau de paramètres

Le fil d’Ariane dans le panneau des paramètres est une fonctionnalité unique dans Divi 5. Le fil d’Ariane permet aux utilisateurs de naviguer vers l’un des éléments parents d’un élément enfant dans Divi directement depuis le panneau des paramètres. Un élément parent est essentiellement le conteneur de l’élément enfant. Voici une illustration simple de la structure parent et enfant des éléments Divi.

Même les modules ont des éléments enfants (comme un accordéon ou un formulaire de contact) et les sections ont « Page » comme parent, ce qui rend le fil d'Ariane encore plus utile. Auparavant, dans Divi 4, il fallait s’appuyer sur la vue des calques ou tenter de retrouver l’élément parent en cliquant à l’intérieur du builder.

Lorsque vous ouvrez les paramètres d’un module dans Divi 5, un fil d’Ariane apparaît en haut du panneau des paramètres. Ce sentier affiche votre position actuelle et vous permet de revenir à l'élément parent en un seul clic. Vous trouverez ci-dessous un exemple de ce qu'est le fil d'Ariane lorsqu'un élément en accordéon est sélectionné. Vous verrez « Accordéon » comme l'un des liens dans le menu fil d'Ariane car il s'agit du parent immédiat de l'élément accordéon sélectionné.

Le fil d'Ariane est particulièrement utile lors de la conception de formulaires de contact ou de CTA qui utilisent plusieurs éléments parents pour créer une seule conception. Une fois que vous avez conçu le module, vous pouvez facilement accéder à l'élément de colonne ou de ligne pour ajuster la conception en conséquence.

Exemple pratique

Supposons que vous conceviez un formulaire de contact et que vous souhaitiez incorporer la ligne et la section dans votre conception. Vous pouvez apporter vos modifications et utiliser le fil d'Ariane pour accéder aux éléments parents dont vous avez besoin, le tout sans jamais fermer le panneau.

4. Conception réactive sans effort avec mise à l'échelle du canevas

Dans Divi 5, vous pouvez redimensionner le canevas en temps réel pour simuler l’apparence de votre conception sur les appareils mobiles, tablettes et ordinateurs de bureau. Cet outil vous permet de redimensionner visuellement le canevas sans quitter le générateur, ce qui signifie que vous n'avez plus besoin de passer en mode aperçu ou de redimensionner manuellement la fenêtre de votre navigateur. Le constructeur de Divi 5 s'adapte automatiquement à mesure que vous redimensionnez le canevas pour afficher les modifications pour cette taille d'appareil spécifique, ce qui facilite l'ajustement des conceptions réactives.

Conseil de pro

Utilisez Canvas Scaling pour garantir que vos conceptions mobiles soient parfaites. Ajustez le remplissage, les polices et l'alignement en mode mobile afin que votre mise en page fonctionne de manière transparente sur des écrans plus petits.

Exemple pratique

Après avoir apporté des modifications au texte, vous devez maintenant vous assurer que le design s'affiche bien sur mobile. En utilisant Canvas Scaling, vous pouvez facilement ajuster la mise en page pour les vues mobiles et tablettes sans basculer entre différents appareils ou écrans.

Pour en savoir plus, découvrez comment maîtriser l’édition réactive dans Divi 5.

5. Rationalisation de différentes couches d'interaction sur différents modes d'affichage

Divi 5 rationalise la gestion des effets de survol, des éléments collants et du design réactif. Dans Divi 4, vous deviez activer ces paramètres pour chaque élément manuellement et basculer souvent entre différents panneaux, ce qui prenait du temps pour appliquer et prévisualiser les effets. Divi 5 simplifie ce processus en rendant les couches d'interaction disponibles directement dans le même panneau de paramètres, réduisant ainsi le nombre d'étapes et de clics nécessaires pour affiner votre conception.

Comment ça marche

Dans Divi 5, les options de conception pour les états de survol, collant et réactif sont intégrées directement dans le panneau de paramètres de chaque module. Vous pouvez rapidement basculer entre les états par défaut, en survol et persistant en cliquant sur les onglets dans les paramètres du module. Cette interface intuitive vous permet d'appliquer des effets de conception, comme des animations de survol ou des comportements persistants, sans naviguer dans différents menus ni les coder manuellement.

Conseil de pro

Basculez entre les modes survol et collant pour prévisualiser le comportement de vos éléments de conception sur tous les appareils et lors des interactions. Divi 5 permet de voir facilement les effets en temps réel et de les ajuster rapidement. Auparavant, dans Divi 4, vous deviez appliquer vos modifications à chaque fonctionnalité respective, ce qui prenait du temps.

Exemple pratique

Nous avons ajouté un bouton de consultation sur notre page d'accueil. Avec les couches d'interaction simplifiées de Divi 5, vous pouvez basculer entre les paramètres réactifs, le survol et les états collants directement dans le même panneau de paramètres, garantissant que chaque élément se comporte parfaitement sur tous les appareils. Nous allons commencer par changer la couleur de fond du bouton de notre page d'accueil et vérifier son comportement sur les paramètres responsive.

Nous continuerons en passant en mode survol, en changeant la couleur d'arrière-plan du bouton et en revenant au mode bureau après avoir effectué les modifications. Cela montrera que le bouton de la version de bureau aura sa couleur d'origine (noire) avant que le curseur ne soit déplacé vers lui.

Enfin, nous activerons le mode collant avant de vérifier le comportement du bouton en mode collant. Cela vous permet d'appliquer et de prévisualiser rapidement les effets tout en faisant défiler différentes vues sans quitter le générateur ni activer des paramètres séparés.

Apprenez-en davantage sur la façon dont Divi 5 simplifie les processus de conception ici.

Naviguer dans Divi 5 comme un pro

En maîtrisant ces fonctionnalités essentielles de l’interface Divi 5, vous pourrez naviguer plus efficacement dans vos conceptions et éviter les frustrations courantes qui peuvent ralentir votre flux de travail. Qu'il s'agisse d'utiliser le panneau Calques pour gérer les éléments qui se chevauchent ou de profiter de l'édition en un clic et de la mise à l'échelle du canevas pour une conception réactive, ces conseils vous aideront à tirer le meilleur parti de Divi 5.

Commencez à expérimenter ces outils dans Divi 5 Public Alpha et faites passer vos conceptions au niveau supérieur. Pour plus de conseils et de ressources pour démarrer avec Divi 5, consultez notre présentation complète de l’interface et d’autres articles de blog.

Télécharger Divi 5 Public Alpha