Point fort du produit Divi

Point fort du produit Divi

 

L’en-tête est l’un des premiers éléments à charger pour tout site Web Divi que vous créez. Cela signifie que l’en-tête donne souvent la première impression que quiconque voit pour un site Web, ce qui fait de la conception de l’en-tête un élément crucial de chaque site Web. Heureusement, vous n’avez pas à créer votre en-tête à partir de zéro. Il existe de nombreuses dispositions d’en-tête sur le marché Divi pour vous donner une longueur d’avance. Header Layout Pack en est un exemple. Il s’agit d’un ensemble de plus de 80 en-têtes personnalisés qui fonctionnent pour à peu près n’importe quel type de site Web. Dans cet article, nous examinerons Header Layout Pack pour vous aider à décider s’il s’agit du produit adapté à vos besoins.

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 :

  1. Aller sur Divi
  2. Sélectionnez la bibliothèque Divi
  3. Cliquez sur Importer et exporter
  4. Sélectionnez l’onglet Importer
  5. Cliquez sur Choisir un fichier et accédez aux fichiers JSON décompressés sur votre ordinateur
  6. Cliquez sur Importer les mises en page de Divi Builder

Télécharger le pack de mise en page d'en-tête

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.

Télécharger le pack de mise en page d'en-tête

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.

Lire Aussi...  Comment créer un thème de bloc pour WordPress ?

Exemples de pack de mise en page d'en-tête

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.

En-têtes avancés

L’en-tête comprend des sous-menus déroulants stylisés. Un bouton CTA de devis s’étire au survol.

En-têtes avancés

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é v1 - Vue mobile

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.

En-têtes avancés

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.

En-têtes avancés

Les bascules de menu mobile sont ajoutées à la version du téléphone avec CSS.

En-tête avancé v20 - Vue mobile

En-tête avancé V30

Advanced Header V30 comprend trois modules de texte, un module de menu et un module de code.

En-têtes avancés

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.

En-têtes avancés

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ête avancé v30 - Mobile

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.

En-têtes de superposition plein écran

Il comprend une icône de menu hamburger avec une animation de survol. Le bouton CTA s’élargit au survol.

En-tête de superposition plein écran v2 - Bureau

Le menu s’ouvre en plein écran lorsque vous cliquez dessus et comprend des sous-menus cliquables.

En-tête de superposition plein écran v2 - Bureau, ouvert

Voici la version téléphone, qui suit le même design.

En-tête de superposition plein écran v2 - Mobile

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.

En-têtes de superposition plein écran

L’en-tête du bureau comprend l’icône CTA et hamburger avec animation de survol.

En-tête de superposition plein écran v3

Son menu couvre la moitié de l’écran tandis qu’une image occupe l’autre moitié de l’écran.

En-tête de superposition plein écran v3 - Ouvrir

La version pour téléphone suit le même design pour le menu, mais n’inclut pas l’image.

Lire Aussi...  14 meilleurs plugins de médias sociaux WordPress en 2024

En-tête de superposition plein écran v3 - Mobile

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.

En-tête avec diapositives

Le menu coulissant affiche les sous-menus sous un message. En bas du menu, vous pouvez trouver un CTA et une image.

Glisser dans v2

La version téléphone supprime l’image tout en gardant le design du menu.

Glisser dans v2 - Mobile

En-tête avec diapositives V3

La version 3 inclut des modules Blurb pour créer les diapositives.

En-tête avec diapositives

La diapositive de bureau comprend une animation de survol et affiche du texte et des icônes. Chacun des éléments est cliquable.

Glisser dans v3 - Bureau

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ête avec diapositives

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.

En-têtes simples

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.

En-têtes simples

La version téléphone ajoute les boutons bascule pour les sous-menus.

Menu Simple 15 - Mobile

En-têtes simples V22

Celui-ci comprend deux lignes pour créer l’en-tête.

En-têtes simples

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.

En-têtes simples

La version du téléphone affiche les sous-menus avec des bascules créées dans le module de code.

Menu Simple 22 - Mobile

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.

En-têtes de logos carrés

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.

En-têtes de logos carrés

La version pour téléphone inclut les bascules de sous-menu créées avec CSS.

Menu logo carré v3 - Mobile

En-têtes de logos carrés V4

La version 4 comprend trois colonnes pour créer le logo, le menu et les CTA.

En-têtes de logos carrés

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.

En-têtes de logos carrés

La version téléphone comprend une grande zone de logo. Les sous-menus incluent les bascules créées avec CSS.

Menu logo carré v4 - Mobile

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.

En-têtes Woo

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.

Lire Aussi...  15 Best Magazine WordPress Themes in 2023

En-têtes Woo

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ête Woo v3 - Mobile

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.

En-têtes Woo

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.

En-têtes Woo

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.

Woo Header v7 - Mobile

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.

En-têtes Woo

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.

En-têtes Woo

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.

En-têtes Woo v10 - Mobile

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.

Acheter le pack de mise en page d'en-tête

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.

Comments are closed.