Ajouter des images de bannière

Les images de bannière s'affichent uniquement dans la partie supérieure de votre page et ajoutent un élément visuel pouvant donner un caractère particulier à votre site. De nombreux templates permettent de créer des images de bannière automatiquement à partir des vignettes de la page, mais leur affichage et les options de style dépendent du type de template.

Ce guide vous présente les étapes pour ajouter, formater et styliser une image de bannière.

Astuce : si vous préférez ne pas utiliser nos options de bannière intégrée, vous pouvez ajouter un bloc Image en haut d’une page Disposition, quel que soit le modèle.

Les étapes détaillées ci-après concernent la version 7.0. Si votre site utilise la version 7.1, consultez l’article Options de style et de design de la version 7.1.

Regarder une vidéo

Conseils relatifs au format de l'image

Nous vous recommandons d'utiliser des images d'au moins 1 500 pixels de large.
Nous vous déconseillons d'utiliser une image dans laquelle du texte est déjà intégré. En revanche, la plupart des templates prennent en charge la superposition de texte.
Vous pouvez utiliser des images aux formats .jpg, .png, et .gif. Pour connaître les autres exigences relatives à l'utilisation d'images, rendez-vous sur Formater vos images pour une utilisation web.
Pour obtenir de l'aide sur le choix d'une image qui s'affichera correctement indépendamment du navigateur utilisé, consultez nos conseils de design adaptatif.
Si votre bannière s'affiche mal, consultez nos conseils de résolution des problèmes liés au recadrage.
Pour afficher un message personnalisé dans la partie supérieure de votre site, ajoutez une barre d’annonce.

Types de bannières

La façon d'ajouter votre image de bannière dépend des types de bannières prises en charge par votre template :

Bannière de page - S'affiche en haut de chaque page. Ajoutée en tant que vignette de page.
Bannière vidéo - Peut remplacer la bannière de page pour certains templates. Ajoutée en tant que vignette de page.
Bannières d'éléments de collection - S'affichent en haut des articles de blog, des produits et des événements. Ajoutées en tant que vignette d'éléments.
Bannières de site - Peuvent s’afficher sur toutes les pages du site. Ajoutées dans le panneau Styles du site.

Consultez un tableau de comparaison des options de bannière en fonction du template.

Ajouter une bannière de page

Pour ajouter une bannière de page :

Ouvrez la page, survolez la zone de contenu et cliquez sur l'annotation Settings (Paramètres).
Dans l’onglet Médias, cliquez sur Ajouter une image pour charger une image enregistrée sur votre ordinateur ou cliquez sur Rechercher des images pour réutiliser une image ou pour ajouter une image d’archive.
Cliquez sur le point de centrage et faites-le glisser pour déterminer le point central de l'image. Cela facilite le redimensionnement dans la plupart des templates.
Cliquez sur Save (Enregistrer) pour publier vos modifications.
Utilisez le panneau Styles du site pour personnaliser votre bannière.

Pour modifier une bannière existante, cliquez sur l’annotation Bannière ou rouvrez les paramètres de la page.

Pour savoir quels modèles prennent en charge les bannières de page, consultez la section Options de bannière par modèle.

Astuce : certains modèles acceptent également les bannières vidéo.

Ajouter une bannière d'élément de collection

Les bannières d'éléments de collection s'affichent au-dessus de chaque article de blog, produit et événement.

Pour ajouter une bannière d'éléments de collection, ouvrez l'éditeur pour cet élément, puis ajoutez une vignette dans l'onglet Options.Pour des étapes détaillées, rendez-vous à la section Ajouter des vignettes.

Voici un aperçu de la bannière d'article de blog sur Skye :

Astuce : la superposition de texte est possible sur les bannières de certains éléments de collection.

Templates compatibles

Les bannières d’éléments de collection sont prises en charge dans ces familles de modèles. Certains éléments de collection affichent les bannières des pages. Par exemple, un billet de blog peut afficher la bannière de la page Blog.

Adirondack : les billets de blog, les événements et les produits affichent les miniatures des éléments de collection.
Bedford : les billets de blog et les événements affichent les miniatures des éléments de collection.
Farro : les billets de blog affichent les miniatures des éléments de collection.
Five : les billets de blog, les événements et les produits affichent les bannières de page.
Montauk : les billets de blog et les événements affichent les bannières de page.
Skye : les billets de blog affichent les miniatures des éléments de collection.
Supply : les billets de blog et les événements affichent les miniatures des éléments de collection.

Ajouter une bannière de site

Les bannières de site sont disponibles dans le modèle Five et certains modèles abandonnés. Elles s’affichent sur toutes les pages ne comportant pas de bannière de page.

Pour ajouter une bannière de site, cliquez sur l’ajustement correspondant dans le panneau Styles du site. Dans Five, l’ajustement est Image d’arrière-plan de l’en-tête. Dans les modèles abandonnés, l’ajustement peut porter un autre nom.

Après avoir ajouté l’image, personnalisez-la à l’aide des options qui s’affichent.

Remarque : Les bannières de site ne devraient jamais dépasser 2 500 pixels, afin d'éviter tout problème sur mobile.

Ajouter du texte superposé

Utilisez les options proposées par votre template pour créer du texte superposé à l'image. Pour en savoir plus, rendez-vous sur Ajouter du texte aux bannières.

Remarque : Nous vous déconseillons d'utiliser une image incluant des mots ou du texte en général. En effet, ce texte est susceptible d'être tronqué en cas de recadrage de l'image et n'est pas référencé par les moteurs de recherche.

Voici un exemple de texte superposé, sur le template Pacific :

Ajouter du contenu superposé

Dans certains templates, vous pouvez ajouter des blocs de contenu par-dessus une bannière. Par exemple, vous pourriez ajouter un Bloc Vidéo par-dessus une image de bannière, comme illustré dans la capture d’écran ci-dessous.

Vous pouvez ajouter des blocs de contenu par-dessus une image de bannière ou une vidéo dans ces familles de modèles :

Brine – Ajoutez des blocs aux zones intro des bannières de page et aux sections de contenu d’un index.
Pacific - Ajoutez des blocs aux sections de contenu d’un index.

Personnaliser la bannière

Découvrez les options de style proposées par ces familles de modèles :

Modifier la hauteur de la bannière

Pour définir la hauteur des bannières dans ces familles de modèles :

Famille de modèles	Modifier la hauteur
Adirondack	Ajustement de la hauteur
Bedford	Bannières de page et de vidéo - Ajoutez des sauts de ligne dans la description de la page. En savoir plus. Bannières diaporama, bannières diaporama de Blogs, et bannières d'éléments de Collection - Hauteur fixe
Brine	Ajoutez des sauts de ligne dans la zone intro. Les bannières de l’index disposent d’options de hauteur distinctes.
Farro	Utilisez l'ajustement Header (En-tête) dans le champ Blog: Item (Blog : élément) pour ajuster la taille de la bannière
Five	Utilisez les ajustements Banner Area Height (Hauteur de Zone de Bannière) ou Banner Area Spacing (Espacement dans la Zone de Bannière) . (Banner Area Height (Hauteur de Zone de Bannière) n'affecte pas la version mobile.)
Montauk	Hauteur fixe, définie par l'image d'origine. Les bannières de Page s'adaptent toujours à la largeur du contenu du site. Elles ne se recadrent pas verticalement.
Pacific	Ajoutez des sauts de ligne à la description de la page ou utilisez l’ajustement Marge intérieure. En savoir plus. Les bannières de l’index disposent d’options de hauteur distinctes.
Skye	Utilisez l'optionBanner Image Width (Ajustement de la largeur de l'image de bannière) pour la redimensionner. La hauteur est définie par l'image d'origine. Elle est proportionnelle à la largeur.
Supply	La largeur de la page est fixe : la bannière remplit donc la zone restante du navigateur.
Tremont	Ajustement de la hauteur de l'Image de Bannière de la page
York	Ajustement de la hauteur

Bannières sur mobile

Les images de bannière seront toujours recadrées sur mobile.
Il arrive parfois que les bannières vidéo ne s'affichent pas sur appareil mobile, en fonction de la vitesse de connexion et de la version du navigateur utilisé par les visiteurs. Définissez une image de remplacement pour appareil mobile, qui apparaîtra lorsqu'une bannière vidéo ne peut être chargée.
Les paramètres de hauteur de la bannière ne sont pas toujours applicables sur mobile.
L'effet parallaxe fonctionne sur mobile dans la plupart des cas.
Concernant les bannières de site, le paramètre Fix Position (Position fixe) n'apparaîtra pas sur certains mobiles, y compris les appareils iOS.
Les bannières de site ne doivent jamais être d'une largeur supérieure à 2 500 pixels, car cela peut causer des problèmes sur mobile.

Que se passe-t-il lors d'un changement de template ?

Les vignettes de page, d'éléments de collection et de vidéos seront conservées lors d'un changement de template. Si vous passez d'un template prenant en charge n'importe lequel de ces types de bannière à un autre, la même image de bannière s'affiche dans le nouveau template.

Bannières s'affichant derrière l'en-tête

Les images et les vidéos de bannière peuvent s’afficher derrière l’en-tête du site dans ces familles de modèles (cliquez sur les liens pour en savoir plus) :

Astuce : dans Five, les bannières s’affichent toujours en dessous de l’en-tête, tandis que le titre, le logo et le slogan du site peuvent apparaître sur la bannière .

Empiler des bannières

Certains modèles prennent en charge une page d’index qui affiche plusieurs bannières empilées verticalement sur une page, créant ainsi un effet de défilement long. Vous pouvez empiler des bannières dans un index dans ces familles de modèles (cliquez sur les liens pour en savoir plus) :

Remarque : Les bannières d'un Index disposent généralement de leurs propres paramètres de style.

Bannières sans recadrage

La plupart des images de bannière sont recadrées pour s'adapter aux différentes résolutions d'écran. L'aspect de vos images est optimisé pour la mise en page de votre site, quelle que soit la taille de la fenêtre du navigateur.

Vous pouvez créer des bannières sans recadrage dans ces familles de modèles :

Montauk – Les bannières ne peuvent pas être recadrées verticalement. Elles occupent toujours toute la largeur du contenu du site. Il peut arriver que les bannières hautes et étroites soient pixelisées lorsqu’elles sont étirées pour remplir toute la largeur.
Pacific – Créez une image de bannière qui ne sera pas recadrée en ajoutant une page Galerie au sein d’une page d’index.

Astuce : modifiez le point focal de la miniature pour tenter de recadrer les bannières de vos pages et de vos éléments de collection. Pour obtenir des conseils pratiques sur le recadrage, consultez la section résolution des problèmes.

Bannières diaporama

Vous pouvez créer des bannières en diaporama pour ces familles de modèles :

Brine – Créez une page d’index avec un diaporama comme section supérieure.
Bedford – Créez une bannière en diaporama sur les pages Disposition avec un bloc Galerie ou une bannière diaporama de page Blog en utilisant des billets mis en avant.
Pacific - Créez une page d’index avec une galerie en diaporama comme section supérieure.

Astuce : dans d’autres modèles, ajoutez un bloc Galerie en diaporama en haut d’une page Disposition pour créer un effet similaire.

Créer des bannières dans d'autres templates

Créez l’effet d’une bannière quel que soit votre modèle en ajoutant un bloc Image en haut d’une page Disposition.
Chaque disposition possède ses propres options de superposition de texte.

Les Blocs Image s'affichent dans la zone de contenu principale. Ils ne possèdent pas d'options d'affichage pleine page intégrées.

Astuce : certains templates sont dotés de zones d'en-tête de page qui prennent en charge les blocs, notamment les Blocs Image, Texte et Vidéo.

Images transparentes

Si vous utilisez un fichier .png avec un arrière-plan transparent, les ajustements suivants vous permettront de définir la couleur qui s’affiche derrière la bannière dans ces familles de modèles :

Adirondack : Couleur d’arrière-plan du contenu
Bedford – Couleur de superposition de la bannière
Brine : Couleur de superposition dans la section Principal : superposition
Farro : Couleur d’arrière-plan du billet. La couleur de superposition affecte également la couleur.
Five : Arrière-plan de l’en-tête
Montauk : Arrière-plan de la zone de contenu
Pacific : Couleur de superposition
Skye : Arrière-plan du site
Supply : Couleur de la page
Tremont : Couleur d’arrière-plan du site
York : Couleur d’arrière-plan dans la section Bannière.

Astuce : dans la plupart des cas, l’opacité de la couleur est de 100 %. Si vous ne parvenez pas à obtenir la couleur souhaitée, ajustez la transparence.

Options de bannière en fonction du template

Ces familles de modèles prennent en charge un ou plusieurs types de bannières :

Famille de modèles	Bannières de page : pages prises en charge	Bannières vidéo	Bannières d'éléments de collection : éléments pris en charge	Options complémentaires
Adirondack	Disposition Blog Événements Produits	Oui	Billets de blog Événements Produits	Effet de fondu au défilement (vue sur ordinateur de bureau)
Bedford	Disposition Album Blog Événements Produits	Oui	Billets de blog Événements	Bannières diaporama Bannières de diaporama de Page Blog
Brine	Disposition Album Blog Événements Galerie Produits	Oui		Effet parallaxe
Farro			Articles de blog
Five	Disposition Album Blog Événements Galerie Produits	Oui	Les bannières de page s'affichent sur les articles de blog, les événements et les produits	Bannières de site
Montauk	Disposition Blog Événements Index	Oui	Les bannières de page s'affichent sur les articles de blog et les événements
Pacific	Disposition Album Blog Événements Galerie Produits	Oui
Skye			Articles de blog
Supply	Disposition Blog Album Événements		Billets de blog Événements	La bannière s'affiche sur la droite, excepté sur mobile.
Tremont	Disposition Album Blog Événements Galerie Produits	Oui		Filtre superposé à la page
York	Disposition Album Blog Événements Galerie Projet Produits Index			Effet de fondu

Supprimer une image de bannière

Pour supprimer une image de bannière, ouvrez la zone de la bannière souhaitée et supprimez l’image.

Bannières de page - Dans l’onglet Médias des paramètres de la page, cliquez sur Supprimer l’image.
Bannières vidéo – Dans l’onglet Médias des paramètres de la page, cliquez sur Vidéo, puis supprimez l’URL de la vidéo.
Bannières d’éléments de collection – Ouvrez l’élément de votre choix (billet de blog, produit ou événement), puis cliquez sur l’onglet Options et sur l’icône corbeille.
Bannières de site – Ouvrez l’ajustement de votre choix dans le panneau Styles du site, puis cliquez sur Supprimer.