Éditeur Studio : Personnaliser le design de listes déroulantes dans un menu
Temps de lecture : 8 min
Après avoir ajouté et configuré une liste déroulante, vous pouvez personnaliser son design pour qu'elle ait l'aspect que vous souhaitez. Modifiez l'apparence et l'alignement du conteneur et du menu pour créer un look personnalisé pour les clients, et renforcer leur marque.
Avant de commencer :
Les listes déroulantes peuvent uniquement être ajoutées à partir de nouveaux menus dans l'Éditeur Studio. Si vous avez l'expérience des menus précédents, vous pouvez créer des sous-menus et ajouter des méga menus.
Dans cet article, découvrez comment :
Ajuster la mise en page des listes déroulantes
En fonction de votre type de menu (barre de navigation, menu latéral, etc.), vous pouvez utiliser le panneau Mise en page pour configurer l'affichage ou la largeur de la liste déroulante. Vous pouvez également personnaliser l'espacement et l'alignement pour les adapter à l'apparence du menu principal.
Pour ajuster la mise en page des listes déroulantes :
- Accédez à votre Éditeur.
- Cliquez sur le menu ou le bouton de menu.
- (Menus latéraux) Cliquez sur Modifier le menu pour ouvrir le mode d'édition Menu latéral, et sélectionnez le menu.
- Cliquez sur l'icône Mise en page
.
- Sélectionnez l'onglet Liste déroulante.
- Utilisez les options pour ajuster la mise en page :
- Largeur du conteneur : Sélectionnez la largeur du conteneur de la liste déroulante et ajustez-la comme vous le souhaitez :
- Étirement : Le conteneur de ;a liste déroulante est sur toute la largeur de l'écran. Vous pouvez ajuster sa largeur en configurant les marges (en px).
- Ajuster au menu : La liste déroulante est de la même largeur que le menu parent principal.
- Accompagner le contenu : Le conteneur « accompagne » les éléments de la liste déroulante. Vous pouvez choisir si vous souhaitez l'aligner à gauche, au centre ou à droite du menu principal.
- Affichage des éléments : Sélectionnez si les éléments du menu déroulant sont réduits ou toujours affichés.
- Espace au-dessus du conteneur : Agrandissez ou réduisez l'espace entre la liste déroulante et le menu principal.
- Nombre de colonnes : Sélectionnez le nombre de colonnes affichées dans le menu déroulant.
- Espacement : Ajustez l'espacement des éléments dans le menu déroulant. Si vous avez ajouté des sous-éléments, vous pouvez également modifier l'espacement entre et au-dessus d'eux.
- Espace entre les éléments : Saisissez l'espacement horizontal et vertical entre les éléments de la liste déroulante.
- Espace entre les sous-éléments : Réduisez ou agrandissez l'espace entre les sous-éléments.
- Espace au-dessus des sous-éléments : Choisissez l'espacement au-dessus des sous-éléments dans le menu.
- Remplissage : Personnalisez l'espace autour de chaque partie de la liste déroulante pour répondre à vos besoins :
- Remplissage des éléments : Réduisez ou agrandissez l'espace autour des éléments du menu déroulant.
- Remplissage des sous-éléments : Ajustez l'espace autour des sous-éléments dans le menu déroulant.
- Remplissage du conteneur : Rendez l'espace autour du conteneur de la liste déroulante aussi petit ou aussi grand que vous le souhaitez.
- Alignement : Alignez les éléments et les sous-éléments de la liste déroulante à gauche, à droite ou au centre du conteneur.
- Largeur du conteneur : Sélectionnez la largeur du conteneur de la liste déroulante et ajustez-la comme vous le souhaitez :
Remarque :
Les options affichées dépendent du type de menu (barre de navigation ou menu latéral) et de l'orientation (horizontale ou verticale) que vous choisissez.
Personnaliser le design des listes déroulantes
Vous pouvez personnaliser le design de chaque partie d'une liste déroulante pour compléter l'apparence du menu principal - des conteneurs aux éléments et sous-éléments.
Pour personnaliser le design des listes déroulantes :
- Accédez à votre Éditeur.
- Cliquez sur le menu ou le bouton de menu.
- (Menus latéraux) Cliquez sur Modifier le menu pour ouvrir le mode d'édition Menu latéral, et sélectionnez le menu.
- Cliquez sur la flèche Ouvrir l'inspecteur
en haut à droite de l'Éditeur. - Faites défiler la page jusqu'à Design.
- Sélectionnez l'élément que vous souhaitez personnaliser :
- Conteneur de la liste déroulante
- Conteneur du menu déroulant
- Éléments de la liste déroulante
- Sous-éléments de la liste déroulante
- (Éléments / sous-éléments de la liste déroulante) Sélectionnez l'état concerné : Normal, Survol, ou Page actuelle.
- Personnalisez le design de la liste déroulante à l'aide des options disponibles :
- Remplissage de l'arrière-plan : Modifiez la couleur d'arrière-plan de la liste déroulante ou ajoutez un dégradé attrayant. Vous pouvez ajuster l'opacité et ajouter plusieurs calques pour l'adapter à vos besoins de design.
- Bordures : Ajustez la largeur et la couleur des bordures du conteneur de la liste déroulante.
- Angles : Rendez les angles de la liste déroulante plus arrondis ou rectangulaires en ajustant le rayon.
- Texte : Ajustez le style et la mise en forme des éléments et des sous-éléments de la liste déroulante.
- Ombre : Ajoutez des ombres à la liste déroulante et personnalisez leur angle, leur couleur, leur distance, etc.
Quelle est la différence entre les conteneurs ?
- Conteneur de liste déroulante : Il affiche tous les éléments et menus que vous avez ajoutés à l'élément Liste déroulante.
- Conteneur de menu déroulant : Il affiche uniquement les éléments du menu déroulant. Il est niché dans le conteneur de la liste déroulante.
Personnaliser le design des listes déroulantes individuellement
Les modifications que vous apportez au design et à la mise en page d'une liste déroulante s'appliquent à toutes les listes déroulantes d'un menu. Cependant, vous pouvez « détacher » les listes déroulantes dans les menus d'une barre de navigation horizontale pour les personnaliser séparément.
Remarque :
Cette option n'est pas disponible pour les menus latéraux ou les menus de barres de navigation verticales.
Pour détacher et personnaliser les listes déroulantes individuellement :
- Cliquez sur le menu horizontal dans votre éditeur.
- Cliquez sur Gérer le menu.
- Survolez la liste déroulante concernée et cliquez sur Modifier.
- Choisissez la façon dont vous souhaitez concevoir le design de la liste déroulante :
Ajuster la mise en page du conteneur
Ajuster la mise en page du menu déroulant
Personnaliser le design du conteneur
Personnaliser le design du menu
Remarque :
Les curseurs Modifier cette liste déroulante uniquement dans l'inspecteur le panneau Mise en page sont connectés, ce qui signifie que la désactivation / l'activation d'un curseur désactive / active automatiquement l'autre.