Le bloc Logo affiche le logo de votre site, celui du mode clair ou du mode sombre selon la page que voit le visiteur, ou toujours celui d’un même mode. Cette page décrit ses réglages, du choix de ce logo au chargement, puis ce que les lecteurs d’écran en annoncent.
Avant de commencer
Le bloc Logo affiche le logo envoyé dans Apparence > Images, section Logo. Elle a deux emplacements, Mode clair et Mode sombre. Par défaut, le bloc affiche le logo du mode dans lequel le visiteur voit la page, et en change quand le visiteur change de mode. Quand vous changez le fichier, tous les blocs Logo du site affichent le nouveau. Vous n’avez rien à réenregistrer. Poser votre logo et votre icône explique l’envoi.
Le logo peut être un fichier SVG, AVIF, WebP, PNG ou JPEG. Le SVG reste net à toutes les tailles.
Ajouter le logo
- Dans l’éditeur, ouvrez l’inserteur et choisissez Logo. Ajouter un bloc détaille les façons d’insérer un bloc.
- Si aucun logo n’a été envoyé, le bloc affiche Aucun logo envoyé. Allez dans Apparence → Images pour en envoyer un. Envoyez-le dans Apparence > Images.
- Le logo s’affiche dans la page. Pour voir celui de l’autre mode, cliquez sur le bouton Aperçu en mode sombre ou Aperçu en mode clair de la barre du haut de l’éditeur. Un bloc réglé sur le logo d’un mode le montre dans les deux aperçus.
L’en-tête et le pied de page, écrits une fois pour tout le site, portent en général le logo. Écrire une fois l’en-tête, le menu et le pied de page les décrit.
Onglet Réglages
Panneau Logo
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Logo affiché | Automatique affiche le logo du mode dans lequel le visiteur voit la page. Logo du mode clair et Logo du mode sombre affichent toujours le logo de ce mode, quel que soit le mode du visiteur. Si ce logo n’a pas été envoyé, celui de l’autre mode le remplace. | Automatique |
| Lien vers l’accueil | Entoure le logo d’un lien vers l’accueil. Le lien n’est jamais posé sur l’accueil lui-même. | Activé |
| SVG en ligne | Écrit le dessin SVG dans la page, pour piloter sa couleur avec des propriétés CSS. Sans effet sur un logo qui n’est pas un SVG. | Désactivé |
| Chargement différé | Le logo ne se charge qu’à l’approche de l’écran. Laissez-le désactivé pour le logo de l’en-tête ; activez-le pour un logo placé bas dans la page. | Désactivé |
Panneau Média
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Image décorative | Marque le logo comme décoratif. Le texte alternatif disparaît et les lecteurs d’écran sautent le logo. | Désactivé |
| Texte alternatif | Le nom lu par les lecteurs d’écran, en général celui de votre entreprise, sans le mot « logo ». Avec Lien vers l’accueil, c’est aussi le nom du lien : écrivez où il mène, par exemple « Atelier Sauge, accueil ». L’aide du champ le rappelle. | Vide |
Panneau Réglages de l’image
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Comportement | Par défaut, Proportionnel, Couvrir ou Contenir, comme sur le bloc Média. | Proportionnel |
| Largeur | Une largeur forcée en pixels. Vide, la largeur est automatique. | Vide |
| Hauteur | Une hauteur forcée en pixels. Vide, la hauteur est automatique. | Vide |
Une seule dimension forcée suffit : l’autre se calcule d’après les proportions du fichier. Sans dimension, le logo s’affiche à sa taille naturelle. Le logo n’a pas de point focal : en Couvrir ou Contenir, le cadrage part du centre.
Onglet Styles
Le logo se règle dans les états Par défaut, Survol et Actif. Il n’a que le panneau Taille et espacement (Régler la taille, les bordures et les effets).
Le bloc n’a pas d’onglet Animations : pour animer le logo, animez le Conteneur qui l’entoure.
Sur téléphone
Le panneau Taille et espacement se règle écran par écran : un logo plus petit dans l’en-tête mobile se règle avec l’écran Mobile choisi.
Accessibilité
- Les lecteurs d’écran annoncent le lien vers l’accueil par le Texte alternatif du logo, par exemple « Atelier Sauge, accueil ». Sans texte alternatif, ou avec Image décorative, ils l’annoncent Accueil.
- Le même logo peut paraître deux fois sur la page, dans l’en-tête et dans le pied de page. Cochez alors Image décorative sur l’une des deux pour ne pas le faire annoncer deux fois.
Limites
- Le bloc affiche le logo du site : pour une autre image, utilisez le bloc Média.
- Il n’a pas de choix de taille d’image : le fichier envoyé est servi tel quel.
- Avec un seul logo envoyé, le bloc l’affiche dans les deux modes, quel que soit le réglage Logo affiché.