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 en haut de vos pages et ajoutent un élément visuel qui définit le ton de votre site. Ce guide passe en revue les étapes à suivre pour ajouter et personnaliser vos images de bannière.

Astuce : si vous préférez ne pas utiliser nos options intégrées, vous pouvez ajouter un bloc Image en haut d’une page Disposition, quel que soit le site Squarespace.

Conseils relatifs au format de l'image

Vérifiez le format de vos images avant de les charger sur votre site. Pour les images de bannière, suivez ces consignes :

  • Utilisez des images dont la largeur est comprise entre 1 500 pixels et 2 500 pixels.
  • Assurez-vous que la largeur des images est supérieure à leur hauteur.
  • Utilisez des images avec des motifs abstraits et sans bordures.
  • Nʼutilisez pas dʼimages avec du texte intégré au fichier image lui-même. Au lieu de cela, ajoutez du texte sur lʼimage.
  • Pour connaître les types de fichier image et les exigences complètes en matières dʼimage, consultez lʼarticle Formater vos images pour une utilisation web.
  • Si vous souhaitez qu’un message contenant uniquement du texte soit affiché en haut de votre site, ajoutez une barre d’annonce au lieu d’une bannière.

Ajouter une image de bannière

La façon dont vous ajoutez vos images de bannière, ainsi que les mises en page que vous pouvez créer dépend entièrement de la version de votre site.

Vous pouvez créer des images de bannière sur n’importe quelle page en ajoutant une section de bloc en haut de la page, puis en ajoutant une image d’arrière‑plan. Vous pouvez ajouter du contenu venant se superposer à la bannière ou ajouter d’autres sections au contenu de la page ci‑dessous. Il est impossible d’ajouter des images de bannière à des billets de blog, des événements ou des produits.

Pour savoir comment ajouter une image d’arrière‑plan à une section, consultez l’article Les sections de page dans la version 7.1.

Différents templates prennent en charge différents types dʼimages de bannière :

  • Bannière de page - S'affiche en haut de chaque page. Ajoutée en tant que miniature de page.
  • Bannière d’élément de collection - S'affiche au-dessus de chaque billet de blog, produit et événement. Ajoutée en tant que miniature de l’élément.
  • Bannière de site : Peut s’afficher sur toutes les pages du site. Ajoutée 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. Dans le Menu principal, cliquez sur Pages.
  2. Survolez le titre de la page avec votre souris et cliquez sur l'icône engrenage, puis sur Médias.
  3. 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. Certains templates acceptent également les bannières vidéo.
  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 Enregistrer pour publier vos modifications.
  6. Utilisez le panneau Styles du site pour personnaliser votre bannière.

Pour modifier une bannière existante, survolez la page et cliquez sur Bannière ou rouvrez les paramètres de la page avec l'icône engrenage.

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

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 miniature dans l'onglet Options.Pour des étapes détaillées, rendez-vous à la section Ajouter des miniatures.

Certains éléments de collection affichent plutôt des bannières de page. Par exemple, un article de blog peut afficher la bannière de page Blog. Pour en savoir plus sur les templates qui prennent en charge les bannières dʼéléments de collection, consultez Options de bannière par template.

Ajouter une bannière de site

Les bannières de site sont disponibles dans le template Five et certains templates abandonnés. Elles s’affichent sur toutes les pages sur lesquelles aucune bannière de page n’a été ajoutée.

Pour ajouter une bannière de site, cliquez sur l’ajustement de style correspondant dans le panneau Styles du site.

  • Dans Five, l’ajustement est Image d’arrière-plan de l’en-tête.
  • Dans les templates abandonnés, l’ajustement peut porter un autre nom.

Une fois l’image ajoutée, personnalisez-la avec les 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.

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

Famille de templates

Pages

Bannières vidéo

Éléments de collection

Options complémentaires

Adirondack

Disposition
Blog
Événements
Produits

Oui

Articles de blog
Événements
Produits

Effet de fondu au défilement

Bedford

Disposition
Album
Blog
Événements
Index
Produits

Oui

Articles de blog
Événements

Les bannières peuvent sʼafficher derrière lʼen‑tête

Bannières diaporama

Bannières dʼindex empilées

Bannières de diaporama de la page Blog

Brine

Disposition
Album
Blog
Événements
Galerie
Index
Produits

Oui

n/a

Les bannières peuvent sʼafficher derrière lʼen‑tête

Bannières diaporama

Bannières dʼindex empilées

Effet parallaxe

Farro n/a Non Articles de blog n/a

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

Le titre du site, le logo et le slogan peuvent être superposés aux bannières

Montauk

Disposition
Blog
Événements
Index

Oui

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

Les bannières ne peuvent être recadrées verticalement

Pacific

Disposition
Album
Blog
Événements
Galerie
Index
Produits

Oui

n/a

Les bannières peuvent sʼafficher derrière lʼen‑tête

Bannières diaporama

Bannières dʼindex empilées

Bannières ne pouvant être recadrées

Skye n/a Non Articles de blog n/a

Supply

Disposition
Blog
Album
Événements

Non

Articles de blog
Événements

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

Tremont

Disposition
Album
Blog
Événements
Galerie
Produits

Oui

n/a

Les bannières peuvent sʼafficher derrière lʼen‑tête

Superpositions de pages

York

Disposition
Album
Blog
Événements
Galerie
Index
Produits
Projet

Non n/a

Bannières dʼindex

Effet de fondu

Ajouter du texte à une bannière

Selon votre site, vous pouvez superposer du texte ou un autre type de contenu aux images de bannière. Parce que le texte que vous ajoutez sʼadapte à nʼimporte quelle taille dʼécran et nʼimporte quel type dʼappareil mobile, il sʼagit là dʼun excellent moyen dʼajouter du texte à votre bannière.

Nous déconseillons l’utilisation d’une image de bannière comportant un texte intégré dans le fichier d’image pour deux raisons :

  • Les ordinateurs ne sont pas en mesure de lire ce texte, si bien que les moteurs de recherche ne le référenceront pas dans leurs résultats.
  • Lorsque votre bannière change de forme pour sʼadapter aux différentes largeurs de navigateur, certaines parties du texte seront rognées.

La marche à suivre pour ajouter du texte sur la bannière dépend de la version de votre site.

Pour ajouter du texte ou un autre contenu :

  1. Cliquez sur Modifier sur la page contenant la bannière.
  2. Si vous avez ajouté une section vide, celle‑ci inclut déjà un bloc Texte. Cliquez dans le bloc pour ajouter du texte, puis utilisez la liste déroulante Mise en forme pour choisir un style de paragraphe.
  3. Cliquez sur un point d'insertion pour ajouter des blocs de texte ou tout autre contenu.
  4. Survolez Terminé et cliquez sur Enregistrer.

Différents templates prennent en charge différents types de textes superposés :

Pour savoir quels templates prennent en charge quels types de texte superposé, consultez Options de texte de bannière par template.

Ajouter un texte superposé sur la zone d'introduction

Dans les templates de la famille Brine, une zone intro s’affiche au-dessus de la bannière. Vous pouvez personnaliser cette zone à l’aide de blocs, comme le bloc Texte ou le bloc Bouton.

Ajouter un titre et une description de page

La plupart des templates affichent le titre et la description de la page sur les bannières de page. Pour ajouter du texte à une bannière dans des templates :

  1. Dans le Menu principal, cliquez sur Pages.
  2. Survolez le titre de la page avec votre souris dans le panneau de gauche et cliquez sur l'icône engrenage.
  3. Saisissez votre texte dans les champs Titre de la page et Description de la page dans l’onglet Général.
  4. Cliquez sur Enregistrer, puis actualisez la page. Il peut arriver que vous deviez actualiser la page pour que les modifications apportées à la bannière apparaissent dans l’aperçu du site.

Important :

  • Pour ces templates, les descriptions de page ne doivent pas uniquement servir à ajouter du contenu optimisé pour le SEO. Utiliser la description de page pour la bannière n'aura aucun effet négatif sur le SEO.
  • Pour afficher un titre différent dans les résultats de recherche et les partages sociaux, ajoutez un titre SEO.
  • Dans la plupart des templates, vous pouvez augmenter la hauteur en insérant des espaces vides à la description. Appuyez sur Retour ou Entrée autour du texte de description pour exposer davantage l’image. Cette méthode peut vous permettre de régler les problèmes de recadrage et donner plus de hauteur à la bannière pour qu’elle ressorte davantage.

Ajouter un texte de bannière à un élément de collection

Le texte superposé des bannières d'élément de collection est généralement créé à partir des paramètres de l'article de blog, de l'événement ou du produit en question. Utilisez les liens ci-dessous pour en savoir plus sur l'ajout de texte pour chaque type d'élément :

Dépannage

Si votre texte ne s'affiche pas, essayez de suivre les étapes de dépannage suivantes :

  • Actualisez la page.
  • Vérifiez dans le tableau des templates que votre template prend bien en charge le texte de bannière pour ce type de page.
  • Ouvrez le panneau Styles du site et vérifiez si la bannière ou le texte de bannière est masqué à cause des options de style de votre template.
  • Assurez-vous d'avoir ajouté une image de bannière, car certains templates nécessitent une image de bannière pour afficher le texte.
  • Consultez le guide de votre template.

Voici les options de texte de bannière proposées par ces familles de templates :

Famille de templates

Bannières de page

Bannières d'éléments de collection

Adirondack

  • Aucun texte superposé.
  • Articles de blog, événements, produits : aucune superposition de texte

Bedford

  • Billets de blog : titre, un élément de métadonnées.
  • Événements : aucune superposition de texte

Brine

  • Zone de blocs libre ( « introduction »)
  • Le contenu de l’en-tête (comme le titre du site et les liens de navigation) peut s’afficher sur la bannière.

 

Farro

 

Five

  • Titre et description de la page, titre/logo du site et slogan, ou uniquement l’image de bannière. En savoir plus.
  • Comme pour les bannières de page

Montauk

  • Titre et description de la page.

 

Pacific

 

Skye

 

Supply

 

  • Articles de blog, événements : aucune superposition de texte

Tremont

 

York

  • Titre et description de la page.

 

Cette vidéo concerne la version 7.1.

Personnaliser la bannière

Le style de la bannière dépend de la version de votre site.

Image de bannière

Pour personnaliser l’image de bannière, cliquez sur Modifier sur la page. Cliquez ensuite sur l’icône crayon dans la section de bannière, puis sur Arrière-plan. Vous pouvez alors définir la largeur de l’arrière-plan et l’opacité de superposition.

Pour la largeur de l'arrière-plan :

  • L'option Pleine page étend l'image d'un bord à l'autre de la fenêtre de votre navigateur, couvrant toute la largeur de votre site.
  • L'option Insertion met l'image légèrement en retrait et crée un contour autour cette dernière.

Lorsque l’image est définie sur Insertion, vous pouvez définir la couleur du contour.

Texte de la bannière

Les paramètres de style de votre site dans le panneau Design déterminent la façon dont votre texte s'affiche dans la section de votre bannière.

  • Pour modifier les polices de votre site, choisissez un pack de polices et une taille de base dans le panneau Polices. Faites défiler la page jusqu'à Attribuer des styles pour personnaliser le style d'un texte spécifique. Pour en savoir plus, consultez Modifier les polices de caractères.
  • Pour modifier la couleur de votre police, choisissez une palette et un thème dans le panneau Couleurs. Ouvrez le thème de votre section et cliquez sur l’icône crayon pour styler des éléments spécifiques dans ce thème. Pour en savoir plus, consultez l’article Changer les couleurs.

Utilisez les réglages dans Styles de site pour ajuster les polices, les couleurs et les autres éléments de bannière. Les modifications de style de bannière affectent généralement toutes les bannières de votre site.

Découvrez les options de style de bannière dans le guide de votre template :

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 :

  • 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
  • Approvisionnement - Couleur de la page
  • Tremont : Couleur d’arrière-plan du site
  • York : Couleur d’arrière-plan dans la section Bannière

Dans la plupart des cas, l’opacité de la couleur est réglée sur 100 %. Si vous ne parvenez pas à obtenir la couleur souhaitée, ajustez la transparence.

Modifier la taille de la bannière

La marche à suivre pour modifier la hauteur ou la largeur de votre bannière dépend de la version de votre site.

Pour modifier la hauteur de la bannière :

  1. Cliquez sur Modifier sur la page, puis sur l’icône en forme de crayon dans la section de bannière.
  2. Dans l’onglet Mise en forme, sous Hauteur de section, sélectionnez une hauteur prédéfinie ou cliquez sur ... pour définir une hauteur personnalisée.
  3. Survolez Terminé et cliquez sur Enregistrer.

La hauteur de section affecte la manière dont l’image d’arrière-plan est recadrée sur ordinateur et sur appareil mobile. Nous vous recommandons de tester différentes hauteurs afin d’obtenir l’aspect recherché.

La hauteur de bannière dépend également de la quantité de contenu de la section. Pour augmenter la hauteur de bannière sans ajouter de contenu visible, ajoutez des blocs Espaceur.

Bien que les bannières s’étendent généralement sur la largeur du site, vous pouvez personnaliser l’image de la bannière pour insérer une bordure autour de celle-ci. La largeur de la bannière est ainsi réduite.

Utilisez le tableau ci-dessous pour savoir comment modifier la taille de la bannière dans ces familles de templates. Veuillez noter qu’il n’est pas possible de modifier la largeur de la bannière dans la plupart des templates.

Famille de templates

Comment modifier la taille

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 en diaporama, bannières en 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 En-tête dans le champ Blog : élément pour ajuster la taille de la bannière

Five

Utilisez l’ajustement Hauteur de zone de bannière ou Espacement dans la zone de bannière. (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’ajustement Largeur de l’image de bannière pour modifier la largeur de la bannière. 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

Si votre bannière ne s’affiche pas correctement, consultez l’article Résoudre les problèmes de recadrage.

Bannières sur mobile

Les images de bannière seront toujours recadrées sur mobile.

Pour savoir comment les bannières apparaissent sur les appareils mobiles, consultez lʼarticle Comment mon site sʼaffichera-t-il sur les appareils mobiles ?

Supprimer une image de bannière

La façon dont vous supprimez une image de bannière dépend de la version de votre site.

Pour supprimer une image de bannière :

  1. Cliquez sur Modifier sur la page, puis sur l’icône en forme de crayon dans la section de bannière.
  2. Cliquez sur Arrière-plan.
  3. Cliquez sur Supprimer.
  4. Survolez Terminé et cliquez sur Enregistrer.
  • Bannières de page - Dans l’onglet Médias des paramètres de la page, cliquez sur Supprimer l’image.
  • Bannières d'élément de collection : ouvrez l'élément de votre choix (article de blog, produit ou événement), cliquez sur l'onglet Options, puis cliquez sur l'icône de corbeille.
  • Bannières de site - Ouvrez l’ajustement de votre choix dans le panneau Styles du site, puis cliquez sur Supprimer.

Regarder une vidéo

Cette vidéo concerne la version 7.0.

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