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

Famille de templates York

La famille de templates York (Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor et York) est conçue pour mettre en valeur le travail d’illustrateurs, de photographes, d’agences de création et d’autres créateurs de contenu visuel. Grâce à la page d’index en grille et aux pages Projet uniques, ces templates mettent à votre disposition les outils dont vous avez besoin pour présenter et partager vos créations.

Ce guide décrit les fonctionnalités et les options de design proposées par la famille de templates York. Les ajustements du panneau Styles du site sont en gras et renvoient vers la liste complète des ajustements York pour vous aider à naviguer dans le panneau.

Astuce : les pages d’aperçu en direct des templates Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori et York montrent des sites de client réels qui utilisent ces templates. 

Types de pages pris en charge

York prend en charge les types de pages suivants :

En-tête

Les visiteurs utilisent l’en-tête du site dans la partie supérieure de la page pour naviguer sur votre site. Dans les templates de la famille York, l’en-tête est composé de trois zones : la partie gauche, la partie centrale et la partie droite. Vous pouvez ajouter les éléments suivants à l’en-tête :

Personnalisez la disposition de l’en-tête dans la section Site : Disposition de l’en-tête :

  • Sélectionnez Disposition à gauche, Disposition centrée ou Disposition à droite pour choisir une disposition Horizontale ou Empilée. Pour que ces options apparaissent, vous devez ajouter au moins deux éléments dans la zone d’en-tête.
  • Choisissez le mode d’affichage de l’en-tête à l’aide de l’ajustement En-tête pleine largeur

Personnaliser l’en-tête

Personnalisez le style du contenu de l’en-tête avec les ajustements de la section Site : En-tête : 

  • Définissez la police et la couleur du titre du site à l’aide des ajustements Titre du site
  • Définissez la police et la couleur du slogan à l’aide des ajustements Slogan du site
  • Modifiez la taille du logo à l’aide de l’ajustement Hauteur du logo (max.)
  • Définissez la police, la couleur et le style du panier à l’aide des ajustements Panier

Personnalisez la navigation dans la section Site : Navigation :

  • Modifiez la navigation principale et la navigation secondaire à l’aide des ajustements Principal et Secondaire.
  • Affichez ou masquez l’icône caret à côté des menus déroulants à l’aide de l’ajustement Afficher l’indicateur de dossier.

folder_indicator_caret.png

Remarques concernant les en-têtes

Astuces : 

  • Définissez l’épaisseur du trait de l’icône de recherche et de l’icône Panier dans la section Icônes.
  • La couleur d’arrière-plan de l’en-tête suit la couleur d’arrière-plan du site. 
  • Un grand nombre de ces éléments disposent de styles mobiles distincts. 

En-têtes et pieds de page des pages

Les en-têtes de page et les pieds de page permettent de personnaliser chaque page. Pour ajouter des blocs, survolez le haut ou le bas de la page, puis cliquez sur Modifier dans l’annotation Contenu de l’en-tête de la collection ou Contenu du pied de page de la collection.

Les templates de la famille York comportent des en-têtes de page et des pieds de page sur les pages suivantes :

  • Pages Album
  • Pages Blog
  • Pages Événements
  • Pages Galerie
  • Pages d’index
  • Pages Produits
  • Pages Projet

Pour les afficher sur l’ensemble de votre site, sélectionnez Afficher l’en-tête de page et/ou Afficher le pied de page dans la section Page. Les blocs Texte qui se trouvent dans l’en-tête de page et dans le pied de page suivent les ajustements de la section Site : Typographie

À retenir :

  • Les en-têtes de page et les pieds de page ne sont pas pris en charge dans les éléments de collection spécifiques comme les billets de blog.
  • Lorsque vous partagez une page sur les réseaux sociaux, il est possible que le contenu de l’en-tête masqué ou du pied de page masqué apparaisse. Pour éviter cela, supprimez le contenu avant de masquer l’en-tête ou le pied de page.
  • Sur les pages d’un index, la navigation s’affiche en dessous du pied de page.

Pied de page du site

Pour activer le pied de page du site, sélectionnez Afficher le pied de page général du site dans la section Site : Pied de page. Pour ajouter des blocs, survolez le pied de page et cliquez sur Modifier. Si vous avez besoin d’instructions détaillées, consultez l’article Modifier les pieds de page.

Bannières de page

Ajoutez une image ou une vidéo de bannière en haut des types de page suivants : 

  • Pages Album
  • Pages Blog
  • Pages Événements
  • Pages Galerie (images uniquement)
  • Pages d’index
  • Pages Disposition
  • Pages Produits
  • Pages Projet

Pour ajouter une image ou une vidéo de bannière, ajoutez une image miniature ou une URL de vidéo dans l’onglet Médias des paramètres de la page. 

À retenir :

  • Ces bannières créent une navigation avec miniatures sur les pages d’index
  • Si la page n’a pas d’image miniature, la bannière affiche une couleur d’arrière‑plan. Vous devrez éventuellement modifier la transparence.
  • Les paramètres de la bannière sont appliqués à toutes les pages de ce type. Affichez ou masquez une bannière pour un type de page spécifique à l’aide des ajustements Bannière de la section Page.
  • Le titre et la description de la page peuvent apparaître en superposition de la bannière.
  • Les bannières prennent en charge le chargement de pages animées.

Bannière sur page d’accueil uniquement

Vous pouvez afficher une bannière sur votre page d’accueil et la masquer sur toutes les autres pages de ce type. Par exemple, si votre page d’accueil est une page Disposition, procédez comme suit :

  1. Accédez à la page d’accueil.
  2. Ouvrez le panneau Styles du site.
  3. Faites défiler le panneau jusqu’à la section Page.
  4. Désélectionnez Afficher la bannière de page. La bannière est alors masquée sur toutes les pages Disposition.
  5. Sélectionnez Afficher la bannière de page d’accueil. La bannière est alors affichée sur la page Disposition définie comme page d’accueil.

L’affichage du titre et de la description de la page est global. Par exemple, si vous sélectionnez Afficher le titre de la page, le titre de la page s’affiche sur la page d’accueil et sur toutes les autres pages Disposition.

Définir le style des bannières

Personnalisez le style des bannières dans la section Bannière. Ces ajustements affectent toutes les bannières de page de votre site.

  • Si une page a des images miniatures, définissez la hauteur de la bannière à l’aide de l’ajustement Hauteur.
  • Positionnez l’image dans la bannière avec l’ajustement Alignement de l’image
  • Si l’Alignement de l’image est défini sur Droite ou Gauche, utilisez l’ajustement Recadrer l’image pour couvrir la moitié droite ou la moitié gauche de l’image. Pour que toute la bannière soit remplie, définissez Alignement de l’image sur Centre et sélectionnez Recadrer l’image.
  • Sélectionnez Couleur d’arrière-plan automatique pour que la bannière utilise automatiquement une couleur d’arrière-plan de l’image miniature. Cette fonctionnalité est utile lorsque les illustrations ou les images ont une couleur d’arrière-plan prédominante, car cela donne l’impression que l’image s’affiche jusqu’aux bords de la bannière.
  • Pour étendre la bannière jusqu'aux bords du navigateur, cochez la case Bannière en pleine page.
  • Les bannières de la navigation de l’index disposent de leurs propres paramètres de style.

La Couleur d’arrière-plan est appliquée : 

  • sur les bannières qui n’ont pas d’images miniatures ;
  • pendant le chargement d’une image ou d’une vidéo de bannière ;
  • derrière les images miniatures qui ne couvrent pas l’ensemble de la bannière, si l’ajustement Couleur d’arrière-plan automatique n’est pas sélectionné.

banner_sample_1.png

banner_sample_2.png

banner_sample_3.png

banner_sample_4.png

Titres et descriptions des pages

En haut de toutes les pages, affichez le titre et la description de la page définis dans les paramètres de la page. Les pages Projet et les pages Galerie peuvent également afficher des catégories d’images spécifiques.

  • Ces paramètres sont appliqués à toutes les pages de ce type.
  • Masquez ou affichez le texte avec Titre, Descriptionet Catégorie dans la section Page.
  • Le texte peut apparaître en superposition de la bannière de page ou être affiché tout seul.
  • Pour masquer la description d’une page spécifique, supprimez-la dans les paramètres de la page.

Texte sur bannières et sans bannière

Vous pouvez choisir différentes options de style selon que le texte est affiché sur une bannière ou sur la page. La section Styles du site que vous utilisez n’est pas la même si votre page a une bannière ou non :

Appliquez un style au texte avec Titre, Descriptionet Catégorie.

Les options supplémentaires suivantes sont disponibles pour les pages sans bannière :

  • Définissez les marges latérales du texte à l’aide de l’ajustement Largeur du texte.
  • Définissez l’espacement au-dessus et en dessous du texte à l’aide de l’ajustement Hauteur du texte.

Les options supplémentaires suivantes sont disponibles si le texte s’affiche sur une bannière : 

  • Positionnez le texte dans la bannière avec l'ajustement Alignement.
  • Définissez les marges latérales du texte à l’aide de l’ajustement Largeur.
  • Ajoutez une couleur derrière le texte avec les ajustements Surbrillance. Définissez la largeur de la couleur d'arrière-plan avec Mettre en surbrillance le retrait du texte.

text_on_a_banner.png

Pages Blog

La famille de templates York utilise une page Blog grille/liste standard. Pour en savoir plus sur les fonctionnalités uniques et les options de style de ce type de blog, consultez l’article Pages Blog – grille standard/liste standard.

Pages Projet

Sur la page Projet, les images, les titres et les légendes sont organisés sous forme de dispositions élégantes. Il s’agit d’une solution de remplacement unique pour les pages Galerie, particulièrement si vous utilisez à la fois du texte et des images.

Pour en savoir plus, consultez l’article Les pages Projet

york-project.png

Pages d’index

Les pages d’index York créent des miniatures de navigation dans une bannière ou dans une grille qui permettent aux visiteurs d’accéder à différentes pages.

  • La grille de navigation affiche des images miniatures de pages. L’image miniature s’affiche dans la grille même si une page possède une bannière vidéo.
  • Vous pouvez ajouter une bannière de page, le titre de la navigation et un texte descriptif ainsi que des zones d’en-tête et de pied de page personnalisables.
  • Sur les appareils mobiles, les pages d’index affichent une miniature par ligne.
  • Les pages d’index ne suivent pas l’ajustement Largeur maximale du site.

index-with-page-banner-and-navigation-banners.png

Pages prises en charge

Vous pouvez ajouter les pages suivantes à un index : 

  • Pages Album
  • Pages Blog 
  • Pages Galerie
  • Pages Événements
  • Pages Produits
  • Pages Projet
  • Pages Disposition

Miniatures

Ajoutez une image miniature ou une URL de vidéo dans les paramètres d’une page pour l’afficher dans la miniature de la navigation de l’index. Personnalisez le style des miniatures dans Index : Image de l’élément :

  • Alignez l'image dans la miniature avec l'ajustement Alignement de l'image.
  • Couvrez la moitié droite, la moitié gauche ou l’intégralité de la miniature à l’aide de Recadrer l’image. Cette option est disponible si l’ajustement Alignement de l’image est défini sur Droite, Gauche ou Centre
  • Choisissez la quantité de couleur d’arrière-plan à afficher dans l’image avec l’ajustement Opacité de l’image
  • Modifiez l'opacité de l'image lorsque les visiteurs la survolent à l'aide de Opacité lors du survol.
  • Pour que toute la miniature soit remplie, sélectionnez Alignement de l'image : Centre et cochez Recadrer l'image.
  • Pour que les miniatures empruntent automatiquement une couleur d’arrière-plan à l’image ou à la vidéo miniature, sélectionnez Couleur d’arrière-plan automatique.
  • Choisissez la Couleur d’arrière-plan de l’élément à afficher dans les miniatures qui n’ont pas d’images ni de vidéos. Cet ajustement est disponible lorsque l’ajustement Couleur d’arrière-plan automatique n’est pas sélectionné.

La couleur d’arrière-plan des miniatures est appliquée :

  • lorsque les miniatures de navigation n’ont pas d’images ni de vidéos ;
  • derrière les images qui ne couvrent pas l’ensemble de la miniature ;
  • sur les images miniatures (si vous avez réglé leur opacité)

Disposition Miniature

Les miniatures de navigation de l’index peuvent s’afficher sous forme de bannières ou dans une grille. Personnalisez le style dans la section Index : Disposition.

  • Affichez les miniatures sous forme de bannières avec l'ajustement Largeur de l'élément. Choisissez Complet ou Moitié pour afficher une ou deux bannières par ligne. 
  • Définissez la hauteur des bannières à l'aide de l'ajustement Hauteur de l'élément.
  • Pour afficher les miniatures dans une grille, sélectionnez Largeur de l'élément : Grille. Utilisez les ajustements Colonnes et Ratio des miniatures pour personnaliser la grille.
  • Définissez l’espacement entre les bannières ou les vignettes des miniatures avec l’ajustement Espacement des éléments.
  • Sélectionnez  Index en pleine page pour que les miniatures s’affichent jusqu’au bord de la fenêtre du navigateur. Lorsque cette option n’est pas sélectionnée, les miniatures suivent la marge intérieure du site. Ceci affecte également la bannière de l’en-tête de page.
  • Sélectionnez Largeurs alternées pour alterner les lignes qui affichent une ou deux bannières. Cette option est disponible si les bannières sont définies sur Alignement de l’image : Centre et si Largeur de l’index est défini sur Complet ou sur Moitié.
  • Sélectionnez Côtés alternés pour alterner le côté sur lequel l’image est affichée. Cette option est disponible si les bannières sont définies sur Alignement de l’image : Droite ou Gauche et si Largeur de l’index est défini sur Complet.

Les miniatures d’index peuvent afficher le titre de la navigation pour chaque page ainsi que les catégories que vous avez ajoutées aux images dans les pages Galerie et Projet. Le titre de la navigation apparaît sur les miniatures de l’index, tandis que le titre de la page apparaît en haut de chaque page. Vous pouvez ainsi définir un texte différent pour chacun d’eux. 

Modifiez la police, la couleur et la taille du texte à l'aide de la section Index : Texte de l'élément.

  • Choisissez le mode d’affichage des titres avec Affichage du titre.
  • Pour masquer le texte de la catégorie, cochez Afficher les catégories.
  • Pour ajouter des couleurs d'arrière-plan personnalisables derrière le texte, cochez Utiliser l'arrière-plan du titre et Utiliser l'arrière-plan de la catégorie
  • Définissez l’emplacement d’affichage du texte avec l’ajustement Alignement du texte.

index_thumbnails_with_titles.png

Navigation

Pour personnaliser la navigation de l’index, accédez à une page de l’index, puis ouvrez le panneau Styles du site. 

La navigation est située en bas de toutes les pages d’un index. Pour la masquer, désélectionnez Afficher la navigation de l’index. Pour personnaliser son style, utilisez les ajustements de la section Index : Navigation : 

  • Définissez Style des liens sur Liste pour afficher toutes les pages de l’index sous forme de liens de navigation.
  • Définissez Style des liens sur Suivant pour afficher un libellé Suivant. Désélectionnez Afficher le libellé uniquement pour afficher le nom de la page suivante après le libellé Suivant.

link-style-list.png

link-style-next.png

Quel que soit le style, vous avez le choix entre Inline et Empilé pour afficher le texte. Vous pouvez également changer la couleur, la police et la mise à l’échelle du texte. Utilisez les autres ajustements dans Index : Navigation pour définir le style des liens, comme l’espacement, la police et la séparation entre les liens.

Chargement des pages

Les templates York prennent en charge Ajax, une méthode de chargement des pages qui rend votre site plus rapide en chargeant uniquement le contenu visible sur la page. Pour assurer une navigation fluide, il est conseillé de garder le chargement Ajax activé. Pour en savoir plus, consultez l’article Le chargement Ajax.

Les templates York prennent également en charge des animations de page spéciales :

  • Sur les pages Projet, les images et les légendes semblent glisser de bas en haut lorsque vous faites défiler la page vers le bas. Désélectionnez l’ajustement Afficher les images et les légendes en cascade pour supprimer cet effet.
  • Le contenu des pages d’un index semble glisser de bas en haut lors du chargement initial. Désélectionnez l’ajustement Animation de la transition entre les pages pour supprimer cet effet.
  • Les bannières de page se chargent avec un effet de fondu. 

Lorsque vous êtes connecté(e), les animations ne sont pas toutes visibles. Pour obtenir un aperçu des effets, consultez votre site en mode privé ou incognito.

image-sliding-up.gif

page_banner_fading_in.gif

Structure et style

Boutons de partage

Les billets de blog et les pages Informations sur le produit comportent des boutons de partage personnalisables :

  • Utilisez les ajustements de la section Boutons de partage pour définir leur taille, leur espacement, leur couleur et leur style. Selon le style que vous choisissez, d’autres ajustements vous permettent de personnaliser davantage les boutons.
  • Utilisez les ajustements de la section Produits : Détails pour définir l’affichage des boutons de partage des produits. Masquez les icônes des produits en désélectionnant Afficher les boutons de partage.
  • Sur les pages Blog, les boutons de partage s’affichent toujours en dessous des billets de blog.
  • Le bouton de partage Pinterest s’affiche uniquement sur les pages qui ont des images miniatures.
  • Les pages Album et Événements sont dotées d’un lien de partage avec des boutons de partage pop-up. Ces boutons ne suivent pas les styles personnalisés.  

Disposition et arrière-plan

Définissez la marge intérieure de votre site dans la section Site :

  • Définissez l’espacement entre le contenu du site et le haut du navigateur avec l’ajustement Espacement du site.
  • Définissez l’espacement entre le contenu du site et les côtés du navigateur avec l’ajustement Marge extérieure du site.
  • Si En-tête pleine largeur n’est pas sélectionné, l’en-tête suit les paramètres Alignement du site et Largeur maximale du site.
  • Définissez la couleur d’arrière-plan du site avec l’ajustement Arrière-plan du site

Polices

Personnalisez les polices de votre site grâce aux options Styles du site ci-dessous :

Vous pouvez configurer certains groupes de texte pour qu’ils soient mis à l’échelle en fonction de la largeur du navigateur. Procédez comme suit pour le texte Titre 1 :

  1. Dans la section Site : Typographie, sélectionnez Mettre à l’échelle le titre 1.
  2. Définissez la taille de police maximale à l’aide de Titre 1.
  3. Définissez la taille de police minimale à l’aide de Minimum du titre 1.

Pour chaque en-tête, nous vous conseillons de définir une taille de police minimale supérieure à la taille de police du corps de texte. Pour en savoir plus, consultez l’article Mettre les polices à l’échelle.

Barre latérale

Les templates York ne prennent en charge les barres latérales sur aucune page. Pour consulter la liste des templates qui comportent des barres latérales, consultez l’article Modifier les barres latérales.

Icônes sociales

Les templates York ne prennent pas en charge les icônes sociales intégrées. À la place, ajoutez un bloc Liens sociaux dans le pied de page ou dans le contenu de votre page.

Mobile

Grâce au design adaptatif intégré de Squarespace, votre site bénéficie d’un affichage optimal quel que soit l’appareil. Sur les appareils mobiles et les navigateurs de petite taille, le contenu est empilé verticalement.

Personnalisez l’apparence de votre site sur les appareils mobiles avec les ajustements de la section Mobile : 

  • Utilisez l’ajustement Position de la barre mobile pour choisir si la barre mobile doit défiler vers le haut en même temps que la page ou rester ancrée en haut ou en bas. La barre mobile contient le titre ou le logo de votre site, l’icône de navigation, le slogan et le panier.
  • Définissez l'emplacement du branding du site et de l'icône de menu avec Position de branding.
  • Le titre du site, le slogan, les liens de navigation et le panier peuvent tous avoir des styles mobiles distincts. Afin d’assurer la cohésion de votre branding sur les différents appareils, utilisez les mêmes styles que dans la section Site.
  • Définissez une image de remplacement pour appareil mobile qui s’affichera en cas d’échec du chargement de la bannière vidéo sur un appareil mobile. 
  • L’icône ☰ s’affiche toujours sur les appareils mobiles, même lorsque la navigation principale et la navigation secondaire sont vides.

À retenir :

smartphong-and-tablet-view.png

Options de langue

York prend en charge deux options de langue : 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 43 sur 96
Famille de templates York