20 en-têtes Flexbox pour Divi 5 (téléchargement gratuit!)

Flexbox facilite que jamais la création d'en-têtes qui ont l'air propre, s'adaptent magnifiquement à différentes tailles d'écran et sont simples à personnaliser dans Divi 5. Dans ce pack gratuit, vous trouverez 20 conceptions d'en-tête Flexbox uniques, chacune construite avec le système de mise en page Flex de Divi 5 pour un alignement précis et un contrôle réactif. Que vous souhaitiez utiliser les styles globaux existants de votre site ou commencer par une conception prêt à l'emploi, vous trouverez les deux options ici.

Aperçu et démo en direct

Jetons un coup d'œil aux 20 en-têtes Flexbox de ce pack. Ce pack est gratuit pour vous de télécharger plus loin dans le post.

Abonnez-vous à notre chaîne YouTube

Voir la démo en direct

Téléchargez 20 en-têtes Flexbox pour Divi 5

Obtenez les 20 en-têtes Flexbox gratuitement, y compris les versions par défaut et PRESTYLED. Chaque en-tête est prêt à importer dans votre bibliothèque Divi et à utiliser dans le constructeur de thèmes. Téléchargez et commencez à construire.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons une copie du pack de mise en page Ultimate Divi Laying, plus d'autres ressources, astuces et astuces DiviM et gratuits. Suivez et vous serez un maître divi en un rien de temps. Si vous êtes déjà abonné, tapez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes abonné avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder à des packs de mise en page de Divi Gratuit!

Ce qui est inclus (42 exportations)

Une fois que vous avez téléchargé et dézip le dossier, vous trouverez les 42 exportations de mise en page soigneusement organisées en versions par défaut et pré-alimentées en tant qu'en-têtes individuels et en tant que complets «tous les en-têtes».

Par défaut - En-têtes individuels (20) → utilise vos styles globaux.
Par défaut - Tous les en-têtes (1) → Pack complet en utilisant vos styles globaux.

PRASTELLED - En-têtes individuels (20) → Comprend un style en ligne pour un look instantané et prêt à l'emploi.
PRESTYLED - Tous les en-têtes (1) → Pack complet avec style en ligne appliqué.

Comment installer les dispositions

Gardez votre dossier de téléchargement à proximité pour commencer à les importer sur votre site Web Divi.

1. Importer des dispositions dans la bibliothèque Divi

Allez à la bibliothèque Divi → Divi.

Une fois sur place, cliquez sur le bouton Importer et exporter pour installer les fichiers.

Recherchez le fichier de dispositions d'en-tête Flexbox (ALL) et cliquez pour l'importer.

2. Créez un nouveau modèle d'en-tête

Allez dans Divi → Builder de thème.

Créez un nouveau modèle d'en-tête ou ouvrez un existant.

3. Télécharger la disposition de l'en-tête

Une fois que vous êtes dans la zone d'en-tête, vous pouvez utiliser la bibliothèque Divi pour sélectionner votre disposition d'en-tête de choix. Cliquez sur le bouton Ajouter la disposition dans le coin supérieur gauche du constructeur de thème.

Sélectionnez la disposition enregistrée .

Cliquez sur la disposition de l'en-tête que vous souhaitez ajouter au constructeur de thème.

Cliquez sur le bouton Utiliser ce disposition pour charger l'en-tête.

Assurez-vous de enregistrer vos modifications de vos nouveaux en-tête et de votre constructeur de thème.

Par défaut vs pré-alimenté: que devez-vous choisir?

Lorsque vous ouvrez le dossier de téléchargement, vous verrez deux versions de chaque en-tête: ** par défaut ** et ** PRESTYLED **. Ils sont construits exactement de la même manière, la différence est de la façon dont ils gèrent le style.

Les en-têtes par défaut héritent de leur look de vos styles mondiaux. Les couleurs, les polices et les styles de bouton de votre marque sont automatiquement appliqués. Si vous avez déjà configuré vos styles globaux, la valeur par défaut est le moyen le plus rapide d'ajouter ces en-têtes à votre site et de correspondre instantanément à votre conception.

Les en-têtes pré-alimés sont livrés avec tous leurs styles cuits: les couleurs, les polices et les dessins de bouton sont en ligne. Ils ressemblent exactement aux aperçus dès la sortie de la boîte. C'est génial si vous construisez une démo rapide, testez des idées, ou si vous souhaitez saisir le design exact que vous voyez dans les captures d'écran sans toucher vos variables.

En bref, allez avec défaut si vous souhaitez que les en-têtes se mélangent de manière transparente avec vos styles de site existants. Choisissez PRYISLÉ si vous voulez le look prêt à l'emploi indiqué dans les aperçus.

Personnalisation des en-têtes

Le système de mise en page Flexbox de Divi 5 vous offre des outils puissants pour modifier les dispositions tout en gardant tout réactif. Voici comment personnaliser ces en-têtes pour s'adapter au style de votre site.

1. Ajuster les paramètres flexibles

Sélectionnez la ligne contenant les éléments d'en-tête. Dans l'onglet Design, localisez le menu déroulant Layout. Développez-le pour révéler les paramètres Flexbox.

Ici, vous pouvez modifier la direction de disposition de la ligne à la ligne inverse, colonne ou colonne inverse. Cette fonctionnalité vous permet de modifier la direction de votre disposition.

Les paramètres de contenu Justify vous permettent de contrôler comment les éléments flexibles sont distribués le long de l'axe principal - la direction principale du conteneur flexion défini par la direction de disposition. Il détermine l'espacement et l'alignement des éléments horizontalement ou verticalement, selon la direction de disposition.

Aligner les éléments vous permet de contrôler comment les éléments flexibles sont alignés dans une colonne, une ligne ou une section. Il détermine comment les éléments flexibles sont positionnés les uns par rapport les uns aux autres le long de l'axe transversal dans le conteneur. Vous pouvez choisir le démarrage, le centre, la fin et l'étirement.

Enfin, les contrôles d'emballage de disposition si les éléments d'un conteneur flexible sont forcés sur une seule ligne ou autorisés à s'envelopper sur plusieurs lignes lorsqu'ils dépassent la largeur du conteneur (ou la hauteur si la direction de disposition est définie sur la colonne).

2. Afficher / masquer les éléments à différents points d'arrêt

Divi 5 vous permet de basculer la visibilité des sections, des lignes, des colonnes ou des modules individuels à des points d'arrêt spécifiques. Ceci est utile pour simplifier les dispositions sur des écrans plus petits, tels que la cachette d'un bouton CTA secondaire ou le remplacement d'un menu complet par un menu mobile.

Par exemple, vous pouvez cacher les icônes des médias sociaux dans une en-tête pour économiser de l'espace sur les écrans mobiles. Au point de rupture de bureau, accédez à l'onglet avancé. Développez le menu déroulant de visibilité. Ensuite, cliquez sur le téléphone et les points d'arrêt des tablettes pour masquer l'élément.

Utilisez l'aperçu réactif de Divi 5 pour afficher l'en-tête. Lors de la visualisation de la disposition dans le point d'arrêt du téléphone, l'élément caché sera visible, mais grisé, indiquant qu'il sera caché sur l'avant.

3. Ajouter des liens si nécessaire

Bien que chaque disposition d'en-tête soit prête à sortir de la boîte, vous devrez toujours ajouter des liens. Dans cet exemple, vous ajouteriez des liens vers le module Suivre SOCIAL. Cliquez pour étendre les paramètres du module. Dans l'onglet Contenu, cliquez sur la première icône des médias sociaux pour révéler ses paramètres.

Développez la liste déroulante du lien et ajoutez le lien à votre compte de médias sociaux dans le champ URL de liaison du compte .

Assurez-vous de sauver votre en-tête avant de quitter le constructeur de thème.

Si vous ne l'avez pas déjà fait, vous devrez créer un menu pour votre site Web. Sortez du constructeur visuel et accédez à l'apparence → menus. Ajoutez un nom au champ Nom du menu .

Cliquez sur la case à cocher le menu principal , puis cliquez sur Créer le menu .

Pour ajouter des pages au menu, cliquez sur l'onglet Afficher All et sélectionnez les pages que vous souhaitez apparaître dans le menu. Cliquez sur Ajouter au menu pour les attribuer.

De retour dans le constructeur de thème, apportez des modifications supplémentaires si nécessaire. Par exemple, si l'en-tête utilise le constructeur de boucle, vous devrez peut-être ajuster l'ordre des liens.

Utilisez Divi 5 pour construire vos en-têtes aujourd'hui

Ces 20 en-têtes Flexbox sont un moyen rapide d'accélérer vos versions Divi 5, que vous travailliez à partir de vos styles globaux établis ou que vous commenciiez par un look prédéfini. Téléchargez-les, déposez-les dans le constructeur de thèmes et faites-les le vôtre. Flexbox gère l'alignement afin que vous puissiez vous concentrer sur la conception.