Comment créer un Blurb Reveal en 3 étapes au survol avec Divi

De nombreux sites Web d'entreprises partagent un aperçu de leur approche à un moment donné. Lors de la création d'une section d'approche, vous pouvez la gérer de manière traditionnelle, ou vous pouvez essayer d'y ajouter plus d'interaction. Si vous cherchez un moyen de concrétiser la deuxième option, vous allez adorer cet article.

Dans ce didacticiel, nous allons vous montrer comment créer un texte de présentation en 3 étapes à l'aide des nouvelles options de dimensionnement de Divi. Nous commencerons par afficher le titre, continuerons en affichant trois flèches qui mènent aux étapes et terminerons l'effet en révélant les textes de présentation animés. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la mise en page Blurb Reveal en 3 étapes

Pour mettre la main sur la mise en page de présentation du texte de présentation en 3 étapes, vous devez d'abord la télécharger à l'aide du 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 !

Commençons à recréer !

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Fond dégradé par défaut

La première chose à faire est d'ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et ajoutez-y l'arrière-plan dégradé suivant :

• Couleur 1 : #ffa3ad
• Couleur 2: #ffcea3
• Direction du gradient : 122 deg

Survoler l'arrière-plan du dégradé

Modifiez le fond dégradé au survol :

• Couleur 1 : #000000
• Couleur 2 : #ffffff
• Type de dégradé : Radial
• Direction radiale : Haut
• Position de départ : 36 %
• Position finale : 26 %

Espacement

Passez à l'onglet Conception et ajoutez ensuite un rembourrage personnalisé en haut et en bas.

• Rembourrage supérieur : 1vw
• Rembourrage inférieur : 1vw

Débordement

Plus tard dans cet article, nous jouerons avec la hauteur de la section. Pour nous assurer que rien ne dépasse le conteneur de section, nous allons masquer les débordements dans les paramètres de visibilité.

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

Ajouter la ligne n° 1

Structure des colonnes

Une fois que vous avez défini les paramètres de la section, vous pouvez continuer en ajoutant la première ligne à la section en utilisant la structure de colonnes suivante :

Ajouter un module de texte à la ligne

Ajouter du contenu H2

Ajoutez un nouveau module de texte à la colonne de la ligne et entrez le contenu H2 de votre choix.

Paramètres de texte H2

Passez à l'onglet Conception et modifiez les paramètres de texte H2 en conséquence :

• Police de la rubrique 2 : Montserrat
• Titre 2 Poids de la police : semi-gras
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte : 2vw (ordinateur de bureau), 5vw (tablette), 6vw (téléphone)
• Espacement des lettres de l'en-tête 2 : -2px

Ajouter la ligne n° 2

Structure des colonnes

Continuez en ajoutant la deuxième ligne en utilisant la structure de colonnes suivante :

Espacement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez des rembourrages haut et bas personnalisés sur différentes tailles d'écran.

• Rembourrage supérieur : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)
• Rembourrage inférieur : 2vw (ordinateur de bureau), 4vw (tablette), 5vw (téléphone)

Affichage

Pour nous assurer que toutes les colonnes apparaissent côte à côte sur des écrans plus petits, nous allons ajouter une seule ligne de code CSS à l'élément principal de la ligne.

display: flex;

Ajouter un module de texte de flèche à la colonne 1

Ajouter un symbole

Nous utiliserons cette ligne pour ajouter les flèches animées. Ajoutez un nouveau module de texte à la première colonne de la ligne et ajoutez le symbole « ↓ » à la zone de contenu.

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte.

• Alignement du texte : à droite
• Couleur du texte : #ffa3ad
• Taille du texte : 4vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)

Espacement

Ajoutez ensuite des valeurs de marge personnalisées aux paramètres d'espacement.

• Marge supérieure : -3vw
• Marge inférieure : 8vw

Transformer Rotation

Faites pivoter le module dans les paramètres de transformation.

• Gauche : 45 degrés

Animation

Et ajoutez une animation personnalisée en utilisant les paramètres suivants :

• Style d'animation : diapositive
• Direction d'animation : Centre
• Délai d'animation : 1000 ms

Ajouter un module de texte de flèche à la colonne 2

Ajouter un symbole

Continuez en ajoutant une nouvelle ligne à la deuxième colonne et ajoutez le symbole « ↓ » à la zone de contenu.

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Alignement du texte : Centre
• Couleur du texte : #ffa3ad
• Taille du texte : 4vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)

Espacement

Ajoutez ensuite une marge supérieure personnalisée.

• Marge supérieure : 1vw

Animation

Et appliquez les paramètres d'animation suivants :

• Style d'animation : diapositive
• Direction d'animation : Centre

Ajouter le module de texte de flèche à la colonne 3

Ajouter un symbole

Sur la dernière flèche Module de texte dans la colonne 3. Ajoutez la flèche « ↓ » à la zone de contenu.

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Alignement du texte : à gauche
• Couleur du texte : #ffa3ad
• Taille du texte : 4vw (ordinateur de bureau), 6vw (tablette), 8vw (téléphone)

Espacement

Ajoutez ensuite une marge supérieure négative.

• Marge supérieure : -3vw

Transformer Rotation

Faites pivoter le module dans les paramètres de transformation.

• Gauche : 315 degrés

Animation

Et complétez les paramètres du module en ajoutant l'animation suivante :

• Style d'animation : diapositive
• Direction d'animation : Centre
• Délai d'animation : 1000 ms

Ajouter la ligne n° 3

Structure des colonnes

Une fois que vous avez terminé la deuxième ligne, vous pouvez continuer en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les valeurs de largeur et de largeur maximale dans les paramètres de dimensionnement.

• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Ajoutez ensuite des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur : 2vw (ordinateur de bureau), 8vw (tablette), 6vw (téléphone)
• Rembourrage inférieur : 2vw (ordinateur de bureau), 8vw (tablette), 6vw (téléphone)
• Rembourrage gauche : 10vw (ordinateur de bureau), 0vw (tablette et téléphone)
• Rembourrage droit : 10vw (ordinateur de bureau), 0vw (tablette et téléphone)

Affichage

Ajoutez une seule ligne de code CSS à l'élément principal de la ligne pour vous assurer que toutes les colonnes apparaissent les unes à côté des autres sur des écrans plus petits.

display: flex;

Débordement

Dans la dernière partie de ce tutoriel, nous allons modifier la hauteur de la ligne. Pour nous y préparer, nous devrons nous assurer que rien ne dépasse le conteneur de lignes en masquant les débordements dans les paramètres de visibilité.

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

Ajouter un module de texte numérique à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Ajoutez un nouveau module de texte à la première colonne et entrez un nombre.

Fond dégradé

Ajoutez un arrière-plan dégradé au module à l'aide des paramètres suivants :

• Couleur 1 : #ffa3ad
• Couleur 2: #ffcea3
• Direction du gradient : 122 deg

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police du texte : Montserrat
• Poids de la police de texte : ultra gras
• Alignement du texte : Centre
• Couleur du texte : #ffffff
• Taille du texte : 2vw (ordinateur de bureau), 4vw (tablette), 8vw (téléphone)
• Hauteur de la ligne de texte : 1 em

Espacement

Ajoutez également un rembourrage supérieur et inférieur sur différentes tailles d'écran.

• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)

Frontière

Et complétez les paramètres du module en ajoutant « 20px » à chacun des coins dans les paramètres de bordure.

Cloner le module de texte du numéro deux fois et placer les doublons dans les colonnes restantes

Continuez en clonant deux fois le module de texte dans la colonne 1 et placez les doublons dans les deux colonnes restantes de la ligne.

Changer les numéros

Assurez-vous de changer le numéro dans chacun des doublons.

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Le deuxième module dont nous avons besoin dans la première colonne est un module Blurb. Entrez un contenu de votre choix.

Sélectionnez l'icône

Continuez en sélectionnant une icône.

Couleur de l'arrière plan

Et changez la couleur de fond en blanc.

• Couleur d'arrière-plan : #ffffff

Paramètres des icônes

Passez à l'onglet Conception et modifiez les paramètres de l'icône en conséquence :

• Couleur de l'icône : #ffcea3
• Placement de l'icône : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 4vw (ordinateur de bureau), 5vw (tablette), 6vw (téléphone)

Paramètres du texte du titre

Modifiez également les paramètres du texte du titre.

• Police du titre : Montserrat
• Poids de la police du titre : gras
• Alignement du texte du titre : Centre
• Couleur du texte du titre : #000000
• Taille du texte du titre : 1vw (ordinateur de bureau), 2vw (tablette), 4vw (téléphone)

Paramètres du corps du texte

Avec les paramètres du corps du texte.

• Alignement du corps du texte : Centre
• Taille du corps du texte : 0.6vw (ordinateur de bureau), 1.3vw (tablette), 2vw (téléphone)
• Hauteur de la ligne du corps : 2,5 em

Espacement

Nous donnons également à notre module la forme souhaitée en ajoutant les valeurs de remplissage personnalisées suivantes sur différentes tailles d'écran :

• Rembourrage supérieur : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)
• Rembourrage inférieur : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)
• Rembourrage gauche : 1vw
• Rembourrage droit : 1vw

Frontière

Ajoutez ensuite « 20px » à chacun des coins dans les paramètres de bordure.

Boîte ombre

Et créez un peu de profondeur en ajoutant une subtile ombre de boîte.

• Couleur de l'ombre : rgba(0,0,0,0.07)

Animation

Enfin, ajoutez une animation au module.

• Style d'animation : diapositive
• Direction d'animation : Centre
• Délai d'animation : 1000 ms

Cloner le module Blurb deux fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé le module Blurb dans la colonne 1, vous pouvez le cloner trois fois et placer les doublons dans les deux colonnes restantes de la ligne.

Modifier le contenu des deux doublons

Assurez-vous de modifier le contenu de chacun des doublons.

Modifier les paramètres de dimensionnement de la ligne 3

Hauteur par défaut

Maintenant, pour que l'effet de survol fonctionne, nous allons ouvrir les paramètres de la dernière ligne et accéder aux paramètres de dimensionnement. Une fois là-bas, nous modifierons la hauteur sur différentes tailles d'écran.

• Hauteur : 6vw (ordinateur de bureau), 18vw (tablette), 24vw (téléphone)

Hauteur de survol

Nous ramènerons la hauteur à la normale en survol.

• Hauteur: automatique

Modifier les paramètres de dimensionnement de la section

Hauteur par défaut

Ouvrez ensuite les paramètres de la section et modifiez la hauteur en conséquence :

• Hauteur : 7vw (ordinateur de bureau), 15vw (tablette), 20vw (téléphone)

Hauteur de survol

Ramenez la hauteur en vol stationnaire et le tour est joué !

• Hauteur: automatique

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer un texte de présentation en 3 étapes à l'aide des nouvelles options de dimensionnement de Divi. Le résultat de l'exemple est très réactif et vous permet d'ajouter une interaction supplémentaire à votre page. Nous espérons que ce didacticiel vous inspirera également pour créer vos propres conceptions alternatives en 3 étapes. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.