Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.
Ajout d'une image 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 ne souhaitez pas utiliser nos options de bannière intégrée, vous pouvez ajouter un Bloc Image en haut d'une Page Normale sur n'importe quel template.

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é en haut de votre site, ajoutez une Barre d'Annonce.
  • Sur tous les templates, vous pouvez aussi ajouter un Bloc Image en haut d'une Page Normale pour créer une impression de bannière.

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 l'Éditeur de Style.

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).Vous pouvez également ouvrir les Paramètres de Page.
  2. Dans l'onglet Media (Média), cliquez sur Add an image (Ajouter une image).
  3. Cliquez sur Add an Image pour ajouter une image à partir de votre ordinateur, ou cliquez sur Getty pour acheter les droits d'une image en stock pour 10 $.
  4. 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.
  5. Cliquez sur Save (Enregistrer) pour publier vos modifications.
  6. Utilisez l' Éditeur de Style pour personnaliser votre bannière.
Conseil : Vous pouvez cliquer à nouveau sur l'annotation Banner (Bannière) ou retourner aux Paramètres de Page pour éditer la bannière déjà en place.

editor.png

Templates compatibles

Les bannières de page sont prises en charge par les templates suivants, qui sont regroupés par famille :

Template Pages compatibles
Adirondack Pages Normales, Blog, Événements et Produits

Famille Bedford

Anya, Bryant, Bedford, Hayden

Pages Normales, Album, Blog, Événements et Produits

Famille Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Pages Normales, Album, Blog, Évènements, Galerie et Produits
Five Pages Normales, Album, Blog, Évènements, Galerie et Produits

Famille Montauk

Julia, Kent, Montauk, Om

Pages Normales, Blog, Événements et Page Index Principale

Famille Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Pages Normales, Album, Blog, Évènements, Galerie et Produits
Supply Pages Normales, Blog, Album et Événements

Famille Tremont

Camino, Carson, Henson, Tremont

Pages Normales, Album, Blog, Évènements, Galerie et Produits

Famille York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Pages Normales, Album, Blog, Événements, Galerie, Projet, Produits et Page Index Principale

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 dans Skye :

Astuce : certaines superpositions de texte sont disponibles sur les bannières d'éléments de collection.

skye-blog-post-header.png

Templates compatibles

Les bannières d'éléments de collection (certains éléments de collection affichent la bannière de la page ; par exemple, un article de blog affiche la bannière de la Page Blog) sont prises en charge par les templates suivants, qui sont regroupés par famille :

Template Éléments de collection Contenu affiché
Adirondack Articles de blog, événements, produits Vignette d'élément de collection

Famille Bedford

Anya, Bryant, Bedford, Hayden

Articles de blog, événements Vignette d'élément de collection
 

Famille Farro

Farro, Haute

Articles de blog Vignette d'élément de collection
 

Five

Articles de blog, événements, produits Bannière de page

Famille Montauk

Julia, Kent, Montauk, Om

Articles de blog, événements Bannière de page

Famille Skye

Foundry, Indigo, Ready, Skye, Tudor

Articles de blog Vignette d'élément de collection
Supply Articles de blog, événements Vignette d'élément de collection

Ajouter une bannière de site

Les bannières de site sont disponibles sur le template Five et certains templates maintenant retirés. Elles apparaissent sur toutes les pages ne comportant pas de bannière de page.

Pour ajouter une bannière de site, suivez les étapes figurant dans le guide sur les bannières de Five. Ces étapes seront les mêmes pour un template ayant été retiré. Seul le nom de l'ajustement de l'image de bannière pourra avoir un nom différent.

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

Add content as an overlay

In some templates, you can add content blocks over a banner. For example, you could add a Video Block over a banner image, as shown in the screenshot below.

You can add content blocks over a banner image or video in the following templates. Templates are grouped by family.

Famille Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Add blocks to intro areas on page banners and content sections in an Index.

Famille Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Add bocks to content sections in an Index.

video-block-on-background-image.png

Personnaliser la bannière

Pour en savoir plus sur les styles des bannières de votre template, consultez votre guide de template :

  • Adirondack
  • Famille Bedford - Anya, Bryant, Bedford, Hayden
  • Famille Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Famille Farro - Farro, Haute
  • Five
  • Famille Montauk - Julia, Kent, Montauk, Om
  • Famille Pacific - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Famille Skye - Foundry, Indigo, Ready, Skye, Tudor
  • Supply
  • Famille Tremont - Camino, Carson, Henson, Tremont
  • Famille York - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Modifier la hauteur de la bannière

Voici un aperçu des étapes à suivre pour ajuster la hauteur des bannières dans chaque template. Pour une aide détaillée par template, consultez les guides spécifiques cités dans la section précédente. Les templates sont regroupés par famille.

Template

Modifier la hauteur

Adirondack

Ajustement de la hauteur

Famille Bedford

Anya, Bryant, Bedford, Hayden

Bannières vidéo et de page - Ajoutent 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

Famille Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Ajoutent des sauts de ligne dans la zone d'introduction.

Les bannières d'Index ont leur propre outil d'ajustement de hauteur.

Famille Farro

Farro, Haute

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.)

Famille Montauk

Julia, Kent, Montauk, Om

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.

Famille Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Ajoutez des sauts de ligne à la description de la page ou utilisez l'ajustement Padding (Étalonnage). En savoir plus.

Les bannières d'Index ont leur propre outil d'ajustement de hauteur.

Famille Skye

Foundry, Indigo, Ready, Skye, Tudor

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.

Famille Tremont

Camino, Carson, Henson, Tremont

Ajustement de la hauteur de l'Image de Bannière de la page

Famille York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Ajustement de la hauteur

Bannières sur mobile

  • Les images de bannière seront toujours recadrées sur mobile.
  • Les bannières vidéo ne s'affichent pas sur mobile. Définissez une image de remplacement qui apparaîtra à la place.
  • 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.

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

Les images et vidéos de bannières des templates suivants peuvent s'afficher derrière le contenu d'en-tête du site, à savoir le titre du site et les éléments de navigation de la page. Cliquez sur n'importe quel lien pour en savoir plus. Ces templates sont regroupés par famille.

  • Famille Bedford - Anya, Bryant, Bedford, Hayden
  • Famille Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Famille Pacific - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Famille Tremont - Camino, Carson, Henson, Tremont
Remarque : Les bannières de Five s'affichent toujours sous le titre, tandis que le titre du site, logo et sous-titre peuvent apparaître comme des éléments superposés à la bannière .

Voici un aperçu de l'affichage superposé avec le template Bedford :

bedford-transparent-header.png

Empiler des bannières dans un Index

Certains templates prennent en charge une Page Index affichant plusieurs bannières empilées verticalement sur une page, pour un long effet de défilement.

Voici une liste des templates qui prennent en charge cette option. Ces templates sont regroupés par famille.

  • Famille Bedford - Anya, Bryant, Bedford, Hayden
  • Famille Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Famille Pacific - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Famille York - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York
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.

Dans certains templates, vous pouvez créer des bannières qui ne seront pas recadrées :

  • Les bannières de la famille Montauk (Julia, Kent Montauk et Om) ne sont pas recadrées verticalement. Elles s'adaptent toujours à la largeur du contenu du site. Remarque : les bannières hautes et étroites peuvent pixeliser lorsqu'elles sont agrandies pour remplir la largeur restante.
  • Dans la famille Pacific (Charlotte, Fulton, Horizon, Naomi et Pacific), vous pouvez créer une image de bannière qui ne sera pas recadrée, en ajoutant une Page Galerie au sein d'une Page Index.
  • Pour obtenir des conseils pratiques sur le recadrage, consultez la section résolution des problèmes.
Conseil : Changer le point de centrage de la vignette influera sur le recadrage des bannières de page et d'éléments de collection.

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.

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

Simulez l'effet d'une bannière sur n'importe quel template en ajoutant un Bloc Image en haut d'une Page Normale.
Chaque mise en page 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

Options de bannière en fonction du template

Les templates suivants, regroupés par famille, prennent en charge un ou plusieurs types de bannières :

Template

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

Normal
Blog
Événements
Produits

Oui

Articles de blog
Événements
Produits

Effet de fondu au défilement (hors vue mobile)

Famille Bedford

Anya, Bryant, Bedford, Hayden

Normal
Album
Blog
Événements
Produits

Oui

Articles de blog
Événements

Bannières diaporama

Bannières de diaporama de Page Blog

Famille Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Normal
Album
Blog
Événements
Galerie
Produits

Oui

 

Effet parallaxe

Famille Farro

Farro, Haute

   

Articles de blog

 

Five

Normal
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

Famille Montauk

Julia, Kent, Montauk, Om

Normal
Blog
Événements
Index

Oui

Les bannières de page s'affichent sur les articles de blog et les événements

 

Famille Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Normal
Album
Blog
Événements
Galerie
Produits

Oui

   

Famille Skye

Foundry, Indigo, Ready, Skye, Tudor

   

Articles de blog

 

Supply

Normal
Blog
Album
Événements

 

Articles de blog
Événements

La bannière s'affiche sur la droite, excepté sur mobile.

Famille Tremont

Camino, Carson, Henson, Tremont

Normal
Album
Blog
Événements
Galerie
Produits

Oui

  Filtre superposé à la page

Famille York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Normal
Album
Blog
Événements
Galerie
Projet
Produits
Index principal

   

Effet de fondu

Images transparentes

Si vous utilisez un fichier au format .png avec un arrière-plan transparent, les ajustements suivants vous permettront de définir la couleur de fond de la bannière. Les templates sont regroupés par famille.

Conseil : La plupart du temps, l'opacité de la couleur est de 100 %. Si vous ne parvenez pas à obtenir la couleur souhaitée, ajustez la transparence.
Template Ajustement
Adirondack Content Background Color (Couleur d'Arrière-Plan du Contenu)

Famille Bedford

Anya, Bryant, Bedford, Hayden

Banner Overlay Color (Couleur Filtre de la Bannière)

Famille Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Overlay Color (Couleur Superposée) dans le champ Main: Overlay (Principal : Superposition)

Famille Farro

Farro, Haute

Post Background Color (Couleur d'Arrière-Plan de l'Article). L'Overlay Color (Couleur Superposée) a également un impact sur la couleur.
Five Header Background (Arrière-Plan de l'En-Tête)

Famille Montauk

Julia, Kent, Montauk, Om

Canvas Background (Arrière-Plan du Contenu)

Famille Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Overlay Color (Couleur Filtre)

Famille Skye

Foundry, Indigo, Ready, Skye, Tudor

Site Background (Arrière-Plan du Site)
Supply Page Color (Couleur de la Page)

Famille Tremont

Camino, Carson, Henson, Tremont

Site Background Color (Couleur d'Arrière-Plan du Site)

Famille York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Background Color (Couleur d'Arrière-Plan) dans le champ Banner (Bannière).

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 21 sur 99