Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Utilisez-vous Divi et voulez-vous Créer un en-tête fixe? Vous êtes au bon endroit. Dans ce guide, nous allons vous montrer Deux façons différentes de coller l’en-tête Divi étape par étape.

De même que Elementor, Deux est l’un des thèmes WordPress les plus populaires. Près de 2 millions de sites Web l’utilisent pour créer des designs personnalisés pour leurs entreprises. Si vous êtes également un utilisateur de Divi, nous avons quelque chose de spécial pour vous. Dans ce tutoriel, nous allons vous montrer comment créer un en-tête divi fixe en quelques étapes simples.

Pourquoi rendre les en-têtes Divi collants?

L’une des principales raisons de le faire L’en-tête collant Divi est conçu pour faciliter la navigation des utilisateurs. L’en-tête se trouve en haut de votre site Web. C’est l’une des premières choses que les clients voient lorsqu’ils accèdent à votre site Web. L’en-tête contient des informations très importantes et aide les utilisateurs à naviguer dans votre contenu pour trouver ce qu’ils recherchent. Dans l’en-tête, vous mettez généralement les sections les plus importantes de votre site Web, les principales catégories, les liens vers vos produits, etc.

Par défaut, les menus WordPress n’apparaissent pas lorsque l’utilisateur fait défiler la page. Pour garder une longueur d’avance sur vos concurrents, vous pouvez figer votre en-tête afin que les utilisateurs puissent toujours le faire Ils peuvent également être facilement accessibles en faisant défiler vers le bas. Cela peut vous aider à améliorer la navigation sur votre site. De plus, vous pouvez guider vos utilisateurs et les amener là où vous le souhaitez. Donc, si vous l’utilisez intelligemment, l’en-tête peut vous aider à augmenter les taux de conversion.

Outre la modification de l’en-tête et Ajout d’icônes de médias sociaux au menu WordPress, les sites de commerce électronique les plus populaires Utiliser des méga menus pour voir leurs catégories de produits populaires. De cette façon, ils s’assurent que les acheteurs peuvent facilement trouver les articles qu’ils recherchent.

Menu de Flipkart.com

le Thème Divi Comprend plus de 600 modèles prêts à l’emploi que vous pouvez importer pour les utiliser sur votre site Web. Cependant, pour faire passer votre entreprise au niveau supérieur, vous avez besoin d’autre chose. Nous avons déjà vu comment modifier l’en-tête dans WordPress et aujourd’hui, nous allons vous montrer comment rendre l’en-tête collant en utilisant Divi.

Comme certains thèmes WordPress ouvrir et GeneratePress Venez avec des outils dont l’en-tête est collé dans la fenêtre du sujet. Cependant, pour ce faire dans Divi, quelques ajustements supplémentaires sont nécessaires.

Comment rendre les en-têtes Divi collants / bloqués?

Ici, nous allons vous montrer deux méthodes conviviales pour les débutants pour corriger l’en-tête Divi.

  1. Avec le plugin Divi Builder
  2. À propos du codage

Dans cette section, nous examinerons les étapes à suivre pour chaque option. Les deux sont assez efficaces, alors choisissez celui que vous aimez le plus.

1) Utilisez le Divi Builder pour rendre l’en-tête collant

Le thème Divi est livré avec un constructeur intégré. Cela signifie que si vous avez activé le thème Divi, vous n’avez pas besoin d’installer de plugin supplémentaire. Cette démonstration suppose que vous utilisez déjà Divi sur votre site. Sinon, installez et activez Divi avant de continuer.

Rendre Divi Header Sticky - Thème Divi activé Vous pouvez ensuite importer l’un des nombreux modèles prédéfinis proposés par Divi ou en créer un à partir de zéro. Une fois que vous avez créé ou sélectionné votre design, dans votre Tableau de bord WordPress, aller à Divi> Générateur de thèmes.

Comment rendre les en-têtes Divi collants (guide pas à pas) - Divi Builder

Ici, vous pouvez créer des modèles personnalisés pour vos sites Web. Il y a trois éléments principaux dans chaque modèle:

Modifier l’en-tête global

Sélectionnez l’option pour épingler notre en-tête Divi En-tête global. Pour le rendre collant, vous devez modifier l’en-tête global. Déplacez la souris sur la souris En-tête global, Sur la gauche, vous verrez une icône de crayon. Cliquez dessus pour commencer l’édition. Vous verrez alors la page Divi Builder où vous pouvez éditer l’en-tête. Ici, vous pouvez ajouter des éléments tels que du texte, des images, symboles sociaux, Menus et ainsi de suite. Passez votre souris sur le haut de l’écran et cliquez sur l’icône d’engrenage à gauche.

Comment rendre les en-têtes Divi collants (guide pas à pas) - Icône d'en-tête Une nouvelle fenêtre contextuelle s’ouvrira avec diverses options. Comment rendre les en-têtes Divi collants (Guide étape par étape) - Divi Popup Box La dernière version du thème Divi comprend une fonctionnalité appelée Positions Divi. C’est la fonction que nous allons utiliser pour rendre l’en-tête collant. Sous le Onglet Avancé, tu verras que positionner Possibilité. Ouvrez-le et sélectionnez le Fermement Option dans la liste déroulante. Ensuite, mettez à jour l’en-tête. Comment rendre les en-têtes Divi collants (Guide étape par étape) - Positions des en-têtes Divi Après cela, la boîte de dialogue disparaîtra et vous devrez enregistrer les modifications globales en cliquant sur le bouton Enregistrer dans le coin droit. Comment coller l'en-tête Divi (instructions pas à pas) - enregistrer les modifications Après avoir mis à jour votre en-tête, fermez ce générateur. Ensuite, enregistrez les options de Divi Builder.

Comment coller l'en-tête Divi (guide étape par étape) - Enregistrer les options de Divi Builder Il est maintenant temps de vérifier le front-end. Ouvrez votre site Web dans un nouvel onglet et faites défiler jusqu’à la zone ci-dessous. Comme vous pouvez le voir dans le GIF ci-dessous, l’en-tête reste bloqué!

Comment rendre les en-têtes Divi collants (Guide étape par étape) - En-têtes Divi fixes Sans écrire une seule ligne de code, vous avez créé un en-tête fixe. Assurez-vous de sauvegarder les paramètres lorsque vous mettez à jour votre élément d’en-tête via le générateur Divi. Sinon, vous ne pourrez pas voir les nouvelles modifications dans le front-end du site Web.

2) Fixez l’en-tête Divi par codage

Voyons maintenant comment rendre l’en-tête Divi collant en codant. Nous utilisons du code CSS pour cela. Ne vous inquiétez pas si vous n’êtes pas développeur. Les lignes de code que nous utilisons sont assez simples.

Premier dans le vôtre Tableau de bord WordPress, aller à Divi> Générateur de thèmes et ouvrez le Entête Section. Cliquez ensuite sur Icône d’engrenage pour ouvrir la fenêtre contextuelle. Sous le Avancée Dans la section, vous verrez les paramètres d’ajout personnalisé ID CSS et classes CSS. Utilisez ce qui suit ici:

  • ID CSS: En-tête principal
  • Classe CSS: et-fixed-header

Et puis enregistrez-le. Comment rendre l'en-tête Divi collant (guide pas à pas) - Ajouter un identifiant et une classe personnalisés à Divi Après cela, enregistrez le générateur et quittez. Revenez ensuite aux options de Divi Builder et enregistrez les modifications.

Enregistrer les nouvelles modifications

Ensuite, vous devez ajouter du code CSS au site. Il y a deux façons de faire ça:

  • Grâce aux options de thème Divis
  • Utilisation du personnalisateur WordPress

Examinons étape par étape les deux méthodes.

Rendre l’en-tête épinglé via les options de thème

Voyons d’abord comment ajouter le code CSS en utilisant Options du thème Section. Accédez à dans votre tableau de bord WordPress Divi> Options de conception> CSS personnalisé.

Comment rendre les en-têtes Divi collants (guide étape par étape) - Ajouter du CSS personnalisé

Ensuite, copiez et collez le code CSS ci-dessous.

@media only screen and (min-width: 981px){
#main-header.et-fixed-header {
position: fixed;
    padding-top:30px;
}
#page-container {
padding-top:135px;
}
}

Collez-le dans l’éditeur de code et enregistrez les modifications. Après cela, enregistrez les paramètres et vérifiez le front-end du site Web pour confirmer cela Vous avez rendu l’en-tête Divi collant sur votre site!

REMARQUE: Assurez-vous d’ajuster l’espacement dans le code CSS et d’ajuster la taille de votre site.

Comment coller l'en-tête Divi (instructions pas à pas) - enregistrer les modifications

Rendre l’en-tête collant avec WordPress Customizer

Un autre moyen rapide de coller l’en-tête Divi est d’utiliser le personnalisateur WordPress. Pour ouvrir le personnalisateur, allez simplement Apparence> Personnaliser puis ouvrez le CSS supplémentaire.

Maintenant, copiez et collez ce code:

@media only screen and (min-width: 981px){
#main-header.et-fixed-header {
position: fixed;
    padding-top:30px;
}
#page-container {
padding-top:135px;
}
}

REMARQUE: Ce code fonctionne pour notre site de démonstration. Cependant, nous vous recommandons d’ajuster l’espacement dans le code CSS et de redimensionner votre site. Comment rendre les en-têtes Divi collants (guide étape par étape) - Ajoutez du CSS via le personnalisateur WordPress

Enfin, enregistrez les modifications et vous avez terminé! Tu viens de faire a corrigé l’en-tête Divi avec le personnalisateur WordPress.

Comment rendre les en-têtes Divi collants (guide pas à pas) - En-têtes fixes avec CSS

Bonus: modifiez votre menu Divi

Cette section vous montre comment apporter des modifications à vos options de menu Divi fixes sans codage CSS. Pour ce faire, allez à Personnalisateur WordPress. Sous le Paramètres d’en-tête et de navigationune option de personnalisation apparaîtra avec le nom Paramètres de navigation fixes.

Ouvrez-le et vous verrez les options de personnalisation spéciales. Les principales options que vous verrez sur cet écran sont:

  • Masquer l’image du logo
  • Niveau de menu fixe
  • Taille du texte
  • Menu de couleurs d’arrière-plan
  • Lien du menu Couleur
  • Et autre

De cette façon, chaque fois que vous devez apporter des modifications à votre en-tête collant, vous pouvez simplement accéder au personnalisateur WordPress et modifier ces éléments. Et la meilleure partie est que vous pouvez voir chaque mise à jour dans l’aperçu en direct.

Conclusion

Dans l’ensemble, rendre votre en-tête Divi collant vous aidera à améliorer la navigation de votre site Web et potentiellement à améliorer vos taux de conversion. Dans ce manuel, nous vous avons montré deux options différentes:

  1. Avec le Divi Builder
  2. En codant
    1. Via les options de thème de Divi
    2. Utilisation du personnalisateur WordPress

Les deux méthodes sont assez efficaces, alors choisissez celle qui correspond le mieux à vos compétences et à vos besoins. Si vous voulez quelque chose de rapide, vous pouvez utiliser le Divi Builder. Il s’agit d’un plugin WordPress extraordinaire qui vous permet de personnaliser l’en-tête Divi en quelques clics. D’un autre côté, vous pouvez également utiliser un peu de code CSS pour rendre l’en-tête collant à l’aide des options de conception ou du personnalisateur WordPress. Bien qu’elle nécessite un peu de codage, cette méthode est assez simple et ne nécessite que l’ajout de quelques lignes de code au Divi Builder.

Si vous avez aimé cet article, partagez-le sur les réseaux sociaux et découvrez-le notre espace blog Des didacticiels plus utiles.

Connaissez-vous d’autres méthodes pour corriger l’en-tête Divi? Nous aimerions avoir de vos nouvelles, faites-le nous savoir dans les commentaires ci-dessous!





Source link

Recent Posts