Comment créer de belles transitions de section à l'aide des nouvelles fonctionnalités de conception de Divi

Dans ce tutoriel Divi, nous allons vous montrer comment créer de belles transitions de section en utilisant rien d'autre que les options Divi intégrées.

Les sections sont la base de tout le contenu que vous partagez sur votre site Web. Chaque section est un chapitre et passer d'une section à l'autre fait partie du processus de narration. Rendre cette transition aussi douce que possible mettra l'accent sur le message que vous essayez d'articuler. Pour vous aider, nous allons vous montrer comment créer de belles transitions de section pour votre prochain projet de site Web.

Aperçu

Avant de plonger individuellement dans toutes les différentes transitions de section, examinons ce à quoi vous pouvez vous attendre :

Comment créer de belles transitions de section à l'aide des nouvelles fonctionnalités de conception de Divi

Abonnez-vous à notre chaîne Youtube

Recréer des sections

Nous allons commencer par recréer les deux sections que nous utiliserons dans tous les exemples. Dans ces deux sections, nous avons utilisé le rembourrage nécessaire pour tirer le meilleur parti des transitions. Cependant, si vous utilisez des sections avec une hauteur différente, il se peut que vous deviez légèrement ajuster les arrière-plans dégradés utilisés pour correspondre parfaitement aux sections.

Créer la première section

Commencez par créer la première section standard et choisissez une ligne pleine largeur.

Paramètres de section

Nous aurons besoin d'un rembourrage supérieur et inférieur de « 300px » que vous pouvez ajouter dans la sous-catégorie Espacement de l'onglet Conception.

Premier module de texte

Ensuite, nous allons ajouter un module de texte à notre ligne pleine largeur. Tapez le texte que vous souhaitez voir apparaître et accédez à l'onglet Conception. Dans l'onglet Conception, utilisez les paramètres suivants pour la sous-catégorie Texte :

• Police du texte : Comfortaa
• Taille de la police de texte : 50
• Hauteur de la ligne de texte : 1,7 em
• Orientation du texte : Centre

Deuxième module de texte

Faites de même pour le deuxième module de texte, mais utilisez plutôt les paramètres suivants :

• Police du texte : Comfortaa
• Taille de la police de texte : 16
• Hauteur de la ligne de texte : 1,7 em
• Orientation du texte : Centre

Module de boutons

Enfin, nous allons également ajouter un module de bouton. Commencez par choisir l'alignement central dans l'onglet Conception.

Ensuite, ouvrez la sous-catégorie Button, activez l'option "Utiliser des styles personnalisés pour le bouton" et choisissez "20" comme taille de texte du bouton.

Tout en restant dans la sous-catégorie Bouton, utilisez l'arrière-plan dégradé suivant pour le bouton :

• Première couleur : #2b87da
• Deuxième couleur : #29c4a9
• Type de dégradé : Linéaire
• Direction du gradient : 162 deg
• Position de départ : 0%
• Position finale : 100 %

Créer une deuxième section

Ajoutez une autre section standard mais choisissez plutôt une ligne à trois colonnes.

Paramètres de section

La deuxième section utilisera également un rembourrage '300px' pour le haut et le bas.

Module de présentation

Ensuite, nous allons ajouter un module Blurb à la première colonne de la ligne. Une fois que vous avez décidé du texte que vous souhaitez afficher, faites défiler l'onglet Contenu, activez l'option "Utiliser l'icône" et sélectionnez une icône.

Une fois cela fait, passez à l'onglet Conception et utilisez les paramètres suivants pour la sous-catégorie d'icônes :

• Couleur de l'icône : #515151
• Placement des images/icônes : en haut
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 55 px

Ensuite, assurez-vous que les paramètres suivants s'appliquent à la sous-catégorie Texte d'en-tête :

• Police d'en-tête : Comfortaa
• Alignement du texte de l'en-tête : Centre
• Taille de la police d'en-tête : 18

Et enfin, voici les paramètres de la sous-catégorie Corps de texte :

• Police de caractère : Comfortaa
• Alignement du corps du texte : Centre
• Taille de la police du corps : 14
• Hauteur de la ligne du corps : 1,7 em

Cloner le module de présentation

Une fois que vous avez créé le module Blurb, clonez-le deux fois et placez-le dans les deux autres colonnes de la ligne.

1. Tout le chemin en diagonale

Maintenant que nous avons créé les sections, il est temps de commencer à ajouter les transitions de section. Le premier exemple que nous allons vous montrer comment créer consiste en de simples lignes diagonales.

Paramètres d'arrière-plan dégradé de la première section

Ouvrez les paramètres de la première section et ajoutez le fond dégradé suivant :

• Première couleur : #dddddd
• Deuxième couleur : #f7f7f7
• Type de dégradé : Linéaire
• Direction du gradient : 183 degrés
• Position de départ : 85 %
• Position finale : 70,05 %

Paramètres d'arrière-plan dégradé de la deuxième section

La deuxième section aura plutôt besoin des paramètres d'arrière-plan dégradé suivants :

• Première couleur : #f7f7f7
• Deuxième couleur : #dddddd
• Type de dégradé : Linéaire
• Direction du gradient : 183 degrés
• Position de départ : 85 %
• Position finale : 69,05 %

Supprimer le rembourrage supérieur de la deuxième section

La dernière chose que vous devrez faire pour cet exemple est de supprimer le rembourrage supérieur de la deuxième section.

2. Rencontrez-moi à mi-chemin

L'exemple suivant que nous aimerions partager est un exemple très élégant où deux arrière-plans dégradés opposés sont utilisés. En utilisant cet effet, les sections ont l'impression de se suivre les unes les autres.

Paramètres d'arrière-plan dégradé de la première section

Pour la première section, nous aurons besoin des paramètres de fond dégradé suivants :

• Première couleur : rgba(255,255,255,0)
• Deuxième couleur : rgba (224,43,32,0,07)
• Type de dégradé : Radial
• Direction radiale : en haut à gauche
• Position de départ : 60 %
• Position finale : 50 %

Paramètres d'arrière-plan dégradé de la deuxième section

La deuxième section profitera du fond dégradé suivant :

• Première couleur : rgba(255,255,255,0)
• Deuxième couleur : rgba (224,43,32,0,33)
• Type de dégradé : Radial
• Direction radiale : en bas à droite
• Position de départ : 58 %
• Position finale : 50 %

3. Fusionner

L'exemple suivant est un peu différent du reste. Il faudra une section supplémentaire entre les deux sections pour obtenir le résultat que vous pouvez remarquer dans l'image ci-dessous.

Paramètres d'arrière-plan dégradé de la première section

Pour votre première section, vous aurez besoin du fond dégradé suivant :

• Première couleur : rgba (12 113 195 0,19)
• Deuxième couleur : rgba (255,255,255,0.39)
• Type de dégradé : Radial
• Direction radiale : en bas à gauche
• Position de départ : 50 %
• Position finale : 50 %

Paramètres d'arrière-plan dégradé de la deuxième section

Pour la deuxième section, nous utiliserons les paramètres d'arrière-plan dégradé suivants :

• Première couleur : rgba (224,43,32,0.17)
• Deuxième couleur : rgba (255,255,255,0.39)
• Type de dégradé : Radial
• Direction radiale : en haut à droite
• Position de départ : 50 %
• Position finale : 50 %

Ajouter une nouvelle section standard entre les deux

Une fois que vous avez ajouté les arrière-plans dégradés aux deux sections, il est temps d'ajouter une section juste entre elles.

Ajouter une couleur d'arrière-plan dégradé à la nouvelle section

Cette nouvelle section aura également besoin d'un arrière-plan dégradé, en utilisant les paramètres suivants :

• Première couleur : rgba (12 113 195 0,19)
• Deuxième couleur : rgba (224,43,32,0.17)
• Type de dégradé : Linéaire
• Direction du gradient : 92 degrés
• Position de départ : 43 %
• Position finale : 62 %

4. Inverser

Ensuite, nous avons également une transition de section qui n'est pas aussi frappante que les autres mais parvient tout de même à ajouter une touche subtile à vos sections.

Paramètres d'arrière-plan dégradé de la première section

Le fond dégradé de la première section est le suivant :

• Première couleur : #f2f2f2
• Deuxième couleur : rgba (104 153 193 0,58)
• Type de dégradé : Radial
• Direction radiale : en bas à droite
• Position de départ : 7,9 %
• Position finale : 7,9 %

Paramètres d'arrière-plan dégradé de la deuxième section

Et le deuxième arrière-plan dégradé aura besoin des paramètres d'arrière-plan dégradé suivants :

• Première couleur : rgba (104 153 193 0,58)
• Deuxième couleur : #f2f2f2
• Type de dégradé : Radial
• Direction radiale : en haut à droite
• Position de départ : 8 %
• Position finale : 8 %

5. Pointeurs

Le cinquième exemple semble un peu plus propre et minimaliste que les autres. Vous pouvez percevoir la transition de deux manières en voyant soit les pointeurs, soit les cercles (ou les deux).

Paramètres d'arrière-plan dégradé de la première section

Utilisez le fond dégradé suivant pour la première section :

• Première couleur : #f4f4f4
• Deuxième couleur : #ffffff
• Type de dégradé : Radial
• Direction radiale : Haut
• Position de départ : 88 %
• Position finale : 88,05 %

Paramètres d'arrière-plan dégradé de la deuxième section

Enfin, appliquez les paramètres d'arrière-plan dégradé suivants à la deuxième section :

• Première couleur : rgba(43 135,218,0)
• Deuxième couleur : rgba (12 113 195 0,43)
• Type de dégradé : Radial
• Direction radiale : Bas
• Position de départ : 87 %
• Position finale : 87 %

6. Casse-tête

Le dernier exemple donne définitivement l'impression que les sections appartiennent les unes aux autres.

Paramètres d'arrière-plan dégradé de la première section

Ouvrez les paramètres de la première section et utilisez le fond dégradé suivant :

• Première couleur : rgba (160 181 193 0,46)
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Haut
• Position de départ : 56,3 %
• Position finale : 43 %

Paramètres d'arrière-plan dégradé de la deuxième section

Ensuite, utilisez les paramètres d'arrière-plan dégradé suivants pour la deuxième section :

• Première couleur : rgba(242,242,242,0)
• Deuxième couleur : rgba (160 181 193 0,46)
• Type de dégradé : Radial
• Direction radiale : Haut
• Position de départ : 56 %
• Position finale : 40 %

Modifier le remplissage de la première section

Pour que les deux sections s'ajustent mieux, nous allons changer le rembourrage supérieur et inférieur de la première section en "150px".

Supprimer le rembourrage supérieur de la deuxième section

Enfin, nous allons également supprimer le rembourrage supérieur de la deuxième section.

Dernières pensées

Les transitions de section aident à connecter différentes sections et leur objectif. Dans cet article, nous avons partagé 6 exemples que vous pouvez recréer en n'utilisant rien d'autre que les options intégrées de Divi. Si vous avez des questions ou des suggestions ; n'hésitez pas à laisser un commentaire dans la section commentaire ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par NikVector / shutterstock.com