Editor X : Utiliser des menus horizontaux stylisés

Temps de lecture : 6 min

Editor X passe à Wix Studio, notre nouvelle plateforme pour les agences et les freelances.En savoir plus sur Wix Studio

Le menu horizontal stylisé est un élément de navigation avancé proposé par Editor X, avec des tonnes d'options de personnalisation uniques. Vous pouvez adapter ce menu à vos besoins précis, en ajustant la mise en page et le design de chaque zone.

Exemple de menu horizontal stylisé sur un site Editor X

Dans cet article, apprenez à :

Choisissez un menu horizontal stylé qui correspond à l'apparence que vous souhaitez. Vous pouvez personnaliser le design pour qu'il corresponde mieux à vos besoins, et choisir le menu à afficher sur cet élément - il peut s'agir d'un menu existant affiché ailleurs sur votre site, ou d'un menu personnalisé uniquement pour ce contexte.

Pour ajouter un menu horizontal stylisé :

Cliquez sur Ajouter en haut de l'Editor X.
Cliquez sur Menu et recherche .
Cliquez sur Menus horizontaux stylisés .
Glissez et déposez le menu correspondant à l'emplacement souhaité sur votre page.
(Facultatif) Créez un nouveau menu avec des pages personnalisées :
1. Cliquez sur Gérer le menu .
2. Cliquez sur le menu déroulant sous Quel menu est affiché ? .
3. Cliquez sur Gérer les menus du site .
4. Cliquez sur + Ajouter un nouveau menu en bas pour créer le menu personnalisé.

Ajouter un menu horizontal stylisé à partir du panneau Ajouter dans Editor X

À partir du panneau inspecteur, vous pouvez concevoir chaque partie de votre menu horizontal stylisé - le menu et le conteneur de sous-menu, ainsi que les éléments du menu et du sous-menu.

Pour concevoir le menu :

Cliquez sur votre menu horizontal stylisé.
Cliquez sur l'icône Inspecteur en haut de l'Editor X.
Cliquez sur l'onglet Design .
Sélectionnez une option sous Que souhaitez-vous personnaliser ? :
- Conteneur du menu
- Éléments du menu
- Conteneur du sous-menu
- Éléments du sous-menu
Utilisez les options disponibles pour concevoir votre menu. Vous pouvez :
- Ajoutez des calques de remplissage d'arrière-plan et ajustez l'opacité de chaque calque.
- Formatez et stylisez le texte.
- Ajoutez des bordures pour faire ressortir cette zone de votre menu.
- Arrondissez les angles de votre menu / sous-menu.
- Ajoutez une ombre pour accentuer le menu ou ses éléments.
- Ajustez la marge intérieure autour du menu ou de ses éléments.

Suggestion :

Vous pouvez concevoir les éléments du menu et du sous-menu pour différents états - Normal , Survol ou Page actuelle (c'est-à-dire lorsque le visiteur se trouve sur une page qu'il voit dans le menu ou le sous-menu).

Conception du menu horizontal stylisé et du sous-menu sur l'Editor X

Ajustez la mise en page de votre menu et de votre sous-menu pour qu'ils soient exactement comme vous le souhaitez. Vous pouvez choisir comment afficher les éléments de menu qui ne rentrent pas dans le menu (défilement ou défilement) et la façon dont votre sous-menu s'ouvre (dépliant ou colonnes). Vous pouvez également contrôler l'espacement, la marge intérieure et bien plus encore.

Pour ajuster la mise en page du menu :

Cliquez sur votre menu horizontal stylisé.
Cliquez sur l'icône Mise en page .
Choisissez la zone sur laquelle vous souhaitez travailler : Menu ou Sous- menu .
Adaptez la mise en page du menu / sous-menu à vos besoins. Cliquez ci-dessous pour en savoir plus sur les options disponibles :

Options de mise en page du menu

Options de mise en page du sous-menu

Comment les sous-menus s'ouvrent ? : Sélectionnez la manière dont les éléments du sous-menu apparaissent :
- Menu volant : Votre sous-menu s'ouvre dans une liste déroulante. C'est une bonne option si vous n'avez que quelques éléments à afficher.
- Colonnes : Les éléments de votre sous-menu sont affichés en colonnes. Si votre sous-menu comporte de nombreux éléments, choisissez cette option en définissant le nombre de colonnes dont vous avez besoin.

En fonction de ce que vous choisissez, vous pouvez ajuster différentes options de mise en page :

Menu déroulant :
- Espacement entre le menu et le sous-menu : Faites glisser le curseur pour ajuster la distance entre le menu et le sous-menu.
- Aligner le sous-menu : Alignez le sous-menu à gauche ou au centre.
- Aligner le texte : Alignez le texte du sous-menu à gauche, à droite ou au centre.
- Marge intérieure : Faites glisser les curseurs pour ajuster l'espace horizontal et vertical rempli par le sous-menu.
- Espacement entre les éléments : Faites glisser le curseur pour ajuster l'espacement entre les éléments du sous-menu.
Colonnes :
- Espacement entre le menu et le sous-menu : Faites glisser le curseur pour ajuster la distance entre le menu et le sous-menu.
- Étirer sur toute la largeur : Activez ce curseur pour étendre votre sous-menu sur toute la largeur de la page.
  - Marges : Définissez l'espace entre votre sous-menu et les bords de la page.
- Nombre de colonnes : Faites glisser le curseur pour ajuster le nombre de colonnes dans le sous-menu.
- Aligner les colonnes : Choisissez d'aligner les colonnes à gauche, à droite, au centre ou justifiées.
- Espacement entre les colonnes : Faites glisser le curseur pour ajuster la distance entre les colonnes.
- Aligner le texte : Alignez le texte du sous-menu à gauche, à droite ou au centre.
- Marge intérieure : Faites glisser les curseurs pour ajuster l'espace horizontal et vertical rempli par le sous-menu.
- Espacement entre les éléments : Faites glisser le curseur pour ajuster l'espacement entre les éléments du sous-menu.

Ajuster la mise en page du menu horizontal stylisé et du sous-menu sur l'Editor X

Cela vous a-t-il aidé ?

Dans cet article

Ajouter un menu horizontal stylisé
Concevoir un menu horizontal stylisé
Ajuster la mise en page d'un menu horizontal stylisé

Ajouter un menu horizontal stylisé

Pour ajouter un menu horizontal stylisé :

Concevoir un menu horizontal stylisé

Pour concevoir le menu :

Ajuster la mise en page d'un menu horizontal stylisé

Pour ajuster la mise en page du menu :

Cela vous a-t-il aidé ?