En-tête et Menu Divi : paramétrages & customisation du header

Mis à jour le 16/07/2019 | Publié le 23/01/2019 | 98 commentaires

Comment créer un menu dans WordPress, comment customiser l’en-tête d’un site fait avec le thème Divi, où trouver les options de personnalisation etc… Autant de questions qui trouveront des réponses dans cet article. Je vous propose un dossier complet sur les en-têtes et les menus de Divi. Voici le programme :

  1. Créer le menu principal de votre site WordPress
  2. Supprimer le logo de Divi et ajouter le vôtre
  3. Choisir le type d’en-tête proposé par Divi
  4. Définir l’apparence des éléments du menu
  5. Quelques astuces pour customiser votre menu principal Divi
  6. Des ressources pour modifier le menu de Divi

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

Avant de pouvoir customiser l’en-tête et le menu Divi, vous devez être en possession des éléments à faire apparaître dans la navigation principale de votre site. Ces éléments peuvent être :

  • des pages,
  • des articles,
  • des liens,
  • des catégories,
  • des étiquettes.

Étape 1 : créer les éléments du menu

La première étape est de créer des pages (accueil, services, contact, à propos etc…) et éventuellement des catégories de blog. Ces éléments devront avoir le statut « publié » pour pouvoir être utilisés au sein de votre menu principal. Vous ne pourrez donc pas ajouter, à votre menu, des pages avec le statut de « brouillon ».

Étape 2 : créer votre menu principal

Rendez-vous à l’onglet Apparence > Menu. Renseignez simplement le nom de votre menu dans le champ dédié et cliquez sur « Créer le menu ».

Créer un menu de navigation WordPress
Créer un menu de navigation WordPress

Une fois votre menu créé, vous allez pouvoir cocher les éléments à ajouter à votre menu. La liste des éléments disponibles se trouve sur la gauche de l’écran. Ces éléments sont classés par typologie (pages, articles, liens personnalisés, catégories).

Cochez simplement les éléments désirés (ceux que vous avez publiés/créés en amont) puis cliquez sur Ajouter au menu.

Étape 3 : organiser la structure du menu principal

Vous pouvez glisser-déposer chaque élément du menu afin de les ré-ordonner. L’élément le plus haut sera l’élément le plus à gauche de votre menu principal – l’élément le plus bas sera l’élément le plus à droite.

Si vous décalez vers la droite l’un de vos éléments, il deviendra alors un sous-élément.

Étape 4 : attribuer un emplacement à votre menu

N’oubliez pas d’attribuer un emplacement à votre menu. Sans cela, votre menu ne sera pas visible côté front (côté visiteur). Cochez la case « Menu Principal ».

Terminez par Enregistrer le menu puis rendez-vous côté front-office pour vérifier comment votre menu apparaît.

Pour mieux comprendre, regardez cette vidéo récapitulative :

Notez : la création d’un menu principal d’un site ne dépend pas d’un thème, c’est une fonctionnalité native de WordPress. Par contre, l’apparence de la navigation principale dépend bien du thème que vous utilisez. Et c’est ce que nous allons voir dans la suite de cet article.

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

Maintenant que votre menu principal est créé, vous allez pourvoir le personnaliser.

Insérer son logo dans le menu principal de Divi
Insérer son logo dans le menu principal de Divi

Rendez-vous alors dans l’onglet Divi > Options du Thème > Logo. Cliquez sur Mettre en ligne et choisissez votre image dans la bibliothèque ou téléchargez-la depuis votre ordinateur.

Cette étape est simplissime…

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

À présent, vous avez toutes les cartes en main pour commencer à définir le type d’en-tête que vous préférez.

Rendez-vous à l’onglet Apparence > Personnaliser > En-tête et Navigation > Format de l’En-tête.

Dans le menu déroulant, Divi vous propose 5 types d’en-têtes :

  • Défaut
  • Centré
  • Logo inline centré
  • Slide In
  • Plein Écran

De votre choix découlera des options de configuration différentes que nous verrons en détail.

Menu Divi par défaut
Menu Divi par défaut

Voici à quoi ressemble le menu principal d’un site WordPress qui utilise l’en-tête par défaut de Divi. Le logo est situé à gauche et les éléments qui composent votre navigation se suivent avec un alignement à droite.

Cet en-tête par défaut propose plusieurs options :

Option 1 : « Cacher la barre de navigation si aucun défilement »

Si vous cochez cette option, le menu principal apparaîtra seulement lorsque l’utilisateur descend (scroll) vers le bas de la page.

Lorsque l’internaute est en haut de la page, la navigation disparait.

Cette option peut prêter l’internaute à confusion : s’il n’est pas à l’aise avec internet, il n’aura pas forcément l’idée de scroller votre page pour faire apparaître la navigation et pourrait quitter votre site avant même d’avoir visité une autre page. Cela pourrait alors avoir des conséquences sur votre taux de rebond.

Pour ma part, je ne coche jamais cette option, sauf si des contraintes dues au design me sont imposées.

Option 2 : « Activer la navigation verticale »

navigation verticale Divi
Option de l’en-tête par défaut de Divi : navigation verticale à droite ou à gauche

L’en-tête par défaut permet également d’obtenir une navigation fixe et latérale. Cette option vous permet de placer la navigation latérale à droite ou à gauche. Le rendu est plutôt joli et le logo sera placé en haut de la navigation.

Menu Divi Centré
Menu Divi – Centré

L’en-tête centré affiche le logo au centre de votre page. Les éléments du menu seront centrés juste sous le logo. Ce type design est idéal si vous utilisez un logo-bandeau. Vous pouvez aussi être créatif en préparant une bannière spéciale pour votre en-tête à l’aide d’un logiciel comme PhotoShop ou Affinity par exemple.

L’en-tête centré propose également les mêmes options que l’en-tête par défaut, à savoir :

  • « Activer la navigation verticale » : dans ce cas, le menu latéral ressemblera au menu latéral par défaut excepté que les éléments de la navigation seront centrés au lieu d’être alignés à gauche.
  • « Cacher la barre de navigation si aucun défilement »
Menu Divi - Logo Inline Centré
Menu Divi – Logo Inline Centré

L’en-tête Logo Inline Centré, comme vous pouvez le voir sur la capture d’écran ci-dessus, place votre logo au centre des éléments qui composent la navigation.

Ce genre design peut être valable si les éléments de votre navigation sont en nombre pair et s’ils ont un nombre de caractères plus ou moins similaires. En effet, selon les éléments de votre menu, le logo pourrait ne pas être centré et proposerait alors une incohérence dans l’harmonie du design.

Menu Slide In
Menu Divi – Slide In

L’en-tête Slide In, comme son nom l’indique, propose un menu qui glisse par la droite lorsque l’internaute clique sur l’icône du menu (le hamburger). D’ailleurs, si cet hamburger ne vous plait pas, vous pourrez utiliser un plugin gratuit pour changer son apparence.

Par défaut l’arrière-plan de ce menu est bleu, mais ne vous inquiétez pas, vous pourrez customiser ce menu dans l’onglet Apparence > Personnaliser > En-tête et navigation > Slide In & Paramètres Header plein écran.

menu Slide In Divi
Option de personnalisation du menu Divi Slide In

Dans les options du menu de type Slide In, vous pourrez :

  1. Faire apparaitre ou non la barre de recherche
  2. Définir la largeur du menu
  3. Définir la taille des diverses polices d’écriture
  4. Choisir la police du menu
  5. Sélectionner la couleur d’arrière-plan ainsi que celle des liens du menu.
Menu Plein Écran
Menu Divi – Plein Écran

L’en-tête plein écran de Divi est un en-tête par recouvrement. Lorsque l’internaute clique sur l’icône du menu, l’écran est entièrement recouvert et fait apparaitre les éléments du menu.

Les options de personnalisation sont les mêmes que celles du menu Slide In. Vous pourrez également décider de l’opacité de la couleur d’arrière-plan.

Besoin de plus de ressources sur Divi ? Visitez le blog de ElegantThemes qui regorge d’idées et de tutos !

Maintenant que vous avez choisi le type d’en-tête, vous allez pouvoir définir l’apparence des éléments de votre menu.

La plupart des options que proposent Divi se trouvent dans l’onglet Apparence > Personnaliser > En-tête et Navigation > Barre de Menu Primaire. À partir de cet onglet, vous pourrez :

  • définir le menu en mode « pleine largeur »
  • cacher l’image du logo dans le menu
  • définir la hauteur du menu
  • définir la hauteur du logo
  • choisir la taille de la typo ainsi que l’espacement des lettres
  • définir la police de caractère ainsi que son apparence (gras, italique, majuscule etc.)
  • définir la couleur des éléments de votre menu (couleur du texte, du lien actif, couleur des sous-éléments)
  • choisir une couleur d’arrière-plan pour le menu principal ainsi que pour les menus déroulants
  • choisir la couleur de la ligne du menu déroulant ainsi que l’animation de ce menu.

Pour les en-têtes de type « Slide In » et « Plein Écran », vous trouverez certaines de ces options dans l’onglet Apparence > Personnaliser > En-tête et Navigation > Slide In & Paramètres Header Plein écran.

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Bien que Divi permette de facilement définir le design de votre site à l’aide de ses options, il est possible que vous souhaitiez aller au-delà. Voici quelques astuces qui pourraient vous intéresser :

Astuce n°1 : supprimer la ligne grise sous le menu

Vous l’avez remarquée n’est-ce pas ? Cette fine ligne grise qui délimite le menu de Divi… Vous souhaitez vous en débarrasser ? C’est tout simple, allez à l’onglet Apparence > Personnaliser > CSS additionnel et ajoutez ce simple bout de code :

/* supprimer la ligne grise sous le menu principal de Divi */
#main-header {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

Toujours dans l’onglet Apparence > Personnaliser > CSS additionnel vous pourrez ajouter ce code. Notez que vous pouvez l’adapter aux besoins de votre image d’arrière-plan :

/* ajouter une image en fond du menu principal */

#main-header {
background-size: initial;
background-repeat: no-repeat;
background-image: url(ajoutez ici l'URL de votre image) !important;
background-position: center;
}

Avec ce simple bout de code CSS, vous pourrez afficher une ligne qui apparait au survol de chaque éléments qui composent le menu de Divi :

/* ajouter une ligne au survol des éléments du menu */

#top-menu .current-menu-item a::before {
-webkit-transform: translateY(15px);
transform: translateY(15px);
opacity: 1.0;
}

#top-menu li a:hover:before {
-webkit-transform: translateY(15px);
transform: translateY(15px);
opacity: 1;
}

#top-menu li a:before {
content: '';
position: absolute;
top: 3px;
left: 0;
background: #666666; /* changez le code couleur HTML à votre convenance */
width: 100%;
height: 2px;
-webkit-transform: translateY(24px);
transform: translateY(24px);
opacity: 0;
transition: 0.3s ease;
}

Cette ligne, qui apparait au survol de la souris, peut-être modifiée facilement avec du CSS… Pour plus de possibilités, voici un tutoriel qui propose 3 façons originales d’animer les éléments de votre menu Divi au survol de la souris.

Insérer des images dans le menu principal de Divi
Voici un exemple de menu principal (navigation) contenant des images pour illustrer mes catégories de blog

Pour ajouter des images dans le méga menu de Divi, rendez-vous sur ce tutoriel ou bien consultez la documentation officielle concernant la création d’un méga menu simple (sans images).

C’est très facile de supprimer le menu principal d’une page ou d’un site fait avec Divi. En deux clics ou un peu de CSS, vous supprimer son affichage sur une seule page ou sur le site entier. Découvrez le tutoriel pour masquer le menu de Divi.

Pour réaliser cela, vous n’aurez pas vraiment besoin de connaissance. Vous pourrez insérer un module Menu Plein Ecran n’importe où dans votre page et le fixer en haut de l’écran lorsque l’internaute scrolle vers le bas. Découvrez comment fixer le menu principal au scroll ici.

Dans le même esprit que le tuto précédent, vous pourrez facilement fixer le menu principal de votre site en bas de l’écran. C’est très simple : suivez ce tuto pour obtenir un Fixed Bottom Menu.

Astuces Divi : le blog dédié au thème Divi (astuces, tutos, ressources etc)

Quelques fois, des simples petits bouts de code CSS ne suffisent pas pour parvenir à ce que l’on souhaite… Voici quelques autres pistes à explorer :

  • Mhmm – Mighty Header & Menu Maker : ce plugin pour Divi vous propose de faire des choses extraordinaires. Vous pourrez choisir parmi une dizaine d’en-têtes Divi différents. De nombreuses options vous permettront de changer l’icône de l’hamburger, de créer des mégas menus et plus encore ! Voir un exemple sur la vidéo ci-dessus | Découvrir le plugin.
  • Intégrer le Divi Builder dans le Header de Divi : PavéNum propose un tuto pour intégrer l’utilisation du Divi Builder dans le header de Divi grâce à des hooks. Je vous invite à visiter cette page si vous souhaitez en savoir davantage.
  • Quad Menu : ce plugin vous permet de créer un méga menu sur mesure pour vos projets Divi. Découvrir le plugin.
  • Ajouter des icônes dans le menu de Divi : Michèle de Divi Soup vous propose de télécharger gratuitement un layout d’en-tête personnalisé avec des icônes Font Awesome. À télécharger ici.
  • Utiliser l’en-tête par défaut de Divi en même temps que l’en-tête Slide In : Michèle de Divi Soup (à nouveau !) vous propose un tutoriel pour coupler deux types de menu en même temps. Découvrir le tutoriel.
customisation du menu Divi
Divi Header : the complete guide

2,301 mots

9

Ça devrait vous plaire aussi :

Projet Divi : à quoi ça sert ?

Projet Divi : à quoi ça sert ?

À quoi servent les « Projets » Divi ? Devez-vous les utiliser ? Dans quels cas ? Je vous explique tout dans cet article.

Formation Divi PDF : un guide pas à pas

Formation Divi PDF : un guide pas à pas

Quoi de mieux qu’une formation Divi PDF pour maitriser ce thème WordPress, son Visual Builder et son Thème Builder ? C’est comme si un formateur s’invitait chez vous… Découvrez son contenu !

98 Commentaires

  1. Ade

    Bonjour,
    Pour le moment, le texte de mon menu (type par défaut) est tout blanc. Je souhaiterais qu’un seul des éléments texte de mon menu s’affiche en jaune (en idle, pas après clic) afin de sauter aux yeux.
    As-tu une astuce pour faire ça?
    Bravo pour ton site, c’est une grande aide.

  2. Lycia Diaz

    Salut Adrien. Ce doit être facile avec un peu de CSS. Si tu n’y arrives pas, donne-moi le lien de ton site et je regarderai ce que je peux faire (dès que j’ai un moment)…

  3. Bernard Clément

    Bonjour, depuis peu je m’intéresse aux éléments qui constituent un site internet. Après avoir lu et regardé beaucoup de tutos, j’ai fini par me décider à sélectionner les outils 02 switch, WordPress et Elegant thème Divi. Maintenant je cherche à comprendre le lien entre WP et Divi. Je crois savoir que WP est le logiciel de base avec ses thèmes pour le graphisme (payant ou pas) et que Divi est une option (payante) qui s’intègre à WP. Là ou je ne sais plus, où est la part de WP et de Divi ? Est ce que Divi est simplement un outil pour améliorer le graphisme et sa mise en œuvre des pages ?
    Merci pour vos tutos. Cordialement.

  4. Lycia Diaz

    Bonjour Clément, votre commentaire est pertinent. C’est souvent la question que se posent mes élèves en formation. Je vais répondre à votre question dans un prochain article détaillé.

  5. Dustine

    Bonjour
    Et merci pour cet article qui m’aide énormément.
    J’ai choisi d’afficher mon en-tête en plein écran.
    Est ce que le css fourni pour afficher une ligne au survol des éléments du menu fonctionne aussi dans ce cas là? Car dans mon cas je ne vois pas la différence.
    Merci beaucoup
    Dustine

  6. Lycia Diaz

    Merci Dustine !
    Je pense que le code devrait marcher. À moins qu’il faille le modifier légèrement ? Il faudrait voir s’il s’appuie sur les bonnes classes CSS. Tu as réussi finalement ? Des fois, c’est une question de mise en cache : tu as un plugin de cache ?

  7. Fred

    Bonsoir comment faire pour alligner à gauche les éléments du menu secondaire et toujours dans le même menu mettre les icônes des réseaux souci à droite comme sur le site externat.qm.ca ?
    Merci

  8. Lycia Diaz

    Salut Fred ! Ton lien ne fonctionne pas… Je ne peux donc pas voir ce que tu me demandes. As-tu inspecté le code du menu avec ton navigateur pour voir qu’elles actions CSS ont été faites ?

  9. Néant

    Bonjour,
    j’ai ajouté votre bout de code pour faire apparaître une ligne au survol des éléments dans mon css et finalement j’ai décidé que cela ne me plaisait pas tant. Je l’ai donc retiré des options du thème divi et pourtant, il continue d’apparaître sur ma page d’accueil (pour les autres pages, il s’est supprimé), c’est très contrariant. Comment ça se fait ?

    Cordialement

  10. Lycia Diaz

    Salut ! C’est embêtant mais tu aurais dû tester ça sur un site en développement et non sur un site en production. Toutefois, si tu as retiré le code ça devrait s’enlever. C’est possible que ton plugin de cache ait mis en cache cette page ou même le navigateur simplement. C’est pour ça que tu le vois toujours. Je suppose… Essaye de vider le cache ou même de regarder ton site depuis un autre navigateur (qui lui n’aurait pas mis ta page en cache) ou depuis une fenêtre de navigation privé. Si l’effet apparaît toujours, c’est vraiment bizarre.

  11. Néant

    Je suis actuellement sur un site bac à sable, sur un serveur interne à l’endroit où je travaille. J’ai essayé de vider le cache du navigateur et de tenter depuis un autre navigateur mais cela apparaît toujours…

  12. Lycia Diaz

    Je ne sais pas quoi te dire. Ce n’est que du CSS que tu avais mis ? Si tu l’enlèves, la customisation doit partir. Je ne vois pas comment elle pourrait rester et je comprends que ça puisse t’agacer. Peut-être désactives Divi puis réactives-le ? Dans ton cas, j’essayerais un peu tout pour voir d’où ça pourrait venir. En plus, si tu es dans un bac à sable, y’a rien d’inquiétant je suppose…

  13. Néant

    C’est tout bon ! J’ai mis à jour le thème parent Divi et tout est rentré dans l’ordre. Un mystère qui ne sera jamais vraiment résolu mais bon, l’important c’est que tout marche maintenant 😀 merci pour ton aide Lycia, ainsi que pour tous les articles sur ce super site !

  14. Lycia Diaz

    Merci à toi pour ce retour !
    Des fois, il ne faut pas trop chercher… C’est souvent que je trouve des bizarreries (pas forcément avec Divi mais plutôt avec des plugins) et le simple fait de désactiver puis réactiver (ou même mettre à jour), tout remarche… Bref…
    Bonne continuation 😉

  15. Alexis

    Bonjour, et merci pour cet article.

    Cependant, j’espérais secrètement trouver un remède à mon problème.

    Je m’explique, j’ai créer un site pour l’association pour laquelle je travaille, dans la barre de menu DIVI j’ai rajouté le logo de l’association et pour ce qui est des réglages de la barre elles sont plus ou moins par défauts.

    Mais voilà ce qui m’arrive, quelques fois (assez régulièrement selon le navigateur web) quand j’ouvre une page (surtout sur une page en particulier) la barre de menu devient énorme ainsi que le logo que j’ai rajouté à la barre et les liens de mon menu au lieu de se mettre aligné sur une même ligne se mette en colonne sur le côté droit…

    Je ne sais pas vraiment si mon explication est très claire mais je ne sais plus trop quoi faire pour arranger le problème.

    Auriez-vous une idée ? Merci beaucoup !

    Alexis

  16. Lycia Diaz

    Salut Alexis, tu aurais le lien de la page qui bug ?

  17. Imane

    Bonsoir ! Merci pour cet article ! Je souhaite mettre mon menu comme celui en 3.3 mais lorsque je sélectionne cette option mon menu reste à gauche

    Je travailles en local
    Je vous remercie 😊

  18. Lycia Diaz

    Salut Imane,
    Le type d’en-tête présenté en point 3.3 est un en-tête « inline centrée ». Normalement il ne devrait pas rester à gauche. Est-ce que le logo se met quand même au centre mais les éléments restent à gauche ?
    Ça me parait bizarre.
    Met tous tes plugins et thèmes à jour et vois si ça change. Si le bug est toujours là, désactives tous tes plugins (puisque tu es en local, tu n’as pas de soucis à te faire) et vois s’il n’y aurait pas un conflit.
    Tu nous tiens au courant ?
    Bonne journée.
    Lycia

  19. imane

    Salut Lycia,
    Mon logo reste à gauche sur l’onglet « aller sur mon site

    Quand je vais dans l’onglet « personnaliser mon thème  » puis « format de l’en-tête  » le logo est au milieu mais j’ai un menu burger qui reste

    ( Je vous envoie les copies écrans car je n’aie pas pu la mettre en commentaire)
    Je débute le projet donc je n’aie installé aucun plugins .
    Concernant la mise à jour Divi je ne la fait pas pour le moment car on a pas encore de recul pour la version 3.2.5;
    Effectivement je n’aie pas fait la mise à jour de wordpress 5.2.2 car je sais pas s’il y a eu des bugs qu’en pensez vous pour la mise à jours wordpress ?

    J’ai supprimé les caches du théme et des navigateurs

    Je vous remercie

  20. Lycia Diaz

    Salut Imane, je viens de vous répondre par email. Concernant les MAJ, je ne vois pas où est le problème : Pour ma part, je les effectue dans la semaine où elles sortent et je n’ai jamais eu de souci. Vous faites une sauvegarde avant (au cas où) mais souvent, ces MAJ corrigent des bugs ou des problèmes.

  21. Imane

    Bonjour

    Ça ne fonctionne pas malgré la mise à jour WordPress
    Pour la mise à jour Divi j’attends un peu car il y a eu des bugs sur celle qui venait de sortir la 3.2.4

    Ça fonctionne pas avec un autre logo ; j’ai meme laissé celui de Divi
    Je vous remercie

    Je vous remercie

  22. annegerard

    Bonjour Lycia, je voudrais que mon menu principal reste visible lorsque l’on scrolle vers le bas. Je n’arrive plus à trouver l’option pour que le menu reste visible où que l’on soit sur le site. Merci
    Anne

  23. Goldstein Tiffany

    Bonjour et merci pour votre article !

    Mon menu sur ordinateur est visible mais ne l’est plus sur téléphone… Savez-vous comment je peux faire ?

    Merci d’avance 🙂

  24. Lycia Diaz

    Salut Tiffany, effectivement il y a un problème sur ton site. As-tu ajouté du code ou des plugins qui pourraient être responsable de ce résultat ? Si tu regardes ton site en version mobile, ton menu n’a pas disparu mais il est tout à droite et il faut que tu glisses l’écran vers la gauche pour l’atteindre. On dirait que tu as un problème de responsive ? As-tu des bannières Google Adsense ? Peut-être que ce « vieux » tuto pourrait t’aider… à tester : https://la-webeuse.com/probleme-de-responsive-avec-le-theme-wordpress-divi/

  25. Lycia Diaz

    Salut Anne. Regarde dans l’article au chapitre 3.1 / Option 1 : il faut que l’option soit décochée pour que ton menu reste visible au scroll. Je pense que ça vient de là.

  26. Hélène

    Bonjour, je suis débutante. Je viens de publier mon site. Il ne devrait pas être modifiable. Or là, tout le monde peut avoir accès au tableau de bord. Lycia, pourrais-tu me dire ce que je nais pas fait correctement ? Merci beaucoup.

  27. Lycia Diaz

    Salut Hélène, es-tu sûre que tout le monde a accès à ton back-office ? Lorsque tu vistites ton propre site, c’est normal de voir la barre de connexion noire en haut de ton site. C’est parce que tu es connectée en tant qu’utilisateur/administrateur. Ce qu’il faut que tu vérifies, c’est si quand tu es déconnectée, cette barre est toujours visible. Tu peux visiter ton site depuis un autre navigateur pour en avoir le cœur net. Ensuite, tu peux aussi vérifier dans ton back-office, à l’onglet Réglages > Général : la case « tout le monde peut s’enregistrer » doit être décochée. Et le « Rôle par défaut de tout nouvel utilisateur » doit être « Abonné ». Vérifies ces deux valeurs, c’est important.
    Tu me tiens au courant ?
    Bonne journée.

  28. Laura

    Bonjour, je souhaiterai savoir si il est possible d’intégrer un logo animer en gif sur ma page d’accueil en plein écran.
    Merci

  29. Lycia Diaz

    Bonjour Laura, je n’ai jamais essayé. C’est peut-être possible de l’insérer dans un module Image ou un module plus classique comme du texte (ajouter un media dans le module texte). Il faut essayer.

  30. Imane

    Bonjour
    Je souhaite savoir si je peux avoir exactement le même menu que « B chef « http://bchef.fr/ avec divi ? (Je parle surtout du menu qui est « intégré « à la photo ) merci

  31. Lycia Diaz

    Salut Imane !
    Eh bien disons que cela a l’air possible avec du code personnalisé. Avec les options disponibles, je ne pense pas que c’est possible.

  32. Clémence

    Bonjour Lycia,

    Merci pour cet article ! J
    Je suis débutante et je suis en train de créer un site vitrine en one page (avec donc des ancres de lien).
    Jusqu’ici tout va bien pour la version desktop mais impossible de faire apparaître un menu hamburger pour mobile et tablette !
    Comment faire ? Un grand merci d’avance
    Clémence

  33. Laetitia

    Bonjour, comment simplement supprimer le menu de navigation dans divi ? Merci pour vos réponses

  34. Lycia Diaz

    Salut Clémence. Je ne sais pas trop : tu as une URL à me donner ?

  35. Zolo

    Bonjour Lycia,

    Merci pour ton site où je trouve beaucoup de ressources pour construire le mien. Je suis en train de configurer mon menu vertical, et je souhaiterais que quand on clique sur l’un des items qui y figure, le menu se déroule pour faire apparaître des explications, à la manière de ce site: https://fanettemellier.com/ . Penses-tu que ce soit possible sur Divi – et si oui: comment faire? Un grand merci d’avance.

  36. Lycia Diaz

    Salut Zolo et merci !
    WordPress lui-même permet d’ajouter une description dans son menu. Je ne sais pas si c’est exactement ce que tu veux faire mais voici comment :
    Vas à l’onglet Apparence > Menu – tout en haut de l’écran, à droite, ouvre les « options de l’écran » et active la fonctionnalité de « description ». Après cela, tu auras un nouveau champ pour chaque élément de ton menu et tu pourras y saisir ce que tu veux.

  37. Walid

    Bonjour Lycia,
    J’aimerai personnaliser mon menu sur téléphone, je veux qu’il y ai l’icone du menu en haut a droite mais aussi une rubrique en plus pour qu’elle sois visible même sans avoir cliquer sur l’icone du menu. C’est difficile a expliquer mais j’espère que tu peut m’aider. merci d’avance

  38. Lycia Diaz

    Salut Wlid,
    Je crois comprendre ce que tu veux mais de façon native, ce n’est pas possible. Il faudrait fureter du côté des plugins tiers (comme Mhmm Mhighty pour voir si cette fonctionnalité n’existerait pas.

  39. Grégoire

    Bonjour,
    J’ai un problème avec mon menu Divi : je voudrais qu’il soit fixe mais il n’apparait qu’au scroll de la page. Pourtant l’option « cacher la barre de navigation si aucun défilement » est décochée… Merci de votre aide !

  40. Lycia Diaz

    Salut Grégoire, des fois il peut y avoir un décalage. Souvent dû à un cache du navigateur ou un plugin de cache. Est-ce rentré dans l’ordre ?

  41. Christophe

    Lycia bonsoir, je cherche -en vain – des infos pour intégrer une petite infographie animée réalisée sur Animate dans mon portfolio en ligne Divi.
    Comme d’autres suivront vraissemblablement, j’aimerais savoir le faire seul. Peut-être peux-tu me communiquer une méthode pas compliquée? Je t’en remercie d’avance. Christophe

  42. Lycia Diaz

    Salut Christophe. Je ne connais pas Animate, c’est un logiciel Adobe ? J’ai regardé et les exports peuvent être en vidéo ou GIF. Donc finalement, ce ne devrait pas être compliqué à intégrer je suppose ? As-tu essayé d’héberger le Gif sur Giphy par exemple et mettre un code Embed au sein de ta page ? Je dis peut-être des bêtises car je n’ai jamais testé…

  43. STEPHANE PERRAULT

    Bonjour,

    Je souhaite régler ma barre de menu principal et lorsque je vais dans le menu Apparence/Personnaliser… ne j epeux pas accéder à l’option entête et navigation, cette option apparaît une fraction de seconde et disparaît immédiatement.
    Comment puis-je résoudre ce problème ?

    Cordialement.

  44. Lycia Diaz

    Salut Stéphane.
    Ce n’est pas normal, tu dois avoir un conflit avec un autre plugin.
    Précision : si tu utilises le thème Divi, tu n’as pas besoin d’ajouter le plugin Divi Builder. Ça pourrait peut-être venir de là mais je pense plutôt à un conflit avec un plugin tiers…
    Est-ce rentré dans l’ordre depuis ton commentaire ?

  45. Christophe

    Bonjour Lycia,
    Je suis désespéré et je me prends la tête à bidouiller les réglages du thème Divi sans parvenir à avoir un site « responsive ». Si je touche à la hauteur des sections et des lignes, ça décale tout le contenu et j’ai des résultats différents sur tablette ou sur mobile Samsung et Iphone. Je ne comprends pas pourquoi tout se décale selon les écrans. Si vous aviez une astuce, merci.

  46. Lycia Diaz

    Salut Christophe,
    Il ne faut pas désespérer !
    Mon conseil serait de ne pas trop toucher aux marges et au padding. Au plus tu en mets, au plus tu auras des soucis. Il vaut mieux passer par les options de chaque module qui permettent de définir une taille différente en fonction des écrans.
    C’est assez compliqué à expliquer mais si tu regardes le chapitre 4.2 de cet article, dans le paragraphe « le sous-onglet texte », tu pourras trouver une piste à explorer, je pense.
    Il suffit d’éditer les parties de ton layout qui posent problème et de définir une valeur différente en fonction des écrans (desktop, mobile ou tablette)…
    Voilà 😉

  47. Autour de Vanessa

    Bonjour,

    Je souhaite positionner comme d’habitude sur un site un logo dans l’option En-tête et Navigation et là dès que je vais dans le menu apparence, je vois l’option et hop elle disparaît 🙁
    Un truc de fou
    Auriez-vous une astuce ? Je suis allée voir sur mes autres sites mais cela fonctionne sans problème.
    Merci beaucoup pour votre aide

  48. Lycia Diaz

    Salut Vanessa, il y a peut-être un conflit avec un autre plugin.
    Avez-vous ajouté un plugin récemment ou mis à jour un plugin ? Le code pourrait rentrer en conflit. Il faut désactiver les plugins et voir si le bug est toujours là. S’il ne l’est plus, c’est que ça doit venir de l’un d’entre eux. Il faut alors les réactiver un à un pour voir quel est le plugin qui émet ce bug.

  49. Vanessa

    Merci Lycia, mais ça a l’air plus grave que prévu
    Je n’ai plus accès à mes extensions
    j’ai écrit à mon hébergeur car impossible de mettre à jour la dernière version de WP et de téléverser DIVI
    Je voulais repartir de zéro
    Merci beaucoup pour être toujours présente pour de l’aide
    Bonne journée

  50. Lycia Diaz

    Oh ! Mince ! J’espère que tu vas trouver ;-(

  51. Christophe

    Hello, suite à mon message précédent à ne pas publier svp ! J’ai trouvé la solution : j’avais suivi un tuto périmé sur z-index alors que je viens de découvrir que cette propriété est prévue dans le parmétrage des modules. Et là, ça fonctionne. Désolé.
    Amicalement,
    Christophe

  52. Lycia Diaz

    Super ! J’avais pas eu le temps de te répondre… donc c’est réglé… 😉

  53. MyrtB

    bonjour,

    Je n’y connais pas grand chose, j’ai « créer » mes page et la hierarchie du menu, quand je vais dans Apparence > Personnaliser > En-tête et Navigation > Format de l’En-tête la page se barre literallement sans mon accord et je n’ai plus acces au menu personalisé. (juste : parmetre généraux, bouton, blog, styles sur mobile, palette de couleurs, Menu (qui ne sert pas a grand chose… j’ai l’impression), Widget (ou il me dient que montheme en utilise mais je sais pas comment y acceder), reglage de la page d’acceuil, CSS additionel).

    Desole si j’ai mit des truc inutile, d’où peut venir le probleme ?

  54. Lycia Diaz

    Salut Myrtille.
    Je ne peux pas trop t’aider vu que je ne vois pas ce qu’il se passe.
    Après, il ne faut pas trop se fier à ce que tu vois dans le personnaliseur de thème. C’est bien de vérifier en front si tout est correct.
    Pour la construction du menu en lui-même, je recommande toujours de passer par Apparence > Menu et non Apparence > Personnaliser > Menu

  55. LAURA

    Bonjour,
    j’ai ajouté le code css pour faire apparaitre une ligne fine à mes menus au moment du survol.
    problème quand je mets un sous menu a un de mes menus la petite barre apparait au milieu de ce sous menu avec une petite boite ombré, comment je pourrai corriger cela ?.
    idéalement je voudrai que la petite barre de la deuxième pages apparaisse bien en dessous du texte et sans la boite ombré.
    Merci d’avance pour votre réponse

  56. Lycia Diaz

    Salut Laura,
    Il s’agit là de corriger un peu le CSS. En inspectant le code de ton menu dans le navigateur, tu pourrais faire des essais de modification.
    Je ne vois que ça…
    😉

  57. Benoit

    Bonjour,

    Je voudrais ajouter une petite ligne au dessus du menu comme sur ce site: https://brasserieraphaelsiane.be/

    Comment faire ça avec DIVI?

    Merci beaucoup, j’utilise votre site depuis des mois, il est super.

  58. Benoit

    Bonjour et merci pour cette réponse rapide.

    J’ai dû m’exprimer incorrectement, j’ai vu cette astuce pour affiche une petite barre sous les éléments du menu.

    Je voulais dire d’afficher une barre AU-DESSUS du menu (complet) et pas de chaque élément de celui-ci. 😉

    Comme sur le site en exemple, avec le numéro de téléphone, l’adresse mail et le logo facebook.

  59. Lycia Diaz

    Salut Benoit !
    Ah oui. Je crois que tu dois te rendre à Apparence > Personnaliser > En-tête et navigation > Éléments de l’en-tête. Ensuite tu saisis les informations et la « navigation secondaire » devrait apparaitre… Dis-moi si c’est bon 😉

  60. Benoit

    Ça marche.

    Merci beaucoup, vraiment.

    Et chapeau pour ce site.

  61. Vdle

    Bonjour,
    Pour le moment, le texte de mon menu (type par défaut) est tout blanc. Je souhaiterais qu’un seul des éléments texte de mon menu s’affiche en rouge afin de sauter aux yeux.
    As-tu une astuce pour faire ça? je n’arrive pas , est ce parce que je n’ai que les liens personnalisé ? ( site en one page)

    Merci pour ton site

  62. Lycia Diaz

    Salut Vdle … il faut que tu actives les classes CSS dans Apparence > Menu > optons de l’écran (tout en haut). Tu donnes une classe à ton élément de menu puis tu l’appelles avec une règle CSS depuis Apparence > Personnaliser > Modifier le CSS

  63. Mecnun Becerik

    Bonjour à tous .

    J’utiise le thème Divi. Quand je créer une page avec le visual builder , il apprait la page d’accueil par défaut du thème. Et sur le menu le lien de cette dernière apparait aussi.
    Je voudrai la supprimer. Savez vous comment faire?

    A bientôt.

  64. Lycia Diaz

    Salut Mecnun ! Je pense qu’il faut que tu crées ton propre menu de navigation à l’onglet Apparence > Menu

  65. Mecnun BECERIK

    Salut. En fait j’ai trouvé. C’est dans le tableau de bord de personnalisation du thème. Il fallait changer un réglage dans la page d’accueil. Merci quand même pour ta réponse. Je le suis lancé en free-lance dans conception de sites internet As tu des conseils à me donner pour trouver des clients stp ?

  66. Lycia Diaz

    Ah super ! Concernant le freelancing, regarde mon blog La Webeuse (https://la-webeuse.com/) tu pourras trouver de nombreuses ressources à ce sujet 😉

  67. brig

    Bonjour, j’ai installé le logiciel divi, mais je n’ai plus l’entête par défaut du menu affiché. J’ai peut-être fais une manipulation sans me rendre compte mais j’ai beau chercher je sais pas comment la faire réapparaitre, même quand je télécharge des layouts, y a rien du tout. Vous me seriez d’un grand secours. Merci

  68. Lycia Diaz

    Bonsoir Brigitte,
    Ça peut venir de plusieurs choses… Peut-être vous rendre à l’onglet Apparence > Menu et vérifier si le menu principal est bien créé et bien assigné à un emplacement.
    En gros, je ne pense pas que ça vienne de Divi mais plutôt de WordPress. Certains paramètres doivent être faits depuis le CMS et non depuis le thème.
    Ça peut venir aussi du Divi Thème Builder si vous avez créé une Entête Globale et que vous n’avez rien mis dedans, c’est possible que rien ne s’affiche.
    🙂

  69. Pascal G

    Bonjour..

    J’ai le même problème que Stéphane Perrault…

    Je souhaite activer et régler ma barre de menu principal.
    Lorsque je vais dans le menu Apparence/Personnaliser, je ne peux pas accéder à l’option entête et navigation, cette option apparaît bien une fraction de seconde et puis disparaît immédiatement.

    J’utilise DIVI Community Child Theme

    Comment puis-je résoudre ce problème ?
    PS : mes pages sont bien publiées et correctement agencées dans le menu principal

    Cordialement.
    Je n’ai qu’une seule extension pour l’instant d’installée.. (Akismet Anti-Spam)
    Je ne pense pas que ce soit donc un problème d’extension

  70. Lycia Diaz

    Salut Pascal,
    OK, je vois tout à fait.
    Je ne veux pas dire de bêtises mais si l’option de configuration de l’en-tête apparait une fraction de seconde puis disparait, dans le menu Apparence > Personnaliser, c’est que votre site utilise l’entête Globale définie dans le Thème Builder de Divi. Donc par défaut, l’entête classique est désactivée et donc, votre header se gère depuis le Theme Builder.
    Je ne vois que cette solution.
    Rendez-vous dans Divi > Theme Builder et regardez si une template globale avec un Header et un Footer a été activé (en vert). Si c’est le cas, c’est donc depuis cet endroit que vous pourrez gérer votre menu principal. Si cela ne vous convient pas, il suffit de jeter cette template globale (attention, vous ne pourrez plus la récupérer : enregistrez-la dans la bibliothèque Divi avant de la supprimer) pour retrouver le fonctionnement classique de Divi.

  71. 7hil

    Bonjour et Merci pour votre travail ! 🙂

    j’aurais aimé mettre juste un texte à la place de l’image (logo)
    J’imagine que c’est possible avec du CSS (que je ne maîtrise pas…)
    mais rien dans les options de DIVI ?

  72. Lycia Diaz

    Salut 7hil !
    Non pas d’option de ce genre à ma connaissance. Dernier recours => place une image de ton texte à la place de ton logo.

  73. François LC

    Bonjour,

    Je viens de construire mon site avec DIVI en quelques petites heures, n’ayant jamais fait ça au paravent, et tout est OK !
    SAUF : la 1ère page qui apparait : ça semble être un objet de type « Article » qui ne me permet pas de tout faire (comme un objet de type « Page »), et les images que j’ai intégrées ne sont pas sauvegardées :(. De plus, je ne peux activer le bouton « Activer le Visual Builder » :(.
    Comment pourrais-je faire pour sortir de cette situation ? Merci beaucoup.

  74. Lycia Diaz

    Salut François. Ce que tu recherches est une fonctionnalité de WordPress. Vas à l’onglet Réglages > Lecture et positionne « la page d’accueil » sur « une page statique » au lieu de « la page des articles » et tout rentrera dans l’ordre.

  75. Mecnun

    Salut

    Comment vas-tu​ ?Je voudrai savoir une chose.

    Je n’arrive pas avoir un bon rendu de mon site en mobile. Alors j’apporte les modifications nécessaires. Mais les modifications apparaissent aussi sur la version PC​ . Et la version mobile certains que je veux supprimer sont inaccessibles.

    As tu une idée d’où le problème STP.

    Bonne soirée.

  76. Lycia Diaz

    Salut Mecnum !
    Ça va et toi ?
    Les problèmes de responsive peuvent venir de divers endroits. As-tu lu cet article : https://astucesdivi.com/responsive-design-divi/ ?
    Lis-le attentivement, tu vas trouver plusieurs cas de figures qui pourraient t’aiguiller.

  77. Mecnun

    Merci. Je regarderai demain matin.

    Bonne soirée.

  78. Emmanuelle

    Bonjour,
    Je voudrais un en tête slide-in sur ma home page. J’ai déjà ce type de menu (le petit hamburger) sur mon site existant, mais impossible de le mettre sur le brouillon que je suis en train de travailler.
    Dans Personnaliser -> En tête et navigation, je n’ai pas l’onglet Slide in & paramètre header plein écran. Je n’ai que « format de l’en tête », « barre de menu primaire », « barre de menu secondaire », « paramétrage de la barre supérieure, éléments de l’en tête.
    Est ce que c’est à cause du thème que j’utilise qui ne prend pas en charge ce type de menu?
    Merci beaucoup! 🙂

  79. Caroline COTTY

    Bonjour Lycia,

    Tout d’abord un enorme merci pour toutes ces astuces, car quand on est débutante comme moi, ca aide 🙂

    Je travail sous mon theme « divi child » car on m’a conseillé de ne pas travaillé directement sur le theme parent divi… Pourquoi d’ailleurs ne jamais travaillé directement sur le theme parent ?

    J’ai le même problème que Stéphane Perraut, je souhaite accéder aux paramètres d’entête et de navigation afin de modifier l’entete et le menu de mon site.

    Malheureusement, lorsque je vais dans le menu Apparence/Personnaliser, je ne peux pas accéder à l’option entête et navigation car cette option n’apparait que quelques instants et puis disparaît immédiatement….

    Comment puis-je résoudre ce problème ?

    J’ai deja tout essayé d’après moi (vider les caches, tester avec toutes mes extensions désactivées….)

    Par avance merci pour votre retour 🙂

    Cordialement.

    Caroline.

  80. Lycia Diaz

    Salut Emmanuelle, tu utilises Divi ? Si oui, il existe une option SlideIn comme montré dans cet article. Il suffit de la cocher 😉

  81. Lycia Diaz

    Salut Caroline.
    Tu n’es pas la première à me dire ça et je crois que j’ai la solution… Ceux qui ne trouvent plus les options de paramétrage du menu depuis l’onglet Apparence > Personnalisé, c’est parce que vous avez activé une en-tête globale depuis l’onglet Divi > Thème Builder. En d’autre termes, c’est soit l’un soit l’autre : soit tu utilises le menu classique et tu le paramètre avec les options de personnalisation ou bien tu utilises le thème builder et les options classiques disparaissent.
    Voilà, je crois que ça viens de là.

  82. Aurélien

    Hello 🙂

    Je souhaiterai une image en  »en-tete » avec le menu dedans, en gros quand tu arrives sur ma page tu vois une grande photo et dans la photo le menu. comment faire ? je m’arrache les cheveux ^^

    Merci d’avance

  83. Lycia Diaz

    Salut Aurélien,
    Tu dois créer un En-tête Global avec le Divi Theme Builder : en gros, tu ajoutes une section avec une image en arrière-plan et dans cette image, tu ajoutes un module Menu (avec un arrière-plan transparent) et d’autres modules si besoin.

  84. Jérôme

    Bonjour Lycia,
    Ton astuce pour afficher une ligne sour le menu fonctionne avec le header par défaut, mais comment faire pour que cela fonctionne pour un header/menu réalisé avec « Theme Builder » ?
    Merci !

  85. Lycia Diaz

    Salut Jérome. Il faut regarder, il y a peut-être une class CSS à changer

  86. DUHARD

    Bonjour Lycia.
    Pas de question mais un commentaire de remerciement pour votre réponse du 27 mars 2020 à 08:39 au problème soulevé le 26 mars par Caroline sur la disparition de l’option « entête et navigation » du menu « Apparence/Personnaliser » avec un thème enfant sous Divi.
    Je vous confirme, puisque que vous sembliez avoir un doute, que votre solution est LA BONNE.
    Merci donc et bravo.

  87. Lycia Diaz

    Merci Duhard pour ton retour

  88. Marine

    Bonjour Lycia,
    Tout d’abord, merci beaucoup pour toutes les informations que ton site nous apporte pour enrichir nos compétences.
    Néanmoins, je suis face à un problème avec la navigation verticale de mon site.
    Je souhaite avoir des éléments de sous-menu, mais ceux-ci s’affichent à droite du menu vertical, ce qui n’est pas très gracieux…. Savez-vous comment placer les éléments de sous-menu en dessous de l’élément du menu correspondant ?
    Je vous remercie d’avance
    Marine

  89. Cyrielle Durand

    Bonjour,
    Comment fait-on pour personnaliser le menu de la version mobile?
    J’aimerais passer mon menu hamburger sur la gauche et changer la couleur bleue par défault.

  90. Lycia Diaz

    Salut Cyrielle, les réponses à tes questions sont dans l’article 😉

  91. haddan mahfoud

    bonsoir
    svp je peux pas changer la couleur du menu deroulant du menu principal dans toutes les versions pc tablette et portable. en fait je le change dans la personnalistaion, je choisis la couleur et je fais publier mais ca tient pas. merci beaucoup

  92. Lycia Diaz

    Salut Haddan.
    Des fois, ça peut buguer. Change de couleur et recommence. Ou vide le cache.

  93. Antonio

    Bonjour Lycia, tout d’abord merci pour l’aide que tu nous apporte. Mon problème est le suivant. J’ai créer un méga menu divi et quand il est afficher sur le mobile je n’arrive pas à me déplacer verticalement dans le menu. C’est la page en arrière plan du menu qui se déplace et non le menu lui même. Comme mon menu est assez long ça me pose un problème puisque je ne peut pas voir le bas du menu.
    Merci.

  94. Lycia Diaz

    Salut Antoinio et merci.
    Ecoute, j’ai l’impression que tu n’es pas le seul dans ce cas. Je ne sais pas trop car je n’utilise jamais la fonctionnalité de méga-menu. As-tu tenté un menu normal pour voir si le problème persiste ? Enfin, une autre piste : ton menu est créé avec le Thème Builder ou avec les options de base de Divi ?

  95. Antonio

    Bonjour, Lycia.
    En fait mon problème se pose en mode mobile uniquement (vu la taiile de l’écran).
    Oui je fonctionne avec le divi builder pour tout mes haut de page.
    J’en profite pour un autre petit souci que j’ai toujours eu avec divi builder c’est le probléme de responsive background. Dès que je place une image de grande taille en fond d’écran elle est complètement tronquée sur l’affichage mobile. Pourrais tu me donner des pistes.
    Merci.

  96. Lycia Diaz

    Salut Antonio.
    Je ne peux pas trop t’aider, il faudrait que je puisse voir…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This