L’arrivée de la version 4.0 de Divi a fait passer le thème de simple constructeur de page à un véritable constructeur de site. La nouvelle fonctionnalité appelée Divi Theme Builder permet désormais de créer des modèles pour absolument tous les types de publications : pages, articles, projets, catégories, page de produit Woocommerce… mais aussi pour le header et le footer du site.

Pour le moment hélas, les modèles de page ou layouts gratuits proposés par Elegant Themes n’incluent pas de header et de footer directement gérés depuis le Thème builder. Vous devez donc les télécharger séparément et les installer manuellement. Il y a fort à parier qu’une prochaine mise à jour de Divi permettra de résoudre ce souci.

Heureusement, Elegant Themes propose régulièrement des modèles de header à télécharger gratuitement et à installer sur votre site. J’ai rassemblé les meilleurs templates pour vous aider à faire votre choix d’un coup d’oeil.

Comment importer des modèles avec le constructeur de thème de Divi ?

Pour importer les modèles détaillés plus bas dans cet article sur votre site , vous devez disposer d’un fichier au format json. Un fichier json peut contenir un seul ou plusieurs modèles, un header, un footer et un modèle de site global par exemple.

Pour importer le fichier json du header que vous voulez installer, accédez aux options de portabilité du Thème builder en cliquant sur l’icône de portabilité en haut à droite de la page (2 flèches).

Sélectionnez ensuite l’onglet Importer puis choisissez le fichier sur votre ordinateur.

Si vous importez un modèle dans un constructeur de thème vide, les options proposées par défaut ne vous concernent pas, vous pouvez donc les laisser cochées pour ne rien remplacer.

Il ne reste plus qu’à cliquer sur le bouton d’importation et d’effectuer une sauvegarde du résultat.

26 modèles de header pour Divi à télécharger et à installer

La meilleure source de templates gratuits reste Elegant Themes qui en propose régulièrement sur son blog et souvent accompagnés de tutoriels pour comprendre comment ces modèles sont élaborés. Une façon pratique de progresser en conception de sites web. Si vous n’avez pas le temps de vous pencher sur els détails de conception, il vous suffit de télécharger le template au format .json et de l’importer dans votre thème.

✔︎ Art Show

Un design élégant en jaune et noir avec un bouton d’appel à l’action bien visible et une barre supérieure qui permet de mettre en avant les réseaux sociaux. Le menu de navigation est présenté de façon originale dans une barre de second niveau aux bords courbées. Il est à télécharger ici.

✔︎ Le pack de 10 layouts gratuits du cyber monday

Pour le Cyber Monday 2019, Divi a proposé un pack de 10 modèles de header au design simple et efficace. SI vous êtes membres à vie de Divi, vous pouvez récupérer le pack depuis votre espace personnel dans la rubrique idoine. Pour en savoir plus c’est ici.

✔︎ Header avec menu encastré

Voilà un de designs de header que je préfère. Il émane de chez Elegant Themes également. Le bouton d’appel à l’action avec ce dégradé du vert au jaune a quelque chose de frais et il est en plus assez simple à reproduire. Une belle inspiration. ET bien sûr, le template est téléchargeable directement depuis le site de ET.

✔︎ Header global animé

Une récente mise à jour de Divi permet de jouer sur des effets de zoom ou de parallaxe lorsque l’utilisateur scroll. L’équipe de ET a utilisé cette technique pour créer un header animé du plus bel effet.

✔︎ Header avec formulaire de login

Dans un genre un peu différent mais tout aussi pratique, ce header inclut un formulaire de connexion. Idéal si vous avez un espace membre.

✔︎ Le pack gratuit et son header noir et rouge

Noir c’est noir, il y a plein d’espoir ! ET propose ici une oeuvre Stendhalienne avec ce rouge et noir classique et efficace. Layout à télécharger bien sûr, de même qu’un modèle de blog gratuit de style dynamique et tranchant. ET propose rarement des modèle d’article de blog, donc il faut se jeter dessus !

✔︎ Le pack de b3multimedia

Et parce qu’il n’y a pas que Elegant Themes dans la vie, je vous recommande aussi le pack de 10 templates gratuits mis à disposition par B3Multimedia sur leur site. Vous y trouverez aussi des modèles de footer très réussis de même que quelques thème entier bien réalisés. Du bel ouvrage assurément.

✔︎ Le template de header gratuit du pack « Leather Company »

Un autre template officiel de Elegant Themes a été proposé le 17 avril 2020, je l’ajoute donc à la suite des modèles précédents. Il inclus une barre de menu simple, avec un logo à cheval sur le menu et la section héros, des icônes de réseaux sociaux et un bouton d’appel à l’action en haut à droite. C’est un header à la fois simple et bien équilibré qu’il est facile d’adapter à vos besoins.

✔︎ Template de header pour le layout « restaurant italien » de Divi

On retrouve  sur ce template officiel un menu avec la liste des pages, dans un univers calme (blanc, jaune et gris). C’est une création plus originale, avec un menu pleine page qui se déroule au clic. Le design du menu en lui-même est assez simple, sur fond blanc. Vous pouvez le télécharger ici.

✔︎ Template de header pour la layout « Aliments pour animaux de compagnie » (Pet Supply)

Voilà une têtière de style moderne et décomplexé. Des boutons de réseaux sociaux, un bouton d’appel à l’action jaune mais surtout deux courbes géométriques tête-bêche procurent un résultat visuel différent de ce qu’on a l’habitude de voir sur le net. Libre à vous de modifier les couleurs de ces formes géométriques du reste. Vous pouvez récupérer ce header et son footer sur le site de Divi.

✔︎ Template de header pour la layout « Art de cuisiner » (Art of cooking)

Un header simple et élégant constitué de 3 blocs : un logo, un menu et une bande contenant un message de quelques mots. Un de mes préférés car il est à la fois simple, net et bien équilibré visuellement. Il est en plus très facile à personnaliser. Récupérez-le ici et faites vous plaisir !