Comment maîtriser les effets de survol dans Divi 5 (Public Alpha)

Divi 5 facilite plus que jamais l’ajout et la modification d’effets de survol. Dans ce guide, nous vous présenterons toutes les améliorations clés apportées aux effets de survol et comment les utiliser dans Divi 5 pour rationaliser votre flux de travail comme jamais auparavant.

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

Télécharger Divi 5 Public Alpha

Comprendre les effets de survol dans Divi 5 (Public Alpha)

Dans Divi 5, l’un des changements significatifs concernant les effets de survol est qu’ils sont désormais plus faciles à mettre en œuvre et plus accessibles. Dans Divi 4, vous deviez activer manuellement les effets de survol pour chaque élément dans les paramètres. Ce processus pourrait être fastidieux, car vous deviez trouver l'option spécifique et activer les états de survol avant d'appliquer des modifications.

Avec la nouvelle interface de Divi 5, les effets de survol, les modes d'édition réactifs et collants sont entièrement intégrés, les rendant instantanément accessibles. Plus besoin de les activer individuellement !

Cette amélioration rationalise le processus de conception en réduisant les étapes nécessaires à l'application de conceptions avancées d'états de survol, en accélérant les flux de travail et en rendant plus intuitive la création d'interactions dynamiques.

Améliorations clés des effets de survol de Divi 5

Voici quelques-unes des principales améliorations de Divi 5 qui rendent l’application et la modification des effets de survol plus rapides et plus faciles :

• Navigation plus rapide entre les modes normal et survol : avec la commutation en un clic, il est plus facile de basculer entre les états et d'effectuer des ajustements.
• Tous les paramètres de survol dans un seul panneau : fini les paramètres dispersés. Tous les paramètres de survol d'un élément peuvent facilement être mis à jour dans le panneau des paramètres.
• Retour visuel instantané : les aperçus en temps réel affichent les modifications de l'effet de survol au fur et à mesure que vous les effectuez, accélérant ainsi votre flux de travail.
• Meilleure organisation et visibilité des paramètres : les paramètres inactifs sont grisés, ce qui vous aide à vous concentrer sur les options disponibles.

Ces améliorations rationalisent le processus de création de conceptions dynamiques et interactives avec des effets de survol.

Vous souhaitez approfondir les nouveaux paramètres ? Consultez Apprendre à connaître l’interface Divi 5 pour voir comment elle peut simplifier votre flux de travail de conception.

Obtenez l’alpha publique de Divi 5

Comment maîtriser les effets de survol dans Divi 5 (Public Alpha)

1. Accédez et modifiez tous les paramètres d'état de survol en un seul endroit

Les paramètres de survol de Divi 5 sont facilement affichés dans le panneau des paramètres, vous donnant un accès rapide à tout en un seul endroit. Ce panneau simplifié réduit le besoin de basculer entre des effets de survol distincts pour chaque option. En d'autres termes, une fois l'état des effets de survol sélectionné dans le panneau des paramètres, toutes les options sous chaque onglet (Contenu, Conception et Avancé) s'appliqueront désormais uniquement à l'état de survol de l'élément.

Cela rend l’ajout d’effets de survol personnalisés ou complexes plus rapides à mettre en œuvre.

2. Gérez facilement les paramètres de survol non pris en charge

Dans Divi 5, les paramètres de survol non pris en charge sont automatiquement grisés (inaccessibles), vous permettant de voir rapidement quelles fonctionnalités ne sont pas disponibles pour l'élément sur lequel vous travaillez. Cette visibilité évite de perdre du temps à essayer d'éliminer les options personnalisables en survol de celles qui ne le sont pas , améliorant ainsi votre flux de travail global.

3. Profitez d'un retour visuel instantané en temps réel

Le retour visuel en temps réel de Divi 5 est instantané. Vous voyez les changements immédiatement lorsque vous ajustez les paramètres, ce qui réduit les incertitudes et vous permet d'affiner les effets de survol lors de vos déplacements.

4. Modifiez rapidement les effets de survol sur votre page

Dans Divi 5, le panneau des paramètres reste en survol lorsqu’on clique sur d’autres éléments. Cela vous permet de mettre à jour rapidement vos effets de survol sur les éléments de votre page simplement en cliquant sur un élément et en effectuant une modification.

5. Prévisualisez les effets de survol en toute confiance sur le front-end

Avec l'état de survol actif dans le panneau des paramètres, vous pouvez prévisualiser la conception de l'état de survol de n'importe quel élément en un seul clic. L'état de survol restera actif de sorte que si votre élément a un effet de survol, cliquer sur cet élément révélera instantanément la conception de l'état de survol et ouvrira simultanément les paramètres de l'état de survol pour cet élément.

Comme vous pouvez le voir dans l'extrait vidéo ci-dessous, vous pouvez prévisualiser la conception de l'état de survol de chaque texte de présentation sur le front-end et il affichera le même effet de survol que la prévisualisation de la page en direct.

Donc, si vous souhaitez vérifier les conceptions de l'état de survol de votre page, cliquez simplement sur un élément de votre page pour révéler instantanément la conception de l'état de survol de cet élément. Cela permet de garantir facilement la précision de vos effets de survol sans avoir à basculer vers votre page en direct.

Télécharger Divi 5 Public Alpha

Comment créer un effet de survol dans Divi 5 : exemple rapide

Maintenant que nous avons couvert les principales fonctionnalités des effets de survol de Divi 5, passons en revue un exemple rapide pour vous montrer à quel point il est facile de créer un effet de survol dans Divi 5 :

1. Ajouter un module

Dans le constructeur visuel Divi, ajoutez le module que vous souhaitez personnaliser. Pour cet exemple, ajoutons un bouton.

2. Accédez aux paramètres de survol

Cliquez sur le module pour afficher le panneau des paramètres. Dans la barre latérale droite, cliquez sur l'icône de survol pour passer en mode survol.

3. Personnaliser les effets de survol

En mode survol, vous pouvez modifier diverses propriétés de style, telles que la couleur d'arrière-plan, les bordures, la mise à l'échelle ou les animations. Ajoutons un effet de transformation à notre bouton pour qu'il s'agrandisse au survol.

N'oubliez pas. Le panneau de paramètres simplifié de Divi 5 regroupe toutes les commandes dans un seul panneau, alors apportez les modifications souhaitées, puis cliquez sur Enregistrer une fois que vous avez terminé.

N'hésitez pas à tester différents paramètres d'effet de survol, notamment les transitions de couleur et d'arrière-plan, les animations d'images et de texte, les effets d'ombre et les commandes de transformation pour la mise à l'échelle, la rotation ou la traduction des éléments. Vous pouvez également ajuster les styles de bordure et les filtres comme le flou ou la luminosité et appliquer des animations CSS avancées pour une expérience utilisateur plus attrayante.

Divi 5 change la donne pour les conceptions d’effets de survol

Les effets de survol de Divi 5 offrent une facilité, une vitesse et une flexibilité inégalées, rationalisant votre processus de conception par rapport à Divi 4. Que vous soyez un concepteur Web chevronné ou un nouveau venu, ces fonctionnalités intuitives rendent l'ajout d'éléments interactifs à votre site plus simple que jamais.

Prêt à améliorer l'expérience utilisateur de votre site Web ? Téléchargez Divi 5 Public Alpha dès aujourd’hui et commencez à expérimenter de nouveaux effets de survol pour voir vos créations prendre vie !

Télécharger Divi 5 Public Alpha