Comment créer des titres de section dynamiques pour votre prochain projet Divi

Nous savons que la plupart d'entre vous sont toujours à la recherche de nouvelles façons de rendre les sites Web que vous créez uniques. Avec Divi, il existe de nombreuses façons de faire en sorte que votre site Web se démarque des autres. Aujourd'hui, nous allons vous montrer comment créer de superbes titres de section en utilisant uniquement les options intégrées de Divi. Cette approche est idéale si vous souhaitez créer un design époustouflant, conserver la structure globale de la page et assurer une navigation fluide.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons le résultat que nous visons à atteindre sur différentes tailles d'écran :

Commençons à créer !

Ajouter une nouvelle section régulière

Espacement

Commencez par ouvrir une nouvelle page, basculez vers Visual Builder et ajoutez votre première section. Sans ajouter encore de lignes ou de modules, ouvrez les paramètres de la section et ajoutez un peu de remplissage :

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

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une ligne en utilisant la structure de colonnes suivante :

Couleur de l'arrière plan

Ouvrez ensuite les paramètres de ligne et ajoutez une couleur d'arrière-plan à l'ensemble de votre ligne :

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

Colonne 1 Fond dégradé

Ensuite, ajoutez un fond dégradé subtil à votre première colonne. Cela aidera à créer le chevauchement des titres de section entre les colonnes.

• Couleur 1 : #0031c4
• Couleur 2: #00aeff
• Direction du gradient de la colonne 1 : 125 deg

Dimensionnement

Modifiez également l'espacement de votre ligne pour vous assurer qu'elle occupe toute la largeur de l'écran.

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

Espacement

Enfin, modifiez les paramètres d'espacement en fonction des différentes tailles d'écran :

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage supérieur de la colonne 2: 200px
• Remplissage inférieur de la colonne 2 : 200px
• Remplissage gauche de la colonne 2 : 350 pixels (ordinateur de bureau), 50 pixels (tablette et téléphone)
• Remplissage à droite de la colonne 2 : 50px

Ajouter un module de texte de titre de section à la colonne 1

Paramètres de texte H2

Maintenant que tous les paramètres de ligne sont en place, nous pouvons commencer à ajouter des modules. Nous allons commencer par la première colonne. Ici, le seul module dont nous aurons besoin est un module de texte. Après avoir ajouté le contenu H2 dans la zone Contenu, continuez et modifiez les paramètres du texte H2 :

• Titre 2 Poids de la police : Ultra gras
• Titre 2 Style de police : majuscule
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte : 150px
• En-tête 2 Hauteur de ligne : 1,25 em
• Titre 2 Ombre de texte Longueur verticale : -0,55 em
• Titre 2 Couleur de l'ombre du texte : rgba(0,255,255,0,25)

Espacement

Le chevauchement entre les colonnes est différent sur ordinateur de bureau, tablette et téléphone. Pour créer le chevauchement, nous allons apporter quelques modifications aux paramètres d'espacement de notre module de texte :

• Marge supérieure : 325 px (ordinateur de bureau), 150 px (tablette et téléphone)
• Marge inférieure : 325px, -120px (tablette), -110px (téléphone)
• Marge de droite : -100 % (ordinateur de bureau), 0 px (tablette et téléphone)

Filtre

Enfin, nous utiliserons un mode de fusion pour créer la différence de couleur pour le texte qui s'affiche.

• Mode de fusion : superposition

Ajouter un module de texte de titre à la colonne 2

Paramètres de texte H3

Passons à la deuxième colonne. Là, le premier module dont nous aurons besoin est un module de texte de titre. Après avoir ajouté votre contenu H3, modifiez les paramètres de texte H3 :

• En-tête 3 Poids de la police : semi-gras
• Titre 3 Couleur du texte : #00aeff
• Titre 3 Taille du texte : 60px
• En-tête 3 Espacement des lettres : -3px

Espacement

Créez de l'espace en ajoutant ensuite une marge inférieure :

• Marge inférieure : 50px

Ajouter le module diviseur à la colonne 2

Couleur du séparateur

Le deuxième module dont nous aurons besoin est un module diviseur. Ouvrez les paramètres de couleur et modifiez la couleur pour qu'elle corresponde à la palette de couleurs du motif :

• Couleur du séparateur : #00ffff

Dimensionnement

Ensuite, modifiez les paramètres de dimensionnement :

• Hauteur : 56px
• Largeur : 75 %

Ajouter le module de texte de description à la colonne 2

Paramètres de texte

Continuez en ajoutant un module de texte de description à l'aide des paramètres de texte suivants :

• Taille du texte : 17 pixels
• Hauteur de la ligne de texte : 1,3 em
• Orientation du texte : Justifier

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement :

• Dimensionnement : 70 % (ordinateur de bureau), 100 % (tablette et téléphone)

Espacement

Ajoutez de l'espace sous ce module en utilisant également une marge inférieure :

• Marge inférieure : 50px

Ajouter un module de bouton à la colonne 2

Paramètres des boutons

Le dernier module dont nous aurons besoin dans cette colonne est un module de bouton. Après avoir ajouté le CTA, modifiez les paramètres du bouton :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 17px
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #00aeff
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 100 pixels
• Espacement des lettres des boutons : -1px
• Poids de la police : Ultra gras
• Style de police : majuscule

Espacement

Et pour donner au bouton un aspect et une sensation plus propres, nous ajouterons également un peu de rembourrage :

• Rembourrage supérieur : 10px
• Rembourrage inférieur : 10px
• Rembourrage gauche : 30 px
• Rembourrage droit : 30 px

Boîte ombre

Enfin, nous utiliserons une subtile ombre de boîte pour ajouter un peu de profondeur à notre section :

• Force du flou de l'ombre de la boîte : 54 px
• Force de propagation de l'ombre de la boîte : -8px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Cloner la section

Changer tout Copier

Pour créer la deuxième section, nous allons simplement cloner celle que nous avons déjà créée, puis modifier toute la copie.

Changer la couleur d'arrière-plan de la ligne

Pour cette nouvelle section, nous allons utiliser une autre palette de couleurs. Commencez par changer la couleur de fond de votre ligne.

• Couleur de fond : #efefef

Changer le fond dégradé de la colonne 1

Ensuite, choisissez également un autre arrière-plan dégradé.

• Couleur 1 : #5f00a8
• Couleur 2: #9000ff

Changer la couleur de l'ombre du titre de la section

Nous associons également la couleur de l'ombre du texte à notre nouvelle palette de couleurs :

• Titre 2 Couleur de l'ombre du texte : rgba (255,0,255,0,24)

Modifier les paramètres d'espacement des titres de section

Selon la longueur de la copie que vous utilisez, vous devrez jouer avec la marge de droite négative.

• Marge de droite : -110% (ordinateur de bureau)

Changer la couleur du texte du module de texte du titre

Ensuite, modifiez la couleur du texte du titre Module de texte dans la colonne 2.

• Titre 3 Couleur du texte : #9000ff

Changer la couleur du séparateur

De même, faites en sorte que la couleur du séparateur corresponde au design.

• Couleur : #ff00ff

Changer la couleur d'arrière-plan du bouton

Pour finir, vous devrez changer la couleur d'arrière-plan du module de boutons.

• Couleur d'arrière-plan du bouton : #9000ff

Aperçu

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

Dernières pensées

Il existe de nombreuses façons de faire en sorte que votre conception de sites Web se démarque des autres sites Web. Dans cet article, nous vous avons montré comment créer de superbes titres de section, et des sections en général, en utilisant uniquement les options intégrées de Divi. Nous avons combiné des arrière-plans en dégradé de colonnes avec des chevauchements de module de texte, des ombres de texte et des modes de fusion pour créer un résultat final époustouflant. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!