Style du menu, logo et favicon
Le logo, le style de la barre de navigation et le favicon se règlent sur la page d’accueil de l’espace d’administration, et s’appliquent à toutes les pages.
Pour y accéder, cliquez sur le nom du site dans la barre latérale, puis ouvrez l’onglet Menu et logo. Si vous ne savez pas comment y accéder, consultez les pages Espace d’administration puis Présentation de l’interface.
L’onglet Menu et logo réunit le Logo, le Style de la barre de navigation et le Favicon. Le logo et le style s’ouvrent en cliquant sur le tableau affiché sous leur nom. Le favicon se charge directement dans son champ.
Logo
Trois choix : Texte, Image ou Code personnalisé. L’interface s’adapte au choix, avec un champ texte, un champ image ou une zone de code.
Cliquez sur le tableau affiché sous Logo pour ouvrir ses réglages.
- choisir une image à fond transparent, sinon un rectangle blanc se voit autour du logo sur la barre colorée.
- ne pas choisir un logo trop haut car la barre du menu devient aussi haute que le logo, sur toutes les pages.
Exemple : logo de type texte
- 1. Type de logo
-
Trois choix :
Texte,ImageouCode personnalisé. - 2. Texte du logo
-
Pour le type Texte, un champ textuel simple permet d’écrire votre logo.
Rendu sur le site :
Exemple : logo de type image
- 1. Taille d’affichage (hauteur)
-
Quelle que soit l’image chargée, elle est automatiquement redimensionnée pour ne pas dépasser la hauteur en pixels définie ici. La largeur se calcule automatiquement pour garder les proportions.
- 2. Logo (image)
-
Image à charger, sera utilisée en tant que logo sur le site.
Rendu sur le site :
Barre de navigation
Ces options règlent l’apparence et le comportement de la barre de navigation, présente en haut de chaque page. Cliquez sur le tableau affiché sous Style de la barre de navigation pour ouvrir ses réglages.
- si les liens du menu ne tiennent pas sur une ligne, choisir un seuil plus grand. Le bouton reste alors affiché sur des écrans plus larges.
- n’activer le menu toujours visible que si la barre est fine, car elle prend une place importante sur l’écran d’un téléphone.
Exemple : personnaliser la barre de navigation
- 1. Couleurs de fond
-
Applique une couleur de fond à la barre, ce qui crée une séparation nette avec le contenu. Toutes les couleurs de la palette sont disponibles. L’option
Atténuer la couleurdonne une variante plus claire et plus douce. - 2. Ligne de séparation menu/contenu
-
Trace un trait sous la barre pour la distinguer du contenu. Seule la couleur est modifiable : le trait reste en bas.
- 3. Menu toujours visible
-
Si activé, la barre reste en haut de l’écran quand le visiteur fait défiler la page.
- 4. Point de bascule
-
Décide à partir de quelle largeur d’écran le menu ne s’affiche plus en mode mobile. En dessous de ce seuil, les liens se rangent derrière un bouton.
Trois seuils, mesurés en pixels de largeur d’écran :
tablette (dès 768px),écran de petite taille (dès 992px),écran de taille moyenne (dès 1200px). Le premier est appliqué par défaut, et convient à la plupart des menus.
Rendu sur le site :
Favicon
Le favicon est la petite icône de l’onglet du navigateur. Un seul fichier suffit pour tout le site.
- choisir une icône simple et la vérifier dans un onglet, car le favicon est affiché en très petit et un détail fin disparaît.
- choisir des couleurs proches de celles du logo, pour que le visiteur reconnaisse plus facilement l’onglet de votre site.
Exemple : le favicon du site
- Favicon
-
Le fichier chargé ici devient l’icône de l’onglet du navigateur. Un SVG est recommandé, ou un PNG carré. Sans fichier, le site n’a pas d’icône dans l’onglet.
Rendu dans le navigateur :
