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

Les modèles 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 modèles Brine. Voir la liste des modèles Brine.

Personnalisez votre site dans le panneau Styles du site. Dans ce guide, les ajustements de style sont en gras et renvoient vers la liste complète des ajustements Brine pour vous aider à naviguer dans le panneau.

Astuce : la page d’aperçu en direct de Brine montre des sites de client réels qui utilisent ce modèle.

Pages prises en charge

Brine prend en charge les types de pages suivants :

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 modèles 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 à En-tête : disposition.
  • 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.

brine-topbottom.png

Définir le style des en-têtes

Personnalisez l’en-tête supérieur en accédant à 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 (Couleur dans Principal).

Pour modifier la hauteur de l’en-tête inférieur :

Ajouter et personnaliser des éléments de l’en-tête

Vous pouvez ajouter les éléments suivants à chaque section de l’en-tête :

Pour choisir l’endroit où ils seront affichés ou les masquer, accédez à En-tête : disposition. Par exemple, sélectionnez Position du signe de marque : 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, accédez aux sections de l’en-tête correspondantes. 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 individuellement leurs styles mobiles 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 :

Les liens Navigation de pied de page :

Bannières

Les bannières créent un effet visuel qui donne du caractère à votre page. Ajoutez des images et des vidéos miniatures pour créer vos bannières.

Dans Brine, les bannières :

Vous pouvez empiler plusieurs bannières dans une page d’index.

brine-banner.png

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 en utilisant 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, sélectionnez 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

Remarques concernant les bannières

À retenir :

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

brine-intro-area.png

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 :

Personnalisez les polices et les couleurs dans les sections 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. Les dossiers et les pages d’index créent des colonnes. La page d’index et les titres de dossier s’affichent sous forme d’en-têtes (qui ne sont pas des liens) et les liens des sous-pages apparaissent en dessous.

brine-footer-columns.png

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 des dossiers et des pages d’index ne s’affichent pas. Les liens des sous-pages sont affichés horizontalement.

brine-footer-stacked.png

Pages Index

Dans Brine, les pages d’index organisent le contenu de plusieurs pages en sections empilées, permettant ainsi de mettre en avant simultanément différentes images et informations.

  • Les sections de contenu sont parfaitement adaptées pour afficher du texte, des boutons et d’autres blocs.
  • Les sections de galerie affichent les images sous forme de diaporama ou de grille.

brine-index-sections-scroll.gif

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.

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 vos sections.
  • Si le contenu de la page est supérieur à la hauteur minimale, la section s’étire 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.

Les images miniatures vous permettent d’ajouter des images ou des vidéos de bannière dans l’arrière-plan des sections.

Les sections de galerie de l’index sont créées à partir des pages Galerie. Une fois vos sections de galerie ajoutées, vous pouvez ajouter des images et des vidéos.

Dans Index : Galerie :

  • Pour choisir si toutes les sections de galerie seront affichées sous forme de diaporama ou de grille, accédez à 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 une section de galerie figure en haut de la page, utilisez Superposer l’en-tête sur la première galerie d’index pour choisir si l’affichage se fera derrière l’en-tête inférieur.
  • Ajoutez un filtre de couleur aux images avec superposition d’images.
  • Le Style de survol détermine ce qui se passe lorsque vous survolez une image.

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

Navigation de l’index

Pour permettre aux visiteurs d’explorer votre index :

  • Utilisez 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 Style dans Index : navigation. En cliquant sur un point ou sur une ligne, les visiteurs sont redirigés vers la section correspondante.

brine-index-nav.png

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.

  • Cochez Bordure en miroir en dessous de la première page dans Index : page ou Bordure en miroir en dessous de 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 d’arrière-plan est la même que celle de la page (Couleur dans Principal). Pour de meilleurs résultats, cette couleur correspondra à celle de la bordure.

brine-mirror-site-border.png

Remarques concernant les pages d’index

À retenir :

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’option 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é Analyses et statistiques.
  • Pour en savoir plus, consultez l’article 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.

brine-border.png

Polices

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

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 modèles Brine proposent le défilement avec effet parallaxe.

Boutons de partage

Vous pouvez ajouter des boutons Partager sur la plupart des pages. Les visiteurs utilisent ces boutons pour partager votre contenu sur leurs profils de réseaux sociaux.

  • Pages Blog et Produits – Boutons Partage avancés
  • Pages Album et Événements – Liens de partage classiques

Les barres latérales ne sont pas prises en charge par les modèles 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 Principal.

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.

brine-full-width.png

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.

brine-full-background.png

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.

brine-constrained-width.png

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

brine-content-inset.png

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 :

brine-background-colors.png

Mobile

Grâce au design adaptatif 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 de navigateur à partir de laquelle votre site passe en affichage mobile. Pour cela, utilisez le Point de passage à l’affichage mobile dans Mobile. La valeur par défaut est 640 pixels.

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 un élément de l’en-tête. Par exemple, accédez à Mobile : signe de marque et 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 dans Mobile : haut et Mobile : bas.

brine-mobilebars.png

É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 définir leur style, accédez aux sections Mobile correspondantes. Par exemple, personnalisez le titre ou le logo du site dans Mobile : signe de marque.
  • La navigation est réduite au symbole ☰.
  • Définissez la couleur d’arrière-plan de votre navigation en accédant à 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 un titre de site dans la version pour ordinateur et un logo sur un appareil mobile.

Remarques concernant la version mobile

À retenir :

Les templates de la famille Brine

Tous les modèles de la famille Brine présentent les mêmes options de style et les mêmes fonctionnalités. Pour découvrir les modèles Brine, consultez notre catalogue de modèles.

La famille Brine comprend les modèles suivants :

  • Aria
  • Basil
  • Blend
  • Brine
  • Burke
  • Cacao
  • Clay
  • Modèle personnalisé (sites réalisés à l’aide du créateur de site personnalisé)
  • 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

Exemples de clients

Pour voir des exemples de sites de client réels, cliquez sur les liens ci-dessous et faites défiler jusqu’à la section Clients utilisant ce modèle. Tous les modèles de cette famille possédant les mêmes fonctionnalités, vous pouvez vous inspirer de ces exemples même si votre modèle ne se trouve pas dans la liste suivante :

Options de langue

Brine prend en charge deux options de langue :

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 98 sur 185
Famille de modèles Brine