Comment déclencher des effets de survol pour un module, une colonne et une ligne simultanément

L'une des meilleures choses à propos de la création d'un site avec Divi est que chaque bloc de construction regorge d'options de conception. Chaque module, colonne, ligne et section contient des paramètres de conception pour l'état par défaut et l'état de survol. Cela ouvre la porte au déclenchement de plusieurs effets de survol lors de la combinaison de ces éléments.

Dans ce tutoriel, je vais vous montrer comment déclencher simultanément des effets de survol pour un module, une colonne et une ligne. L'astuce consiste à s'assurer que tous les éléments partagent la même taille et le même espace de survol. Mais une fois que vous avez les éléments en place, vous pouvez devenir extrêmement créatif avec vos effets de survol et vos conceptions.

Commençons.

Aperçu

Voici un exemple rapide de l'apparence simultanée du déclenchement des effets de survol de différents éléments Divi.

Téléchargez l'exemple de conception GRATUITEMENT

Pour mettre la main sur le design de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.

Abonnez-vous à notre chaîne Youtube

Passons au tutoriel, voulez-vous ?

Comprendre comment déclencher des états de survol sur plusieurs éléments Divi simultanément.

Chaque élément de Divi (section, ligne ou module) a son propre espace de survol qui correspond essentiellement à la taille de l'élément lui-même.

Chacun de ces éléments a des options de survol intégrées qui sont activées lors du survol de cet élément ou de l'un des éléments enfants qu'il contient.

Ainsi, par exemple, si vous avez ajouté des options de survol à une section, ces options de survol deviendront actives chaque fois que vous survolerez la section.

Ensuite, si vous survolez l'espace de survol de la ligne à l'intérieur de la section, vous activerez les options de survol de la ligne et de la section. C'est parce que la ligne est un élément enfant de la section.

Chaque fois que vous survolez une colonne, vous activez l'état de survol de la colonne, de la ligne et de la section.

Et enfin, chaque fois que vous survolez un module, vous déclenchez des états de survol pour le module et tous ses éléments parents (colonne, ligne et section).

Par défaut, chacun de ces éléments aura un espacement (padding) qui crée des espaces dans l'espace de survol qui permet à l'utilisateur de survoler chaque élément de manière sélective. Mais, si vous supprimez l'espacement entre chaque élément, vous pourrez déclencher les états de survol pour tous les éléments simultanément.

Cela ouvre la porte à de nombreuses combinaisons d'effets de survol qui peuvent se produire simultanément lorsque vous combinez les options de survol pour chaque élément et que vous les activez sur un espace de survol partagé.

Un exemple de combinaison d'effets de survol

Voici un exemple de comment cela fonctionne avec Divi.

Dans l'exemple ci-dessous, nous avons une ligne avec une image de fond. Au survol, nous avons une ombre de boîte retardée qui apparaît comme une sorte d'élément de conception de bordure.

À l'intérieur de la ligne, nous avons une colonne qui a été remplie d'une ombre de boîte noire. Au survol, l'ombre de la boîte de la colonne diminue progressivement pour révéler l'image d'arrière-plan de la ligne.

À l'intérieur de la colonne, nous avons un module de présentation qui a un fond bleu. Au survol, l'arrière-plan bleu est remplacé par une couleur bleue semi-transparente afin que vous puissiez voir l'image d'arrière-plan.

Puisqu'il y a un espacement entre chaque élément, nous pouvons voir l'effet de survol spécifique de chaque élément lorsque nous survolons chaque espace de survol individuel.

Mais, si nous supprimons l'espacement et donnons à la ligne une largeur personnalisée, tous les éléments partageront le même espace de survol. Ou pour le dire autrement, le module occupe tout l'espace de la colonne et de la ligne. Ainsi, lorsque nous survolons le module, les effets de survol du module, de la colonne et de la ligne sont activés simultanément.

Les délais de transition fonctionnent très bien avec cette configuration

Gardez à l'esprit que, dans l'exemple ci-dessus, il y a des délais de transition sur les effets de survol de ligne et de colonne qui mettent vraiment bien en évidence la fonctionnalité de ce concept. Si nous essayions d'ajouter une combinaison similaire d'effets de survol au module uniquement, nous ne serions pas en mesure de tirer parti de l'application de délais et de durées de transition différents à chaque effet de survol individuellement.

Recréer l'exemple de conception dans Divi

Pour vous donner quelques instructions sur la façon dont cela se déroule dans le monde réel de Divi, recréons l'exemple décrit ci-dessus.

Ce dont vous avez besoin pour commencer

Pour commencer, vous aurez besoin des éléments suivants :

1. Le thème Divi installé et actif
2. Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
3. Images à utiliser pour le contenu fictif

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Ajout de la section et de la ligne

La première chose que vous devez faire est de créer une section régulière avec une ligne à une colonne.

Mettre à jour les paramètres de ligne et de colonne

Ensuite, ouvrez les paramètres de la ligne et donnez à la ligne une image d'arrière-plan.

Ensuite, nous devons supprimer le remplissage par défaut afin qu'il n'y ait pas d'espace dans l'espace de survol entre la ligne et la colonne.

• Remplissage : 0px en haut, 0px en bas

Ajoutez ensuite l'ombre de la boîte suivante à la ligne en survol.

• Box Shadow : voir capture d'écran
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte : 0px (bureau), 10px (survol)
• Couleur de l'ombre : #063c68

Mettez ensuite à jour les options de transition avec une durée et un délai comme suit :

• Durée de transition : 500 ms
• Délai de transition : 700 ms

Ouvrez maintenant les paramètres de la colonne et mettez à jour les éléments suivants :

• Box Shadow : voir capture d'écran
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte : 200 px (ordinateur de bureau), 0 px (survol)
• Couleur de l'ombre : # 000000
• Durée de transition : 500 ms
• Délai de transition : 200 ms

Ajouter le module Blurb

Ajoutez maintenant un module de présentation à la ligne.

Ensuite, mettez à jour le texte de présentation comme suit :

• Image : [insérer l'image de présentation]
• Couleur d'arrière-plan : #0c71c3
• Couleur d'arrière-plan (survol) : rgba (12 113 195 0,35)

• Alignement du texte : au centre
• Couleur du texte : clair
• Rembourrage : 20 pixels en haut, 20 pixels en bas, 20 pixels à gauche, 20 pixels à droite

Résultat final

Découvrez le résultat final.

Réflexions finales et conseils

Comprendre comment déclencher des états de survol pour plusieurs éléments Divi simultanément ouvre des possibilités de conception passionnantes. L'exemple de cet article ne met en évidence que quelques-unes des nombreuses combinaisons d'effets de survol qui sont possibles lorsque vous combinez les états de survol d'un module, d'une colonne et d'une ligne. De plus, nous n'avons même pas exploré les possibilités offertes par la combinaison des options de survol de section, ce qui vous donnerait encore plus d'options de survol. Alors que vous explorez ces effets de survol par vous-même, voici quelques conseils et idées pour vous aider en cours de route.

• Utilisez Box Shadow au lieu de Borders - Les bordures ajoutent en fait de l'espace supplémentaire à un élément, ce qui peut provoquer des espaces de survol indésirables. Box Shadows ajoute un élément de conception qui n'ajoute pas d'espace réel.
• Explorez les effets de survol de transition d'arrière-plan - Chaque élément Divi a des options de survol d'arrière-plan qui peuvent être combinées pour des couches d'effets de survol créatifs.
• Utiliser les options de survol de transformation – Les options de survol de transformation peuvent ajouter un élément créatif tel que la mise à l'échelle et la rotation d'éléments au survol. Cependant, il peut être difficile de faire pivoter plusieurs éléments en survol car cela provoquera des sauts.
• Tirez parti des options de transition – L'ajout de différentes durées et délais de transition sur l'état de survol de chaque élément peut créer des animations de survol uniques.

J'espère que ce tutoriel vous inspirera pour explorer d'étonnantes combinaisons d'effets de survol dans Divi.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!