Comment révéler du contenu avec un effet de survol d'obturateur dans Divi

Révéler le contenu du module en survol peut avoir des avantages utiles. 1) Cela peut être un excellent moyen d'avoir un design plus compact ou élégant de votre page Web au départ. 2) Il économise de l'espace. 3) Cela peut inciter les utilisateurs à interagir avec votre page. 4) Ça a l'air sympa :). L'idée de base est de n'afficher qu'une partie du contenu du module (comme un teaser), ce qui incite les visiteurs à survoler pour en voir plus. Une fois qu'ils survolent le module, tout le contenu est révélé avec un effet de survol fluide qui s'ouvre et se ferme comme un obturateur.

Dans ce tutoriel, je vais vous montrer comment révéler le contenu d'un module avec un effet de survol de style obturateur à l'aide du constructeur Divi.

Aperçu

Voici un bref aperçu de ce que nous allons construire ensemble.

Commencer

Abonnez-vous à notre chaîne Youtube

Pour commencer, créez une nouvelle page, donnez-vous un titre à la page, puis déployez le Divi Builder pour construire sur le front-end. Sélectionnez l'option "Choisir une mise en page prédéfinie". Ensuite, dans la fenêtre contextuelle Divi Library, sélectionnez le pack Day Spa Layout et cliquez pour utiliser la mise en page de la page de destination.

Une fois la mise en page chargée sur la page, vous êtes prêt à commencer !

Ajout de séparateurs en haut et en bas du Blurb

Faites défiler la page jusqu'à la section intitulée « Expériences de spa de luxe » avec les quatre textes de présentation. Nous utiliserons la ligne avec les quatre textes de présentation pour lancer la conception.

Ajout du premier diviseur

Notre première étape consiste à ajouter des séparateurs au-dessus et en dessous du module de présentation afin de masquer notre contenu de présentation derrière. Vous pouvez penser à ces diviseurs comme aux volets d'une fenêtre qui s'ouvriront et se fermeront en vol stationnaire.

Ajoutez un module de séparation au-dessus du texte de présentation dans la première colonne et mettez à jour les éléments suivants :

Couleur de fond : #ffffff
Couleur (du séparateur) : #ffffff
Poids du diviseur : 100px
Hauteur : 100px
Marge personnalisée : 0px en bas

Le fond blanc correspond au fond de notre section puisque nous ne voulons pas le voir. Assurez-vous que le poids et la hauteur du diviseur sont les mêmes.

Ajout du deuxième diviseur (orange)

Ensuite, créez un autre séparateur directement sous le séparateur que vous venez de créer et mettez à jour les éléments suivants :

Couleur : #ff7a6b
Poids du diviseur : 2px
Hauteur : 2px
Marge personnalisée : 0px en bas

Passez ensuite à l'onglet Contenu et attribuez au diviseur une étiquette d'administrateur « diviseur orange ». Cela aidera à distinguer le diviseur du diviseur précédent (blanc) lorsque nous utilisons le mode filaire pour copier et coller le diviseur dans les autres colonnes.

Enregistrez votre page.

Copier et coller les séparateurs autour des éléments de présentation

Nous sommes maintenant prêts à copier et coller nos séparateurs au-dessus et au-dessous de chacun des textes de présentation dans chacune des colonnes. Pour rendre ce processus un peu plus facile, déployez le mode filaire en ouvrant le menu des paramètres en bas de la page et en cliquant sur l'icône filaire. (ou utilisez shft + w)

En mode filaire, recherchez la ligne contenant les textes de présentation et les séparateurs que nous venons de créer. Ensuite, copiez et collez le séparateur et le séparateur orange au-dessus et en dessous de chacun des textes de présentation afin que le résultat final ressemble à ceci.

Ensuite, revenez à la vue du bureau (shft + w) pour terminer la conception. Votre page devrait ressembler à ceci.

Personnalisation des modules Blurb

Maintenant que vous avez tous les diviseurs en place, il est temps de modifier nos modules de présentation avec quelques ajustements de style, y compris une marge personnalisée pour créer l'effet de survol de style obturateur.

Tout d'abord, utilisez la sélection multiple pour sélectionner les quatre modules de présentation. Pour ce faire, maintenez simplement ctrl (ou cmd) enfoncé et cliquez sur chaque module. Ouvrez ensuite les paramètres de l'un des modules pour déployer le modal des paramètres de l'élément.

Sous l'onglet Contenu, ajoutez quelques lignes de contenu fictif.

Ensuite, désactivez complètement l'ombre de la zone d'image.

Pour créer l'effet de survol de l'obturateur, nous devons ajouter des marges supérieure et inférieure négatives pour masquer le contenu derrière les séparateurs par défaut. Ensuite, nous définissons les marges sur 0px pour révéler le contenu en survol. Pour ce faire, ajoutez l'espacement suivant.

Marge personnalisée (par défaut) : -100px en haut, -65px en bas
Marge personnalisée (survol): 0px en haut, 0px en bas

Rembourrage personnalisé (survol): 10px en haut, 10px en bas

Vous devrez peut-être ajuster les valeurs de marge négatives en fonction de la quantité de contenu dont vous disposez. Par exemple, vous devrez peut-être avoir une marge plus négative pour un contenu de texte plus long.

Maintenant, vérifiez le résultat jusqu'à présent.

Notez que le haut et le bas de chaque module sont cachés derrière les séparateurs jusqu'à ce que vous les survoliez.

Nettoyer l'effet de survol de l'obturateur

Centrage vertical des modules

Actuellement, l'effet de survol de l'obturateur pousse le reste du contenu vers le bas de la page à chaque survol. Cela provoque des mouvements de page qui peuvent être gênants. De plus, l'action de survol ne va que vers le bas, ce qui n'est pas un véritable effet d'obturateur. Nous voulons que le contenu s'ouvre à la fois vers le haut et vers le bas à partir du centre. Pour ce faire, nous devons procéder comme suit :

Ouvrez les paramètres de ligne et égalisez les hauteurs de colonne.

Ensuite, allez dans l'onglet avancé et entrez le CSS personnalisé suivant sous l'élément principal :

align-items: center;

Cela garantira que les modules restent centrés verticalement dans la colonne, nous donnant cet effet d'obturation vers le haut et vers le bas.

Donner à la rangée une hauteur fixe

Pour empêcher l'effet de survol d'abaisser le contenu de la page ci-dessous, nous devons empêcher la ligne de croître en hauteur à chaque survol. Pour ce faire, nous devons définir une hauteur fixe pour notre ligne sur le bureau. Étant donné que la hauteur sera fixe, vous devrez vous assurer que la hauteur de la ligne est suffisamment élevée pour s'adapter à la hauteur du contenu du texte de présentation dans son état de survol. Cependant, vous ne voulez pas le rendre trop haut car vous laisserez trop d'espace vide au-dessus et en dessous des modules. Dans cet exemple, je vais définir la hauteur de ligne sur 600px. Mais, puisque nous ne voulons que la hauteur fixe définie sur le bureau uniquement, nous devons ajouter du CSS à nos paramètres de page à l'aide d'une requête multimédia.

Voici ce que tu dois faire.

Tout d'abord, dans les paramètres de la ligne, attribuez à votre ligne un identifiant CSS :

ID CSS : à hauteur fixe

Ensuite, ouvrez les paramètres de la page (sous l'onglet avancé) et ajoutez le CSS personnalisé suivant :

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

Cela donne à votre ligne une hauteur fixe de 600 pixels sur le bureau et empêche l'effet de survol de pousser le reste du contenu de la page vers le bas.

C'est ça!

Le résultat final

Découvrez la conception finale.

Et voici l'effet de survol de l'obturateur.

Il peut être judicieux de désactiver l'effet de survol sur mobile. Pour ce faire, il vous suffit de définir la marge personnalisée pour chaque module de présentation comme suit :

Marge personnalisée (tablette) : 0px en haut, 0px en bas

Dernières pensées

Cet effet de survol d'obturateur est un moyen créatif d'inciter votre public à rechercher plus d'informations sur vos différents services. Et avec la magie de Divi et quelques bribes de CSS, le résultat final est plutôt élégant. Je suis sûr qu'il y a beaucoup plus d'applications à cet effet de survol d'obturateur puisque vous pouvez utiliser n'importe quel module que vous voulez. N'hésitez pas à explorer vos propres nouveaux designs passionnants et n'hésitez pas à les partager avec nous. J'ai hâte de vous entendre dans les commentaires.

À votre santé!