Comment utiliser les nouvelles structures de colonnes de Divi pour créer de superbes transitions de section

Chaque semaine, nous vous proposons de nouveaux packs de mise en page Divi gratuits que vous pouvez utiliser pour votre prochain projet. Pour l'un des packs de mise en page, nous partageons également un cas d'utilisation qui vous aidera à faire passer votre site Web au niveau supérieur.

Cette semaine, dans le cadre de notre initiative de conception Divi en cours, nous allons vous montrer comment utiliser les nouvelles structures de colonnes de Divi pour créer de superbes transitions de section. Nous combinerons différentes structures de colonnes avec certaines des options intégrées de Divi pour faire passer notre conception de page au niveau supérieur.

Allons-y !

Aperçu

Commençons par jeter un œil aux trois exemples différents que nous allons créer à partir de zéro en utilisant uniquement les options intégrées de Divi. Ces exemples sont tout aussi bons sur des écrans de plus petite taille.

Utilisez la page de destination du pack de mise en page du maquilleur de Divi

Nous allons utiliser la page de destination du pack de mise en page du maquilleur de Divi. Si vous souhaitez consulter le pack de mise en page, accédez au billet de blog suivant. Bien que nous présentions ce didacticiel à l'aide d'un pack de mise en page spécifique, vous pouvez également facilement utiliser les techniques sur d'autres mises en page.

Transition de section #1

Ajouter une nouvelle section

Localiser

Ouvrez la page de destination du Makeup Artist Layout Pack à l'aide du Visual Builder de Divi. Ensuite, ajoutez une nouvelle section régulière juste en dessous de la section héros :

Espacement

Supprimez ensuite tous les espacements par défaut de votre section :

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section avec la structure de colonnes suivante :

Dimensionnement

Augmentez également la largeur de la rangée :

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 0

Espacement

Supprimez ensuite le rembourrage supérieur et inférieur par défaut :

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Filtre

Pour rendre la ligne plus dynamique, augmentez la saturation dans les paramètres de filtre :

• Saturation : 200%

Ajouter le module diviseur n° 1 à la colonne 1

Masquer le diviseur

Pour créer le premier carré de notre conception, nous allons ajouter un module diviseur à la colonne 1. Désactivez l'option "Afficher le diviseur".

Fond dégradé

Ensuite, ajoutez un arrière-plan dégradé au module Divider :

• Couleur 1 : rgba(255,255,255,0)
• Couleur 2: rgba(176,182,219,0.34)

Espacement

Pour créer le carré, modifiez les valeurs d'espacement :

• Marge supérieure : -120px
• Rembourrage supérieur : 120px
• Rembourrage inférieur : 120px

Cloner le module diviseur et placer dans la colonne 2

Une fois que vous avez terminé de modifier le module DIvider, clonez-le et placez-le dans la deuxième colonne.

Changer le fond dégradé

Certaines modifications doivent être apportées à ce doublon, à commencer par le fond dégradé :

• Couleur 1: rgba (228,237,234,0,58)
• Couleur 2: rgba(255,255,255,0)

Changer l'espacement

Modifiez également les paramètres d'espacement. Cela augmentera la distance entre ce module diviseur et celui de la première colonne.

• Marge supérieure : 142px
• Rembourrage supérieur : 120px
• Rembourrage inférieur : 120px

Cloner le module diviseur #1 deux fois et le placer dans les colonnes 3 et 5

Clonez deux fois le module diviseur violet et placez les doublons dans les colonnes 3 et 5.

Cloner le module diviseur #2 et le placer dans la colonne 4

Clonez également le module diviseur vert et placez-le dans la colonne 4.

Masquer le module de séparation dans les colonnes 3, 4 et 5 sur tablette et téléphone

Ouvrez le module diviseur dans la colonne 3

Bien sûr, nous voulons que ces transitions de section soient aussi bonnes sur des écrans plus petits. C'est pourquoi nous allons masquer certains des modules que nous avons utilisés. Commencez par ouvrir les paramètres du module diviseur dans la colonne 3.

Masquer sur tablette et téléphone

Allez dans l'onglet Avancé et désactivez le module sur téléphone et tablette.

Copier les styles de visibilité

Nous devrons également masquer les séparateurs dans les colonnes 4 et 5. Pour accélérer le processus, copiez les paramètres de visibilité du séparateur dans la colonne 3 :

Coller les styles de visibilité

Et collez-les dans les modules diviseurs des colonnes 4 et 5.

Transition de section #2

Ajouter une nouvelle section

Localiser

Pour créer la deuxième transition de section, ajoutez une nouvelle section ici :

Diviseur supérieur

Ouvrez les paramètres de la section et ajoutez le séparateur supérieur suivant :

• Style de séparation : rechercher dans la liste
• Couleur du séparateur : #ffffff
• Hauteur du diviseur : 236px
• Basculement du diviseur : vertical
• Disposition des diviseurs : au-dessus du contenu de la section

Diviseur inférieur

De même, ajoutez également un séparateur inférieur :

• Style de séparation : rechercher dans la liste
• Couleur du séparateur : #ffffff
• Hauteur du diviseur : 236px
• Disposition des séparateurs : au-dessus du contenu de la section

Espacement

Modifiez ensuite les paramètres d'espacement :

• Marge supérieure : 100 pixels
• Marge inférieure : 100px
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter une nouvelle ligne

Structure des colonnes

Il est temps d'ajouter une ligne à la nouvelle section ! Choisissez la structure de colonnes suivante :

Dimensionnement

Sans ajouter de modules, ouvrez les paramètres de ligne et modifiez la largeur :

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Supprimez également tous les rembourrages supérieur et inférieur par défaut :

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter le module diviseur n° 1 à la colonne 1

Couleur de l'arrière plan

Ensuite, ajoutez un module diviseur à la première colonne. Ouvrez ses paramètres et ajoutez une couleur d'arrière-plan :

• Couleur d'arrière-plan : rgba (176 182 219 0,34)

Couleur du séparateur

Modifiez également la couleur du séparateur :

• Couleur du séparateur : #ffffff

Style de diviseur

Ensuite, allez dans les paramètres Styles et utilisez le style de diviseur suivant :

• Style de diviseur: Double

Poids du diviseur

Le poids du diviseur doit être le suivant :

• Poids du diviseur : 18px

Espacement

Enfin et surtout, augmentez la taille du module Divider à l'aide d'un rembourrage personnalisé :

• Rembourrage supérieur : 50px
• Rembourrage inférieur : 50px

Cloner le module diviseur et placer dans la colonne 2

Une fois que vous avez terminé avec le module diviseur dans la première colonne, clonez-le et placez le doublon dans la deuxième colonne.

Changer la couleur d'arrière-plan

Modifiez la couleur d'arrière-plan de ce doublon en conséquence :

• Couleur de fond : #e4edea

Clonez le module diviseur n°1 et placez-le dans les colonnes 3 et 5

Continuez en clonant deux fois le module diviseur violet et en plaçant les doublons dans les colonnes 3 et 5.

Cloner le module diviseur #2 et le placer dans la colonne 4

Clonez également le module diviseur vert et placez le double dans la colonne 4.

Masquer le module de séparation dans les colonnes 3, 4 et 5 sur tablette et téléphone

Masquer sur tablette et téléphone

Nous allons faire la même chose que pour l'exemple de transition de la première section. Ouvrez les paramètres du module diviseur dans la colonne 3 et masquez-le sur le téléphone et la tablette.

Copier les styles de visibilité

Copiez ces styles de visibilité.

Coller les styles de visibilité

Et collez-les dans les modules diviseurs des colonnes 4 et 5.

Transition de section #3

Ajouter une nouvelle section

Localiser

Pour ajouter la dernière transition de section à votre page, ajoutez une nouvelle section ici :

Diviseur supérieur

Ouvrez les paramètres de la section et ajoutez un séparateur supérieur :

• Style de séparation : rechercher dans la liste
• Couleur du séparateur : #ffffff
• Hauteur du diviseur : 150px
• Disposition des diviseurs : au-dessus du contenu de la section

Diviseur inférieur

Ajoutez-en un suivant :

• Style de séparation : rechercher dans la liste
• Couleur du séparateur : #ffffff
• Hauteur du diviseur : 150px
• Basculement du diviseur : vertical
• Disposition des diviseurs : au-dessus du contenu de la section

Espacement

Ensuite, allez dans les paramètres d'espacement et apportez quelques modifications :

• Marge supérieure : 100 pixels
• Marge inférieure : 100px
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter une nouvelle ligne

Structure des colonnes

La ligne dont nous aurons besoin dans cette section a la structure de colonnes suivante :

Dimensionnement

Sans ajouter de modules, ouvrez les paramètres de ligne et augmentez la largeur de votre ligne :

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut :

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter le module diviseur n° 1 à la colonne 1

Masquer le diviseur

Continuez en ajoutant un module diviseur à la première colonne. Désactivez l'option « Afficher le diviseur ».

Couleur de l'arrière plan

Ajoutez plutôt une couleur d'arrière-plan au séparateur :

• Couleur d'arrière-plan : rgba (176 182 219 0,34)

Espacement

Augmentez la taille du module en utilisant un rembourrage supérieur et inférieur :

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 100px

Cloner le module diviseur et placer dans la colonne 2

Changer la couleur d'arrière-plan

Clonez le module diviseur dans la première colonne et placez le doublon dans la seconde. Ouvrez ses paramètres et modifiez la couleur d'arrière-plan :

• Couleur d'arrière-plan : rgba (228,237,234,0,58)

Clonez le module diviseur n°1 et placez-le dans les colonnes 3 et 5

Clonez le module diviseur violet deux fois et placez-le dans les colonnes 3 et 5.

Cloner le module diviseur #2 et le placer dans la colonne 4

Clonez également le module diviseur vert et placez le double dans la colonne 4.

Masquer le module de séparation dans les colonnes 3, 4 et 5 sur tablette et téléphone

Masquer sur tablette et téléphone

Cachez le module de séparation dans la colonne 3 sur tablette et téléphone.

Copier les styles de visibilité

Copiez ces styles de visibilité.

Coller les styles de visibilité

Et collez-les sur le module diviseur dans les colonnes 4 et 5 et le tour est joué !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil aux trois exemples différents que nous avons créés.

Dernières pensées

Dans cet article de blog de cas d'utilisation, nous vous avons montré comment utiliser les nouvelles structures de colonnes de Divi pour créer de superbes transitions de section. Ce tutoriel fait partie de notre initiative de conception Divi en cours, où nous essayons de mettre quelque chose dans votre boîte à outils de conception chaque semaine. Si vous avez des questions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!