BONS PLANS BLACK FRIDAY 2024

Créer un header Divi WordPress avec un menu et un bouton

Alpa14 les tutoriels faciles !

Catégories

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.

Licence Divi
Code Promo Divi Supreme
.


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.

    1. Cliquer sur les paramètres de la section (petit engrenage en haut à gauche – section contour violet)
    2. Dans l’onglet « Contenu » dans la partie « Fond », appliquez une couleur de  fond au fond de votre section.
    3. 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.
    hébergeur web Hostinger
    Divi Thème Builder
    Section entête Divi

    Paramètrage de la rangée

      Insérer dans la section une rangée 3/4 – 1/4.

      1. Cliquer sur les paramètres de la rangée (petit engrenage en haut à gauche – rangée contour vert)
      2. 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.

       

      Paramétrage de la rangée
       LearnDash créer une formation sur un site WordPress

      Insertion du module « Menu »

      1. Cliquer dans la 1ère Colonne (3/4) ajouter le module « Menu ».
      2. Aller dans l’onglet « Contenu » puis dans « Fond » choisir fond transparent pour que votre menu se fondent bien avec la couleur de la section.
      3. Ajuster la taille de votre logo. Allez dans « Contenu » puis « Dimensionnement ».
      4. Apporter le style souhaité au texte du menu. Toujours dans l’onglet « Style » aller dans « Texte du menu ».
      5. 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.

       

      Divi module menu
      Amelia booking plugin

      Insertion du module « Bouton »

      1. Cliquer dans la 2ème Colonne (1/4) ajouter le module « Bouton ».
      2. Toujours dans l’onglet « Contenu » dans « Section », renseigner l’adresse URL de la page où devra pointer le lien.
      3. 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 ».
      4. 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).
      Module Bouton Divi
      MalerLite

      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 ».

      Modifier l'hamburger menu

      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 ».

      Divi Elegant Themes
      Fixer header

      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.

      Thinkific one month free
      Changer couleur du header

      Vous serez peut-être intéressé par les articles suivants :

      Créer un en-tête plein écran avec Divi

      Créer un en-tête plein écran avec Divi

      Dans ce tutoriel, je  vous montre étape par étape comment créer un en-tête plein écran époustouflant en utilisant le puissant Divi Visual Builder. Nous commencerons par trouver une image de qualité professionnelle sur Pixabay, puis nous l’optimiserons pour le web avec Photopea avant de plonger dans la conception de notre en-tête.

      lire plus
      Thème Divi : Personnaliser le header

      Thème Divi : Personnaliser le header

      Dans ce tutoriel vidéo, je vous montre comment personnaliser l’en-tête d’un site Divi.
      Cet en-tête changera en scrollant, lorsque la page défile. Le logo, le menu et le fond du header changeront de couleur attirant ainsi davantage l’attention du visiteur.
      Cet en-tête comprendra également un bouton d’appel à l’action incitant à davantage d’engagement.
      Grâce au constructeur de thèmes (le thème Builder) du thème Divi, nous pouvons créer des en-têtes personnalisés au design poussé.

      lire plus