Comment créer des chapitres de section à l'aide des nouvelles options de conception de Divi

Dans le didacticiel Divi d'aujourd'hui, nous allons vous montrer comment créer de superbes chapitres de section pour votre site Web. Ces chapitres servent de guide à vos visiteurs. Cela leur montrera quand ils entreront dans une autre section d'une page. Habituellement, les chapitres sont utilisés en combinaison avec une couleur d'arrière-plan spécifique dans toutes les sections.

Si vous envisagez d'utiliser des chapitres de section sur votre site Web, cet article peut être un bon endroit pour vous inspirer. Nous allons vous montrer 4 styles de chapitres de section que vous pouvez facilement recréer en suivant cet article.

Résultat

Avant d'aborder le côté pratique des quatre styles de chapitre de section, jetons un coup d'œil à ce que vous pouvez attendre du résultat final.

Section Chapitre Style #1

Section Chapitre Style #2

Section Chapitre Style #3

Section Chapitre Style #4

Comment créer des chapitres de section à l'aide des nouvelles options de conception de Divi

Abonnez-vous à notre chaîne Youtube

Section Chapitre Style #1

Options de ligne

Commencez par ajouter une ligne à deux colonnes à la page sur laquelle vous travaillez et sélectionnez l'alignement des lignes de gauche dans l'onglet Conception.

Faites défiler le même onglet et assurez-vous de sélectionner « 0px » pour le rembourrage supérieur, droit, inférieur et gauche. La raison pour laquelle nous faisons cela est de rendre la ligne aussi petite que possible afin qu'elle ne prenne pas beaucoup de place dans la section.

Module diviseur

Dans tous nos exemples, nous n'utiliserons qu'une des deux colonnes (selon l'alignement des lignes). Si vous placez votre chapitre sur le côté gauche de votre page, choisissez la colonne de gauche. Ensuite, ajoutez un module diviseur et activez l'option "Afficher le diviseur" dans l'onglet Contenu.

Passez à l'onglet Conception et utilisez '#000000' comme couleur de séparation.

Ensuite, ouvrez la sous-catégorie Styles et choisissez "Pointillé" comme style de séparation et "Haut" comme position de séparation.

Ensuite, assurez-vous que les paramètres suivants s'appliquent à la sous-catégorie Dimensionnement :

• Poids du diviseur : 3px
• Hauteur : 23px
• Largeur : 62 %
• Alignement du module : à gauche

Premier module de texte

Une fois que vous avez ajouté le module de séparation, il est temps d'ajouter le premier module de texte juste en dessous. Après avoir choisi le numéro de chapitre, utilisez le fond dégradé suivant :

• Première couleur : rgba (96 150 193 0,16)
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 51 %
• Position finale : 51 %

Ensuite, passez à l'onglet Conception et apportez les modifications suivantes à la sous-catégorie Texte :

• Police du texte : Singe heureux
• Taille de la police de texte : 53 (ordinateur de bureau et tablette), 25 (téléphone)
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Ouvrez la sous-catégorie Dimensionnement, choisissez une largeur de « 40 % » et sélectionnez l'alignement du module central.

La dernière chose dont ce module de texte a besoin est la marge et le remplissage personnalisés suivants :

• Marge supérieure : -40px
• Rembourrage supérieur : 40 px
• Rembourrage droit : 50 px
• Rembourrage inférieur : 40px
• Remplissage gauche : 50px

Deuxième module de texte

Ajoutez un autre module de texte avec les paramètres de sous-catégorie de texte suivants :

• Police du texte : Arimo
• Taille de la police du texte : 19px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Faites défiler le même onglet, utilisez une largeur de « 97 % » et activez l'option d'alignement du module au centre.

Enfin, ajoutez également une marge supérieure de '-15px'.

Troisième module de texte

Le dernier module de texte du chapitre de section a les paramètres de sous-catégorie de texte suivants :

• Police du texte : Arimo
• Style de police de texte : gras
• Taille de la police du texte : 19px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Dans la sous-catégorie Dimensionnement, utilisez une largeur de « 99 % » et sélectionnez l'alignement du module central.

La dernière chose que vous devrez faire pour ce chapitre de section est d'ajouter une marge supérieure de '-20px'.

Section Chapitre Style #2

Options de ligne

Le deuxième exemple est situé sur le côté droit de l'écran. Encore une fois, ajoutez une ligne à deux colonnes mais choisissez plutôt le bon alignement de ligne.

Ouvrez la sous-catégorie Espacement et attribuez « 0px » au rembourrage supérieur, droit, inférieur et gauche.

Module diviseur

Ajoutez un module diviseur à la colonne de droite et activez l'option « Afficher le diviseur ».

Nous allons utiliser le fond dégradé suivant pour le séparateur :

• Première couleur : rgba(132,132,132,0,61)
• Deuxième couleur : rgba (224,43,32,0,86)
• Type de dégradé : Linéaire
• Direction du gradient : 180 deg
• Position de départ : 43 %
• Position finale : 100 %

Passez à l'onglet Conception et sélectionnez 'rgba(0,0,0,0.26)' comme couleur de séparation.

Ensuite, utilisez « Solide » comme style de séparation et « Top » comme position de séparation.

Ensuite, ouvrez la sous-catégorie Dimensionnement et appliquez les paramètres suivants :

• Poids du diviseur : 3px
• Hauteur : 11px
• Largeur : 68 %
• Alignement du module : à droite

Premier module de texte

Le premier module de texte a les paramètres de sous-catégorie de texte suivants :

• Police du texte : Cantata One
• Taille de la police de texte : 100 px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1,7 em
• Orientation du texte : à droite

Ouvrez la sous-catégorie Espacement et utilisez la marge et le remplissage personnalisés suivants :

• Marge supérieure : -95px
• Rembourrage supérieur : 40 px
• Rembourrage droit : 50 px
• Rembourrage inférieur : 40px
• Remplissage gauche : 50px

Deuxième module de texte

Ajoutez un autre module de texte et utilisez plutôt les paramètres de sous-catégorie de texte suivants :

• Police du texte : Arimo
• Taille de la police du texte : 20 px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Ensuite, ajoutez une marge supérieure de '-50px'.

Troisième module de texte

Le troisième et dernier module de texte de cet exemple possède les paramètres de sous-catégorie de texte suivants :

• Police du texte : Lobster Two
• Taille de la police du texte : 43 px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Enfin, ajoutez une marge supérieure de '-30px'.

Section Chapitre Style #3

Options de ligne

Pour le troisième exemple, nous allons utiliser une ligne à deux colonnes avec l'arrière-plan dégradé de la colonne 1 suivant :

• Première couleur : #edf000
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé de la colonne 1 : linéaire
• Direction du gradient de la colonne 1 : 139 deg
• Position de départ de la colonne 1 : 11%
• Position finale de la colonne 1 : 36 %

Accédez à l'onglet Conception et sélectionnez l'alignement des lignes de gauche.

Encore une fois, nous allons utiliser '0px' pour les marges supérieure, droite, inférieure et gauche.

Module diviseur

Maintenant, ajoutez un module de diviseur dans la colonne de gauche et activez l'option "Afficher le diviseur".

Ouvrez la sous-catégorie Arrière-plan et utilisez l'arrière-plan dégradé suivant :

• Première couleur : #4b61af
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Linéaire
• Direction du gradient : 161 degrés
• Position de départ : 18 %
• Position finale : 38 %

Ouvrez l'onglet Conception et choisissez '#000000' comme couleur de séparation.

Dans la sous-catégorie Styles, utilisez 'Solid' comme style de séparation et 'Top' comme position de séparation.

Ensuite, assurez-vous que les paramètres suivants s'appliquent à la sous-catégorie Dimensionnement :

• Poids du diviseur : 6px
• Hauteur : 100px
• Largeur: 70%
• Alignement du module : à gauche

Premier module de texte

Continuez en ajoutant le premier module de texte juste en dessous du module de séparation et en choisissant l'arrière-plan dégradé suivant :

• Première couleur : rgba(131,0,233,0,58)
• Deuxième couleur : rgba (255,255,255,0)
• Type de dégradé : Linéaire
• Direction du gradient : 151 deg
• Position de départ : 20 %
• Position finale : 40 %

Accédez à l'onglet Conception et utilisez les paramètres de sous-catégorie Texte suivants :

• Police du texte : Poiret One
• Style de police de texte : gras
• Taille de la police de texte : 69 px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1,7 em
• Orientation du texte : Centre

Ouvrez la sous-catégorie Dimensionnement, utilisez une largeur de « 70 % » et sélectionnez l'alignement de module de gauche.

Enfin, utilisez la marge et le remplissage personnalisés suivants :

• Marge supérieure : 124 px
• Rembourrage supérieur : 60px
• Rembourrage inférieur : 150px
• Remplissage gauche : 50px

Deuxième module de texte

Allez-y et ajoutez un autre module de texte avec les paramètres de sous-catégorie de texte suivants :

• Police du texte : Arimo
• Taille de la police du texte : 20 px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Ouvrez la sous-catégorie Dimensionnement, sélectionnez une largeur de « 80 % » et choisissez l'alignement de module de gauche.

Enfin, ajoutez une marge supérieure de '-150px'.

Troisième module de texte

Ajoutez le dernier module de texte à la première colonne et assurez-vous que les paramètres de sous-catégorie de texte suivants s'appliquent :

• Police du texte : Arimo
• Style de police de texte : gras
• Taille de la police du texte : 20 px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : Centre

Ouvrez la sous-catégorie Dimensionnement, utilisez une largeur de « 80 % » et choisissez l'alignement de module de gauche.

Enfin, choisissez une marge supérieure de '-20px' et un rembourrage inférieur de '50px'.

Section Chapitre Style #4

Options de ligne

Pour le dernier exemple, nous allons à nouveau utiliser le bon alignement de ligne.

Ensuite, ouvrez la sous-catégorie Espacement et attribuez « 0px » au rembourrage supérieur, droit, inférieur et gauche.

Premier module de texte

Ce dernier exemple ne contient pas de module diviseur, alors allez-y et ajoutez un module de texte à la colonne de gauche. Une fois cela fait, choisissez le fond dégradé suivant :

• Première couleur : rgba(255,255,255,0)
• Deuxième couleur : #92d84b
• Type de dégradé : Linéaire
• Direction du gradient : 55 degrés
• Position de départ : 25 %
• Position finale : 100 %

Ensuite, accédez à l'onglet Conception et assurez-vous que les paramètres de sous-catégorie Texte suivants s'appliquent :

• Police du texte : Cantata One
• Taille de la police du texte : 220 (ordinateur de bureau et tablette), 100 px (téléphone)
• Couleur du texte : #f2f2f2 (correspond à la couleur d'arrière-plan de la section)
• Hauteur de la ligne de texte : 1,7 em
• Orientation du texte : à droite

Ouvrez la sous-catégorie Dimensionnement, utilisez une largeur de « 82 % » et sélectionnez le bon alignement de module.

Enfin, utilisez le remplissage personnalisé suivant :

• Haut : 60 pixels
• À droite : 50 pixels
• Bas : 60px
• Gauche : 50px

Deuxième module de texte

Ajoutez un autre module de texte et utilisez les paramètres suivants dans la sous-catégorie Texte :

• Police du texte : Arimo
• Taille de la police du texte : 20 px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : à droite

Ouvrez la sous-catégorie Dimensionnement, choisissez une largeur de « 39 % » et choisissez l'alignement du module central.

Enfin, ajoutez "-130px" à la marge supérieure.

Troisième module de texte

Le dernier module de texte de cet exemple de chapitre a les paramètres de sous-catégorie de texte suivants :

• Police de texte : script de danse
• Taille de la police du texte : 45 px
• Couleur du texte : #000000
• Hauteur de la ligne de texte : 1 em
• Orientation du texte : à droite

Ouvrez la sous-catégorie Dimensionnement, choisissez une largeur de « 50 % » et sélectionnez l'alignement du module central.

Enfin, choisissez un rembourrage supérieur de '-30px' et le tour est joué !

Dernières pensées

Dans cet article, nous vous avons montré comment créer et styliser de manière créative des chapitres de section sur votre site Web. Ces sections de chapitre vous permettent de créer une division entre les sections tout en utilisant la même couleur d'arrière-plan pour chacune des sections. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires 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 Kwok Design / shutterstock.com