Un aperçu des types d'en-tête Divi, des tutoriels et des cadeaux

Depuis la sortie de Divi Theme Builder, la façon dont nous créons les en-têtes Divi a changé pour le mieux. Nous pouvons ajouter n'importe quel élément que nous voulons, le styliser à l'aide des options de conception intégrées de Divi et créer une expérience parfaitement réactive. Au cours des deux derniers mois, nous avons gardé un œil sur la façon dont nous pouvons vous aider à tirer le meilleur parti de vos conceptions d'en-tête grâce à des tutoriels et à des cadeaux. À un moment donné, naviguer dans tous ces différents types d'en-têtes, tutoriels et cadeaux peut devenir un peu déroutant, c'est pourquoi nous avons mis en place ce post auquel vous pouvez toujours revenir. Cet article présentera les différents types d'en-tête que vous pouvez créer, qui incluent également un fichier de téléchargement gratuit. En plus du téléchargement gratuit, vous obtenez un didacticiel pas à pas qui vous aide à comprendre ce que vous créez et comment vous pouvez modifier les choses pour répondre à vos propres besoins.

La deuxième partie de cet article se concentre sur quelques trucs et astuces qui ont souvent été demandés dans la communauté Divi, nous vous montrons comment résoudre un certain problème ou réaliser un design sans avoir à perdre du temps à essayer de le comprendre vous-même. Enfin, nous avons répertorié tous les cadeaux d'en-tête que vous pouvez télécharger et utiliser immédiatement.

Découvrir les types d'en-tête
Découvrez les trucs et astuces des en-têtes
Découvrez les en-têtes gratuits

Types d'en-tête

1. En-tête régulier

Le premier tutoriel de type en-tête qui est sorti sur le blog lors de la sortie de Divi Theme Builder est un en-tête régulier. Ce tutoriel se concentre sur la familiarisation avec l'environnement Divi Theme Builder et la création d'un en-tête global. Nous avons inclus une barre supérieure avec un logo, des icônes de suivi social et un bouton. La barre de navigation présente de manière dynamique les éléments de menu qui peuvent être configurés dans le backend de votre site Web WordPress.

Visiter le didacticiel

2. En-tête collant

Si vous cherchez à configurer un en-tête qui est également collant, vous voudrez vous familiariser avec cet article. En plus de vous montrer comment configurer une structure d'en-tête appropriée, y compris la barre supérieure, le didacticiel vous montre également comment rendre votre en-tête collant, en utilisant les options de collant intégrées de Divi. Les styles des éléments de l'en-tête changent également lors du défilement, ce qui donne à l'en-tête une toute nouvelle apparence.

Visiter le didacticiel

3. En-tête plein écran

Une barre d'en-tête supérieure n'est pas le seul moyen de permettre la navigation sur votre site Web, bien sûr, nous avons donc ensuite un en-tête plein écran. Dans ce tutoriel, nous vous montrons comment créer un en-tête plein écran personnalisé complet avec Divi. Tous les éléments de votre menu sont des modules et la fonction de clic est activée par un code JQuery inclus dans le didacticiel et le fichier de téléchargement. Voici quelques cadeaux qui utilisent cette approche similaire :

1. Modèle de modèle d'en-tête et de pied de page d'entreprise de relations publiques
2. Modèle d'en-tête et de pied de page de restaurant italien
3. Modèle d'en-tête et de pied de page de rédacteur indépendant
4. Modèle d'en-tête et de pied de page de conseiller financier

Visiter le didacticiel

4. En-tête coulissant

Ensuite, nous avons un en-tête qui glisse du côté droit. Ce tutoriel est également basé sur les éléments intégrés de Divi. Vous pouvez placer tout ce que vous voulez dans votre menu coulissant et créer un environnement entièrement réactif avec des options réactives. La fonction de clic a pris sa forme à travers un code JQuery personnalisé qui est inclus dans le didacticiel ainsi que le fichier JSON du modèle gratuit.

Visiter le didacticiel

5. Faites glisser l'en-tête de poussée vers le bas

Un autre type d'en-tête sympa dans notre liste est un en-tête push down. Lorsque l'on clique sur l'icône du hamburger, l'en-tête glisse du haut vers le bas et pousse le contenu de la page vers le bas. Cela donne un effet amusant et magnifique sur toutes les tailles d'écran.

Visiter le didacticiel

6. Navigation verticale

Une autre façon de fournir aux visiteurs une navigation sans effort consiste à utiliser une barre de navigation verticale. Si vous cherchez un moyen de le faire dans Divi Theme Builder, assurez-vous de consulter ce didacticiel. La navigation verticale occupe son propre espace dans le navigateur, ce qui réduit la largeur du contenu de la page et crée une belle structure de page côte à côte.

Visiter le didacticiel

7. En-tête flottant transparent

Si vous cherchez à ajouter un en-tête en haut de votre page ou à publier du contenu, ce tutoriel est fait pour vous ! Nous utilisons un en-tête transparent avec trois éléments différents ; un logo, un menu et un bouton. Ces trois éléments sont placés au-dessus du contenu de la page via une position CSS absolue. Le résultat est également très réactif et donne un bon résultat cohérent sur votre site Web.

Visiter le didacticiel

8. En-tête collant transparent

Ce tutoriel est légèrement similaire au précédent, avec une grande différence ; dès que les visiteurs font défiler la page ou publient sur lesquels ils se trouvent, la barre de navigation devient collante et change de style. Cela vous permet de tirer le meilleur parti de la conception de votre section de héros en haut de la page tout en maintenant une navigation sans effort pendant que les visiteurs font défiler vers le bas.

Visiter le didacticiel

9. En-tête pivoté

Si vous recherchez une conception plus prête à l'emploi pour votre site Web, vous pouvez envisager d'opter pour un en-tête transparent pivoté. Ce type d'en-tête est placé sur le côté de votre site Web et suit vos visiteurs tout au long de leur visite sur vos pages. Il donne un aspect et une sensation plus sophistiqués à la conception de votre bureau tout en conservant cette expérience de barre supérieure sans effort sur des écrans de plus petite taille.

Visiter le didacticiel

10. Liste déroulante personnalisée du commerce électronique

Plus votre site Web grandit, plus il est difficile de trouver un bon moyen de répertorier toutes les pages de votre site Web. C'est là que les méga menus sont utiles. Bien que vous puissiez toujours revenir au méga menu intégré de Divi, si vous recherchez un environnement plus conçu pour Divi où vous pouvez ajouter autant de modules que vous le souhaitez, ce tutoriel est fait pour vous. Surtout pour les sites Web de commerce électronique, il peut être utile de présenter différentes catégories de produits de manière attrayante et hautement visuelle. Bien que ce didacticiel soit un type de ressource plus «avancé», la base du code a été définie pour vous, ce qui vous permet d'être aussi créatif que vous le souhaitez avec la conception. Assurez-vous que même lorsque vous utilisez le fichier modèle JSON pour ce didacticiel, vous suivez les quelques étapes nécessaires pour donner vie à ce méga menu.

Visiter le didacticiel

11. Liste déroulante des thèmes élégants personnalisés

Depuis la sortie de Divi Theme Builder, les gens se demandent comment créer des listes déroulantes de navigation transparentes pour Elegant Themes. Ce didacticiel vise à vous montrer exactement comment reproduire le menu déroulant Thèmes élégants dans le générateur de thèmes Divi. Plus encore, il vous permet d'ajouter tout type de modules que vous souhaitez et de créer votre propre variation unique du menu.

Visiter le didacticiel

Conseils & Astuces

Dans cette partie du post de présentation, nous partageons les différents trucs et astuces sous forme de tutoriel. Chacun de ces articles comprend une expérience de A à Z. Cela signifie que nous ne vous montrons pas seulement comment réaliser l'astuce, nous vous guidons également tout au long du processus de création d'en-tête, ce qui vous donne le choix ; voulez-vous utiliser l'intégralité de la conception à vos propres fins ou vous concentrer uniquement sur ce truc et cette astuce spécifiques.

1. Révéler et masquer l'en-tête sur le défilement

Visiter le didacticiel

2. Menu imbriqué mobile

Visiter le didacticiel

3. Animer votre en-tête global

Visiter le didacticiel

4. Ajout d'un formulaire de connexion en ligne à votre en-tête

Visiter le didacticiel

5. Ajout de deux boutons côte à côte à votre en-tête

Visiter le didacticiel

6. Placer automatiquement votre en-tête sous la première section de chaque page

Visiter le didacticiel

7. Ajout d'un formulaire de contact déroulant à votre en-tête

Visiter le didacticiel

8. Échanger votre en-tête sur le défilement

Visiter le didacticiel

9. Optimisation du module de menu de Divi avec 5 préréglages globaux

Visiter le didacticiel

10. Ajout d'étiquettes de coin aux éléments de menu dans votre en-tête

Visiter le didacticiel

11. Ajout et animation de votre logo SVG à l'intérieur de votre en-tête

Visiter le didacticiel

12. Mélanger votre en-tête et vos pages avec des diviseurs de section Divi

Visiter le didacticiel

13. Ajout d'un titre de site dynamique et d'un slogan à votre en-tête

Visiter le didacticiel

14. Optimiser le logo de votre site Divi avec des préréglages globaux

Visiter le didacticiel

15. Ajout d'une barre audio "Dernier épisode" fixe à votre en-tête

Visiter le didacticiel

16. Ajout d'animations de boutons retardées à votre CTA d'en-tête

Visiter le didacticiel

17. Changer votre logo collant sur le défilement

Visiter le didacticiel

En-tête Cadeaux

Enfin, nous énumérons également les différents articles gratuits d'en-tête que vous pouvez trouver sur le blog Elegant Themes. L'initiative de conception d'en-têtes gratuits a commencé avec les premiers packs de création de thèmes que nous avons partagés en décembre 2019, mais ce n'est pas là qu'elle s'arrête. Nous avons continuellement partagé et continuerons de partager des cadeaux gratuits d'en-tête et de pied de page qui correspondent aux packs de mise en page Divi. Bien que le style soit principalement basé sur le pack de mise en page en question, ils peuvent également être facilement utilisés pour d'autres sites Web.

1. Packs de création de thème

Pack de création de thème n° 1

Visiter le didacticiel

Pack de création de thème #2

Visitez le didacticiel

Pack de création de thème n°3

Visiter le didacticiel

Pack de création de thème n°4

Visiter le didacticiel

Pack de création de thème #5

Visiter le didacticiel

Pack de création de thème #6

Visiter le didacticiel

2. En-tête et pied de page du pack de mise en page

Pack de mise en page de restaurant italien

Visiter le didacticiel

Pack de mise en page d'assistant virtuel

Visiter le didacticiel

Pack de mise en page d'espace de coworking

Visitez le didacticiel

Pack de mise en page de nettoyage de vitres

Visitez le didacticiel

Pack de mise en page de tarot

Visitez le didacticiel

Pack de mise en page de peintre

Visiter le didacticiel

Pack de disposition de fournitures pour animaux de compagnie

Visiter le didacticiel

Pack de mise en page de produits de beauté

Visiter le didacticiel

Pack de mise en page d'école de cuisine

Visitez le didacticiel

Pack de mise en page de parfumerie

Visiter le didacticiel

Pack de mise en page de restaurant de sushi

Visiter le didacticiel

Pack de mise en page de remède à base de plantes

Visitez le didacticiel

Pack de mise en page de rénovation

Visiter le didacticiel

Pack de mise en page robotique

Visiter le didacticiel

Pack de mise en page de guérisseur holistique

Visiter le didacticiel

Pack de mise en page de magasin d'épices

Visiter le didacticiel

Pack de disposition de rembourrage

Visiter le didacticiel

Pack de mise en page d'entreprise de relations publiques

Visiter le didacticiel

Pack de mise en page d'entraîneur de fitness

Visiter le didacticiel

Pack de mise en page de photographe de mariage

Visitez le didacticiel

Pack de mise en page diététiste

Visiter le didacticiel

Pack de mise en page d'écrivain indépendant

Visitez le didacticiel

Pack de mise en page d'interprète

Visiter le didacticiel

Pack de mise en page du conseiller financier

Visiter le didacticiel

Pack d'aménagement de salon de manucure

Visitez le didacticiel

Pack de mise en page d'influenceurs

Visitez le didacticiel

Pack de mise en page d'entreprise en cuir

Visiter le didacticiel

Pack de mise en page d'acupuncture

Visiter le didacticiel

3. Autre

Ensemble minimal d'en-tête et de pied de page

Visiter le didacticiel

Recherche de nouveaux en-têtes sur notre blog

Nous publions régulièrement de nouveaux en-têtes gratuits et des tutoriels sur notre blog. Nous continuerons à mettre à jour cet article au fil du temps, mais si vous souhaitez rester au courant des nouveautés, n'hésitez pas à rechercher dans la barre de recherche du blog en utilisant des mots-clés comme « en-tête » et « menu » !

Dernières pensées

Dans cet article, nous avons fourni un aperçu clair des types d'en-tête Divi, des tutoriels et des cadeaux que vous pouvez trouver sur notre blog ! Cet article vous aidera, espérons-le, à jeter les bases de votre en-tête avant de vous lancer dans un nouveau projet. Vous pouvez décider du type d'en-tête que vous souhaitez créer, accéder à l'article de blog qui vous montre comment le faire ou télécharger le fichier JSON pour que tout soit prêt à l'emploi ! Nous avons également partagé quelques trucs et astuces à appliquer à votre en-tête, qui, espérons-le, vous aideront à résoudre les problèmes rapidement et à vous concentrer sur ce qui est vraiment important : avoir un site Web bien équilibré que vous aviez en tête. 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.