Sélectionner une page


Avec les nouvelles options de position de Divi, il est plus facile que jamais de transformer votre en-tête en un solide. En quelques clics, vous pouvez transformer votre en-tête statique et personnalisé en un en-tête fixe que vos visiteurs suivront tout au long de leur séjour sur votre site Web. Dans ce tutoriel, nous allons vous montrer les étapes générales à suivre pour créer votre en-tête fixe Divi. Voici l’ordre que nous suivrons:

  1. Accédez au générateur de thèmes Divi et commencez à créer l’en-tête global
  2. Dans le modèle d’en-tête global, utilisez une seule section multiligne pour créer l’en-tête avec tous les éléments nécessaires
  3. Utilisez les options de position de division intégrées de Divi pour garder toute la section au top
  4. Créez un modèle de corps personnalisé et ajoutez une marge supérieure pour créer un espace conteneur pour l’en-tête Divi fixe
  5. Enregistrez toutes les modifications apportées au générateur de thèmes Divi et affichez le résultat sur votre site Web

Vous pouvez également télécharger gratuitement le fichier JSON du modèle de site Web standard! Commençons.

Aperçu

Avant d’entrer dans le didacticiel, examinons rapidement le résultat sur différentes tailles d’écran.

Bureau

en-tête Divi fixe

Téléphone portable, téléphone portable

en-tête Divi fixe

Téléchargez GRATUITEMENT le modèle de site Web mondial

Pour mettre la main sur le modèle de site Web mondial gratuit, vous devez d’abord le télécharger à partir du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! 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 plus abonné et ne recevrez aucun e-mail supplémentaire.

1. Allez dans Divi Theme Builder et commencez à créer un en-tête global

Allez dans Divi Theme Builder

Commencez avec le générateur de thèmes Divi. Là, cliquez sur « Ajouter un en-tête global ».

en-tête Divi fixe

Créer un en-tête global

Créez l’en-tête à partir de zéro en sélectionnant « Créer un en-tête global ».

en-tête Divi fixe

2. Utilisez la section normale pour créer l’en-tête pleine largeur

Section Paramètres

Couleur de l’arrière plan

Une fois que vous êtes dans l’éditeur de modèle, vous remarquerez une section. Ouvrez cette section et utilisez une couleur de fond blanche.

  • Couleur d’arrière-plan: #FFFFFF

en-tête Divi fixe

distance

Ensuite, allez dans l’onglet Conception et supprimez tous les tampons supérieurs et inférieurs standard.

  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 0px

en-tête Divi fixe

Boîte ombre

Ajoutez également une ombre de boîte.

  • Force de flou de l’ombre de la boîte: 50px
  • Couleur de l’ombre: rgba (0,0,0,0,12)

en-tête Divi fixe

Ajouter la ligne 1

Structure de la colonne

Allez-y en ajoutant une nouvelle ligne à la section avec la structure de colonnes suivante:

en-tête Divi fixe

Couleur de l’arrière plan

Ouvrez les paramètres de ligne et modifiez la couleur d’arrière-plan sans ajouter de modules.

  • Couleur d’arrière-plan: # ff3314

en-tête Divi fixe

Dimensionnement

Ensuite, allez dans l’onglet « Conception » de la ligne et modifiez les paramètres de taille comme suit:

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

en-tête Divi fixe

distance

Retirez également les tampons supérieurs et inférieurs standard.

  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 0px

en-tête Divi fixe

Ajout du module de suivi des médias sociaux à la colonne 1

Ajoutez les réseaux sociaux de votre choix

Le seul module dont nous avons besoin sur la ligne est un module de suivi des médias sociaux. Ajoutez les réseaux sociaux de votre choix.

en-tête Divi fixe

Réinitialiser les styles d’objet pour chaque réseau social individuellement

Continuez en réinitialisant les styles d’éléments pour chaque réseau social individuellement.

en-tête Divi fixe

Alignement

Passez ensuite à l’onglet Conception du module et modifiez l’orientation du module.

en-tête Divi fixe

Paramètres des icônes

Ensuite, changez la couleur de l’icône.

en-tête Divi fixe

distance

Complétez les paramètres du module en ajoutant une marge supérieure.

en-tête Divi fixe

Ajouter la ligne 2

Structure de la colonne

Passons à la rangée suivante! Utilisez la structure de colonne suivante:

en-tête Divi fixe

Dimensionnement

Sans ajouter de modules, ouvrez les paramètres de ligne et laissez la ligne occuper toute la largeur de la section.

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

en-tête Divi fixe

distance

Retirez également les tampons supérieurs et inférieurs standard.

  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 0px

en-tête Divi fixe

Élément principal

Pour vous assurer que tout le contenu de la colonne est affiché côte à côte sur des écrans plus petits, ajoutons une ligne de code CSS à l’élément principal de la ligne.

display: flex;

en-tête Divi fixe

Marge de la colonne 1

Complétez les paramètres de ligne en ouvrant les paramètres de la colonne 1 et en ajoutant une marge droite.

  • Largeur de la marge droite: 2px
  • Couleur de la bordure droite: # ffc600

en-tête Divi fixe

Ajouter un module d’image à la colonne 1

Télécharger le logo

Il est temps d’ajouter des modules. Dans la colonne 1, nous n’avons besoin que d’un module d’image. Téléchargez votre logo.

en-tête Divi fixe

Alignement

Ensuite, allez dans l’onglet Conception du module et modifiez l’orientation de l’image.

en-tête Divi fixe

Dimensionnement

Ensuite, modifiez la largeur sur différentes tailles d’écran.

  • Largeur: 50 px (bureau), 30 px (tablette et téléphone)

en-tête Divi fixe

distance

Complétez les paramètres du module en ajoutant une marge supérieure et inférieure personnalisée pour différentes tailles d’écran.

  • Afficher l’espace sous l’image: Non.
  • Bord supérieur: 1 VW (bureau), 2 VW (tablette), 3 VW (téléphone)
  • En bas: 1 VW (bureau), 2 VW (tablette), 3 VW (téléphone)

en-tête Divi fixe

Ajouter le module de menu à la colonne 2

Choisissez le menu

Dans la deuxième colonne, nous n’avons besoin que d’un module de menu. Choisissez un menu de votre choix.

en-tête Divi fixe

Supprimer la couleur d’arrière-plan

Supprimez ensuite la couleur d’arrière-plan du module.

en-tête Divi fixe

agencement

Accédez à l’onglet Conception du module et modifiez les paramètres de mise en page.

  • Style: centré
  • Direction du menu déroulant: Bas

en-tête Divi fixe

Paramètres du texte du menu

Modifiez également les paramètres de texte du menu.

  • Police du menu: PT Serif
  • Couleur du texte du menu: # 333333
  • Taille du texte du menu: 18px

en-tête Divi fixe

Menu déroulant Paramètres de texte

Avec les paramètres de texte du menu déroulant.

  • Couleur d’arrière-plan du menu déroulant: #ffffff
  • Menu déroulant des couleurs de ligne: # ffc600

en-tête Divi fixe

Symboles

Nous changeons ensuite la couleur de l’icône du menu hamburger dans les paramètres de l’icône.

  • Couleur de l’icône du menu Hamburger: # ff3314

en-tête Divi fixe

distance

Et nous allons compléter les paramètres du module en ajoutant des valeurs de marge personnalisées pour différentes tailles d’écran.

  • En haut: 1,4 VW (bureau), 2,5 VW (tablette), 3 VW (téléphone)
  • En bas: 1,4 VW (bureau), 2,5 VW (tablette), 3 VW (téléphone)

en-tête Divi fixe

Ajoutez le module de code à la colonne 2

Entrez le code CSS mobile

Pour changer le menu déroulant sur les appareils mobiles (afin qu’il occupe toute la largeur de l’écran), nous avons besoin de quelques lignes de code CSS. Nous allons ajouter ce code CSS à un nouveau module de code juste en dessous du module de menu.

<style>
.et_mobile_menu {
margin-top: 5%;
width: 210%;
margin-left: -110%;
}
</style>

en-tête Divi fixe

3. Utilisez les options de position de Divi pour coller la section vers le haut

Modifier les paramètres de la position de la section

Une fois que vous avez terminé l’apparence générale de votre en-tête personnalisé, il est temps de le transformer en un solide! Pour ce faire, ouvrez les paramètres de section et modifiez les paramètres de position comme suit:

  • Position: fixe
  • Emplacement: Top Center

Si vous voulez de l’espace entre la section et le haut de votre page, vous pouvez utiliser l’option de décalage vertical. Si votre en-tête n’apparaît pas sur tout le contenu de la page de votre site, vous pouvez augmenter le z-index.

en-tête Divi fixe

4. Ajoutez l’espace blanc supérieur pour l’en-tête

Construire un organisme mondial

Dans l’étape suivante de ce didacticiel, vous pouvez ajouter un «espace conteneur» supérieur pour votre en-tête. Dès que vous fixez un élément, le conteneur de l’élément flotte de votre côté sans prendre de place supplémentaire. Cependant, si vous ne voulez pas que la page existante ou le contenu de l’article se chevauchent, vous pouvez ajouter de l’espace en haut pour le conteneur. Pour ce faire, créez le corps global de votre modèle de site Web par défaut.

en-tête Divi fixe

Section Paramètres

distance

Une fois que vous êtes dans l’éditeur de modèle, vous remarquerez une section. Ouvrez cette section et retirez tous les tampons supérieurs et inférieurs standard.

  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 0px

en-tête Divi fixe

Ajouter une nouvelle ligne

Structure de la colonne

Allez-y en ajoutant une nouvelle ligne avec la structure de colonnes suivante:

en-tête Divi fixe

Dimensionnement

Ouvrez les paramètres de ligne et laissez la ligne occuper toute la largeur de la section.

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

en-tête Divi fixe

distance

Ensuite, retirez le rembourrage supérieur et inférieur standard.

  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 0px

en-tête Divi fixe

Ajouter le module de contenu de l’article à la colonne

Pour que tout le contenu dynamique puisse être affiché, nous utilisons le module «Contenu de l’article», en fonction du visiteur de l’article ou de la page.

en-tête Divi fixe

Ajoutez la marge supérieure à la section pour faire de la place pour l’en-tête

Enfin, rouvrons les paramètres de la section et ajoutons une marge supérieure pour créer cette zone supérieure pour l’en-tête fixe Divi. Vous pouvez ajuster cette valeur à votre guise.

en-tête Divi fixe

4. Enregistrez les modifications dans le générateur de thèmes

Une fois que vous avez rempli à la fois l’en-tête global et le texte global, vous pouvez enregistrer toutes les modifications apportées au générateur de thèmes et voir le résultat sur votre site Web!

en-tête Divi fixe

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

en-tête Divi fixe

Téléphone portable, téléphone portable

en-tête Divi fixe

Dernières pensées

Dans cet article, nous vous avons montré comment créer un en-tête Divi fixe en utilisant les nouvelles options de position que vous obtenez dans le Divi Builder lui-même. Nous avons couvert les étapes nécessaires pour créer un en-tête solide et vous pouvez appliquer cette technique à tout type de site Web que vous créez. Vous pouvez également télécharger gratuitement le modèle de site Web par défaut! Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous voulez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de l’avoir Abonnez-vous à notre newsletter et chaîne Youtube Vous êtes donc toujours l’un des premiers à connaître et à bénéficier de ce contenu gratuit.





Source link

Recent Posts