Image d'accueil¶
Où : menu Image accueil de l'administration. Qui : les administrateurs et les éditeurs.
À lire au préalable
Avant de composer une image d'accueil, il est important de comprendre à quoi elle sert : elle s'adresse aux personnes qui découvrent le site pour la première fois, et doit leur donner une première impression positive et immédiate.
Nous vous encourageons vivement à lire d'abord la section L'image d'accueil : créer une première impression positive de la page « Philosophie et principes de conception du site ». Vous saurez alors quel message, quel visuel et quel ton choisir.
L'image d'accueil est la grande image du haut de la page d'accueil, avec son texte par-dessus. Vous réglez ici l'image, le texte et sa mise en forme, et un aperçu en direct vous montre le résultat avant d'enregistrer, et un bouton Voir sur la page d'accueil vous permet de la voir en conditions réelles avant de la publier.
Vous pouvez créer plusieurs images d'accueil : à chaque visite, le site en affiche une au hasard. C'est pratique pour faire tourner les messages (une image par activité, par saison…).
1 Aperçu de l'image : le rendu en direct, tel qu'il paraîtra sur le site. 2 Texte de l'image : le message écrit sur l'image. 3 Réglages du texte : taille, interligne, couleur, alignements, contour. 4 Réglages de l'image : miroir, alignement pour les petits écrans. 5 Voir sur la page d'accueil : ouvre la page d'accueil du site avec cette image, pour la juger en conditions réelles, y compris tant qu'elle est en brouillon. 6 Publier ou Mettre à jour : enregistre l'image d'accueil.
Comprendre en une minute¶
- Une image d'accueil = une image + un texte + sa mise en forme.
- Plusieurs peuvent être publiées en même temps : le site en montre une au hasard à chaque affichage de la page.
- Pour retirer une image d'accueil du site, mettez-la à la corbeille ou repassez-la en brouillon.
- Une image en brouillon (ou en attente de relecture) n'est jamais montrée aux visiteurs : seules les images publiées sont tirées au hasard. Pour la voir en vrai avant de la publier, utilisez le bouton Voir sur la page d'accueil (voir plus bas).
La liste¶
Le menu Image accueil ouvre la liste des images d'accueil. Un clic sur l'une d'elles l'ouvre en modification ; le bouton Ajouter (ou Ajouter une image accueil) en crée une nouvelle. Sous chaque ligne, le lien Voir sur la page d'accueil ouvre l'accueil du site avec cette image (voir Voir l'image sur la page d'accueil).
Le champ Titre de la fiche n'est pas utilisé : les images d'accueil ne se distinguent que par leur contenu.
Créer ou modifier une image d'accueil¶
- Cliquez sur Ajouter (nouvelle image) ou sur une image existante.
- Réglez l'image et le texte (voir ci-dessous) en vous aidant de l'aperçu.
- Enregistrez avec Enregistrer le brouillon, puis cliquez sur Voir sur la page d'accueil pour juger le résultat en conditions réelles.
- Quand l'image vous convient, cliquez sur Publier (ou Mettre à jour).
L'aperçu se met à jour au fur et à mesure de vos réglages ; rien n'est enregistré avant de cliquer sur Publier ou Mettre à jour.
Aperçu de l'image¶
Cliquez sur la zone d'aperçu pour choisir l'image dans la médiathèque, ou envoyez-en une nouvelle.
La bonne taille de l'image
Taille conseillée : 1050 x 400 px. Une image à d'autres dimensions risque d'être recadrée ou de paraître floue : vérifiez l'aperçu.
Sur les petits écrans (téléphone), l'image est réduite, mais son texte aussi : la mise en page reste la même, en plus petit. Sous 1000 px de large, la hauteur diminue en proportion (250 px minimum).
Texte de l'image¶
L'éditeur de texte écrit le message qui s'affiche sur l'image. Il fonctionne comme l'éditeur de texte habituel : gras, italique, retours à la ligne.
Un retour à la ligne dans l'éditeur est un retour à la ligne sur l'image.
Insérer une icône¶
Pour mettre une icône dans le texte, placez le curseur à l'endroit voulu, cliquez sur
Insérer une icône (sous le champ Texte de l'image), cherchez l'icône et cliquez dessus :
son code, de la forme [icon name="…"], est inséré au curseur et l'aperçu se met à jour aussitôt.
Réglages du texte¶
| Réglage | Ce qu'il fait |
|---|---|
| Texte de l'image (taille) | Taille des lettres, en pixels. 35 par défaut. Le texte se réduit en proportion sur les petits écrans. |
| Interligne du texte | Espace entre les lignes. 0 par défaut (lignes serrées) ; chaque point supplémentaire écarte un peu plus les lignes. |
| Couleur du texte | Couleur des lettres. Blanc (#FFFFFF) par défaut. |
| Alignement vertical du texte | haut, milieu ou bas de l'image. |
| Alignement horizontal du texte | gauche, centre (par défaut) ou droite. |
| Afficher un contour | Interrupteur, activé par défaut. Ajoute un liseré autour des lettres et des icônes, pour qu'ils restent lisibles sur une image claire ou chargée. |
| Couleur du contour | Couleur du liseré. N'apparaît que si Afficher un contour est activé. |
| Style du contour | doux (par défaut) : contour estompé, en halo ; plein : contour net. N'apparaît que si Afficher un contour est activé. |
| Épaisseur du contour | De 1 à 5 px (2 par défaut). N'apparaît que si Afficher un contour est activé. |
Un texte lisible
Du texte blanc avec un contour sombre reste lisible sur presque toutes les images. Pour un texte sombre, choisissez un contour clair.
Réglages de l'image¶
| Réglage | Ce qu'il fait |
|---|---|
| Miroir de l'image | oui : l'image est retournée de gauche à droite. Utile pour déplacer un personnage ou le sujet sans modifier l'image. |
| Alignement horizontal de l'image (en version mobile) | Sur un petit écran, l'image est plus étroite que l'écran et son cadrage est coupé sur les bords. Choisissez la partie conservée : gauche, centre ou droite. |
Affichage mobile (aperçu)¶
L'interrupteur Affichage mobile n'enregistre rien : il change la taille de l'aperçu pour simuler un téléphone (320 px de large). Utilisez-le pour vérifier que le texte tient et que l'image est bien cadrée sur un petit écran, avant de publier.
Voir l'image sur la page d'accueil¶
Une image en brouillon n'est pas montrée aux visiteurs : vous ne pouvez donc pas la voir sur le site sans la publier. Le bouton Voir sur la page d'accueil règle ce problème : il ouvre la page d'accueil, dans un nouvel onglet, avec l'image sur laquelle vous travaillez, comme le feraient les visiteurs, avec la vraie mise en page du site (le menu, les couleurs, la taille de l'écran). C'est le meilleur moyen de vérifier que le texte est lisible avant de publier.
Il se trouve à deux endroits :
- dans la boîte Aperçu, en haut de la colonne de droite de l'écran de modification (5 sur la capture) ;
- sous chaque image de la liste, avec le lien Voir sur la page d'accueil.
Enregistrez d'abord
Le site montre l'image telle qu'elle est enregistrée, pas telle qu'elle est à l'écran. Pour une nouvelle image, enregistrez d'abord le brouillon (le bouton n'apparaît qu'ensuite) ; pour une image existante, cliquez sur Mettre à jour ou Enregistrer le brouillon avant d'ouvrir l'aperçu, sinon vous verrez l'ancienne version.
Vous seul voyez cet aperçu
L'aperçu n'est visible que de vous, connecté avec le droit de modifier l'image. Les visiteurs continuent de voir les images publiées, tirées au hasard. Rien n'est publié par ce bouton.
Où s'affiche l'image¶
L'image d'accueil s'affiche là où la page d'accueil a posé le bloc image d'accueil : cette mise en place est déjà faite sur votre site. Aucune image ne s'affiche si aucune image d'accueil n'est publiée.
Questions fréquentes¶
Mon image n'apparaît pas sur la page d'accueil. Vérifiez qu'elle est publiée (et pas en brouillon ni en attente de relecture) : seules les images publiées sont montrées aux visiteurs. Pour voir une image qui n'est pas encore publiée, utilisez Voir sur la page d'accueil. Puis rechargez la page avec Ctrl + F5 (sur Mac : Cmd + Maj + R).
La page d'accueil montre une image différente à chaque visite. C'est voulu : avec plusieurs images d'accueil publiées, le site en choisit une au hasard. Pour n'en garder qu'une, mettez les autres à la corbeille.
Le texte est difficile à lire. Activez Afficher un contour, ou changez la couleur du texte ou du contour. Vérifiez aussi avec Affichage mobile.
Le texte est coupé sur téléphone. Réduisez la taille du texte, ou raccourcissez-le. Vérifiez avec Affichage mobile.
Puis-je mettre un lien ou un bouton sur l'image ? Non : l'image d'accueil ne contient que de l'image et du texte.