Éditeur Studio : Ajouter et personnaliser un méga menu

Temps de lecture : 4 min
Les méga menus sont des conteneurs que vous pouvez ajouter à un menu horizontal. Lorsque les visiteurs survolent l'élément de menu concerné, le conteneur s'ouvre. Concevez le design du conteneur à partir de zéro et décidez de l'utilisation que vous souhaitez : navigation à plusieurs niveaux, présentation d'articles à l'affiche, ou toute autre fin.
Exemple de méga menu de style e-commerce, où le conteneur affiche de nombreux liens de navigation vers différentes catégories d'articles
Informations importantes :
Il est uniquement possible d'ajouter un conteneur de méga menu à un menu horizontal. Les conteneurs de méga menu ne sont pas pris en charge pour les menus verticaux, les menus ancres et les menus latéraux.
Dans cet article, découvrez comment :

Ajouter et configurer un conteneur de méga menu

Ajoutez le conteneur de méga menu en tant qu'élément à un menu existant et nommez-le comme vous le souhaitez. Nous vous recommandons d'utiliser un titre qui reflète le contenu que vous souhaitez, tel que « Services » ou « Notre histoire ».
Une fois que vous avez ajouté et nommé votre conteneur, ajoutez des éléments tels que des boutons, des formes et du texte pour créer le contenu que vous souhaitez. 

Pour ajouter un méga menu :

  1. Sélectionnez le menu horizontal correspondant dans votre éditeur.
  2. Cliquez sur Gérer le menu.
  3. Cliquez sur + Ajouter un élément au bas du panneau.
  4. Sélectionnez Méga menu.
  5. Saisissez un titre pour le méga menu.
    Suggestion : Il s'agit du titre que les visiteurs survolent pour voir le méga menu.
  6. Cliquez sur Terminé.
  7. Ajoutez du contenu au méga menu :
    1. (Dans le panneau Gérer le menu) Cliquez sur Modifier à côté de Conteneur.
    2. Ajoutez les éléments dont vous avez besoin au conteneur.
Le panneau Gérer le menu, cliquez sur Modifier pour commencer à ajouter des éléments à un nouveau conteneur de méga menu

Ajuster la mise en page du conteneur de méga menu

Après avoir ajouté les éléments que vous souhaitez au méga menu, modifiez la mise en page pour qu'elle corresponde à la structure de votre page. Vous pouvez ajuster l'espacement et décider de l'étirement du conteneur. 

Pour modifier la mise en page :

  1. Sélectionnez le menu concerné dans votre Éditeur.
  2. Cliquez sur l'icône Mise en page .
  3. Cliquez sur Méga menu.
  4. Utilisez les options pour ajuster la mise en page :
    • Étirer le conteneur : Décidez si le conteneur s'étire ou non sur toute la largeur de l'écran du visiteur. Lorsque cette option est désactivée, vous pouvez configurer la largeur souhaitée sur la toile ou dans le panneau Inspecteur.
    • Marges : Ajoutez de l'espace (en px ou %) entre le conteneur de méga menu et les bords de l'écran.
    • Espace entre les éléments et le conteneur : Agrandissez ou réduisez l'espace entre le menu et le conteneur de méga menu en faisant glisser le curseur.
L'onglet du méga menu dans le panneau de mise en page du menu de l'Éditeur Studio.

Concevoir le design du méga menu

Une fois que vous avez ajusté la mise en page du conteneur, concevez ses bordures, son arrière-plan, etc. Pour maintenir un aspect cohérent, les modifications que vous apportez au méga menu s'appliquent également à tous les sous-menus que vous avez ajoutés.

Pour personnaliser le design du conteneur :

  1. Sélectionnez le menu concerné dans votre Éditeur.
  2. Cliquez sur l'icône Ouvrir l'inspecteur  en haut à droite de l'éditeur.
Une capture d'écran de l'ouverture du panneau inspecteur dans l'Éditeur Studio.
  1. Sélectionnez Conteneur de sous-menu dans le menu déroulant Que souhaitez-vous personnaliser ?.
  2. Utilisez les options disponibles pour concevoir le design du conteneur :
    • Remplissage de l'arrière-plan : Configurez une couleur, un dégradé ou une image d'arrière-plan pour les boutons. Vous pouvez ajouter plusieurs calques d'arrière-plan avec différents niveaux d'opacité. 
    • Bordures : Ajoutez et personnalisez des bordures pour le conteneur.
    • Angles : Rendez les angles du conteneur plus ronds ou plus rectangulaires. 
    • Ombres : Ajoutez une ombre derrière le conteneur pour un effet 3D.
Sélection du design du conteneur de sous-menu dans le panneau Inspecteur, affichant les options disponibles pour les méga menus

Cela vous a-t-il aidé ?

|