fbpx

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 …

      Tutoriel Divi : Inverser les colonnes selon la vue

      Tutoriel Divi : Inverser les colonnes selon la vue

      En vue ordinateur un site web peut avoir un design avantageux mais peut être moins en vue mobile du fait des colonnes d’une rangée qui passent les unes sous les autres.
      On peut alors se trouver avec une suite d’éléments non souhaitée avec par exemple 2 textes ou 2 images à la suite.

      lire plus
      10 extensions Chrome pour améliorer la productivité

      10 extensions Chrome pour améliorer la productivité

      Dans cette vidéo, je vous présente 10 extensions pour le navigateur Chrome afin d’améliorer votre confort, votre rapidité et donc votre productivité lorsque vous surfez sur Internet. Il existe ne nombreuses extensions Chrome, et il peut être difficile de trouver celles qui vont réellement améliorer votre productivité.

      lire plus
      Un menu hamburger 🍔 en vue ordinateur : site WordPress Divi

      Un menu hamburger 🍔 en vue ordinateur : site WordPress Divi

      Sur Internet, le terme de “hamburger menu” désigne un menu de navigation utilisé sur les sites mobiles par souci  de gain de place et d’ergonomie, la largeur de l’écran étant restreinte pour conserver un menu classique. Sur ces périphériques mobiles, on masque alors le menu derrière un bouton à 3 petits traits ressemblant à un hamburger.

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