Images en pleine page

Créez un impact visuel en ajoutant des images larges qui s’étendent jusqu’au bord de l’écran.

Dernière mise à jour le 10 juillet 2024

Les images en pleine page s’étendent d’un bord à l’autre de votre fenêtre de navigateur et occupent toute la largeur de votre site. Elles permettent de donner une sensation de grandeur à vos pages et de mettre l’accent sur le contenu visuel.

Dans la version 7.1, vous pouvez afficher des images en pleine page sur n’importe quelle page. Dans la version 7.0, l’affichage des images en pleine page n’est pas pris en charge par tous les templates.

7.1_full_bleed.jpg

Avant de commencer

  • Si vous souhaitez afficher une image en pleine page sur votre site, nous vous recommandons de charger une image dont la largeur est comprise entre 1 500 et 2 500 pixels.
  • Les images en pleine page sont redimensionnées selon la largeur du navigateur. Elles feront donc toujours l’objet d’un certain recadrage.
  • Bien que ces deux termes soient parfois utilisés sans distinction, les images en « pleine page » s’étendent d’un bord à l’autre de l’écran de navigation, tandis que les images en « pleine largeur » s’étendent uniquement d’un bord à l’autre de la zone de contenu principale.

Images d'arrière-plan

Le fonctionnement des images d’arrière-plan varie selon la version de Squarespace que votre site utilise.

Créez une image d’arrière-plan en pleine page dans une section en définissant Largeur de l’arrière-plan sur Pleine page dans les styles de section.

Pour qu’une image d’arrière-plan occupe la totalité d’une page, ajoutez tout le contenu de cette page dans une seule section.

certains sont en effet conçus pour présenter des contenus visuels forts en format large, mais d’autres privilégient les espaces vides et offrent un espace plus important autour des blocs.

Les templates qui prennent en charge les images d’arrière-plan appliquées à l’ensemble du site peuvent les afficher en pleine page. Pour afficher une image d’arrière-plan en pleine page, sélectionnez le paramètre de style Taille : Couverture.

Vous pouvez également ajouter une page de couverture à nʼimporte quel template. De nombreuses dispositions de page de couverture utilisent des images d’arrière‑plan en pleine page.

Bannières

Les images de bannière varient selon la version de Squarespace que votre site utilise.

Ajoutez une bannière à nʼimporte quelle section en ajoutant une image ou une vidéo dʼarrière-plan, puis en définissant lʼoption Largeur de lʼarrière-plan sur Pleine page dans les styles de sections .

Les bannières s’affichent en haut de votre site, en dessous de l’en-tête ou derrière lui.

Les bannières s’affichent en pleine page dans ces familles de templates :

  • Adirondack - Les bannières occupent toute la largeur de votre site, et non du navigateur.
  • Brine
  • Bedford
  • Five
  • Pacific
  • Supply - Les bannières verticales occupent toute la hauteur du navigateur dans les billets de blog et les événements.
  • Tremont
  • York - Cochez les options Afficher la bannière de page et Bannière en pleine page dans le panneau Styles du site.

sections Galerie et pages Galerie

Selon la version de Squarespace qu’il utilise, votre site propose des options de galerie différentes.

Dans les sections Galerie, les images peuvent être affichées en pleine page. Dans les styles des sections Galerie, définissez Largeur sur Pleine page.

Les dispositions de galerie s’affichent en pleine page dans ces familles de templates :

Template Style de galerie
Ishimoto Carrousel
Momentum Diaporama

Tremont

Grille
Wexley

Grille. Ajustez la marge intérieure de l’élément d’index et la marge extérieure.

Pages Projet

La famille York prend en charge un type de page spécial appelé page Projet, qui mêle texte et images de façon à attirer tous les regards.

Dans le panneau Styles du site, cochez Projet en pleine page et Autoriser Portrait et Carré en pleine largeur pour afficher les images sur toute la largeur du navigateur.

Blocs Image

Les blocs Image occupent une largeur standard, qui correspond à celle de tous les autres blocs, au sein de la marge intérieure de la zone de contenu principale. Ils ne possèdent pas d’options d’affichage pleine page intégrées.

Pour en savoir plus, consultez l’article Blocs Image.

Images des pages Portfolio et des pages Index

Les pages Portfolio et les pages Index fonctionnent de la même manière :

  • Dans la version 7.1, une page Portfolio est une grille d’images qui renvoient à d’autres pages de votre site. Tous les sites qui utilisent la version 7.1 prennent en charge les pages Portfolio.
  • Dans la version 7.0, une page Index est une disposition unique d’images qui renvoient à d’autres pages de votre site. Seuls certains templates de la version 7.0 prennent en charge les pages Index, et chaque index dispose de son propre style.

Les pages Portfolio peuvent être affichées en pleine page dans la disposition Arrière-plan de l’index portfolio.

Les pages Index affichent des images en pleine page ou des collages d’images dans ces familles de templates :

Template

Options

Avenue

Grille de miniatures. Cochez l’option Index pleine largeur et définissez la Marge intérieure des miniatures sur 0 % et la Marge intérieure de la zone de contenu sur 0px (saisissez manuellement 0px).

Brine

Bannières empilées et sections Galerie.

Bedford

Bannières empilées

Flatiron

Grille de miniatures ou mosaïque

Forte

Diaporama

Momentum

Diaporama

Pacific

Bannières empilées

Tremont

Diaporama

York

Bannières empilées. Sélectionnez Marge extérieure du site : Personnalisé et définissez Marge intérieure personnalisée du site sur 0px

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.