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.
Ajuster la mise en page des listes déroulantes
En fonction de votre type de menu (barre de navigation, menu latéral, etc.), différents paramètres sont affichés dans le panneau Mise en page. 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 l'icône barre de menu / menu latéral.
- (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 :
Sélectionnez la largeur du conteneur déroulant 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.
Afficher l'élément et nombre de colonnes
- Affichage des éléments : Sélectionnez si les éléments du menu déroulant sont réduits ou toujours affichés.
- Nombre de colonnes : Sélectionnez le nombre de colonnes affichées dans le menu déroulant.
- Espace au-dessus du conteneur : Agrandissez ou réduisez l'espace entre la liste déroulante et le menu principal.
- 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, direction et alignement
- 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.
- Direction : Choisissez si les éléments se lisent de gauche à droite ou de droite à gauche.
- Alignement : Alignez les éléments et les sous-éléments de la liste déroulante à gauche, à droite ou au centre du conteneur.
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. Choisissez le remplissage et le texte de l'arrière-plan pour renforcer l'identité visuelle de vos clients, et ajoutez des bordures pour faire ressortir les listes déroulantes sur la page.
Vous pouvez également personnaliser le design des éléments et des sous-éléments pour des états distincts (ex. survol, page actuelle).
Pour personnaliser le design des listes déroulantes :
- Accédez à votre Éditeur.
- Cliquez sur l'icône barre de menu / menu latéral.
- (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 Ouvrir l'Inspecteur
en haut à droite de l'éditeur.
- 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.
Les modifications que vous apportez à une liste déroulante sont appliquées à toutes les listes déroulantes de ce menu. Vous voulez créer quelque chose de plus unique ? Vous pouvez « détacher » les listes déroulantes que vous avez ajoutées aux menus de navigation horizontales pour un contrôle total du design.
Pour détacher et personnaliser les listes déroulantes individuellement dans les menus horizontaux :
- 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
Ajustez la largeur du conteneur qui affiche les éléments que vous avez ajoutés à la liste déroulante. Vous pouvez également paramétrer l'espace entre le conteneur et le menu principal.
- Sélectionnez le conteneur de la liste déroulante.
- Cliquez sur l'icône Mise en page .
- Cliquez sur le curseur Modifier cette liste déroulante uniquement pour l'activer.
- Apportez les modifications que vous souhaitez :
- Largeur du conteneur : Sélectionnez une option dans la liste et ajustez-la comme vous le souhaitez :
- Étirement : Le conteneur de la liste déroulante est sur toute la largeur de l'écran. Vous pouvez diminuer sa largeur en configurant les marges (en px).
- Ajuster au menu : Le conteneur de la liste déroulante est de la même largeur que son menu parent.
- 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.
- Personnalisée : Configurez la largeur du conteneur en déplaçant les poignées de glissement de chaque côté. Vous pouvez choisir si vous souhaitez l'aligner à gauche, au centre ou à droite du menu principal.
- Espace au-dessus du conteneur : Agrandissez ou réduisez l'espace entre le conteneur de la liste déroulante et le menu principal.
Ajuster la mise en page du menu déroulant
Il s'agit du menu qui affiche les éléments que vous avez ajoutés à la liste déroulante. Vous pouvez configurer le nombre de colonnes affichées, ajuster l'espacement entre et autour du menu, et choisir la direction et l'alignement.
- Sélectionnez le menu déroulant dans le conteneur.
- Cliquez sur l'icône Mise en page .
- Cliquez sur le curseur Modifier cette liste déroulante uniquement pour l'activer.
- Apportez les modifications que vous souhaitez :
- 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.
- Direction : Modifiez le sens du texte de l'élément (de gauche à droite ou de droite à gauche).
- Alignement : Alignez les éléments et les sous-éléments de la liste déroulante à gauche, à droite ou au centre du conteneur.
Personnaliser le design du conteneur
Personnalisez le remplissage de l'arrière-plan et le rayon du conteneur qui affiche les éléments et les éléments que vous avez ajoutés à la liste déroulante. Vous pouvez également ajouter et ajuster les bordures et les ombres pour les faire ressortir la page.
- Sélectionnez le conteneur de la liste déroulante.
- Cliquez sur l'icône Ouvrir l'inspecteur ou l'icône en haut à droite de l'éditeur.
- Faites défiler la page jusqu'à Design.
- Cliquez sur le curseur Modifier cette liste déroulante uniquement pour l'activer.
- Apportez les modifications que vous souhaitez :
- Remplissage de l'arrière-plan : Modifiez la couleur du conteneur 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 du conteneur de la liste déroulante plus arrondis ou rectangulaires en ajustant le rayon.
- Ombre : Ajoutez des ombres au conteneur de la liste déroulante et personnalisez leur angle, leur couleur, leur distance, etc.
Personnaliser le design du menu
Personnalisez le menu qui affiche les éléments de votre liste déroulante. Vous pouvez ajuster le design du conteneur et ajuster les éléments et sous-éléments pour chaque état afin de créer un aspect vraiment personnalisé.
- Sélectionnez le menu déroulant dans le conteneur.
- Cliquez sur l'icône Ouvrir l'Inspecteur en haut à droite de l'éditeur.
- Faites défiler la page jusqu'à Design.
- Cliquez sur le curseur Modifier cette liste déroulante uniquement pour l'activer.
- Sélectionnez l'élément que vous souhaitez personnaliser :
- Éléments de la liste déroulante
- Conteneur du menu déroulant
- 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.
- Apportez les modifications que vous souhaitez :
- Remplissage de l'arrière-plan : Modifiez la couleur d'arrière-plan ou ajoutez un dégradé attrayant. Vous pouvez ajuster l'opacité et ajouter plusieurs calques pour l'adapter à vos besoins de design.
- Texte : Ajustez le style et la mise en forme des éléments et des sous-éléments du menu déroulant.
- Bordures : Ajoutez et ajustez les bordures autour du conteneur du menu.
- Angles : Rendez les angles du conteneur du menu plus arrondis ou rectangulaires en ajustant le rayon.
- Ombre : Ajoutez des ombres au conteneur du menu et personnalisez leur angle, leur couleur, leur distance, etc.
