Comment utiliser les effets de survol de la hauteur du diviseur de section pour révéler le contenu dans Divi
Publié: 2019-06-24Les diviseurs de section continuent d'être un élément de conception Divi populaire. Il existe de nombreux styles de séparateurs parmi lesquels choisir avec des options utiles qui facilitent l'ajout de transitions et d'arrière-plans uniques à votre page.
Dans ce tutoriel, nous allons utiliser les diviseurs de section un peu différemment. Divi vous permet de régler la hauteur et la disposition de chaque diviseur. Cela nous permet de positionner des séparateurs au-dessus de certaines zones ou contenus dans la section. En utilisant l'option de survol pour la hauteur du séparateur, nous pouvons ajouter des effets de survol uniques qui révèlent un contenu partiellement masqué. Cela fonctionne très bien pour attirer l'attention sur un appel à l'action ou un bouton particulier sur lequel vous souhaitez que les visiteurs cliquent.
Commençons.
Aperçu
Téléchargez GRATUITEMENT les effets de survol de la hauteur du diviseur de section
Pour mettre la main sur les designs 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 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.
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.
Passons au tutoriel, voulez-vous ?
Abonnez-vous à notre chaîne Youtube
Ce dont vous avez besoin pour commencer
Pour commencer, vous aurez besoin des éléments suivants :
- Le thème Divi installé et actif
- Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
- Quelques images fictives à utiliser dans la conception. J'utiliserai quelques images avec des arrière-plans transparents de notre Juice Shop Layout Pack.
Après cela, vous êtes prêt à commencer!
Implémentation de la conception de l'effet de survol de la hauteur du diviseur de section dans Divi
Création de la section et de la ligne
Tout d'abord, créons une section régulière avec une ligne à deux colonnes.
Avant d'ajouter un module, ouvrez les paramètres de la section et mettez à jour les éléments suivants :
Dégradé d'arrière-plan à gauche : #73ba57
Couleur de fond de dégradé à droite : #2a4c23
Largeur: 80%
Largeur maximale : 1080px
Alignement de la section : Centre
Ajout du titre de la section
Pour ajouter le titre de la section, créez un module de texte et mettez à jour le contenu du corps avec l'en-tête h2 suivant :
<h2>The Juice</h2>
Ensuite, mettez à jour la conception comme suit :
Police de titre 2 : Lato
Titre 2 Taille du texte : 80px
Espacement des lettres de l'en-tête 2 : -5px
Marge : -50px en haut, -40px en bas
Indice Z : -1
La marge personnalisée et l'index z permettront au texte de s'asseoir derrière l'image que nous ajouterons à l'étape suivante.
Ajout de l'image
Sous le module de texte avec le titre dans la colonne 1, ajoutez un module d'image. Ensuite, téléchargez une image qui a un fond transparent. J'utilise une image du pack de mise en page Juice Shop qui mesure 240 pixels sur 300 pixels.
L'ajustement de l'alignement de l'image au centre.
Ajout d'un appel à l'action dans la colonne 2
Dans la colonne 2, ajoutez un appel au module d'action.
Ajoutez une URL de lien de bouton pour vous assurer que le bouton s'affiche.
Styliser l'arrière-plan du CTA et le texte du titre
Mettez ensuite à jour les paramètres de conception suivants :
Couleur d'arrière-plan : #ffffff
Couleur du texte : sombre
Police du titre : Lato
Poids de la police du titre : lourd
Style de police du titre : TT
titre Taille du texte : 18px
Styliser le bouton CTA
Mettez à jour la conception du bouton comme suit :
Couleur du texte du bouton : #ffffff
Couleur d'arrière-plan du bouton : #73ba57
Largeur de la bordure du bouton : 0px
Styliser la bordure CTA
Ajoutez ensuite une bordure pour encadrer le module comme suit :
Largeur de la bordure : 10 px
Couleur de la bordure : rgba(115,186,87,0.15)
Ajout de l'effet de survol de la hauteur du séparateur pour révéler l'appel à l'action
Il est maintenant temps d'ajouter l'effet de survol de la hauteur du diviseur de section pour révéler l'appel à l'action. Pour ce faire, nous devons d'abord créer nos diviseurs de section.
Ajout du séparateur supérieur
Ouvrez les paramètres de section et le diviseur supérieur avec les paramètres suivants.
Style de séparateur supérieur : voir capture d'écran
Couleur du séparateur supérieur : #73ba57
Hauteur du séparateur supérieur : 70 % (par défaut), 0 % (survol)
Haut diviseur Flip: horizontal
Notez que la hauteur du diviseur commence par une hauteur par défaut de 70 %, puis passe à une hauteur de 0 % au survol.
Ajout du séparateur inférieur
Ajoutez ensuite un séparateur inférieur similaire à la section avec les paramètres suivants.
Style de séparateur supérieur : voir capture d'écran
Couleur du séparateur supérieur : #73ba57
Hauteur du séparateur supérieur : 70 % (par défaut), 0 % (survol)
Haut diviseur Flip: horizontal
Disposition des séparateurs : au-dessus du contenu de la section
Ce diviseur inférieur commence également par une hauteur de 70 % qui passe à 0 % en survol. Cependant, étant donné que l'option de disposition des diviseurs est définie au-dessus du contenu, le diviseur de section masque la partie inférieure de l'appel à l'action dans la colonne 1. Ensuite, au survol, le reste de l'appel à l'action est révélé.
Découvrez le résultat jusqu'à présent.
Ajout d'un effet de survol d'ombre de boîte pour une transition et un design uniques
Pour une transition et une conception uniques au survol, nous pouvons ajouter un effet de survol d'ombre de boîte qui aura lieu simultanément avec l'effet de survol de la hauteur du diviseur. Pour ce faire, ajoutez l'ombre de la boîte suivante à la section.
Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0px
Position verticale de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte : 0px (par défaut), 150px (survol)
Couleur de l'ombre de la boîte : #73ba57
Ralentir la durée de la transition
Pour une dernière étape, ralentissons un peu la durée de la transition.
Durée de transition : 700 ms
Résultat final
Voici le résultat final sur le bureau.
Si vous ne voulez pas que le contenu soit masqué sur l'écran de la tablette et du téléphone, vous pouvez facilement modifier la disposition du diviseur en « sous le contenu de la section » pour ces appareils.
Voici le design final sur tablette et téléphone.
Expérimenter avec d'autres styles de diviseurs de section pour des conceptions complètement uniques en quelques secondes
Avec cette configuration en place, vous pouvez facilement expérimenter différents styles et combinaisons de diviseurs !
Voici quelques autres que j'ai inclus dans le téléchargement gratuit.
Dernières pensées
Espérons que cet article vous a donné une petite inspiration sur la façon de créer des effets de survol de hauteur de diviseur de section uniques pour révéler le contenu. En fait, le réglage de la hauteur du diviseur en vol stationnaire peut être un excellent élément de conception en soi. Et, les exemples de conception devraient vous aider à démarrer votre propre exploration et vos propres conceptions.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!