Un aperçu et une révision du pack de mise en page d'en-tête de Divi Life
Publié: 2020-11-22Le Header Layout Pack de Divi Life est un ensemble d'en-têtes pour Divi Theme Builder qui peuvent être stylisés pour s'adapter à n'importe quel site Web Divi. Les en-têtes se démarquent de la foule avec un nouveau style ajouté avec du code. Le pack de mise en page comprend six modèles d'en-tête avec trois styles pour chacun. Dans cet article, nous examinerons le pack de mise en page d'en-tête pour vous aider à décider s'il correspond à vos besoins.
Importation du pack de mise en page d'en-tête Divi Life
Avant d'utiliser les mises en page avec le Divi Theme Builder, vous devrez les importer dans votre bibliothèque Divi. Heureusement, il s'agit d'un processus simple et direct :
- Téléchargez et décompressez les mises en page dans un dossier sur votre ordinateur.
- Allez dans Divi > Divi Library dans le menu du tableau de bord WordPress.
- Sélectionnez Importer et exporter en haut de l'écran.
- Sélectionnez Importer dans la fenêtre contextuelle, sélectionnez Choisir un fichier et accédez à la mise en page que vous souhaitez télécharger (sélectionnez ALL-Divi-Life-Header-Templates si vous souhaitez les télécharger tous en même temps.
- Cliquez sur Importer les mises en page Divi Builder et attendez la fin du téléchargement.
Les mises en page seront désormais disponibles dans votre bibliothèque. Dans l'exemple ci-dessus, j'ai choisi de télécharger tous les modèles. Le générateur de thèmes a désormais accès à toutes les mises en page. Vous n'aurez qu'à ajuster le code et le menu de l'en-tête 1. Le reste fonctionne tel quel.
Créer un en-tête global dans le Divi Theme Builder
Ouvrez le Divi Theme Builder et cliquez pour ajouter un en-tête global. Sélectionnez Ajouter à partir de la bibliothèque .
Sélectionnez l'onglet intitulé Vos mises en page enregistrées et choisissez la mise en page souhaitée. Attendez qu'il soit importé.
Cliquez sur l'icône d'édition pour personnaliser la mise en page.
J'ai sélectionné Header-1-a. Cela montre la disposition dans la vue filaire. Il comprend un module de code avec CSS et JS personnalisés. De nombreux modules incluent des ID de classe pour le CSS personnalisé. Une partie du code peut ne pas s'exécuter dans l'aperçu du générateur de thème. Je recommande de visualiser l'en-tête sur le front-end.
Si vous souhaitez apporter des modifications et que vous ne souhaitez pas que l'en-tête s'affiche tant que les modifications ne sont pas apportées, vous pouvez envisager de créer une page de test et d'attribuer l'en-tête à cette page avant d'en faire un en-tête global.
Modification du contenu et du style
Ensuite, il vous suffit de choisir votre menu, d'ajouter votre logo et de personnaliser les couleurs pour qu'elles correspondent à votre site Web. L'en-tête utilise les modules standard, cela fonctionne donc comme n'importe quel en-tête. J'ai sélectionné mon menu dans l'exemple ci-dessus.
Le bouton utilise déjà des styles personnalisés. Ajoutez simplement vos couleurs et polices conçues. Cliquez pour enregistrer les modifications.
Assurez-vous également d'enregistrer les modifications sur l'écran principal. J'ai ajouté une version de l'en-tête à un article spécifique afin que je puisse tester l'en-tête avant de le déposer dans le modèle de site Web par défaut et de le rendre global.
Exemples d'en-tête
Voici à quoi ressemblent les modèles avec mon site de test. Les 6 dispositions ont une version pré-stylée de couleur claire, sombre et lumineuse. Cela permet de choisir plus facilement un en-tête qui correspond à votre conception, puis de l'adapter à vos besoins. Ils ont également des boutons qui changent de couleur au survol.
Nous en examinerons un mélange avec différentes couleurs d'arrière-plan et tailles d'écran. J'utilise les mises en page de page d'accueil et de page de destination du pack de mise en page Pizzeria.
Mise en page de l'en-tête 1
L'en-tête 1 comprend un module de code, un menu, une recherche et un bouton pour créer le CTA.
Le processus d'importation ne conserve pas les valeurs correctement, donc trois lignes du CSS devront être modifiées.
De plus, le menu devra être renommé et la classe CSS devra être ajoutée au menu. Heureusement, tous ces ajustements sont faciles à faire. Les instructions sont dans la documentation. C'est la seule fois où j'ai eu besoin de la documentation lors de cet examen.
Le résultat est un menu élégant avec des lignes de séparation pour les trois éléments de menu principaux placés à gauche, le reste du menu placé à droite, un champ de recherche avec une icône à l'intérieur du champ de recherche et un gros bouton CTA. Voici à quoi cela ressemble avec le fond clair. Une ombre sépare l'en-tête de la page.
Voici le fond sombre. Je survole le CTA pour montrer qu'il change de couleur.
L'en-tête diminue en hauteur au fur et à mesure que vous faites défiler. Les éléments restent de la même taille.
Voici la vue de la tablette. Les éléments de menu sont placés dans le menu déroulant. Les trois éléments de la classe CSS incluent un style qui les distingue des autres.
La vue du téléphone empile le CTA sous le logo et conserve également le style des éléments avec la classe CSS.
Disposition de l'en-tête 2
L'en-tête 2 utilise un module de code avec CSS et JS, des modules de présentation, d'image, de texte, de médias sociaux, de menu et de bouton.
Il s'agit de l'en-tête 2A. Voici à quoi cela ressemble sur une page sombre. L'en-tête ne couvre pas toute la largeur du site. Le menu du haut est transparent et comprend des boutons sociaux. Le bas a le CTA et les informations de contact. Le numéro de téléphone est cliquable.
Voici la conception sur une page légère. J'aime la façon dont ce CTA se démarque.
Après le défilement, le menu du haut défile avec la page et le menu du bas reste en haut.
Voici la vue de la tablette. Le menu du haut défile avec la page tandis que le menu du bas reste.
Voici la vue du téléphone. Le CTA est empilé sous le menu. L'en-tête défile avec la page.
Disposition de l'en-tête 3
Les modules de l'en-tête 3 incluent le code, le suivi des médias sociaux, le menu et un bouton.
Voici l'en-tête 3B avec un fond clair. La section supérieure comprend les boutons sociaux et la recherche, tandis que la section inférieure ajoute le CTA.
Voici à quoi cela ressemble sur un fond sombre.
Le menu du haut défile avec la page tandis que le menu du bas reste en haut de l'écran.
Voici la vue de la tablette.
Voici comment la vue du téléphone empile les éléments.
Mise en page de l'en-tête 4
L'en-tête 3 comprend du code, plusieurs textes de présentation, un bouton, un menu et des modules de suivi des médias sociaux.
Voici l'en-tête 3C sur un fond clair. Le haut comprend les informations de contact et le CTA, tandis que le bas affiche les boutons sociaux.
Voici à quoi cela ressemble avec un fond sombre. Les couleurs d'origine sont superbes avec ce fond. Je survole le CTA dans cet exemple.
Voici à quoi ressemble celui-ci après le défilement. La section supérieure défile avec le site et la section inférieure colle.
Il s'agit de la vue tablette.
La vue téléphone empile les éléments.
En-tête 5 Disposition
L'en-tête 5 comprend un module de code, quelques textes de présentation, un suivi des médias sociaux et des modules de menu.
Voici l'en-tête 5C sur un fond sombre. Le haut comprend un numéro de téléphone cliquable, des boutons sociaux et un lien vers le formulaire de contact. Le rouge et le gris foncé ressortent bien.
Il est également joli sur le fond clair. L'ombre de la boîte est plus visible.
La moitié supérieure du menu continue de défiler tandis que la moitié inférieure reste en haut de l'écran.
Voici la vue de la tablette.
C'est la vue du téléphone. J'aime la façon dont le contenu de la section supérieure s'empile.
En-tête 6 Disposition
L'en-tête 6 comprend un module de code, 4 textes de présentation, un module de suivi des médias sociaux et un module de menu.
Il s'agit de l'en-tête 6B sur un fond sombre. Celui-ci comporte trois sections : le haut comprend les boutons sociaux, le milieu comprend les informations de contact et le bas contient les liens du menu.
Voici l'en-tête sur un fond clair.
Les 2 sections supérieures de l'en-tête défilent et la section inférieure est collante. Il ajoute une ombre de boîte au menu du bas lorsqu'il reste en haut de l'écran.
Voici la vue de la tablette. Il déplace le numéro de téléphone vers le haut.
Voici le design dans la vue du téléphone.
Acheter
Le Header Layout Pack est disponible auprès de Divi Life pour 49 $ (en vente pour 5 $ le reste de l'année). Il peut être utilisé sur des sites illimités pour vous et vos clients et inclut l'accès à toutes les futures mises à jour. Il comprend également le support et la documentation.
Mettre fin aux pensées
Le Header Layout Pack pour Divi Theme Builder est un ensemble intéressant de mises en page. Les CSS et JavaScript ajoutent un style qui n'est normalement pas disponible dans un en-tête. Cela aide à donner à l'en-tête un aspect très différent de celui des en-têtes standard. Étant donné que chaque conception comporte plusieurs options prédéfinies, il est facile de trouver quelque chose qui convient à votre site Web sans avoir à apporter de nombreuses modifications. Le style correspond déjà aux mises en page Divi gratuites d'ET.
Les en-têtes ont l'air conçus par des professionnels et je les ai trouvés faciles à utiliser. Je n'en ai regardé que quelques-uns. Travailler avec l'en-tête 1 est la seule mise en page qui nécessite des étapes compliquées. Ce n'est pas si difficile si vous lisez les instructions (devinez comment je sais). Gardez juste à l'esprit qu'il nécessite plus d'étapes que les autres.
Si vous êtes intéressé par des en-têtes conçus par des professionnels pour Divi Theme Builder, le pack de mise en page d'en-tête de Divi Life vaut le détour.
Nous voulons de vos nouvelles. Avez-vous essayé le Header Layout Pack de Divi Life ? Dites-nous ce que vous en pensez dans les commentaires.
Image en vedette via PureSolution / shutterstock.com