Ajouter des images de bannière avec la version 7.0

Ajoutez un point focal visuel en haut d’une page pour retenir l’attention de vos visiteurs.

Les images de bannière s’affichent en haut de vos pages et définissent visuellement le ton de votre site. Ce guide vous propose de découvrir comment ajouter et personnaliser vos images de bannière dans la version 7.0. Les étapes à suivre dépendent du template choisi.

Pour créer une image de bannière avec la version 7.1, ajoutez une image d’arrière-plan de section à une section placée en haut d’une page.

Regarder une vidéo

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 :

• La largeur des images doit être comprise entre 1 500 et 2 500 pixels
• La largeur des images doit être supérieure à leur hauteur
• Privilégiez les motifs abstraits et les images sans bordure
• Évitez les fichiers image avec texte intégré. Ajoutez votre texte directement sur l’image.
• Pour connaître les types de fichiers acceptés, ainsi que les autres exigences relatives aux images, consultez lʼarticle Mise en forme des images pour le web
• Si vous souhaitez afficher uniquement du texte en haut de votre site, préférez une barre d’annonce aux bannières

Ajouter une image de bannière

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 image mise en avant 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 image mise en avant 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.

Pour en savoir plus, consultez notre tableau comparatif des options de bannière par template ou regardez notre exemple vidéo sur l’ajout de chaque option de bannière.

Ajouter une bannière de page

Pour ajouter une bannière de page :

1. Ouvrez le panneau Pages.
2. Survolez le titre de la page avec votre souris et cliquez sur , 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 .

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

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.

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 image mise en avant dans l’onglet Options. Pour des étapes détaillées, consultez l’article Ajouter des images mises en avant.

Certains éléments de collection affichent plutôt des bannières de page. Par exemple, un billet de blog peut afficher la bannière de page Blog. Pour savoir quels templates prennent en charge les bannières d’éléments de collection, consultez la section Options de bannière en fonction du 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.

Options de bannière en fonction du template

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

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

• Titre et description de la page : affiche le titre et la description ajoutés dans les paramètres de page sur les bannières de page.
• Texte de la bannière d'élément de collection : affiche le texte des paramètres d'élément de collection sur les articles de blog, les événements ou les éléments de produit.
• Texte de la bannière de page Index : affiche le texte de description au‑dessus de la bannière. Selon le template, le contenu de la page peut être superposé à la bannière.
• Texte superposé sur la zone d'introduction : les blocs Texte et autres contenus de bloc sont superposés à la zone d'en‑tête de la page sur laquelle la bannière s'affiche.

Pour savoir quels templates prennent en charge quels types de texte superposé, consultez la section 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. Ouvrez le panneau Pages.
2. Survolez le titre de la page avec votre souris dans le panneau de gauche et cliquez sur .
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 :

• Articles de blog
• Événements
• Produits

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.

Options de texte de bannière par 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	Description de la page avec des options de mise en forme spéciales (boutons, en‑têtes). Les bannières en diaporama et les bannières de page Blog proposent d’autres options.	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		Billets de blog : le titre du billet et jusqu’à quatre éléments de métadonnées
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	Titre et description de la page. Peut également inclure le Titre du site et les éléments de navigation.
Skye		Billets de blog : la date peut s’afficher en légende
Supply		Articles de blog, événements : aucune superposition de texte
Tremont	Titre et description de la page en superposition de page.
York	Titre et description de la page.

Personnaliser la bannière

Utilisez les ajustements du panneau Styles du site pour modifier les polices, les couleurs et les autres éléments de bannière. Les ajustements du 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 changer 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

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.

Ajouter un bouton à une bannière

Pour encourager les visiteurs à cliquer sur un lien vers une page spécifique, à faire un don à votre organisation ou à s’inscrire à votre newsletter, vous pouvez ajouter un bouton à votre bannière.

Ces familles de templates proposent des options de superposition spéciales qui permettent d’ajouter des boutons sur les images et les vidéos de bannière de chaque page :

• Bedford : mettez en forme le texte de description de la page pour créer un bouton sur la dernière ligne.
• Brine – Ajoutez un bloc Bouton à la zone intro d’une page comportant une bannière.

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 méthode de suppression d’une image de bannière dépend de son emplacement sur votre site :

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