Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

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 :

  1. Ouvrez la page, survolez la zone de contenu et cliquez sur l'annotation Settings (Paramètres).
  2. 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.
  3. 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.
  4. Cliquez sur Save (Enregistrer) pour publier vos modifications.
  5. 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.

skye-blog-post-header.png

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 :

pacific-page-banner.png

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 :

video-block-on-background-image.png

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 introLes 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 plusLes 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 .

bedford-transparent-header.png

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 :

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.

image-block-as-a-banner.png

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.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 29 sur 161