Comment mélanger votre en-tête et votre corps à l'aide du module de contenu de publication et des diviseurs de section de Divi

À présent, nous nous sommes tous habitués au diviseur de section intégré de Divi. Ils contribuent à ajouter cette touche supplémentaire aux sites Web que nous construisons. Ils servent également de transition en douceur entre deux sections différentes, mais avec Theme Builder de Divi, l'approche pour créer cette transition est légèrement différente. Dans cet article, nous vous guiderons à travers les étapes à suivre pour y arriver. Vous pourrez également télécharger le fichier modèle 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 le modèle de page de séparation de section GRATUITEMENT

Pour mettre la main sur le modèle de page de séparation de section gratuit, vous devez d'abord le 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 !

Abonnez-vous à notre chaîne Youtube

1. Accédez à Divi Theme Builder et ajoutez un nouveau modèle

Aller à Divi Theme Builder

Commencez par vous rendre sur le Divi Theme Builder.

Ajouter un nouveau modèle pour les pages

Là, créez un nouveau modèle en cliquant sur l'icône plus.

Sélectionnez « Toutes les pages » si vous souhaitez que l'effet de fusion s'applique à toutes vos pages. Vous pouvez également faire fonctionner le même effet sur d'autres types de modèles, mais vous devrez inclure séparément le séparateur de section supérieure dans chacun de vos modèles. Une fois que vous avez créé un nouveau modèle, commencez à créer l'en-tête personnalisé.

2. Créer un en-tête personnalisé

Paramètres de section

Fond dégradé

Dans l'éditeur de modèles, vous remarquerez une section. Ouvrez cette section et ajoutez-y un arrière-plan dégradé.

• Couleur 1 : #d13232
• Couleur 2: #fc6a3c

Espacement

Ajoutez également des rembourrages haut et bas personnalisés à la section.

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

Indice Z

Et pour nous assurer que votre en-tête reste au-dessus de tout le contenu, nous augmenterons l'index z dans les paramètres de visibilité.

• Indice Z : 99999

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Retirez également tout le rembourrage supérieur et inférieur.

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

Élément principal

Enfin, centrez le contenu de votre colonne et permettez aux colonnes de rester côte à côte sur des tailles d'écran plus petites en ajoutant deux lignes simples de code CSS à l'élément principal de votre ligne.

display: flex;
align-items: center;

Ajouter un module d'image à la colonne 1

Télécharger le logo

Une fois que vous avez terminé tous les paramètres de section et de ligne, il est temps d'ajouter des modules, en commençant par un module d'image dans la colonne 1. Téléchargez un logo avec un fond transparent.

Alignement

Ensuite, allez dans l'onglet conception du module et modifiez l'alignement de l'image.

• Alignement de l'image : Centre

Dimensionnement

Modifiez également la largeur du module sur différentes tailles d'écran.

• Largeur : 6vw (ordinateur de bureau), 13vw (tablette), 17vw (téléphone)

Ajouter le module de menu à la colonne 2

Sélectionnez le menu

Dans la deuxième colonne, nous aurons besoin d'un module de menu. Sélectionnez un menu de votre choix.

Supprimer la couleur d'arrière-plan

Continuez en supprimant la couleur de fond du module.

Disposition

Passez à l'onglet Conception et modifiez la mise en page.

• Style : Aligné à gauche
• Direction du menu déroulant : vers le bas

Texte du menu

Ensuite, stylisez le texte du menu en conséquence :

• Police du menu : Oswald
• Poids de la police du menu : léger
• Style de police du menu : majuscule
• Couleur du texte du menu : #ffffff (ordinateur de bureau), #202332 (tablette et téléphone)
• Taille du texte du menu : 0,8 vw (ordinateur de bureau), 2 vw (tablette), 2,5 vw (téléphone)
• Espacement des lettres du menu : 0.1vw

Menu déroulant

Modifiez également la couleur de la ligne du menu déroulant dans les paramètres du menu déroulant.

• Couleur de la ligne du menu déroulant : #ffffff

Icônes

Et complétez les paramètres du module en utilisant une couleur d'icône de menu hamburger blanche.

• Couleur de l'icône du menu Hamburger : #ffffff

Ajouter un module de bouton à la colonne 3

Ajouter une copie

Passons à la dernière colonne ! Là, le seul module dont nous aurons besoin est un module de bouton. Ajoutez une copie de votre choix.

Alignement

Passez à l'onglet de conception du module et modifiez l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Continuez en stylisant le bouton dans les paramètres du bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 0.6vw (ordinateur de bureau), 1vw (tablette), 1.5vw (téléphone)
• Couleur du texte du bouton : #000000
• Couleur d'arrière-plan du bouton : #FFFFFF
• Largeur de la bordure du bouton : 0px

• Rayon de la bordure du bouton : 100 pixels
• Espacement des lettres des boutons : 2px
• Police des boutons : Open Sans
• Poids de la police du bouton : gras
• Style de police des boutons : majuscule

Espacement

Et complétez les paramètres du module en ajoutant un rembourrage personnalisé sur différentes tailles d'écran.

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

3. Construisez un corps personnalisé et ajoutez un séparateur supérieur

Une fois que vous avez terminé l'en-tête personnalisé de votre modèle, continuez et commencez à créer le corps personnalisé.

Paramètres de section

Diviseur supérieur

Vous remarquerez encore une fois une section sur la page. Ouvrez cette section et ajoutez-y un séparateur supérieur.

• Style de séparation : rechercher dans la liste
• Couleur du séparateur : #fc6a3c
• Hauteur du diviseur : 6vw
• Répétition horizontale du diviseur : 15x
• Basculement du diviseur : vertical
• Disposition des diviseurs : au-dessus du contenu de la section

Espacement

Passez à l'onglet de conception de la section et supprimez tout le rembourrage supérieur et inférieur par défaut.

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

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

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

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

Ajouter un module de contenu de publication à la colonne

Maintenant, pour que tout le contenu de votre page s'affiche, vous devez ajouter un module de contenu de publication à votre ligne. Ce module représente la mise en page que vous avez construite à l'intérieur de la page elle-même à l'aide de Divi. Si vous ajoutez cette transition à une page de produit, par exemple, un modèle dans lequel un contenu dynamique est impliqué, une approche différente a lieu. La seule chose importante à retenir est que vous devrez ajouter un séparateur supérieur à la première section du corps de votre modèle. Assurez-vous que la couleur de votre séparateur est la même que la couleur utilisée pour l'arrière-plan de votre en-tête global.

3. Enregistrer les modifications du constructeur et afficher le résultat

Une fois que vous avez terminé le corps de votre modèle, vous pouvez enregistrer les modifications et afficher le résultat sur votre site Web !

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 mélanger l'en-tête et le corps de votre modèle à l'aide des séparateurs de section de Divi et du module de contenu de publication. La transition du diviseur s'applique immédiatement à toutes vos pages. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à 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.