Comment animer votre en-tête global avec Divi

Votre en-tête est l'une des parties les plus importantes de votre site Web. Il connecte vos pages, vos publications et vos appels à l'action. C'est aussi l'une des choses que vos visiteurs recherchent automatiquement, afin qu'ils ne perdent pas de temps à trouver ce qu'ils recherchent. Si vous cherchez un moyen de mettre en valeur votre en-tête, vous apprécierez cet article. Nous allons vous montrer comment animer votre en-tête global personnalisé à l'aide de Theme Builder de Divi. Les possibilités sont infinies, mais nous allons vous montrer deux exemples d'animation avec lesquels vous pouvez commencer tout de suite. Vous pourrez également télécharger les fichiers JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide aux deux exemples sur différentes tailles d'écran.

Exemple 1

Bureau

Mobile

Exemple #2

Bureau

Mobile

Téléchargez l'en-tête global animé GRATUITEMENT

Pour mettre la main sur l'en-tête global animé gratuit, vous devrez d'abord le télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez 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 enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Abonnez-vous à notre chaîne Youtube

1. Accédez à Divi Theme Builder et commencez à créer un en-tête global

Aller à Divi Theme Builder

Commencez par accéder au Divi Theme Builder dans votre backend WordPress.

Construire un en-tête global à partir de zéro

Cliquez sur « Ajouter un en-tête global » et continuez en sélectionnant « Créer un en-tête global ».

2. Construire la conception globale du bloc d'en-tête

Paramètres de section

Espacement

Une fois que vous êtes dans l'éditeur de modèles, vous pouvez commencer à créer l'en-tête global. Nous nous assurons d'avoir une conception de « bloc » en cours afin que nous puissions, plus tard, ajouter des animations à deux conteneurs différents ; colonne + module. Ouvrez la section que vous pouvez remarquer dans l'éditeur de modèles et supprimez tout le rembourrage supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Boîte ombre

Ajoutez ensuite une ombre de boîte.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba (13,60,216,0,24)

Indice Z

Et assurez-vous d'augmenter également l'index z de la section dans l'onglet avancé. Cela garantira que le contenu de l'en-tête global apparaîtra en haut de tout le contenu de la page/de la publication.

• Indice Z : 99999

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de la ligne et laissez la ligne occuper toute la largeur de l'écran.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 100 %

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Visibilité

Assurez-vous de définir également les débordements de la ligne sur « visible ».

• Débordement horizontal : Visible
• Débordement vertical : visible

Paramètres de colonne (les trois)

Couleur de l'arrière plan

Une fois que vous avez terminé les paramètres de ligne, vous devez également styliser les colonnes. Ouvrez chacune des colonnes et modifiez leur couleur d'arrière-plan en conséquence :

• Colonne 1 Couleur d'arrière-plan : #efefef
• Couleur d'arrière-plan de la colonne 2 : #ffcb0f
• Couleur d'arrière-plan de la colonne 3 : 2848ff

Espacement

Ajoutez également des rembourrages haut et bas personnalisés à chaque colonne.

• Rembourrage supérieur : 0,5 vw (ordinateur de bureau), 1 vw (tablette et téléphone)
• Rembourrage inférieur : 0,5 vw (ordinateur de bureau), 1 vw (tablette et téléphone)

Élément principal

Et pour nous assurer que tout le contenu des colonnes est centré verticalement, nous ajouterons trois lignes de code CSS à l'élément principal de chaque colonne.

display: flex;
flex-direction: column;
justify-content: center;

Indice Z de la colonne 1

Enfin, ouvrez les paramètres de la colonne 1 et augmentez l'index z dans les paramètres de visibilité.

• Indice Z : 10

Ajouter un module de menu à la colonne 1

Sélectionnez le menu

Il est temps d'ajouter des modules, en commençant par un module de menu dans la colonne 1. Sélectionnez un menu de votre choix.

Télécharger le logo

Téléchargez votre logo ensuite.

Supprimer l'arrière-plan

Continuez en supprimant la couleur de fond du module.

Disposition

Passez à l'onglet Conception et assurez-vous que les paramètres suivants s'appliquent à la mise en page :

• Style : Aligné à gauche
• Direction du menu déroulant : vers le bas

Paramètres du texte du menu

Stylisez ensuite les paramètres de texte :

• Police du menu : Montserrat
• Couleur du texte du menu : #000000
• Taille du texte du menu : 0.7vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)

Paramètres du menu déroulant

Avec les paramètres du menu déroulant.

• Couleur de la ligne du menu déroulant : #ffffff

Paramètres des icônes

Et changez également la couleur de l'icône du menu hamburger.

• Couleur de l'icône du menu Hamburger : #2848ff

Dimensionnement

Continuez en modifiant la largeur maximale du logo sur différentes tailles d'écran.

• Largeur maximale du logo : 6vw (ordinateur de bureau), 9vw (tablette), 13vw (téléphone)

Espacement

Et complétez les paramètres du module en ajoutant des marges gauche et droite.

• Marge gauche : 2vw
• Marge droite : 2vw

Ajouter un module de code à la colonne 1

Insérer le code CSS pour la réactivité VW

Maintenant, dans le module de menu, nous avons utilisé l'unité de largeur de la fenêtre pour la taille du texte et les valeurs d'espacement. Nous avons fait cela pour nous assurer que vous pouvez placer jusqu'à 8 éléments de menu sur différentes tailles d'écran de bureau, sans qu'il se divise en deux lignes. Nous devrons nous assurer que l'espace entre les éléments de menu est également créé avec l'unité vw. Pour ce faire, nous allons ajouter un module de code à la colonne 1 et insérer les lignes de code CSS suivantes :

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

Ajouter le module de suivi des médias sociaux à la colonne 2

Ajouter des réseaux sociaux

Passons à la colonne suivante, là-bas, nous aurons besoin d'un module de suivi des médias sociaux. Ajoutez les réseaux sociaux de votre choix.

Réinitialiser les styles de réseaux sociaux individuellement

Continuez en réinitialisant les paramètres de chaque réseau.

Alignement

Complétez les paramètres du module en modifiant l'alignement du module.

• Alignement du module : Centre

Ajouter un module de bouton à la colonne 3

Ajouter une copie

Passons à la colonne suivante et dernière. Là, nous n'aurons besoin que d'un module de bouton. Ajoutez une copie de votre choix.

Alignement

Passez à l'onglet Conception et modifiez l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Complétez les paramètres du module en stylisant le bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1vw (ordinateur de bureau), 1.2vw (tablette), 2vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Largeur de la bordure du bouton : 0px

• Rayon de la bordure du bouton : 0px
• Police des boutons : Montserrat
• Poids de la police du bouton : ultra gras
• Style de police des boutons : majuscule

3. Ajouter une animation correspondante aux éléments

Ensemble global d'animation d'en-tête #1

Colonne 1 Animation

Maintenant que nous avons construit l'en-tête global, il est temps d'ajouter les animations ! Pour recréer la première animation, ouvrez les paramètres de la colonne 1 et ajoutez l'animation suivante :

• Style d'animation : Zoom
• Direction de l'animation : vers le haut
• Opacité de démarrage de l'animation : 100 %

Animation de la colonne 2

Ajoutez ensuite les paramètres d'animation suivants à la colonne 2 :

• Style d'animation : Zoom
• Direction de l'animation : vers le bas
• Délai d'animation : 500 ms
• Opacité de démarrage de l'animation : 100 %

Colonne 3 Animation

Complétez les paramètres de la colonne en affectant l'animation suivante à la colonne 3 :

• Style d'animation : Zoom
• Direction de l'animation : vers le haut
• Délai d'animation : 1000 ms
• Opacité de démarrage de l'animation : 100 %

Animations de module (les trois modules)

Une fois que vous avez terminé les paramètres de colonne, ouvrez chacun des modules individuellement et utilisez l'animation suivante pour eux :

• Style d'animation : Fondu
• Délai d'animation : 1500 ms

Ensemble d'animation d'en-tête global #2

Colonne 1 Animation

Vous voulez plutôt recréer le deuxième ensemble d'animations ? Ouvrez les paramètres de la colonne 1 et ajoutez l'animation suivante :

• Style d'animation : diapositive
• Direction de l'animation : vers le haut
• Opacité de démarrage de l'animation : 100 %

Animation de la colonne 2

Utilisez ensuite les paramètres d'animation suivants pour la colonne 2 :

• Style d'animation : diapositive
• Direction de l'animation : vers le haut
• Délai d'animation : 500 ms
• Opacité de démarrage de l'animation : 100 %

Colonne 3 Animation

Et complétez les paramètres de la colonne en appliquant les paramètres d'animation suivants à la colonne 3 :

• Style d'animation : diapositive
• Direction de l'animation : vers le haut
• Délai d'animation : 1000 ms
• Opacité de démarrage de l'animation : 100 %

Animations de module (les trois modules)

Ensuite, ouvrez chaque module individuellement et ajoutez l'animation suivante :

• Style d'animation : diapositive
• Direction de l'animation : vers le bas
• Délai d'animation : 1500 ms

4. Enregistrer les modifications du constructeur et afficher le résultat

Une fois que vous avez terminé les paramètres d'animation, vous pouvez enregistrer l'en-tête global, quitter le Générateur de thèmes et afficher le résultat sur votre site Web !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil aux exemples sur différentes tailles d'écran.

Exemple 1

Bureau

Mobile

Exemple #2

Bureau

Mobile

Dernières pensées

Dans ce tutoriel, nous vous avons montré comment animer votre en-tête global à l'aide des options intégrées de Divi et du Theme Builder. C'est un excellent moyen d'attirer l'attention sur l'en-tête de votre site Web. Avec les options d'animation intégrées de Divi, les possibilités sont infinies. Pour vous aider à démarrer, nous vous avons montré deux exemples différents. Vous avez également pu télécharger les fichiers JSON gratuitement !

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.