Éditeur Studio : Ajouter et personnaliser un méga menu
Temps de lecture : 5 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.
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 :
- Sélectionnez le menu horizontal correspondant dans votre éditeur.
- Cliquez sur Gérer le menu.
- Cliquez sur + Ajouter un élément au bas du panneau.
- Sélectionnez Méga menu.
- Saisissez un titre pour le méga menu.
Suggestion : Il s'agit du titre que les visiteurs survolent pour voir le méga menu. - Cliquez sur Terminé.
- Ajoutez du contenu au méga menu :
- (Dans le panneau Gérer le menu) Cliquez sur Modifier à côté de Conteneur.
- Ajoutez les éléments dont vous avez besoin au conteneur.
Créer un menu déroulant
Vous utilisez des méga menus pour organiser des éléments spécifiques sur un site ? Créer un menu déroulant Lorsque les visiteurs cliquent sur le méga menu, le menu déroulant et ses éléments sont affichés dans le conteneur.
Que savoir :
Vous ajoutez et gérez des éléments déroulants à partir du même panneau que le menu principal - il est donc encore plus facile de configurer la navigation sur le site.
Pour créer un menu déroulant :
- Sélectionnez le menu horizontal correspondant dans votre éditeur.
- Cliquez sur Gérer le menu.
- (Si l'élément n'a pas été ajouté au menu horizontal) Cliquez sur Ajouter un élément et configurez l'élément de menu que vous souhaitez.
- Sélectionnez l'élément dans le panneau Gérer le menu .
- Faites glisser et déposez l'élément sous le méga menu.
Vous souhaitez gérer les éléments du menu déroulant ?
Utilisez le panneau Gérer le menu pour réorganiser, renommer et supprimer des éléments dans un menu déroulant.
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 :
- Sélectionnez le menu concerné dans votre Éditeur.
- Cliquez sur l'icône Mise en page
. - Cliquez sur Méga menu.
- 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.
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 :
- Sélectionnez le menu concerné dans votre Éditeur.
- Cliquez sur l'icône Ouvrir l'inspecteur
en haut à droite de l'éditeur.
- Sélectionnez Conteneur de sous-menu dans le menu déroulant Que souhaitez-vous personnaliser ?.
- 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.
Cela vous a-t-il aidé ?
|