Les styles et les fonctionnalités de la famille de templates Brine.
Les templates de la famille Brine vous permettent de bâtir une présence en ligne professionnelle, quelle que soit votre marque ou votre entreprise. Personnalisez les en-têtes, le pied de page, l’insertion de contenu et les styles mobiles pour mettre en avant votre site. Vous pouvez ajouter des bannières pleine page aux pages de votre choix ou les empiler dans l’index. Le défilement avec effet parallaxe (facultatif) déplace les bannières plus lentement que le contenu des pages, créant une illusion de profondeur et d’immersion.
Ce guide décrit les fonctionnalités et les options de design proposées par la famille de templates Brine. Voir la liste des templates Brine.
Personnalisez votre site dans le panneau Styles du site. Dans ce guide, les ajustements de style et la section sous laquelle ils s’affichent dans le panneau Styles du site apparaissent en gras.
Pages prises en charge
Brine prend en charge les types de pages suivants :
- Pages Album
- Pages Blog – Grille/liste standard
- Pages de couverture
- Pages Événements
- Pages Galerie – Standard
- Pages Index – Empilées
- Pages Disposition
- Pages Boutique - Avancé
En-têtes
Les visiteurs utilisent l’en-tête dans la partie supérieure de la page pour naviguer sur votre site. Dans les templates Brine, l’en-tête est divisé en une section supérieure et une section inférieure.
- Ajoutez des éléments comme le titre ou le logo du site et les liens de navigation aux en-têtes supérieur et inférieur, en accédant à la section En-tête : Disposition du panneau Styles du site.
- L’en-tête inférieur accepte une image d’arrière-plan et une zone intro dans laquelle vous pouvez ajouter votre propre contenu.
Définir le style des en-têtes
Personnalisez l’en-tête supérieur à l’aide de ces ajustements dans En-tête : Haut :
- Fixez la hauteur à l’aide de l’ajustement Marge intérieure.
- Définissez la couleur à l’aide de l’ajustement Arrière-plan.
L’en-tête inférieur affiche les bannières de page sous forme d’images ou de vidéos d’arrière-plan. S’il n’y a aucune bannière, la couleur d’arrière-plan est la même que celle de la page (définie à l’aide de l’ajustement Couleur dans Principal).
Pour modifier la hauteur de l’en-tête inférieur :
- Toutes les pages – Modifiez la Marge intérieure dans En-tête : Bas et l’ajustement Marge intérieure de l’intro dans Principal.
- Pages individuelles – Augmentez la hauteur en ajoutant des sauts de ligne supplémentaires dans la zone intro.
- Pages Index – Modifiez la hauteur de la section Index supérieure.
Ajouter et personnaliser des éléments de l’en-tête
- Titre du site ou logo (« branding »)
- Slogan
- Liens de navigation
- Icônes sociales intégrées
- Barre de recherche
- Panier
- Lien Connexion/Mon compte
Pour choisir l’endroit où ils seront affichés ou les masquer, accédez à la section En-tête : Disposition du panneau Styles du site. Par exemple, sélectionnez Position Branding : En haut au centre pour ajouter le titre ou le logo de votre site au milieu de l’en-tête supérieur.
Pour personnaliser leur style, utilisez les ajustements proposés dans chaque section En-tête. Par exemple, accédez à En-tête : Navigation principale pour choisir la police et la couleur des liens.
- Pour les éléments de l’en-tête inférieur, définissez les couleurs (Superposition) pour qu’ils soient visibles sur les bannières.
- Choisissez si les éléments figurant dans la même zone (par exemple, En bas au centre) seront empilés ou non à l’aide des ajustements Disposition dans En-tête : Haut et En-tête : Bas.
- Configurez leurs styles mobiles distincts pour optimiser leur apparence sur les appareils mobiles.
Remarques concernant les en-têtes
Quelques conseils à retenir :
- Pour de meilleurs résultats, positionnez chaque élément dans une zone différente de l’en-tête. Les éléments peuvent se chevaucher si l’espace n’est pas suffisant.
- Certains ajustements s’afficheront uniquement une fois que les éléments qu’ils modifient ont été ajoutés à votre site.
- Si l’en-tête supérieur ne contient aucun élément, celui-ci ne s’affichera pas.
- Pour obtenir plus de conseils, consultez l’article Créer un en-tête de site.
Liens de navigation
Brine propose trois zones de navigation.
Les liens Navigation principale et Navigation secondaire :
- Peuvent s’afficher dans l’en-tête supérieur ou inférieur.
- Peuvent être personnalisés en utilisant les ajustements de style En-tête : Navigation principale et En-tête : Navigation secondaire. Par exemple, sélectionnez Style : Bouton pour personnaliser les liens de navigation principale et de navigation secondaire comme des boutons.
Les liens Navigation en pied de page :
- S’affichent dans le pied de page du site.
- Peuvent être personnalisés à l’aide des ajustements Pied de page : Navigation.
Bannières
Les bannières créent un effet visuel qui donne du caractère à votre page. Ajoutez des vidéos et des images mises en avant pour créer vos bannières.
Dans Brine, les bannières :
- S’affichent pour les pages Disposition et les pages de collection.
- Servent d’arrière-plan pour l’en-tête inférieur.
- S’affichent en pleine page, sauf pour la disposition Design : Limité.
- Peuvent défiler plus lentement que le reste de la page, grâce au défilement avec effet parallaxe.
- Ne s’affichent pas pour les éléments de collection (comme les billets de blog, les produits et les événements individuels).
Vous pouvez empiler plusieurs bannières dans une page d’index.
Définir le style des bannières
Définissez le style de vos bannières à l’aide de ces options :
- Ajoutez un filtre de couleur à l’aide de l’ajustement Couleur de superposition dans Principal : Superposition.
- Ajoutez un texte et d’autres blocs (comme les blocs Bouton) dans la zone intro.
- Pour changer la hauteur, modifiez la zone intro et ajoutez des sauts de ligne.
- Pour que les bannières défilent plus lentement que le reste de la page, utilisez l’ajustement Activer l’effet parallaxe dans Site : Chargement.
- Dans Styles du site, les ajustements (Superposition) affectent les éléments qui s’affichent sur les images de bannière, comme les liens de texte et de navigation.
Recadrage et centrage
- Si le défilement avec effet parallaxe est activé, utilisez l’ajustement Recadrage automatique de la parallaxe dans Site : Chargement pour assurer un recadrage minimal des bannières.
- Si les images sont coupées d’une manière inattendue, consultez nos conseils pour résoudre les problèmes de recadrage.
- Réglez le centrage des bannières en modifiant leur point focal. Pour vous assurer que votre image reste visible en faisant défiler la page, placez le point focal près du centre de l'image.
Remarques concernant les bannières
À retenir :
- La première image d’une page Galerie devient automatiquement l’image de la bannière si cette dernière n’a pas été définie. Vous pouvez la remplacer ou la supprimer en accédant aux paramètres de la page.
- Pour créer un effet de bannière de page en diaporama, utilisez un index avec une galerie en diaporama.
- Pour une aide sur des questions générales, consultez l’article Ajouter des images de bannière.
Zones intro
La zone intro de l’en-tête inférieur est une zone d’en-tête spécifique à chaque page que vous pouvez modifier en ajoutant du texte, des images et d’autres types de contenus. C’est un excellent moyen de personnaliser la partie supérieure de vos différentes pages.
Les zones intro s’affichent au-dessus des bannières de page et suivent l’insertion de contenu. Elles peuvent être utilisées sur toutes les pages, à l’exception des pages Disposition sans bannière et des pages Index.
Pour modifier l’intro :
- Survolez la zone située au-dessus du contenu de votre page et cliquez sur Modifier.
- Ajoutez du texte et d’autres types de contenus à l’aide des blocs.
La zone d’introduction peut afficher une marge intérieure supplémentaire lorsque vous modifiez votre site. Pour voir comment l’espacement de l’intro apparaît sur votre site actif, enregistrez vos modifications et affichez la page en mode aperçu.
Pied de page
Personnalisez le pied de page du site pour permettre aux visiteurs de trouver les informations dont ils ont besoin. Le pied de page Brine comporte les éléments suivants :
- Trois zones de blocs que vous pouvez personnaliser avec votre propre contenu.
- Une zone qui affiche vos Informations sur l’entreprise.
- Des liens de navigation en pied de page.
- Deux options de disposition (utilisez l’ajustement Disposition dans Pied de page).
Personnalisez les polices et les couleurs à l’aide des ajustements dans Pied de page. Pour masquer le pied de page, décochez l’option Afficher le pied de page.
Disposition : colonnes
Une zone de blocs, les informations sur l’entreprise et la navigation sont affichées horizontalement, avec une zone de blocs au-dessus et une autre en dessous. Dans le pied de page, les menus déroulants et les pages Index ne créent pas de menus déroulants, mais plutôt des colonnes. Les titres de la page Index et des menus déroulants s’affichent sous forme d’en-têtes (qui ne sont pas des liens) et les liens des sous-pages apparaissent en dessous.
Disposition : empilé
Les informations sur l’entreprise et la navigation sont affichées verticalement, avec une zone de blocs au-dessus, une intercalée et une autre en dessous. Les titres du menu déroulant et de la page Index ne s’affichent pas. Les liens des sous-pages sont affichés horizontalement.
Pages Blog
La famille de templates Brine utilise une page Blog standard en grille/liste. Pour en savoir plus sur les fonctionnalités uniques et les options de style de ce type de blog, consultez l'article Page Blog en grille/liste standard dans la version 7.0.
Pages Index
Dans Brine, les pages Index organisent le contenu de plusieurs pages en sections empilées. Ceci permet de mettre en avant simultanément différentes images et différentes informations.
- Les sections de contenu sont idéales pour afficher du texte, des boutons et d’autres blocs.
- Les sections Index de galerie affichent les images sous forme de grille ou de diaporama.
Sections de contenu
Les sections de contenu sont créées à partir des pages Disposition. Une fois vos sections de contenu ajoutées, vous pouvez les personnaliser à l’aide des blocs.
- L’insertion de contenu (facultatif) crée des espaces blancs supplémentaires autour des blocs.
- Si la section supérieure est une section de contenu, elle s’affiche dans l’en-tête inférieur.
Pour définir la hauteur minimale de certaines ou de toutes les sections, utilisez Appliquer une hauteur minimale dans Index : Page :
- Vous pouvez sélectionner cette option pour la première section uniquement, pour les pages avec bannières, pour toutes les pages ou pour aucune page.
- Utilisez Marge intérieure et Marge intérieure (pages de superposition) pour modifier la hauteur de toutes les sections.
- Si la hauteur du contenu de la page est supérieure à la hauteur minimale, la section est étirée pour s’adapter au contenu, marge intérieure comprise.
- Pour modifier la hauteur d’une seule section, rallongez le contenu de la page en y ajoutant des sauts de ligne.
Ajoutez des images mises en avant de page pour ajouter des images de bannière ou des vidéos d’arrière-plan aux sections.
- Les bannières peuvent proposer un défilement avec effet parallaxe.
- S’il n’y a aucune bannière, la couleur d’arrière-plan est la même que celle de la page (définie à l’aide de l’ajustement Couleur dans Principal).
Sections de l’index de galerie
Les sections Index de galerie sont créées à partir des pages Galerie. Une fois vos sections Index de galerie ajoutées, vous pouvez ajouter des images et des vidéos.
Dans la section Index : Galerie du panneau Styles du site :
- Choisissez d'afficher les sections Index de galerie sous forme de diaporamas ou de grilles avec l'outil Disposition.
- Pour modifier l’espacement ou créer des effets pleine page, décochez l’option Appliquer l’espacement sur les côtés et utilisez les ajustements Espacement.
- Définissez la forme des images à l’aide de la Valeur de proportion.
- Si la section supérieure est une galerie, utilisez Superposer l’en-tête de la première galerie de l’index pour choisir si l’affichage se fera derrière l’en-tête inférieur.
- Ajoutez un filtre de couleur aux images avec l’option Superposition de l’image.
- L’option Style de l’effet de survol détermine ce qui se passe lorsque vous survolez une image.
Les sections de l’index de galerie ne proposent pas le défilement avec effet parallaxe. Si l’effet parallaxe est activé, elles donnent l’impression de glisser par dessus les sections de contenu, qui se déplacent plus lentement.
Les vidéos d’une section Index de galerie affichent une image mise en avant. Si aucune image n’a été importée pour votre vidéo, l’index affiche une zone noire traversée par une ligne. Pour résoudre ce problème, ajoutez une image mise en avant à votre vidéo.
Navigation de l’index
Pour permettre aux visiteurs d’explorer votre index :
- Utilisez l’ajustement Index : Indicateur de défilement pour ajouter une flèche, une ligne ou un texte à la première section et inciter les visiteurs à faire défiler la page vers le bas (sections de contenu uniquement).
- Ajoutez des points ou des lignes de navigation en utilisant l’ajustement Style dans Index : Navigation. Lorsque les visiteurs cliquent sur un point ou sur une ligne, ils sont redirigés vers la section correspondante.
Ajouter de l’espace en dessous de la première section
Si votre site comporte une bordure, vous pouvez ajouter une ligne d’espacement correspondante sous la première section.
- Sélectionnez l’ajustement Cadre à effet miroir sous la première page dans Index : Page ou l’ajustement Cadre à effet miroir sous la première galerie dans Index : Galerie, selon le type de votre section supérieure.
- La deuxième section doit être une section de contenu sans bannière.
- La couleur de l’espacement est la même que celle de la page. Pour de meilleurs résultats, utilisez la couleur de la bordure.
Remarques concernant les pages d’index
À retenir :
- Les pages Index ne comportent pas de zone intro et les zones intro des sous-pages ne s’affichent pas.
- Dans les navigations d’en-tête, les pages Index créent un lien unique.
- Dans les pieds de page, les pages Index affichent tous leurs liens de sous-pages.
- Vous pouvez utiliser un index pour créer une bannière en diaporama ou une image d’arrière-plan en pleine page.
- Consultez nos conseils pour ajouter d’autres types de contenus.
- Consultez l’article Utiliser les pages Index pour en savoir plus.
Structure et style
Les options ci-dessous vous permettent de personnaliser l’apparence de votre site.
Chargement Ajax
Ajax est une méthode de chargement spéciale qui permet un affichage plus rapide et plus réactif des pages lourdes en contenu. Pour assurer une navigation fluide, il est conseillé de garder le chargement Ajax activé.
- Pour activer ou désactiver le chargement Ajax, utilisez l’ajustement Activer le chargement Ajax dans Site : Chargement.
- Personnalisez ou masquez la barre de chargement qui s’affiche lors du chargement des pages à l’aide des autres ajustements dans Site : Chargement.
- Parfois, Ajaxpeut créer un conflit avec un code personnalisé, des liens d’ancrage ou la fonctionnalité Outils d'analyse.
- Pour en savoir plus, consultez l’article Le chargement Ajax.
Bordure
Ajoutez et personnalisez le cadre du site présent autour de l’en-tête, de la zone de contenu principale et du pied de page à l’aide des ajustements Site : Bordure. Les pages de couverture n’affichent pas la bordure.
Polices
Personnalisez les polices de votre site grâce aux options Styles du site ci-dessous :
- Polices du site – Contenu : Polices et Contenu : Couleurs
- Texte des bannières – Tous les ajustements (superposition)
- Sections Index de galerie – Index : Galerie
- Éléments de l’en-tête – Dans leurs sections En-tête (par exemple, En‑tête : Branding)
- Pages Produits – Produits
- Pages Blog – Blog : Typographie et couleurs
Les liens hypertexte sont soulignés.
Défilement avec effet parallaxe
L’effet parallaxe est un effet de défilement spécial grâce auquel les images ou les vidéos d’arrière-plan se déplacent plus lentement que le contenu de la page. Les bannières des templates Brine proposent le défilement avec effet parallaxe.
Boutons de partage
Vous pouvez ajouter des boutons de partage sur la plupart des pages. Les visiteurs utilisent ces boutons pour partager votre contenu sur leurs profils de réseaux sociaux.
- Pages de Blog et de Boutique - Boutons de Partage avancé
- Pages Album et Événements – Liens de partage classiques
Barre latérale
Les barres latérales ne sont pas prises en charge par les templates Brine. Ajoutez des contenus supplémentaires au pied de page, à la zone intro et aux pages Disposition.
Largeur du site
Définissez la largeur à l’aide des ajustements dans Site :
- Définissez la largeur de la zone de contenu à l’aide de l’ajustement Largeur.
- La disposition que vous choisissez dans Design définit l’affichage de la zone de contenu.
- La bordure du site affecte également la disposition.
Dans les exemples ci-dessous, la largeur est définie sur 880 pixels. La couleur d’arrière-plan de la zone de contenu est définie dans la section Principal du panneau Styles du site.
Design : pleine largeur
Le contenu s’affiche sur toute la largeur du navigateur, moins la marge intérieure sur les côtés. Les bannières sont affichées en pleine page.
Design : arrière-plan pleine page
Le contenu s’affiche sur la largeur définie, moins la marge intérieure sur les côtés. Les bannières sont affichées en pleine page.
Design : largeur limitée
La couleur d’arrière-plan sélectionnée dans la section Site est appliquée en dehors de la zone de contenu. Les bannières sont affichées dans la zone de contenu.
Insertion de contenu
Utilisez l’insertion de contenu pour créer des mises en page attractives. Lorsqu’ils sont disposés en une seule colonne, certains blocs (comme les blocs Texte et Citation) sont plus étroits que d’autres contenus de la page (comme les blocs Image).
- Toutes les zones auxquelles vous pouvez ajouter des blocs en sont affectées, notamment les zones intro et le pied de page.
- Définissez la largeur en accédant à Insertion de contenu dans Principal.
- Pour supprimer l’insertion, réglez l’insertion de contenu sur 0.
- Pour en savoir plus, consultez l’article Insertion de contenu.
Couleurs d’arrière-plan
Utilisez les ajustements suivants pour définir les couleurs d’arrière-plan de votre site :
- Zone de contenu principale – Couleur dans Principal
- Marges latérales – Arrière-plan dans Site
- Bordure – Couleur dans Site : Bordure
- En-tête supérieur – Arrière-plan dans En-tête : Haut
- En-tête inférieur – Il correspond à la zone de contenu principale ou affiche une bannière
- Pied de page – Couleur d’arrière-plan dans Pied de page
- Sections de l’index – S’adapte à la zone de contenu principale ou affiche une bannière
- Derrière les images de bannière transparentes – Couleur de superposition dans Principal : Superposition, même si la couleur est définie sur transparent
Astuce : vous pouvez utiliser un index pour créer un effet d’image d’arrière-plan sur une page.
Cet exemple illustre la plupart des zones d’arrière-plan :
Mobile
Grâce au design réactif intégré de Squarespace, votre site bénéficie d’un affichage optimal quel que soit l’appareil. Dans Brine, vous pouvez personnaliser l’apparence de votre site sur les appareils mobiles et les navigateurs de petite taille.
Choisissez la largeur du navigateur à partir de laquelle votre site passe en affichage mobile. Pour cela, utilisez l’ajustement Point de coupure mobile dans Mobile. La valeur par défaut est 640 pixels.
Barres de navigation
Sur les appareils mobiles, les éléments de l’en-tête s’affichent en haut ou en bas des barres de navigation.
- Pour ajouter une barre supérieure ou inférieure, déplacez-y un élément de l’en-tête. Par exemple, accédez à la section Mobile : Branding du panneau Styles du site, puis sélectionnez Position : En haut à gauche pour ajouter la barre supérieure.
- Pour indiquer si la barre supérieure doit être fixée en haut de la page ou si elle doit défiler en même temps que la page, utilisez l’ajustement Haut mobile fixe dans Mobile : Haut.
- La barre inférieure est toujours fixe.
- Définissez les couleurs d’arrière-plan à l’aide des ajustements Mobile : Haut et Mobile : Bas.
Éléments de l’en-tête
Les éléments de l’en-tête de votre site s’affichent dans les barres de navigation et présentent des styles mobiles distincts.
- Pour personnaliser leur style, accédez aux sections Mobile correspondantes dans le panneau Styles du site. Par exemple, personnalisez le titre ou le logo du site à l’aide des ajustements dans Mobile : Branding.
- La navigation est réduite à l'icône ☰. La navigation principale et secondaire s'affichent lorsque vous appuyez sur l'icône ☰.
- Définissez la couleur d’arrière-plan de votre navigation à l’aide de l’ajustement Couleur du menu dans Menu mobile : Général.
- Les ajustements Bouton Fermer dans Menu mobile : Général personnalisent le symbole X qui ferme le menu de navigation.
- Les icônes sociales et les slogans ne s’affichent pas sur les appareils mobiles.
- En appuyant sur l’icône de recherche, vous voyez s’ouvrir une barre de recherche en superposition. L’arrière-plan de la superposition correspond à la couleur d’arrière-plan du site.
Bien que son style soit différent, le même élément s’affiche dans la version pour ordinateur et la version pour appareil mobile. Par exemple :
- Vous pouvez définir une couleur et une police différentes pour le titre de votre site mobile.
- Vous pouvez afficher votre barre de recherche sur mobile et la masquer dans la version pour ordinateur.
- Vous ne pouvez pas afficher le titre d’un site dans la version pour ordinateur et un logo sur un appareil mobile.
Remarques concernant la version mobile
À retenir :
- Les pages Boutique disposent d'options de styles pour mobiles.
- La navigation de l’index disparaît sur les appareils mobiles.
- Le défilement avec effet parallaxe fonctionne sur les appareils mobiles.
- Il arrive parfois que les bannières vidéo ne s’affichent pas si la vitesse de connexion est faible ou que la version du navigateur utilisé n’est pas très récente. Définissez une image de remplacement pour appareil mobile, qui apparaîtra lorsqu’une bannière vidéo ne peut pas être chargée.
- Les titres longs sont coupés et passent sur la ligne suivante.
- Contrairement à certains templates, les styles mobiles ne peuvent pas être désactivés.
- Découvrez nos conseils pour résoudre les problèmes liés aux bannières mobiles et au recadrage des images d’arrière-plan.
- Découvrez nos conseils généraux pour comprendre le comportement des sites sur les appareils mobiles.
Les templates de la famille Brine
Tous les templates de la famille Brine présentent les mêmes options de style et les mêmes fonctionnalités. Pour découvrir les templates Brine, consultez notre catalogue de templates de la version 7.0.
La famille Brine comprend les templates suivants :
- Aria
- Basil
- Blend
- Brine
- Burke
- Cacao
- Clay
- Template personnalisé (désormais non disponible)
- Ethan
- Fairfield
- Feed
- Foster
- Greenwich
- Hatch
- Heights
- Hunter
- Hyde
- Impact
- Jaunt
- Juke
- Keene
- Kin
- Lincoln (retiré)
- Maple
- Margot
- Marta
- Mentor
- Mercer
- Miller
- Mojave
- Moksha
- Motto
- Nueva
- Pedro
- Polaris
- Pursuit
- Rally
- Rover
- Royce
- Sofia
- Sonny
- Sonora
- Stella
- Thorne
- Vow
- Wav
- West
Options de langue
Brine prend en charge deux options de langue :