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

York Site Styles tweaks

This is a list of all Site Styles tweaks for the York family (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, and York).

La plateforme Squarespace évolue constamment afin de vous offrir les meilleurs outils pour la création de votre site web. Si la plateforme a été modifiée récemment, il est possible que les options disponibles diffèrent de celles indiquées ci-dessous. La meilleure façon de découvrir comment fonctionne chaque ajustement est de l’essayer et de voir par vous-même comment il affecte votre site.

Astuce : si vous avez besoin d’aide pour les problèmes courants, consultez le guide des templates York.

Avant de commencer

Many fonts on York have the option to scale, so you can set the maximum and minimum font size. This helps you control how your site looks in different browsers.

Pour en savoir plus, consultez l’article Mettre les polices à l’échelle.

Site

Site

  • Site Background - Change the color behind the main content area and header.
  • Site Max Width - Set the width of the main content area. This doesn't affect Project, Gallery, or Index Pages. 
  • Site Spacing: Extra Small, Small, Medium, Large, Extra Large, Custom - Set the space between the site content and the top of the browser.
  • Site Custom Spacing - Appears when Site Spacing: Custom is selected.
  • Site Outer Padding: Extra Small, Small, Medium, Large, Extra Large, Custom - Set the space between the site content and the sides of the browser.
  • Site Custom Padding - Appears when Site Outer Padding: Custom is selected.
  • Site Alignment: Left, Center, Right
  • Enable Ajax Loading - Enable for optimal loading speeds.

Site : En-tête

Style the header elements. These have separate mobile styles.

  • Police du titre du site
  • Couleur du titre du site
  • Police du slogan du site
  • Couleur du slogan du site
  • Hauteur du logo (max.)
  • Espacement horizontal de l’en-tête
  • Espacement vertical de l’en-tête - Cet élément ajoute un espacement vertical aux zones d’en-tête ayant une disposition empilée et contenant deux éléments ou plus.
  • Full Width Header - When checked, the header ignores alignment and site width. The header still follows Site Outer Padding.
  • Cart Style: Text, Cart, Bag
  • Police du panier
  • Couleur du panier
  • Couleur de la quantité du panier
  • Couleur du texte de la quantité du panier

Site : Pied de page

  • Afficher le pied de page général du site

Site : Disposition de l’en-tête

For any of these header elements, choose Hide, Left, Center, or Right.

  • Position Branding
  • Position du slogan
  • Position de la navigation principale
  • Position de la navigation secondaire
  • Position du panier

These tweaks appear when two or more elements are added to each area of the header:

  • Disposition à gauche: Horizontale, Empilée
  • Disposition centrée: Horizontale, Empilée
  • Disposition à droite : Horizontale, Empilée

Site : Navigation

Style the Main Navigation and Secondary Navigation. These have separate mobile styles.

  • Police principale
  • Couleur des liens principaux
  • Lien actif principal
  • Police secondaire
  • Couleur des liens secondaires
  • Lien actif secondaire
  • Espacement des liens
  • Show Folder Indicator - Hide or display the caret beside folder drop-down menus.

Site : Typographie

Change the fonts for your main content area. Headings and Quote Blocks support scaling fonts. Project Page titles and captions have separate styles

  • Police du titre 1
  • Mettre à l’échelle le titre 1
  • Min. pour le titre 1
  • Couleur du titre 1
  • Police du titre 2
  • Mettre à l’échelle le titre 2
  • Min. pour le titre 2
  • Couleur du titre 2
  • Police du titre 3
  • Mettre à l’échelle le titre 3
  • Min. pour le titre 3
  • Couleur du titre 3
  • Police du corps
  • Couleur du corps de texte
  • Couleur du lien du corps
  • Police de la citation
  • Mettre la citation à l’échelle
  • Min. pour la citation
  • Couleur du texte de la citation
  • Quote Alignment: Left, Center, Right
  • Afficher les guillemets
  • Police source de la citation
  • Couleur source de la citation

Page

The banner tweaks in these sections apply to banners at the top of supported pages. They don’t apply to Index Page navigation banners.

These tweaks affect all pages of the same type across your site. For example, if you have two Album Pages, checking Show Album Title displays the page title at the top of both Album Pages.

Page

The Banner, Title, and Description tweak names change based on the page type. For example, on an Album Page you'll see Show Album Banner.

  • Show Banner - Hide or display the page thumbnail banner.
  • Show Homepage Banner - Add a banner image/color to the homepage while hiding it for all other pages of that type. This tweak appears when you're on the homepage and Show Banner is unchecked.
  • Show Title - Hide or display the page title.
  • Show Description - Hide or display the page description.
  • Show Categories - Hide or display categories on Gallery and Project Pages.
  • Show Page Header - Hide or display the page header.
  • Show Page Footer - Hide or display the page footer.

Bannière

Style page banners

  • Height: Small, Medium, Large, Extra Large 
  • Image Alignment: Top, Right, Bottom, Left, Center
  • Crop Image - Available with the right, left, and center alignments. Crops to fill the right half, left half, or entire banner. 
  • Auto Color Background - Automatically pulls a background color from the thumbnail image.
  • Background Color - If Auto Color Background is unchecked, manually select the banner background color.
  • Full Bleed Banner - Display the banner at the width of the browser.

Texte de la bannière

Change the text that displays over banners

  • Alignment: Top Left, Left, Bottom Left, Top, Center, Bottom, Top Right, Right, Bottom Right
  • Width: Small, Medium, Large, Extra Large
  • Police du titre
  • Mettre à l’échelle la taille du titre
  • Min. pour le titre
  • Couleur du titre
  • Espacement du titre
  • Category Font - Categories can display on Gallery and Project Pages.
  • Couleur de la catégorie
  • Espacement de la catégorie
  • Police de la description
  • Mettre à l’échelle la taille de la description
  • Min. pour la description
  • Couleur de la description
  • Highlight Text - Add a background color behind the page title and description text. 
  • Couleur de surbrillance du texte
  • Text Highlight Indent: Small, Medium, Large, Custom - Choose how far the background color extends beyond the text.
  • Custom Highlight Indent - Appears when Text Highlight Indent: Custom is selected.

Page : Texte d’introduction

Change the page title and description on collection pages without banner thumbnail images or videos. Indexes without banner images have their own font style.

  • Police du titre
  • Mettre à l’échelle la taille du titre
  • Min. pour le titre
  • Couleur du titre
  • Espacement du titre
  • Police de la catégorie
  • Couleur de la catégorie
  • Espacement de la catégorie
  • Police de la description
  • Mettre à l’échelle la taille de la description
  • Min. pour la description
  • Couleur de la description
  • Text Width: Small, Medium, Large, Extra Large 
  • Text Height: Small, Medium, Large, Extra Large - Set the spacing above and below the text.

Index

Style the header banner and section banners that appear on Index Pages

Index : Texte d’introduction

This appears when Show Index Banner is unchecked. Use this to set a different style for the page title and description on Index Pages. This doesn't affect the section banners that display below the header banner. 

  • Police du titre
  • Mettre à l’échelle la taille du titre
  • Min. pour le titre
  • Couleur du titre
  • Espacement du titre
  • Police de la description
  • Mettre à l’échelle la taille de la description
  • Taille min. de la description
  • Couleur de la description
  • Largeur du texte : Petit, Moyen, Grand, Très grand
  • Text Height: Small, Medium, Large, Extra Large - Set the spacing above and below the text.

Index : Disposition

Style the layout of Index Pages.

  • Item Width: Full, Half, Grid - Display one or two banners per row, or create a thumbnail grid.
  • Columns - For grid layouts, choose the number of thumbnails that display per row.
  • Tablet: Columns - For grid layouts, choose the number of thumbnails that display per row on tablet devices.
  • Mobile: Columns - For grid layouts, choose the number of thumbnails that display per row on smartphones.
  • Thumbnail Ratio - For grid layouts, set the height-to-width ratio of the thumbnails.
  • Item Height: Small, Medium, Large, Extra Large - For banner layouts, set the height of the banners.
  • Item Spacing: Small, Medium, Large, Custom - For banner layouts, set the space between banners.
  • Item Custom Spacing - Set the spacing when Item Spacing: Custom is selected.
  • Alternate Widths - Alternate between rows that display one banner and two banners. Appears when Image Alignment: Center and Item Width: Full or Half are selected.
  • Alternate Sides - Alternates the side that banner images display on. Appears when Item Width: Full and Image Alignment: Right or Left are selected.
  • Full Bleed Index - When checked, banners or thumbnails extend to the browser’s edge. When unchecked, banners and thumbnails follow the site width and padding. This also affects the page header banner.

Index : Image de l’élément

Style Index banner images.

  • Image Alignment: Top, Right, Bottom, Left, Center
  • Crop Image - Available with the right, left, and center alignment. Crops the image to fill the right half, left half, or entire banner.
  • Image Opacity - Set how much of the banner background color shows through the image.
  • Image Hover Opacity - Choose how much the image fades when visitors hover over it.
  • Auto Color Background - When checked, each banner with a thumbnail image automatically pulls a background color from the thumbnail image itself.
  • Couleur d’arrière-plan de l’élément - Si l’option Couleur d’arrière-plan automatique n’est pas sélectionnée, choisissez la couleur d’arrière-plan de la bannière.

Index : Texte de l’élément

Change the display settings for the page title and categories that can display over Index Page banners.

  • Title Display: Always On, Hidden, On Hover, On Scroll
  • Text Alignment: Top Left, Left, Bottom Left, Top, Center, Bottom, Top Right, Right, Bottom Right
  • Police du titre
  • Mettre à l’échelle la taille du titre
  • Title Min Size - Learn more about scaling fonts.
  • Couleur du titre
  • Utiliser l’arrière-plan du titre
  • Couleur d’arrière-plan du titre
  • Espacement du titre
  • Afficher les catégories
  • Police de la catégorie
  • Couleur de la catégorie
  • Utiliser l’arrière-plan de la catégorie
  • Couleur d’arrière-plan de la catégorie

Index : Navigation

La navigation s'affiche en bas de toutes les pages d'un Index. Pour le masquer, décochez la case Afficher la navigation dans l'index.

Définissez le type de navigation avec Style de lien :

  • Style de lien : liste (horizontale) - affiche toutes les pages de l'Index sous forme de liens de navigation horizontaux.
  • Style de lien : liste (verticale) - affiche toutes les pages de l'Index sous forme de liens de navigation verticaux.
  • Link Style: Next (inline) - Displays a Next label. If Show Label Only is unchecked, the next page displays beside the Next label.
  • Link Style: Next (stacked) - Displays a Next label. If Show Label Only is unchecked, the next page displays below the Next label.
  • Show Label Only - Add a link for the next page below or beside the Next label.

Définissez le style de lien avec ces autres réglages :

  • Spacing: Small, Medium, Large, Custom
  • Espacement personnalisé
  • Police des liens
  • Mettre à l’échelle la taille des liens
  • Index Link Min - Learn more about scaling fonts.
  • Couleur du lien
  • Active Link Color
  • Link Delimiter: None, Slash, Bullet  - Appears with the Link Style: List tweaks.
  • Link Spacing: Small, Medium, Large, Custom
  • Animation de transition de page - Choisissez si le contenu des pages d'un Index glisse vers le haut lors du chargement initial.

Projet

Style Project Pages.

Projet : Disposition

  • Image Alignment: Left, Center, Right - Align all captions and images to the right, left, or center.
  • Image Spacing: Small, Medium, Large, Custom - Set the space between each image in the Project.
  • Image Custom Spacing - Appears when Image Spacing: Custom is selected.
  • Banner Spacing: Small, Medium, Large, Custom - Set the space between the page header and the first image. (Text Height in the Page: Intro Text section may also affect this).
  • Project Banner Spacing - Appears when Banner Spacing: Custom is selected.
  • Show Project Captions - Hide or display all image titles and descriptions.
  • Portrait and Square Caption Style: Standard, Offset, Alternate
  • Align Alternate Captions to Image - Aligns the captions left or right. Available when Portrait and Square Caption Style is set to Alternate.
  • Landscape Caption Style: Standard, Offset, Inset
  • Allow Full Width Portrait and Square - Display portrait and square images at the width of the main content area. If Full Bleed Project is selected, they display at the width of the browser (full-bleed). Available when Portrait and Square Caption Style is set to Standard or Offset
  • Collapse Landscape Spacing - Removes the space below landscape images without captions.
  • Full Bleed Project - All landscape images on the page extend to the browser’s edge, depending on their size. This includes the header banner.
  • Cascade Images and Captions - Choose if images and captions slide up from the bottom as you scroll down the page.

Projet : Polices

Style the text of your image title and descriptions.

  • Police du titre de la légende
  • Caption Title Align: Left, Center, Right
  • Mettre le titre de la légende à l’échelle
  • Caption Title Min - Learn more about scaling fonts
  • Couleur du titre de la légende
  • Espacement du titre de la légende
  • Police du corps de la légende
  • Caption Body Align: Left, Center, Right
  • Mettre le corps de la légende à l’échelle
  • Caption Body Min - Learn more about scaling fonts
  • Couleur du corps de la légende

Mobile

Use these tweaks to set separate style options for your mobile site, or ensure they match the desktop styles for consistency.

Mobile : Barre

The mobile bar contains your title, logo, menu icon, and tagline.

  • Mobile Bar Position: Standard, Top Fixed, Bottom Fixed - Choose if the mobile bar scrolls up with the page, or stays fixed at the top or bottom of the screen.
  • Barre mobile transparente
  • Branding Position: Left, Center, Right
  • Menu Icon Position: Left, Right
  • Largeur du logo
  • Police du titre du site
  • Couleur du titre du site
  • Couleur de l'icône du menu
  • Tagline Position: Hide, Below Branding, Beside Branding
  • Police du slogan
  • Couleur du slogan
  • Espacement du slogan

Mobile : Menu

Set the colors and fonts for your mobile elements. 

  • Couleur d'arrière-plan
  • Couleur du titre du site
  • Couleur de l'icône du menu
  • Couleur du slogan
  • Police des liens principaux
  • Couleur des liens principaux
  • Police des liens secondaires
  • Couleur des liens secondaires
  • Espacement vertical

Mobile : Panier

The shopping cart can display in the navigation overlay.

  • Masquer
  • Style: Text, Cart, Bag
  • Police
  • Couleur
  • Couleur de la quantité
  • Couleur du texte de la quantité
  • Espacement du panier

Icônes

  • Icon Weight: Hairline, Light, Medium, Heavy - Set the line weight of the search and shopping cart icons.

Événements

Ces ajustements apparaissent sur les pages Événements.

  • Désactiver les pages Éléments
  • Afficher les événements passés
  • Afficher les miniatures 
  • Thumbnail Size 
  • Afficher le tag de date
  • Afficher le tag de date avec l’heure
  • Afficher les catégories
  • Show Date 
  • Afficher l’heure
  • Afficher la localisation
  • Afficher les liens d’exportation
  • Afficher les boutons sociaux
  • Afficher l’extrait 
  • Afficher le bouton
  • Show Back Link 
  • Heure au format 24 h
  • Vue empilée

Produits

Ces ajustements apparaissent sur les pages Produits avancées.

Produits : Disposition

  • Éléments par ligne
  • Espacement des éléments
  • Valeur de proportion de l’image
  • Effet en cas de survol d’un élément : Afficher l’image de remplacement, Fondu, Aucun
  • Espacement
  • Marge intérieure supérieure
  • Affichage de la navigation : Fil d’Ariane uniquement, Pagination uniquement, Fil d’Ariane et pagination, Aucun
  • Style de pagination : Précédent/Suivant, Titres
  • Alignement de la navigation : Gauche, Centre, Droite, Divisé
  • Police de la navigation
  • Couleur de la navigation
  • Couleur du séparateur de navigation

Produits : Détails

  • Position : Sous, Superposition
  • Position (mobile) : Sous, Superposition
  • Alignment: Center, Left 
  • Alignment: Top-Left, Top-Center, Top-Right, Center-Left, Center-Center, Center-Right, Bottom-Left, Bottom-Center, Bottom-Right 
  • Couleur de superposition
  • Marge intérieure de la superposition
  • Espacement
  • Afficher le titre
  • Police du titre
  • Couleur du titre
  • Couleur du titre (mobile)
  • Espacement du titre
  • Afficher le prix
  • Police des prix
  • Couleur des prix
  • Couleur des prix (mobile)
  • Couleur des prix promo
  • Couleur des prix promo (mobile)
  • Espacement des prix
  • Alignement : Gauche, Centre, Droite
  • Espacement
  • Afficher le titre
  • Police du titre
  • Couleur du titre
  • Afficher le prix
  • Police des prix
  • Couleur des prix
  • Couleur des prix promo
  • Afficher l’extrait
  • Position de l’extrait : Au-dessus du prix, En dessous du prix, En dessous du bouton Ajouter au panier
  • Police des extraits
  • Couleur des extraits
  • Couleur du lien Extrait
  • Afficher les boutons Partager

Produits : Trier + Filtrer

  • Affichage : Masquer, Haut, Côté gauche, Côté droit
  • Largeur
  • Marge
  • Espacement des éléments
  • Alignement : Gauche, Centre, Droite
  • Police
  • Couleur
  • Couleur active

Produits : Galerie

  • Position : Gauche, Droite
  • Design : Diaporama, Empilé
  • Largeur
  • Valeur de proportion
  • Alignement des miniatures : Gauche, Centre, Droite
  • Largeur des miniatures
  • Espacement des miniatures
  • Espacement

Produits : Options

  • Afficher les variantes
  • Afficher la quantité
  • Style : Texte uniquement, Carré, Arrondi, Pilule
  • Couleur des bordures
  • Couleur d'arrière-plan
  • Police des étiquettes
  • Couleur des étiquettes
  • Police
  • Couleur du texte

Produits : Bouton Ajouter au panier

  • Afficher le bouton
  • Style : Gras, Contour, En relief
  • Forme : Carré, Arrondi, Pilule
  • Marge intérieure : Petit, Moyen, Grand
  • Couleur
  • Couleur du texte
  • Police

Produits : Zoom Image

  • Activer le zoom d’image
  • Facteur de zoom
  • Zoom actif sur : Survol, Clic
  • Activer Lightbox

Produits : produits associés

  • Éléments par ligne
  • Espacement des éléments
  • Valeur de proportion de l’image
  • Alignement des détails
  • Espacement du titre de l’élément

Produits : Badges de statut

  • Style : Rectangle, Carré, Cercle, Aucun
  • Couleur Promo
  • Couleur Épuisé
  • Police
  • La marge intérieure
  • Position : En haut à gauche, En haut au centre, En haut à droite, Centre-gauche, Centre-centre, Centre-droite, En bas à gauche, En bas au centre, En bas à droite
  • Insertion : Flottant, Aligné, Ancrage vertical, Ancrage horizontal
  • Taille de l’insertion

Produits : Bouton Aperçu rapide

  • Style : Barre, Flottant, Ancré
  • Couleur
  • Police
  • La marge intérieure
  • Position : En haut, Au centre, En bas
  • Taille de l’insertion

Produits : Lightbox de l’aperçu rapide

  • La marge intérieure
  • Couleur de superposition
  • Couleur d'arrière-plan
  • Affichage des extraits : Tronquer, Masquer
  • Commandes : Afficher les flèches
  • Commandes : Afficher le bouton Fermer
  • Couleur des commandes
  • Épaisseur des commandes : Trait fin, Léger, Moyen, Épais
  • Taille des commandes

Options de l’album

Ces ajustements apparaissent sur les pages Album.

  • Couleur du texte de l’album
  • Masquer le lien de partage de l’album

Styles de la galerie

Ces ajustements apparaissent sur les pages Galerie standard.

  • Définissez la disposition avec le réglage Design de galerie.

Design de la galerie : Grille

  • Valeur de proportion
  • Espacement de la grille
  • Largeur de colonne minimale
  • Style de l’effet lightbox : Sombre, Clair

Design de la galerie : Diaporama

  • Navigation galerie : Miniatures, Puces, Numéros, Cercles, Simple, Aucun
  • Superposition Infos galerie : Toujours afficher, Afficher en cas de survol, Masquer
  • Gallery Aspect Ratio 
  • Styles des flèches de la galerie : Coins arrondis, Rectangulaire, Circulaire, Sans arrière-plan 
  • Transitions de la galerie : Fondu, Défilement
  • Afficher les flèches de la galerie
  • Recadrage automatique de la galerie 
  • Lecture automatique de la galerie 
  • Lecture en boucle de la galerie 
  • Vitesse de lecture automatique de la galerie (en secondes)
  • Gallery Thumbnail Size 
  • Arrière-plan des flèches de la galerie
  • Couleur des flèches de la galerie
  • Couleur du cercle de la galerie
  • Gallery Info Background.

Blog

Ces ajustements apparaissent sur les pages Blog en grille/empilées.

Blog : Métadonnées

Vous pouvez afficher jusqu’à deux éléments de métadonnées sur les pages Blog et sur les billets de blog.

  • Principal : Aucun, Catégorie, Auteur, Date, Localisation, Tags, Commentaires
  • Secondaire : Aucun, Catégorie, Auteur, Date, Localisation, Tags, Commentaires

Blog : Liste

  • Style : Grille, Empilé
  • Billets par ligne (max.) 
  • Spacing 
  • Show Separator 
  • Largeur du séparateur
  • Couleur du séparateur
  • Alignement : Gauche, Centre, Droite 
  • Espacement des éléments 
  • Show Image 
  • Image Aspect Ratio 
  • Max Image Width 
  • Afficher le titre
  • Afficher l’extrait
  • Read More Link: Hide, Inline, Below Text
  • Métadonnées : Au-dessus du titre, En dessous du titre, En dessous du contenu
  • Afficher l’intitulé de pagination
  • Afficher les flèches de pagination
  • Épaisseur des flèches de pagination : Trait fin, Léger, Moyen, Épais

Blog : Élément

  • Alignement : Gauche, Centre, Droite
  • Espacement des éléments
  • Metadata: Above Title, Below Title
  • Icônes de partage : Au-dessus du contenu, En dessous du contenu
  • Afficher les flèches de pagination
  • Afficher l’intitulé de pagination
  • Afficher le titre de pagination
  • Pagination Meta: Hide, Category, Author, Date, Location, Tags, Comments
  • Épaisseur des flèches de pagination : Trait fin, Léger, Moyen, Épais

Blog : Typographie et couleurs

  • Police du titre des listes
  • Police du titre des éléments
  • Couleur du titre
  • Police des métadonnées
  • Couleur des métadonnées
  • Police des extraits
  • Couleur des extraits
  • Police du lien Lire la suite
  • Couleur du lien Lire la suite
  • Police de l’étiquette Pagination
  • Couleur de l’étiquette Pagination
  • Couleur des flèches pagination

Boutons de partage

Ces ajustements apparaissent sur les billets de blog et sur les pages Informations sur le produit. Les types d’ajustements affichés dépendent de votre choix pour l’ajustement Style.

  • Style : Icône uniquement, Gras, Contour, En relief
  • Afficher les icônes
  • Afficher les libellés
  • Afficher le comptage
  • Arrondi
  • Taille
  • Espacement
  • Bordure : largeur
  • Bordure : couleur
  • Icônes : Couleur standard
  • Icônes : Couleur personnalisée
  • Arrière-plan : couleur standard
  • Arrière-plan : couleur personnalisée
  • Étiquette : police
  • Étiquette : couleur

Pages de couverture

Les pages de couverture possèdent leur propre style (indépendant du template du site). Pour en savoir plus, consultez l’article Personnaliser le style d’une page de couverture.

Block tweaks

Les ajustements de certains blocs sont également affichés dans le panneau Styles du site. Pour découvrir les options de style, consultez l’article Ajouter des contenus à l’aide de blocs et cliquez sur le nom du bloc à propos duquel vous souhaitez en savoir plus.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 2 sur 17
York Site Styles tweaks