L’onglet Navigation des options du thème Divi

Mis à jour le 22/08/2019 | Publié le 12/01/2018 | 26 commentaires

Voyons en détail ce qu’il est possible de paramétrer dans l’onglet Navigation des options du thème Divi.

Sachez qu’il n’y a pas de « bons ou mauvais paramétrages », tout cela est subjectif et variera en fonction de vos projets web et de la finalité que vous souhaitez obtenir…

Les options que vous définirez dans cet onglet pourront avoir une influence sur le comportement de votre menu principal. Rendez-vous ici sur le dossier complet dédié à la navigation principale de Divi.

Onglet Navigation
Onglet Navigation

L’écran d’option « Navigation » est composé de 3 sous-onglets : « Pages », « Catégories » et « Paramètres Généraux ».

Voici le programme de cet article :

  1. Le sous-onglet Navigation > Pages
  2. Le sous-onglet Navigation > Catégories
  3. Le sous-onglet Navigation > Paramètres généraux
  4. Les autres options 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.

Navigation > Pages
Onglet Navigation > Pages
  1. Exclusion des pages : je ne sais pas trop si cette option est intéressante puisque pour organiser sa navigation, il vaut mieux passer par les options qu’offre WordPress depuis l’onglet Apparence > Menu. Voir ici pour savoir comment créer un menu principal WordPress.
  2. Menus déroulants : si cette option est désactivée, les sous-pages contenues dans votre navigation principale ne seront pas actives. Seules les pages de premier niveaux seront prises en compte.
  3. Lien d’accueil : cette option ajoute un lien vers votre page d’accueil, toutefois, si vous avez défini votre page d’accueil dans l’onglet Apparence > Personnaliser > Page d’accueil statique, cela créera un doublon.
  4. Classement des liens : cela vous permet de paramétrer l’organisation de tri des liens contenus dans votre navigation principale. Je le redis, cela n’a aucune valeur si vous paramétrez votre menu depuis l’onglet Apparence > Menu.
  5. Ordre de classement : idem que pour les classements des liens, il vaut mieux passer par l’onglet Apparence > Menu proposé nativement par WordPress.
  6. Nombre de niveaux dans les menus déroulants : ce sont les niveaux équivalent à la profondeur d’un menu. Tout dépend de combien de sous-éléments vous avez besoin dans votre menu principal.
  7. Sauvegarder : bien entendu, une fois que vous avez fait vos changements, n’oubliez pas de les sauvegarder.

À lire aussi : comment insérer des images dans le menu de Divi ?

Voyons maintenant plus en détail le sous-onglet « Catégories » disponible depuis l’onglet « Navigation »…

Options du Thème Divi : onglet navigation - 2
Onglet Navigation > Catégories
  1. Exclusion de catégories : tout comme les pages, il est possible d’exclure des catégories dans la navigation principale. C’est ici que vous pourrez les cocher ou les décocher. Cependant, il est peut-être plus pertinent de faire cela depuis l’onglet Apparence > Menu proposé nativement par WordPress.
  2. Menus déroulants : si votre blog détient des catégories-enfant et que vous souhaitez les faire apparaitre automatiquement, vous pouvez activer cette option.
  3. Catégories vides : vous pouvez afficher, dans la navigation principale de votre site, toutes les catégories existantes. Par défaut, les catégories qui ne contiennent aucun article seront cachées. Si vous désirez quand même les afficher, vous pouvez désactiver cette option.
  4. Niveaux du menu déroulant : tout comme les menus déroulants des pages, vous pouvez décider de la profondeur du menu déroulant de vos catégories. Cela dépendra de votre organisation interne concernant les catégories parentes et enfant.
  5. Classer les liens : vous pouvez filtrer le classement des liens de votre navigation de catégorie
  6. Ordre de classement : de même que vous pouvez les classer selon un tri ascendant ou descendant.
  7. Sauvegarder : n’oubliez pas de sauvegarder vos changements.

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

Jusqu’à présent, les deux derniers onglets n’avaient pas beaucoup de valeur ajoutée mais les options disponibles depuis le sous-onglet « Paramètre Généraux » sont plutôt importantes…

Options du Thème Divi : onglet navigation - 3
  1. Désactiver le niveau supérieur : lorsque l’option est désactivée, les éléments primaires de votre navigation seront clicables. Si vous voulez que l’élément primaire, contenant des sous-éléments de menu, ne puisse pas être cliqué, activez cette option. Par exemple, sur ce blog, Astuces Divi, vous pouvez cliquer sur l’élément nommé « TOUT POUR DIVI« . Cet élément primaire est clicable car l’option est désactivée. Si j’avais voulu que l’élément « TOUT POUR DIVI » ne soit pas accessible, j’aurais alors activé cette option.
  2. Méthode alternative de défilement : lorsque l’on crée une navigation par défilement, c’est-à-dire par SCROLL, on ajoute un ID CSS pour accéder à cette partie de l’écran. Toutefois, il peut arriver que le titre soit coupé. En activant cette option, ça corrige le problème. Pour plein d’astuces concernant le scroll, rendez-vous ici.
  3. Sauvegarder : toujours pareil, n’oubliez pas de sauvegarder…

Pour aller plus loin, je vous propose de naviguer dans les autres articles de cette série :

onglet navigation de divi
Divi tutorial : navigation tab

Ça devrait vous plaire aussi :

Divi Layout Block : des modules Divi au sein de Gutenberg !

Divi Layout Block : des modules Divi au sein de Gutenberg !

Bonne nouvelle ! La version 4.1 de Divi permet d’insérer des modules du Divi Builder au sein de l’éditeur Gutenberg de WordPress. Votre imagination n’a plus aucune limite ! Vous imaginez tout ce que vous allez pouvoir réaliser avec Divi et WordPress ?

26 Commentaires

  1. PEREZ SERON

    Bonjour,
    Je fais un site avec divi.
    Je voudrais bloquer ma barre latérale comme la votre.
    Que dois je faire pour éviter qu’au défilement les éléments restent en haut de ma page?

    Merci

  2. Sev

    Bonjour,
    Mon menu déroulant du menu principal se déroule mais je ne peux pas accéder aux premiers articles du blog qui se situent en bas du menu déroulant… Je ne m’en étais pas aperçue tant que je travaillais sur un grand écran, mais je constate le problème sur un portable. En revanche, la navigation dans le menu s’effectue très bien sur une tablette ou un smartphone. Je n’arrive pas à comprendre d’où vient ce souci. Auriez-vous une explication ? Serait-ce dû à l’absence d’ID CSS pour permettre la navigation par SCROLL ? Auquel cas, comment devrait se présenter cet ID CSS ?
    Merci beaucoup

  3. Lycia

    Bonjour Sev, vous avez le lien du site ?

  4. Lycia

    C’est parce que tu as trop d’éléments qui compose ton menu

  5. Lycia

    Ce sont des articles que tu as ajouté au menu ?

  6. Sev

    Oui tout à fait, ils sont ajoutés au menu.
    N’y a-t-il pas moyen d’avoir un menu déroulant aussi long que l’on souhaite ? Suis-je obligée de créer des catégories et par là-même des sous-menus ?
    Je suis surprise qu’un menu déroulant ne puisse être déroulé…

  7. Lycia

    Vous pouvez avoir un menu long, puisque si on le « ré-enroule » votre problème n’existe plus. On voit bien votre contenu à ce moment-là. Je pense qu’il vaut mieux mettre une page de catégorie. Quand l’utilisateur clique dessus, il arrive à la liste des articles. Sur Astucesdivi, il y a 1 élément avec 4 sous éléments. Chacun d’entre eux vous mène à la liste des articles de la catégorie. C’est peut-être plus facile pour l’utilisateur ?

  8. Sev

    Ré-enroule ? Je ne comprends pas. Si je scroll dans un sens ou dans l’autre je ne vois pas les articles en bas du menu (sur un écran 13″).
    Je préfèrerais que tous les articles du blog soient visibles dans ce seul menu.
    Ex. : dans le site ci-dessous (sélectionné à l’instant par hasard), le menu « Tous nos rayons » nécessite un scroll et ne gène pas l’utilisateur qui comprend immédiatement l’action à faire pour accéder à la suite du menu. Est-ce possible avec Divi ?
    https://www.darty.com/nav/achat/encastrable/grand_refrigerateur/refrigerateur_americain/samsung_rs66n8100s9_ef.html

  9. Lycia

    En fait, quand tu appuie pour dérouler le menu , tu peux reappuyer pour le fermer. (J’ai testé avec mon iPhone)

  10. Sev

    Merci Lycia. En fait mon problème est visible sur un écran d’ordinateur portable en particulier. Sur tablette ou smartphone, où il est possible de faire glisser le menu de manière tactile, on peut lire l’intégralité du menu. Avec une souris devant un écran par contre on s’arrête, selon la taille de l’écran, avant la fin du menu.

  11. Lycia

    On peut corriger ça avec du CSS simplement

  12. Sev

    Oui, c’est ce que je subodorais après la lecture de la note 2 sur la méthode alternative de défilement, d’où ma question dans mon 1er commentaire à propos de l’absence d’ID CSS pour permettre la navigation par SCROLL. Mais où dois-je définir cet ID CSS ? Dans la personnalisation des CSS de l’onglet « Général » ? Et quels attributs lui donner ?

  13. Lycia

    Non je pense plutôt à du Media Queries. Je regarderai la semaine prochaine

  14. Sev

    Merci Beaucoup Lycia. Je ne connais pas ces Media Queries…

  15. nol

    Bonjour,
    J’ai créer un menu mais impossible de la voir dans mes pages
    Comment faire pour qu’elle apparaisse ?

  16. Lycia

    Bonjour Nol,
    Une fois votre menu créé, vous devez lui affecter un emplacement via Apparence > Menus > gérer les emplacements

  17. Nelly

    Bonsoir Lycia,
    Je bloque vraiment sur un point, je suis créatrice de faire-part mariage, j’ai donc crée ma page catégorie faire-part mariage ou tous mes modèles seront affichés, j’ai donc ajouté une ligne avec à droite le module boutique et à gauche barre latérale.

    J’ai bien ajoutés les attributs aux modèles, également « réglé » la barre latérale dans apparence widget, mais quand j’actualise, l’onglet barre latérale reste vide…

    Auriez-vous une idée du problème ?

    Deuxième question,
    Suite à une grosse erreur de parcours, j’ai voulu crée un site sous wix…
    Je me suis vite rendue compte de la grosse erreur que je faisais, du coup je suis en train de crée et de remplacer ce site sous wordpress,
    j’ai peur de crée un duplicate content puisque mes pages sont en ligne, mais sous un nom de domaine de remplacement qu’ovh m’a fourni en attendant de terminé celui-ci.

    Y’a t’il une possibilité pour créer un site sous wordpress, mais non visible et hors ligne ?

    Excusez-moi pour toutes ces questions, mais je suis vraiment perdu, et comme je retrouve énormément de réponses à mes questions sur votre site, je me permets donc de vous contacter aujourd’hui ….

    Merci pour votre retour
    Belle journée à vous

  18. Chilli

    Bonjour,
    savez-vous comment on désactive l’affichage du menu déroulant lorsque l’on scroll ? lorsque l’on scroll le menu disparait correctement mais si nous avons le malheur de passer la souris en haut de la page, la couleur de fond du menu déroulant et la couleur de la ligne s’affichent…
    Merci par avance de votre aide.

  19. Lycia Diaz

    Hello Julie, je n’arrive pas trop à comprendre votre besoin. Vous avez un lien ?

  20. Lycia Diaz

    Hello Nelly !
    Effectivement, il pourrait y avoir du duplicate content. Je vous conseille d’installer un plugin de maintenance dans les plus brefs délais. Celui-ci par exemple pourrait faire l’affaire : https://fr.wordpress.org/plugins/wp-maintenance/ ainsi Google n’aurait pas accès à votre site le temps de sa conception. Une fois que tout est rappatrié, supprimez le site sous Wix et désactivez la maintenance du nouveau site. Pour votre problème de barre latérale, il restera vide jusqu’à ce que vos articles soient publiés. Le sont-ils ? S’ils sont en brouillon, WordPress reconnait que la catégorie est vide et, de ce fait, n’affiche rien.

  21. Stéphane

    Bonjour,

    J’ utilise divi pour créer un site, seulement j’ai un problème avec la barre de menu que je ne parviens pas à configurer comme je le souhaite…

    Dans ma configuration actuelle la barre n’apparaît que lorsque l’on fait défiler la page de haut en bas. Et lorsque je sélectionne et que je désactive « barre de navigation fixe » dans option du thème divi « général » celle ci devient fixe et reste en haut de page.

    J’avoue ne plus trop savoir de quelle façon configurer la barre de menu en optant pour l’option via DIVI ou apparence personnaliser « propre à wordpress » tout ce que je souhaiterai est de pouvoir afficher sur mon site un menu comme le votre… fixe et qui reste en place lorsque l’on fait défiler l’écran.

    Par avance, merci pour les conseils que vous me communiquerez…

    Cordialement

    Stéphane

  22. Lycia Diaz

    Bonjour Stéphane. Le menu se règle dans Apparence > Personnalisé > En-tête et navigation. Si vous voulez un menu comme sur ce blog, j’ai choisi l’option Style d’en-tête : « Défaut ». Et je n’ai pas coché les deux options de dessous. Le menu reste donc fixe. Est-ce que cela répond à votre question ?

  23. coralie

    bonjour,

    je me demande si je peux modifier l’apparence du menu déroulant; En effet, le menu se déroule en colonne alors que je souhaiterai qu’il face toute la largeur de ma page comme ma barre de navigation et donc avoir mes onglets rangés horizontalement.

    Merci d’avance

    Cordialement

    Coralie

Trackbacks/Pingbacks

  1. Comment paramétrer les onglets CRÉATEURS, LAYOUTS et ADS du thème Divi ? - […] paramétrer l’onglet Navigation du thème Divi […]
  2. Les options du thème WordPress Divi : focus sur l'onglet "général" - […] paramétrer l’onglet Navigation du thème Divi […]

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