Comment révéler du contenu au survol avec des onglets d'angle extensibles dans Divi (téléchargement GRATUIT)

C'est toujours amusant de découvrir de nouvelles façons créatives d'engager les utilisateurs avec votre contenu en utilisant des effets de survol uniques. Un excellent moyen de le faire est de révéler le contenu en survol à l'aide d'onglets d'angle en expansion. Cela permet à l'utilisateur de survoler un onglet dans le coin d'une colonne ou d'une image pour développer une superposition avec un contenu utile supplémentaire pour l'utilisateur.

Pour ce didacticiel, nous allons créer une mise en page Divi complètement unique qui révélera le contenu en survol à l'aide d'onglets d'angle en expansion. En fait, nous allons vous montrer comment concevoir un onglet de coin extensible pour les quatre coins d'une colonne dans Divi.

Commençons!

Aperçu

Voici un aperçu de la disposition des onglets d'angle en expansion que nous allons construire ensemble. Remarquez à quel point les effets de survol et le contenu sont magnifiquement symétriques.

Téléchargez la mise en page GRATUITEMENT

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 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.

Allons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

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

Création de la mise en page de superpositions de contenu extensible à partir de zéro

Partie 1 : Création d'un onglet d'angle extensible à partir de la position inférieure droite

Pour commencer, ajoutez une ligne à deux colonnes (un demi-moitié) à la section normale.

Avant d'ajouter un module, mettez à jour les paramètres de ligne avec une largeur de gouttière personnalisée comme suit :

• Largeur de gouttière : 4

Pour ce premier élément vedette, nous allons créer une image d'arrière-plan de colonne qui aura un onglet d'angle (à l'aide d'un module de présentation) en bas à droite de la colonne qui se développe et recouvre l'intégralité de la colonne/image au survol.

Commençons par ajouter un module de présentation.

Ajouter un module de présentation

Ajoutez un module de présentation à la colonne 1.

Nous n'allons pas le styler tout de suite. Nous avions essentiellement besoin de contenu pour pouvoir styliser la colonne qui contient le texte de présentation.

Paramètres de la colonne 1

Une fois le texte de présentation en place, ouvrez les paramètres de la ligne, puis cliquez pour modifier les paramètres de la colonne 1. Ensuite, mettez à jour les éléments suivants :

• Image d'arrière-plan [insérer l'image]
• Taille de l'image d'arrière-plan : taille réelle

REMARQUE : pour mon exemple, j'utilise les images de bière d'arrière-plan transparentes tirées du Brewery Layout Pack. Ils mesurent 128 pixels sur 359 pixels, c'est pourquoi j'utilise la taille réelle de l'image.

Bordure de la colonne 1

• Coins arrondis : 10px en bas à droite
• Largeur de la bordure droite : 2px
• Couleur de la bordure droite : #e94558
• Largeur de la bordure inférieure : 2px
• Couleur de la bordure inférieure : #e94558

CSS personnalisé et débordement

Sous l'onglet avancé, ajoutez le CSS personnalisé suivant à l'élément principal :

height: 400px;

La mise à jour suivante :

• Débordement horizontal : masqué
• Débordement vertical : caché

Cette hauteur personnalisée est nécessaire pour que notre module de présentation (onglet d'angle) étende toute la hauteur de la colonne. Et le débordement caché est nécessaire pour que nous puissions masquer la majeure partie du module de présentation en dehors de la colonne jusqu'à l'état de survol.

Ajout de contenu de module Blurb

Nous sommes maintenant prêts à commencer à personnaliser le module de présentation à l'intérieur de la colonne 1. Ouvrez les paramètres de présentation et mettez à jour les éléments suivants :

• Titre : Mangue IPA
• Corps:

  <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
  <p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
  <p>4.8% ABV / 4 IBUs</p>
  

• Image : ajouter la même image utilisée pour l'arrière-plan de la colonne

Conception du module Blurb

Donnez au texte de présentation une couleur d'arrière-plan au survol comme suit :

• Couleur d'arrière-plan (bureau) : transparent
• Couleur d'arrière-plan (survol): rgba (255,255,255,0.9)

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Placement des images/icônes : à gauche
• Police du titre : Oswald
• Style de police du titre : TT
• Taille du texte du titre : 40 px
• Poids de la police de caractères : semi-gras
• Couleur du corps du texte (bureau) : transparent
• Couleur du corps du texte (survol) : #121212

• Largeur de l'image : 100 pixels (ordinateur de bureau), 64 pixels (téléphone)
• Largeur du contenu : 100 %
• Hauteur : 100 %
• Rembourrage (bureau) : 15 % en haut, 15 % en bas, 8 % à gauche, 8 % à droite
• Rembourrage (survol) : 8 % en haut, 8 % en bas, 8 % à gauche, 8 % à droite

• Coins arrondis (par défaut) : 20px en haut à gauche
• Coins arrondis (survol): 10px en haut à gauche
• Largeur de la bordure supérieure : 4px (bureau), 2px (survol)
• Couleur de la bordure supérieure : #e94558
• Largeur de la bordure gauche : 4px (bureau), 2px (survol)
• Couleur de la bordure gauche : #e94558

Option de transformation (Bureau)

• Axe Y de l'échelle de transformation : 50 %
• Échelle de transformation Axe X : 50 %
• Transformation Translation Axe Y : 50 %
• Transformer Traduire Axe X : 30 %
• Origine de la transformation : en bas à droite

Options de transformation (survol)

• Transformer l'axe des Y de l'échelle (survol) : 100 %
• Transformer l'axe des X de l'échelle (survol) : 100 %
• Transformer Traduire l'axe Y (survol): 0%
• Transformer Traduire l'axe X (survol): 0%

Afin de retourner l'image de présentation sur le côté droit, ajoutez le CSS personnalisé suivant à la zone Contenu de présentation :

direction: rtl

REMARQUE : La direction « rtl » signifie « de droite à gauche » qui change l'ordre par défaut du contenu (de gauche à droite).

Résultat

Voyons le résultat final de notre onglet de coin en expansion à partir de la position inférieure droite. Remarquez comment il se développe pour remplir toute la colonne au survol.

Partie 2 : Création d'un onglet d'angle extensible à partir de la position inférieure gauche

Dupliquer la colonne

Pour créer l'onglet d'angle en expansion à partir de la position inférieure gauche, nous pouvons relancer la conception en dupliquant la colonne entière. Ouvrez les paramètres de ligne et dupliquez la colonne 1. Supprimez ensuite la colonne supplémentaire afin de n'avoir que deux doublons exacts.

Mettre à jour les paramètres de la colonne 2

Ensuite, ouvrez les paramètres de la colonne 2 et mettez à jour les éléments suivants :

• Coins arrondis : 10px en bas à gauche
• Largeur de la bordure droite : 0px
• Largeur de la bordure gauche : 2px
• Couleur de la bordure gauche : #e94558

Mettre à jour les paramètres de présentation

Ensuite, mettez à jour les paramètres Blurb comme suit :

• Alignement du texte : à droite
• Coins arrondis (bureau): 20px en haut à droite
• Coins arrondis (survol): 10px en haut à droite
• Largeur de la bordure gauche : 0px
• Largeur de la bordure droite : 4px (bureau), 2px (survol)
• Couleur de la bordure droite : #e94558

• Transformer traduire l'axe X (ordinateur de bureau) : -30%
• Origine de la transformation (bureau) : en bas à gauche

Assurez-vous ensuite de supprimer le CSS personnalisé dans la zone Contenu Blurb.

Résultat

Voici le résultat. Remarquez comment celui-ci est symétrique au premier et s'étend à partir de la position inférieure gauche de la colonne.

Partie 3 : Création d'un onglet d'angle extensible à partir de la position supérieure droite

Nous sommes maintenant prêts à commencer nos deux dernières conceptions d'onglets d'angle en expansion. Pour prendre une longueur d'avance, dupliquons toute la ligne contenant le texte de présentation que nous avons déjà conçu.

Mettre à jour les paramètres de la colonne 1

Ensuite, ouvrez les paramètres de la ligne en double, puis ouvrez les paramètres de la colonne 1 et mettez à jour les éléments suivants :

• Coins arrondis 10px en haut à droite
• Largeur de la bordure inférieure : 0px
• Largeur de la bordure supérieure : 2px
• Couleur de la bordure supérieure : #e94558

Mettre à jour les paramètres du module Blurb

Ensuite, ouvrez le paramètre du module de présentation et mettez à jour les éléments suivants :

• Coins arrondis (bureau): 20px en bas à gauche
• Coins arrondis (survol): 10px en bas à gauche
• Largeur de la bordure supérieure : 0px
• Largeur de la bordure inférieure : 4px (bureau), 2px (survol)
• Couleur de la bordure inférieure : #e94558
• Transformer traduire l'axe des Y (ordinateur de bureau) : -50%
• Origine de la transformation : en haut à droite

CSS personnalisé

Pour le moment, nous ne pouvons voir que la partie inférieure gauche du module de présentation qui n'affiche pas notre titre comme les deux autres présentations de la rangée ci-dessus. Afin d'afficher le titre à l'intérieur de l'onglet, nous devons repositionner le titre en bas à gauche du texte de présentation avec du CSS personnalisé.

Ajoutez le CSS personnalisé suivant à la zone Titre du Blurb :

position: absolute;
bottom: 0;
left: 15px;

Ajoutez ensuite le CSS suivant à la zone de contenu Blurb :

direction: rtl;
height: 100%;

Partie 4 : Création d'un onglet de coin extensible à partir de la position supérieure gauche

Pour notre quatrième et dernier effet de survol d'onglet de coin en expansion, nous allons le positionner dans le coin supérieur gauche pour compléter la conception symétrique de l'ensemble de la disposition de la grille.

Mettre à jour les paramètres de la colonne 2

Sous les paramètres de ligne, ouvrez les paramètres de la colonne 2 et mettez à jour les éléments suivants :

• Coins arrondis : 10px en haut à gauche
• Largeur de la bordure inférieure : 0px
• Largeur de la bordure supérieure : 2px
• Couleur de la bordure supérieure : #e94558

Mettre à jour les paramètres de présentation

Ensuite, ouvrez les paramètres du texte de présentation dans la colonne 2 et mettez à jour les éléments suivants :

• Coins arrondis (bureau): 20px en bas à droite
• Coins arrondis (survol): 10px en bas à droite
• Largeur de la bordure supérieure : 0px
• Largeur de la bordure inférieure : 4px (bureau), 2px (survol)
• Couleur de la bordure inférieure : #e94558

Mettez ensuite à jour les options de transformation :

• Transformer traduire l'axe X (ordinateur de bureau) : -30%
• Origine de la transformation : en haut à gauche

CSS personnalisé

Ajoutez ensuite le CSS personnalisé suivant dans la zone Titre du Blurb :

position: absolute;
bottom: 0%;
right: 0%;

Ajoutez ensuite le CSS suivant à la zone Contenu Blurb :

height: 100%;

Partie 4 : Finition de la conception de la mise en page

Couleur d'arrière-plan de la section

Ajoutez une couleur d'arrière-plan de section comme suit :

• Couleur de fond : #efefef

Ajout du titre

Pour créer le titre, ajoutez une ligne au milieu des deux lignes et ajoutez un module de texte à la ligne d'une colonne.

Ajoutez le contenu : "Saisonnier".

Mettez ensuite à jour les paramètres suivants :

• Police du titre 2 : Merriweather
• Poids de la police de l'en-tête 2 : gras
• Titre 2 Style de police : TT
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #999999
• Titre 2 Taille du texte : 50px (ordinateur de bureau), 30px (tablette), 24px (téléphone)
• En-tête 2 Espacement des lettres : 1em
• Rembourrage : 50 px à gauche (ordinateur de bureau), 30 px à gauche (tablette), 24 px à gauche (téléphone)

Résultat final

Découvrez le résultat final de la mise en page avec les onglets d'angle en expansion.

Et voici le design sur mobile.

Dernières pensées

Les onglets d'angle en expansion présentés dans cette conception de mise en page fonctionneront certainement pour tous les types de contenu que vous souhaitez présenter sur votre site Web Divi. Vous n'êtes pas non plus obligé d'utiliser les quatre coins. Par exemple, vous pouvez créer une disposition en grille pour les images en utilisant uniquement les onglets du coin supérieur droit pour révéler le contenu au survol. Les capacités de conception sont nombreuses avec celui-ci. S'amuser.

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

À votre santé!