Header and Divi Menu: header settings & customization

Updated on 16/07/2019 | Published on 23/01/2019 | 83 comments

How to create a menu in WordPress, how to customize the header of a site made with the Divi theme, where to find customization options etc.... So many questions that will find answers in this article. I offer you a complete file on Divi's headers and menus. Here is the program:

  1. Create the main menu of your WordPress site
  2. Delete Divi's logo and add your own
  3. Choose the type of header proposed by Divi
  4. Define the appearance of menu items
  5. Some tips to customize your Divi main menu
  6. Resources to modify the Divi menu

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

Before you can customize the header and the Divi menu, you must have the elements to appear in the main navigation of your site. These elements can be:

  • pages,
  • of the articles,
  • links,
  • of categories,
  • labels.

Step 1: Create menu items

The first step is to create pages (home, services, contact, about etc...) and possibly blog categories. These items must have the status "published" in order to be used within your main menu. You will therefore not be able to add pages with the status of "draft" to your menu.

Step 2: Create your main menu

Go to the Appearance tab > Menu. Simply enter the name of your menu in the dedicated field and click on "Create menu".

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

Once you have created your menu, you will be able to check the items to add to your menu. The list of available items is on the left side of the screen. These elements are classified by typology (pages, articles, personalized links, categories).

Simply check the desired items (those you have published/created upstream) and then click on Add to menu.

Step 3: Organize the structure of the main menu

You can drag and drop each menu item to re-order them. The highest element will be the leftmost element of your main menu - the lowest element will be the most rightmost element.

If you shift one of your elements to the right, it will become a sub-element.

Step 4: Assign a location to your menu

Don't forget to assign a location to your menu. Otherwise, your menu will not be visible on the front side (visitor side). Check the "Main Menu" box.

Finally, save the menu and then go to the front office to check how your menu appears.

To better understand, watch this summary video:

Note: the creation of a main menu of a site does not depend on a theme, it is a native feature of WordPress. However, the appearance of the main navigation depends on the theme you are using. And this is what we will see in the rest of this article.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

Now that your main menu is created, you will be able to customize it.

Insérer son logo dans le menu principal de Divi
Insert your logo in the Divi main menu

Then go to the Divi tab > Theme Options > Logo. Click on Upload and choose your image from the library or download it from your computer.

This step is simple....

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

Now you have all the cards in hand to start defining the type of header you prefer.

Go to the Appearance tab > Customize > Header and Navigation > Header Format.

In the drop-down menu, Divi offers you 5 types of headers:

  • Default
  • Centered
  • In-line logo centered
  • Slide In
  • Full Screen

From your choice will come different configuration options that we will see in detail.

Menu Divi par défaut
Default Divide Menu

This is what the main menu of a WordPress site that uses the default Divi header looks like. The logo is located on the left and the elements that make up your navigation follow each other with a right alignment.

This default header has several options:

Option 1: "Hide navigation bar if no scrolling"

If you check this option, the main menu will only appear when the user scrolls down the page.

When the user is at the top of the page, the navigation disappears.

This option can be confusing for the Internet user: if he is not comfortable with the Internet, he will not necessarily have the idea of scrolling your page to make navigation appear and could leave your site before he has even visited another page. This could then have consequences on your rebound rate.

For my part, I never tick this option, unless design constraints are imposed on me.

Option 2: "Enable vertical navigation"

navigation verticale Divi
Default Divi header option: vertical navigation to the right or left

The default header also provides fixed and lateral navigation. This option allows you to place the lateral navigation to the right or left. The rendering is quite nice and the logo will be placed at the top of the navigation.

Menu Divi Centré
Divi Menu - Centered

The centered header displays the logo in the center of your page. The menu items will be centered just below the logo. This design type is ideal if you use a headband logo. You can also be creative by preparing a special banner for your header using software such as PhotoShop or Affinity for example.

The centered header also offers the same options as the default header, namely:

  • "Enable vertical navigation": in this case, the side menu will look like the default side menu except that the navigation elements will be centered instead of aligned to the left.
  • "Hide navigation bar if no scrolling"
Menu Divi - Logo Inline Centré
Divi Menu - Centered Inline Logo

The inline logo header centered, as you can see from the screenshot above, places your logo at the center of the elements that make up the navigation.

This kind of design can be valid if the elements of your navigation are even in number and if they have a more or less similar number of characters. Indeed, depending on the elements of your menu, the logo may not be centered and would then propose an inconsistency in the harmony of the design.

Menu Slide In
Divi Menu - Slide In

The Slide In header, as its name suggests, offers a menu that slides to the right when the user clicks on the menu icon (the hamburger). Besides, if you don't like this hamburger, you can use a free plugin to change your appearance.

By default the background of this menu is blue, but don't worry, you can customize this menu in the Appearance tab > Customize > Header and Navigation > Slide In & Header Settings full screen.

menu Slide In Divi
Option to customize the Divi Slide In menu

In the menu options of the Slide In type menu, you can:

  1. Show or not the search bar
  2. Define the width of the menu
  3. Define the size of the various fonts
  4. Choose the font from the menu
  5. Select the background color as well as the color of the menu links.
Menu Plein Écran
Divi Menu - Full Screen

Divi's full screen header is an overlay header. When the user clicks on the menu icon, the screen is completely covered and the menu items appear.

The customization options are the same as those in the Slide In menu. You can also decide on the opacity of the background color.

Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!

Now that you have chosen the header type, you will be able to define the appearance of the items in your menu.

Most of Divi's options are found in the Appearance tab > Customize > Header and Navigation > Primary Menu Bar. From this tab, you will be able to:

  • define the menu in "full width" mode
  • hide the logo image in the menu
  • define the height of the menu
  • define the height of the logo
  • choose the font size and letter spacing
  • define the font and its appearance (bold, italic, capital letters, etc.)
  • define the color of your menu items (text color, active link color, sub-element color)
  • choose a background color for the main menu as well as for the drop-down menus
  • choose the color of the drop-down menu line and the animation of this menu.

For "Slide In" and "Full Screen" headers, you can find some of these options in the Appearance tab > Customize > Header and Navigation > Slide In & Header Settings Full Screen.

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

Although Divi allows you to easily define the design of your site using its options, you may want to go beyond that. Here are some tips that may be of interest to you:

Tip n°1: delete the grey line under the menu

You noticed her, didn't you? This thin grey line that delimits Divi's menu... Do you want to get rid of it? It's very simple, go to the Appearance tab > Customize > Additional CSS and add this simple piece of code:

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

Always in the tab Appearance > Customize > Additional CSS you can add this code. Note that you can adapt it to the needs of your background image :

/* 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;
}

With this simple piece of CSS code, you can display a line that appears when you hover over each element that makes up the Divi menu:

/* 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;
}

This line, which appears when the mouse hovers, can be easily modified with CSS... For more possibilities, here is a tutorial that proposes 3 original ways to animate your Divi menu items when the mouse hovers over it.

Insérer des images dans le menu principal de Divi
Here is an example of a main menu (navigation) containing images to illustrate my blog categories

To add images to the Divi mega menu, go to this tutorial or consult the official documentation concerning the creation of a mega menu simple (without images).

It is very easy to delete the main menu of a page or site made with Divi. With two clicks or a little CSS, you can delete its display on a single page or on the entire site. Discover the tutorial to hide the Divi menu.

To achieve this, you will not really need knowledge. You can insert a Full Screen Menu module anywhere on your page and attach it to the top of the screen when the user scrolls down. Discover how to set the main menu to scroll here.

In the same spirit as the previous tutorial, you can easily set the main menu of your site at the bottom of the screen. It's very simple: follow this tuto to get a Fixed Bottom Menu.

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

Sometimes, simple little bits of CSS code are not enough to achieve what you want... Here are some other avenues to explore:

  • Mhmm - Mighty Header & Menu Maker: this plugin for Divi lets you do extraordinary things. You can choose from about ten different Divi headers. Many options will allow you to change the hamburger icon, create mega menus and more! See an example on the video above || Discover the plugin.
  • Integrate the Divi Builder into the Divi Header: PavéNum offers a tutorial to integrate the use of the Divi Builder into the Divi header through hooks. I invite you to visit this page if you want to know more about it.
  • Quad Menu: this plugin allows you to create a custom mega menu for your Divi projects. Discover the plugin.
  • Add icons in the Divi menu: Michèle de Divi Soup offers you to download a free custom header layout with Font Awesome icons. To download here.
  • Use the default Divi header at the same time as the Slide In header: Michèle de Divi Soup (again!) offers you a tutorial to couple two types of menus at the same time. Discover the tutorial.
customisation du menu Divi
Divi Header : the complete guide

You should like it too:

8 fonctionnalités du Divi Visual Builder que vous devriez utiliser !

8 Divi Visual Builder features you should use!

Are you using all the features offered by the Divi Visual Builder? Some of them are little known and yet so effective! Discover now the 8 Divi options that will save you a lot of time! A great user experience in perspective!

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

Divi Layout Block: Divi modules within Gutenberg!

Good news! Version 4.1 of Divi allows Divi Builder modules to be inserted into the WordPress Gutenberg editor. Your imagination knows no bounds! Can you imagine how much you can achieve with Divi and WordPress?

83 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à.

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