Un header avec un menu et un bouton « Call to action » pour engager votre audience
Comment créer un header menu WordPress efficace ?
Dans ce tutoriel Divi Alpa14, je vous explique comment réaliser un header avec un menu et un bouton d’appel à l’action (call to action). Un bouton peut être intéressant car il met vraiment en évidence un lien important plutôt que de le placer en tant que page dans un menu. Pour cet exercice nous utiliserons le Thème Builder du Divi Visual Builder et nous créerons ensemble un entête (header) global qui se retrouvera automatiquement sur toutes les pages du site WordPress.
Le Divi Visual Builder. est un super outil qui vous permettra de créer et d’éditer facilement et visuellement les pages d’un site WorPress.
Paramétrage de la section
Rendez-vous dans le Thème Builder, puis choisissez de créer un entête global.
Nous allons partir d’une page vierge.
Une section est déjà en place sur la page.
- Cliquer sur les paramètres de la section (petit engrenage en haut à gauche – section contour violet)
- Dans l’onglet « Contenu » dans la partie « Fond », appliquez une couleur de fond au fond de votre section.
- Dans l’onglet « Style » dans la partie « Espacement » appliquer 0 pixel en marge interne en haut et en bas. La hauteur de la section sera ainsi réduite.
Paramètrage de la rangée
Insérer dans la section une rangée 3/4 – 1/4.
- Cliquer sur les paramètres de la rangée (petit engrenage en haut à gauche – rangée contour vert)
- Dans l’onglet « Style » dans la partie « Espacement » appliquer 0 pixel en marge interne en haut et en bas. La hauteur de la rangée sera ainsi également réduite.
Insertion du module « Menu »
- Cliquer dans la 1ère Colonne (3/4) ajouter le module « Menu ».
- Aller dans l’onglet « Contenu » puis dans « Fond » choisir fond transparent pour que votre menu se fondent bien avec la couleur de la section.
- Ajuster la taille de votre logo. Allez dans « Contenu » puis « Dimensionnement ».
- Apporter le style souhaité au texte du menu. Toujours dans l’onglet « Style » aller dans « Texte du menu ».
- Ajouter un peu de marge interne au module « Menu » pour que votre logo ne soit pas trop proche des bords. Toujours dans l’onglet « Style » aller dans « Espacement » puis ajouter en marge interne 5 ou 10 pixels en haut et en bas.
Insertion du module « Bouton »
- Cliquer dans la 2ème Colonne (1/4) ajouter le module « Bouton ».
- Toujours dans l’onglet « Contenu » dans « Section », renseigner l’adresse URL de la page où devra pointer le lien.
- Aller dans l’onglet « Style », apporter le style souhaité à votre bouton dans « Bouton » pour cela, activer l’interrupteur « Utiliser des styles personnalisés pour bouton ».
- Centrer verticalement le bouton dans la section en ajoutant de marge externe. Toujours dans l’onglet « Style », aller dans « Espacement » puis dans « Marge », ajouter la valeur voulue (ici 20 pixels en haut et en bas).
Vue mobile, modifier l’hamburger menu
Lorsque vous passer en vue mobile, vous voyez que le site est responsive et qu’il adopte une vue adaptée à ces périphériques avec l’hamburger menu qui se déroule en cliquant sur l’icône aux 3 petits traits.
Il se peut que la taille et la couleur de l’icône ne vous conviennent pas. Il est possible de modifier cela toujours dans les paramètres du menu puis dans « Style » et « Icône ».
Pour modifier le fond du menu déroulant vous pouvez régler cela dans « Style » puis « Lien du menu déroulant ».
Fixer le header menu en haut de fenêtre
Si vous scroller la page, vous vous appercevez que la section header disparaît. Pour la fixer en haut de fenêtre et pour qu’elle soit toujours visible vous pouvez utiliser l’option » Stick to Top ».
Vous trouverez cela dans les paramètres de la section. Choisir l’onglet « Avancé » puis dans « Scroll Effects ».
Changement de couleur du header en scrollant la page
Il est possible, si vous le souhaitez, qu’au moment où vous scrollez votre page et que la section header se colle en haut, elle change de couleur.
Pour réaliser cet effet, rendez-vous dans l’onglet « Contenu » et dans la partie « Fond » et couleur, cliquez sur la punaise et choisissez une couleur. Cette couleur s’appliquera quand la section header se collera en haut de fenêtre.
