fbpx

Bons plans Alpa14 | Des offres et des réductions intéressantes à découvrir 😃

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

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 également intéressé par ces articles …

      Créer un pop-up sur un site Divi

      Créer un pop-up sur un site Divi

      Ce tutoriel vous propose une solution simple et pratique pour créer un pop-up. En effet, je vous présente un plugin gratuit pour Divi intitulé « Popups for Divi » qui vous permettra de transformer toute section de votre site web en fenêtre pop-up.

      lire plus
      Formation WordPress éligible au CPF : Webmyday

      Formation WordPress éligible au CPF : Webmyday

      Vous souhaitez créer un site Internet WordPress pour votre entreprise ? Vous êtes complètement débutant ? Dans ce tutoriel vidéo, je vous présente Webmyday la formation WordPress Divi qui va vous permettre de réaliser facilement votre site web en étant accompagné d’un coach sympa pendant 2 mois. 😊

      lire plus
      Offrez-moi un café! Merci :)