Télécharger le pack de mise en page d’en-tête
Header Layout Pack comprend deux fichiers compressés. Le premier est un fichier unique qui contient les 81 mises en page. Ces mises en page sont téléchargées ensemble. Le second est un dossier complémentaire et comprend six dossiers. Ce sont les catégories des mises en page d’en-tête. Cela vous permet de télécharger uniquement les mises en page dans une catégorie particulière, telle que WooCommerce. Ceci est également utile si vous avez une limite de taille de fichier et que vous ne pouvez pas télécharger tous les fichiers en même temps.
Le processus de téléchargement des mises en page est le même pour tous les fichiers :
- Aller sur Divi
- Sélectionnez la bibliothèque Divi
- Cliquez sur Importer et exporter
- Sélectionnez l’onglet Importer
- Cliquez sur Choisir un fichier et accédez aux fichiers JSON décompressés sur votre ordinateur
- Cliquez sur Importer les mises en page de Divi Builder
Une fois l’importation terminée, vous aurez 81 nouveaux éléments dans votre bibliothèque Divi (si vous avez choisi le fichier JSON principal). Ils sont étiquetés et nommés en fonction de leurs catégories, ils sont donc faciles à identifier. Ces mises en page sont des mises en page standard de la bibliothèque Divi, elles peuvent donc être utilisées avec n’importe quelle mise en page Divi pour une page, une publication ou toute mise en page dans Divi Theme Builder, et stockées dans Divi Cloud pour une utilisation sur n’importe quel site Web Divi. Nous vous recommandons de les utiliser dans Divi Theme Builder et de les affecter à des catégories globales ou individuelles.
Exemples de pack de mise en page d’en-tête
Examinons quelques mises en page d’en-tête de chacune des six catégories. Dans mes exemples, je vais charger chaque mise en page dans le Divi Theme Builder. De nouvelles mises en page sont souvent ajoutées au Header Layout Pack. Je les sélectionne au hasard, mais je vais me concentrer sur un mélange de mises en page plus anciennes et plus récentes. Lorsque vous les affichez dans l’onglet Vos mises en page enregistrées, vous pouvez sélectionner les catégories ou afficher toutes les mises en page.
Pour mes captures d’écran, j’utilise la page d’accueil du Home Remodeling Layout Pack gratuit disponible dans Divi. Nous examinerons les versions filaires, de bureau et de téléphone des en-têtes.
En-têtes avancés
Tout d’abord, voici un aperçu des en-têtes avancés, qui contiennent 30 mises en page.
En-tête avancé V1
Le premier en-tête avancé comprend un module de menu, un module de bouton et deux modules de texte. Il comprend également un module de code avec CSS.
L’en-tête comprend des sous-menus déroulants stylisés. Un bouton CTA de devis s’étire au survol.
Alors que les menus de la version de bureau s’ouvrent au survol, le CSS crée une bascule de menu mobile personnalisée avec des boutons qui incluent des flèches indiquant si le menu peut être ouvert ou réduit.
En-tête avancé V20
La version 20 d’Advanced Header comprend quatre modules Image, trois modules Blurb, un module Menu et un module Code.
Les modules d’image peuvent être utilisés pour les logos. Tous les modules Blurb sont des boutons cliquables pour les informations de contact, les services et un CTA pour obtenir un devis.
Les bascules de menu mobile sont ajoutées à la version du téléphone avec CSS.
En-tête avancé V30
Advanced Header V30 comprend trois modules de texte, un module de menu et un module de code.
La version Desktop affiche une barre de menu supérieure rouge avec un court message et un numéro de téléphone en gros caractères. Un logo et un menu sont placés en dessous et incluent un sous-menu déroulant dont le style correspond à celui de la barre de menus supérieure.
Alors que la version de bureau comprend des surlignages rouges, la version pour téléphone supprime le fond rouge des sous-menus et inclut les bascules CSS.
En-têtes de superposition plein écran
Deuxièmement, nous verrons les en-têtes de superposition plein écran de Header Layout Pack, qui comprennent 3 mises en page.
En-tête de superposition plein écran V2
Fullscreen Overlay V2 est livré avec de nombreux éléments, notamment du texte, des images, des boutons, des textes de présentation, du code, des médias sociaux, un menu, etc.
Il comprend une icône de menu hamburger avec une animation de survol. Le bouton CTA s’élargit au survol.
Le menu s’ouvre en plein écran lorsque vous cliquez dessus et comprend des sous-menus cliquables.
Voici la version téléphone, qui suit le même design.
En-tête de superposition plein écran V3
Fullscreen Overlay Header V3 utilise des modules similaires à la disposition précédente, mais crée une conception différente pour la superposition plein écran.
L’en-tête du bureau comprend l’icône CTA et hamburger avec animation de survol.
Son menu couvre la moitié de l’écran tandis qu’une image occupe l’autre moitié de l’écran.
La version pour téléphone suit le même design pour le menu, mais n’inclut pas l’image.
En-tête avec diapositives
Troisièmement, nous examinerons l’en-tête avec diapositives de Header Layout Pack, qui comprend trois mises en page.
En-tête avec diapositives V2
La version 2 crée le slide-in avec un module Blurb, plusieurs modules de texte, un module de menu, un module de bouton et du code.
Le menu coulissant affiche les sous-menus sous un message. En bas du menu, vous pouvez trouver un CTA et une image.
La version téléphone supprime l’image tout en gardant le design du menu.
En-tête avec diapositives V3
La version 3 inclut des modules Blurb pour créer les diapositives.
La diapositive de bureau comprend une animation de survol et affiche du texte et des icônes. Chacun des éléments est cliquable.
Les éléments cliquables du menu coulissant du téléphone sont beaucoup plus grands que la version de bureau, ce qui les rend faciles à utiliser sur mobile.
En-têtes simples
Quatrièmement, les en-têtes simples comprennent 30 mises en page.
En-têtes simples V15
La version 15 de Simple Headers comporte deux lignes et comprend un module de médias sociaux et plusieurs modules Blurb.
La version de bureau comprend une barre supérieure avec des informations de contact. Un logo est centré et le menu comprend des sous-menus.
La version téléphone ajoute les boutons bascule pour les sous-menus.
En-têtes simples V22
Celui-ci comprend deux lignes pour créer l’en-tête.
La barre supérieure affiche un CTA avec une animation de survol, le logo au centre et un numéro de téléphone. Son menu comprend des sous-menus stylisés.
La version du téléphone affiche les sous-menus avec des bascules créées dans le module de code.
En-têtes de logos carrés
Cinquièmement, les en-têtes Square Logos comprennent cinq mises en page. Ils sont idéaux si vous avez un logo plus grand que la plupart des logos.
En-têtes de logos carrés V3
Celui-ci a été construit avec une section spécialisée pour inclure une mise en page multi-colonnes. Le logo carré est créé avec un module Image dans sa propre colonne.
La version de bureau comprend une barre supérieure avec un champ de recherche et des informations de contact. Tous les menus sont stylisés pour correspondre à l’arrière-plan de la barre supérieure.
La version pour téléphone inclut les bascules de sous-menu créées avec CSS.
En-têtes de logos carrés V4
La version 4 comprend trois colonnes pour créer le logo, le menu et les CTA.
La version de bureau affiche le logo et le numéro de téléphone dans les deux colonnes extérieures. Une colonne centrale comprend deux lignes. La ligne du haut affiche les informations de contact et un CTA, tandis que la ligne du bas affiche le menu avec un arrière-plan assorti aux icônes et au bouton de la ligne du haut.
La version téléphone comprend une grande zone de logo. Les sous-menus incluent les bascules créées avec CSS.
En-têtes Woo
Enfin, nous examinerons le Header Layout Pack, qui comprend 10 en-têtes WooCommerce.
En-têtes Woo V3
Notre premier Woo Header comprend deux rangées. La rangée supérieure comprend un module de texte, tandis que la deuxième rangée affiche un module de menu et plusieurs modules d’icônes.
Le module de texte de la ligne supérieure crée une bannière de vente. Les graphiques incluent des icônes de personne, de cœur et de panier qui peuvent être liées à la connexion au compte de la personne, à sa liste de favoris et à son panier.
La version téléphone déplace les icônes au-dessus du menu hamburger. Comme les autres que nous avons vus, ce sous-menu comprend des bascules créées avec CSS.
En-têtes Woo V7
Woo header version 7 a été construit avec trois lignes qui incluent des modules Blurb pour créer des liens WooCommerce intéressants.
La version de bureau affiche un message et les liens Woo dans la barre supérieure. Une barre du milieu affiche un logo et une recherche de produits WooCommerce. La barre de menus comprend des boutons de médias sociaux.
Il s’agit de la version pour téléphone, qui place les icônes des médias sociaux sous l’icône du menu hamburger. Tout est bien espacé sur l’écran du téléphone, et il inclut même les liens WooCommerce et le champ de recherche de produits.
En-têtes Woo V10
Woo Header version 10 comprend également trois lignes. Il comprend une recherche de produits et utilise un module de texte pour créer une bannière.
La version de bureau affiche une bannière de vente verte en haut. Les icônes, le bouton et les surlignages correspondent à la barre verte. La barre du milieu comprend les icônes WooCommerce, tandis que le menu et la recherche sont placés en bas.
Voici la version pour téléphone, qui place le champ de recherche sous le menu hamburger. Celui-ci inclut également les bascules de sous-menu créées avec CSS.
Achetez le pack de mise en page d’en-tête
Header Layout Pack est disponible sur Divi Marketplace pour 15 $. Il comprend des mises à jour à vie, une utilisation illimitée du site Web et une garantie de remboursement de 30 jours.
Mettre fin aux pensées
C’est notre regard sur Header Layout Pack. Il y a beaucoup de mises en page dans ce pack d’en-tête. Ils sont élégants, offrent de nombreuses options de conception et sont faciles à utiliser. Étant donné que les mises en page ont été créées par la même personne, elles partagent un point commun qui, selon moi, les rend plus faciles à utiliser. Les méthodes sont standardisées, donc si vous savez comment personnaliser l’une des mises en page, vous pouvez personnaliser le reste. Si vous êtes intéressé par un ensemble complet d’en-têtes, Header Layout Pack est un travail à envisager.
Nous voulons de vos nouvelles. Avez-vous essayé Header Layout Pack pour votre site Web Divi ? Faites-nous part de votre expérience dans les commentaires.
Articles similaires:
Qu’est-ce que le double opt-in ? 
Obtenez un pack de mise en page de magasin d’altération gratuit pour Divi 
