Dépannage pour Brine

Corrige les problèmes courants rencontrés dans la famille de templates Brine.

Dernière mise à jour le 12 décembre 2024

Voici quelques problèmes courants avec ce template. Certains sont des bogues ou des problèmes connus. Même si nous prenons toujours en charge la version 7.0 de Squarespace, la correction de bogues ou de problèmes n’est pas notre priorité. Nous nous concentrons sur notre plateforme actuelle, à savoir la version 7.1. Vous pouvez faire passer votre site de la version 7.0 à la version 7.1 à l’aide de notre outil de mise à jour.

Pour en savoir plus sur cette famille, consultez le guide des templates Brine ou la liste des templates Brine.

Ajouter un bouton à l’en-tête

Un bouton placé dans l’en-tête est un excellent moyen d’induire un comportement spécifique (générer du trafic sur une page, par exemple).

Vous pouvez procéder de deux façons pour ajouter un bouton dans un en-tête :

  • Utiliser la navigation : pour créer un appel à l’action dans votre navigation, conservez un seul lien dans votre navigation secondaire, puis personnalisez la navigation secondaire comme un bouton. Donnez à votre navigation principale un autre style.
  • Utiliser la zone intro : créez un appel à l’action sur des pages spécifiques en ajoutant un bloc Bouton dans la zone intro. Ajoutez un texte ou d’autres blocs pour mieux mettre votre message en évidence.

L’image ou la vidéo de bannière ne s’affiche pas

Dans les templates Brine, les bannières s’affichent sur la plupart des types de pages, mais elles ne sont pas prises en charge pour :

  • Les pages d’information pour les billets de blog, les produits et les événements.
  • Pages de couverture
  • Les images mises en avant ajoutées à la page Index principale. Vous pouvez aussi ajouter des images mises en avant aux sections de contenu dans l’index.
  • Il arrive parfois que les bannières vidéo ne s'affichent pas sur les appareils mobiles, en fonction de la vitesse de connexion et de la version du navigateur utilisé par les visiteurs. Définissez une image de remplacement pour appareil mobile, qui apparaîtra lorsqu'une bannière vidéo ne peut être chargée.

Si votre page n’affiche pas les bannières alors qu’elle les prend en charge, voici quelques étapes à suivre pour le dépannage :

  1. Dans les Paramètres de la page, cliquez sur l’onglet Médias.
  2. Pour les images de bannière, cliquez sur Image. Pour les bannières vidéo, cliquez sur Vidéo.
  3. Vérifiez que l’image ou la vidéo est bien présente.
  4. Cliquez sur Enregistrer et actualisez la page.

Si la bannière ne s’affiche toujours pas :

  1. Faites défiler le panneau Styles du site jusqu’à la section Principal.
  2. Augmentez la marge intérieure de l’intro (avec image d’arrière-plan).
  3. Dans la section Principal : Superposition, vérifiez si la Couleur de superposition n’est pas complètement opaque.
  4. Cliquez sur Enregistrer et actualisez la page.

Les bannières ne s’affichent pas en pleine page

En général, les bannières sont affichées en pleine page, c’est-à-dire jusqu’aux bords du navigateur. Si ce n’est pas le cas pour vos bannières, changez la disposition de votre site :

  1. Faites défiler le panneau Styles du site jusqu’à la section Site.
  2. Sélectionnez Design : pleine largeur ou Design : arrière-plan pleine page.
  3. Dans la section Site : Bordure, vérifiez que l’option Afficher la bordure n’est pas sélectionnée.
  4. Cliquez sur Enregistrer et actualisez la page.

Les billets de blog ne disposent d’aucune section Commentaires

Les commentaires du blog sont désactivés par défaut dans Brine, même si vous activez les commentaires dans un billet de blog individuel.

Pour activer les commentaires sur votre site :

  1. Ouvrez le panneau Préférences du blog.
  2. Cliquez sur Paramètres des commentaires.
  3. Cochez l’option Activer les commentaires globalement. D’autres paramètres apparaissent pour les commentaires.

Pour en savoir plus, consultez l’article Commentaires et mentions « J’aime » simples dans les blogs.

Modifier le texte du mois dans un calendrier de la page Événements

Dans la disposition Calendrier de la page Événements, le nom du mois est centré au-dessus de votre calendrier. La police, la taille et la couleur du mois suivent les ajustements de Titre 1. Pour modifier ces ajustements :

  1. Accédez à une autre page de votre site qui contient du texte Titre 1.
  2. Revenez dans le panneau Site web, puis cliquez sur Design et sur Styles du site.
  3. Recherchez les ajustements de Titre 1 sous Contenu : Polices et Contenu : Couleurs.
  4. Cliquez sur Enregistrer, puis revenez à la page Événements pour voir vos modifications.

Les colonnes ne s’affichent pas au bon endroit

Les colonnes uniques comportant une insertion de contenu se placent autour des blocs flottants.

Si le bloc flottant est plus haut que le contenu en une seule colonne, il peut interférer avec la mise en page du contenu multicolonnes ci-dessous. Pour régler ce problème, ajoutez un bloc Espaceur au-dessus du contenu multicolonnes.

KB Guide Image

Créer une image d’arrière-plan en pleine page

Vous pouvez utiliser une page Index pour créer l’effet d’une seule page avec une image d’arrière-plan :

  1. Créez une page Index.
  2. Ajoutez une section de contenu.
  3. Ajoutez une image mise en avant dans la section de contenu. L’image d’arrière-plan est alors créée.
  4. Ajoutez votre contenu de page dans la section de contenu. L’image mise en avant est alors superposée.
  5. Pour augmenter la hauteur, ajoutez des espaces dans un bloc Texte en bas.
page-background-brine.png

Créer une bannière en diaporama

Vous pouvez utiliser une page Index pour créer l’effet d’une bannière de page en diaporama :

  1. Créez une page Index.
  2. Cliquez sur Ajouter une section pour créer votre première section.
  3. Sélectionnez Galerie, puis ajoutez plusieurs images à la collection.
  4. Ajoutez une section Index de galerie avec plusieurs images comme première section.
  5. Dans la section Index : Galerie du panneau Styles du site, sélectionnez Disposition : Diaporama. Cet ajustement affecte toutes les sections de l’index de galerie de votre site.
  6. Dans la section Index : Galerie en diaporama, vérifiez que l’option Lecture automatique de la galerie est cochée.
  7. Ajoutez une section de contenu sous la section Index de galerie et ajoutez-y le contenu de votre page.
brine-slideshow-banner.gif

Désactiver le défilement avec effet parallaxe

Suivez pour cela les étapes ci-après :

  1. Accédez à une page avec une image de bannière.
  2. Faites défiler le panneau Styles du site jusqu’à la section Principal : Superposition.
  3. Décochez l’option Activer l’effet parallaxe.
  4. Cliquez sur Enregistrer et actualisez la page.

Ceci affecte l’ensemble de votre site.

Les menus déroulants n’apparaissent pas dans la navigation de pied de page

Les menus déroulants ne s’affichent pas tel quel dans la navigation en pied de page. En revanche, vous pouvez les afficher sous forme de colonnes distinctes avec le titre du menu déroulant comme en-tête.

Pour ajouter des menus déroulants à votre navigation, ajoutez l’option « menu déroulant » à la navigation principale ou à la navigation secondaire.

KB Guide Image

Le menu déroulant dans l’en-tête est tronqué

Si le dernier lien de navigation de votre site sur la droite est un menu déroulant, les titres des pages peuvent être tronqués. Cela arrive généralement sur les petits écrans (comme ceux des tablettes) ou lorsque l’ajustement de la marge intérieure du site est réduit. Pour résoudre ce problème :

  1. Dans le panneau Pages, recherchez l’option « menu déroulant » qui crée votre menu déroulant.
  2. Déplacez le menu déroulant dans la section Navigation principale. Tant que votre menu déroulant n’est pas en dernière position, les titres des pages s’afficheront dans leur intégralité.

Les couleurs d’arrière-plan du pied de page varient d’une page à l’autre

Ceci peut se produire quand la couleur d’arrière-plan de votre pied de page est partiellement ou complètement transparente. Sur les pages sans images mises en avant, la couleur du pied de page apparaît sur un fond blanc. Sur les pages comportant des images mises en avant, la couleur d’arrière-plan du pied de page s’affiche par dessus la couleur de votre zone de contenu principale.

Pour résoudre ce problème :

  1. Faites défiler le panneau Styles du site jusqu’à la section Pied de page.
  2. Assurez-vous que la couleur d’arrière-plan est complètement opaque.

La zone de blocs médiane du pied de page a disparu

Lorsque vous supprimez l’intégralité du contenu de la zone de blocs médiane, l’annotation disparaît parfois dans la vue Colonnes. Pour résoudre ce problème, passez temporairement à la disposition Empilé :

  1. Faites défiler le panneau Styles du site jusqu’à la section Pied de page.
  2. Sélectionnez Disposition : Empilé.
  3. Quittez le panneau Styles du site.
  4. Ajoutez le contenu à la zone de blocs médiane du pied de page.
  5. Rouvrez le panneau Styles du site et sélectionnez Disposition : Colonnes.
  6. Cliquez sur Enregistrer.

Les éléments de l’en-tête ne s’affichent pas correctement

Si trop d’éléments sont définis pour s’afficher dans la même zone de l’en-tête, ils peuvent se chevaucher sur les tablettes ou les navigateurs de petite taille.

Pour de meilleurs résultats, positionnez chaque élément dans une section différente de l’en-tête. Choisissez l’emplacement d’affichage de chaque élément dans la section En-tête : disposition du panneau Styles du site.

KB Guide Image

Les options d’en-tête ne s’affichent pas dans le panneau Styles du site

Certains ajustements ne s’affichent dans le panneau Styles du site que si votre site contient les éléments que ces ajustements modifient.

  • Navigation – Les ajustements apparaissent une fois que vous avez ajouté des pages ou des liens à votre navigation principale ou à votre navigation secondaire.
  • Panier et compte client - Les ajustements apparaissent une fois que vous avez créé une page Boutique. Le paiement express doit être désactivé.
  • Slogan – Les ajustements apparaissent une fois que vous avez ajouté un slogan.
  • En-tête : Bas – Cette section apparaît une fois que vous avez ajouté un ou plusieurs éléments à la moitié inférieure de l’en-tête, dans la section En-tête : Disposition.
  • En-tête : Haut – Cette section apparaît une fois que vous avez ajouté un ou plusieurs éléments à la moitié supérieure de l’en-tête, dans la section En-tête : Disposition.
  • Zone intro – Les ajustements apparaissent lorsque vous êtes sur une page qui prend en charge les zones intro.
  • Bannière – Les ajustements apparaissent lorsque vous êtes sur une page qui prend en charge les bannières.

Les titres sont parfois affichés sur deux lignes selon la largeur

Avec la famille Brine, certains titres sont affichés sur deux lignes lorsque la largeur du navigateur est d’environ 1 400 pixels et sur une seule ligne avec une largeur d’environ 1 120 pixels. Cela fait partie du design du template.

Les icônes et le titre du site se chevauchent sur les appareils mobiles

Si des éléments de votre barre de navigation mobile se chevauchent, déplacez quelques-uns d‘entre eux vers l’autre barre de navigation.

Par exemple, pour déplacer l’icône ☰ de la barre de navigation supérieure vers la barre inférieure :

  1. Faites défiler le panneau Styles du site jusqu’à la section Mobile : Icône du menu.
  2. Définissez la Position sur En bas (à gauche, à droite ou au centre).

Répétez ces étapes pour chacun des éléments qui se chevauchent.

move-icons.png

Les sections de l’index ne sont pas affichées à la hauteur du navigateur

Si vous souhaitez que certaines ou toutes les sections de contenu occupent toute la hauteur du navigateur, procédez comme suit :

  1. Faites défiler le panneau Styles du site jusqu’à la section Index : page.
  2. Utilisez lʼajustement Appliquer une hauteur minimum pour définir les sections concernées.
  3. Réglez la hauteur minimale sur 100 vh.

Si votre section ne couvre pas toute la hauteur du navigateur :

  • Ajustez les options Marge intérieure (pages de superposition) et Marge intérieure jusquʼà obtention de lʼeffet souhaité.
  • Si le contenu de la section (marge intérieure comprise) est plus large que la hauteur du navigateur, la hauteur d’origine est conservée.
  • L’ajustement Bordure en miroir peut également affecter l’affichage des premières sections.

Pour les sections Index de galerie :

  • Disposition : Diaporama – Cochez l’option Utiliser une hauteur fixe pour définir manuellement la hauteur.
  • La hauteur est déterminée automatiquement par le nombre et la taille des images de la galerie.

La bordure en miroir de la page Index n’a pas la couleur souhaitée

Dans les templates Brine, la couleur de la bordure en miroir est identique à celle de la page. Pour définir la couleur, utilisez l’ajustement Couleur dans la section Principal du panneau Styles du site.

Les images ne sont pas affichées sur toute la largeur du site

Les blocs Image ne suivent pas l’insertion de contenu. Ils s’affichent sur toute la largeur du site. Modifiez la largeur du site à l’aide de l’ajustement Largeur dans la section Site du panneau Styles du site.

Vous pouvez également cocher l’option Étirer dans l’éditeur de bloc Image pour que l’image s’affiche sur toute la largeur du bloc.

Astuce

pour créer des images pleine page sur les pages Index de la famille de templates Brine, vous pouvez ajouter soit une section de page Disposition avec une image d’arrière-plan, soit une section de page Galerie en diaporama.

KB Guide Image

Il y a un chevauchement de la barre d’informations pour mobiles

Si l’en-tête de votre site chevauche la barre d’informations pour mobile, vos visiteurs pourraient avoir du mal à parcourir votre contenu. Cela se produit lorsque l’ajustement Haut mobile fixe et la barre d’informations pour mobile sont tous les deux activés. Pour résoudre ce problème :

  1. Faites défiler le panneau Styles du site jusqu’à la section Mobile : Haut.
  2. Vérifiez que le paramètre Haut mobile fixe est désactivé.

Si vous préférez conserver l’ajustement Haut mobile fixe, vous pouvez alors supprimer la barre d’informations pour mobile à la place.

Le site mobile défile à l’horizontale

Le défilement peut s’effectuer à l’horizontale si vous avez zoomé sur la page. Actualisez votre navigateur mobile pour réinitialiser le zoom.

Si le problème persiste, la marge intérieure des côtés de votre site est peut-être inférieure à 17 pixels, auquel cas votre site mobile peut être plus large que la fenêtre du navigateur. Pour résoudre ce problème :

  1. Faites défiler le panneau Styles du site jusqu’à la section Site.
  2. La marge intérieure latérale doit être égale ou supérieure à 17 pixels.

Les styles mobiles n’apparaissent pas

Si vos paramètres de styles mobiles n’apparaissent par sur les appareils mobiles et dans Vue par appareil, il se peut que votre site passe en vue sur appareil mobile uniquement lorsque les navigateurs sont très étroits. Pour réinitialiser la largeur entraînant l’affichage mobile :

  1. Faites défiler le panneau Styles du site jusqu’à la section Mobile.
  2. Votre point de coupure mobile doit être égal ou supérieur à 640 pixels.
  3. Cliquez sur Enregistrer.

La barre de navigation n’a pas la couleur souhaitée

Si vous ajustez l’opacité de la barre de navigation inférieure, sa couleur dépendra de vos paramètres lorsque vous ferez défiler la page vers le bas. Si le site dispose d’une bordure, elle sera affichée au-dessus de la couleur en question. Sinon :

  • S’il existe une bannière de page, elle sera affichée au dessus de la couleur d’arrière-plan du site.
  • S’il n’existe aucune bannière, elle sera affichée au dessus de la couleur d’arrière-plan du pied de page.
mobile-banner-examples.png

Les images à effet parallax sont trop recadrées

Dans la section Principal : Superposition, cochez Recadrage automatique de la parallaxe. Lorsque cette option est cochée, les images de bannières sont recadrées suffisamment pour que l’affichage parallaxe soit possible.

L’apparence du titre du site est différente sur les appareils mobiles

Vous pouvez modifier l’affichage du titre de votre site selon l’appareil. Définissez un style de police différent pour les versions ordinateur et mobile grâce aux styles mobiles personnalisables de votre template.

Afin d’assurer la cohésion de votre image de marque sur les différents appareils, sélectionnez le même style de police dans les sections Mobile : Branding et En-tête : Branding du panneau Styles du site.

Les icônes sociales dans l’en-tête supérieur ne sont pas de la couleur choisie sur les pages Index

Si la première section de votre index est une galerie et que vous avez coché En-tête sur la première Galerie de l’Index, les icônes sociales de votre en-tête suivront automatiquement l’ajustement Couleur (superposition) dans Icônes sociales. Cet ajustement n’apparaît toutefois que lorsque vous définissez Position des icônes sociales dans En-tête : Disposition sur l’une des options d’en-tête inférieur. Par conséquent, les icônes sociales placées dans l’en-tête supérieur peuvent être dans une couleur inattendue que vous ne pourrez pas modifier.

Pour modifier cet ajustement de couleur, définissez temporairement Position des icônes sociales dans En-tête : Disposition sur l’une des options d’en-tête inférieur. Après avoir changé la couleur, replacez les icônes sociales dans l’en-tête supérieur.

Le texte est étroit et centré

Lorsque certains blocs se trouvent dans une seule colonne, ils sont automatiquement insérés au milieu de la page, avec des espaces blancs sur les côtés. C’est ce que l’on appelle l’insertion de contenu.

Pour supprimer l’insertion de contenu, réglez Insertion de contenu sur 0 dans la section Principal du panneau Styles du site.

KB Guide Image

Dans ce guide

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é.