Mini-tuto : cacher le header et le footer sur une page

Mis à jour le 9 juillet 2024 | Publié le 4 octobre 2021 | Temps de lecture : 2 min

Pour mettre en ligne une page d’attente jolie et travaillée de son site Squarespace, pour faire une landing page ou pour faire votre page de liens pour Instagram, il peut être utile de savoir comment cacher le header et le footer sur une seule ou plusieurs pages.

→ Nouveau : vous pouvez cacher l’en-tête et le pied de page directement depuis Squarespace !

Important

Depuis mars 2024, il est maintenant possible de cacher directement ces éléments dans les “Paramètres de la page” ! Il suffit de cliquer sur la petite roulette qui s’affiche en survolant votre page dans le menu, puis de cliquer sur “Navigation” et ensuite vous pouvez afficher ou non l’en-tête et le pied de page.

→ Ancienne version : comment cacher l’en-tête et le pied de page via du code

1/Vous avez l’abonnement basique

Ajoutez un bloc “Code” n’importe où sur la page souhaitée, et mettez-y ce code :

<style>.header, #footer-sections {display: none!important}</style> 

2/Vous avez un des abonnements supérieurs

Dans le menu “Pages”, allez dans les paramètres de la page souhaitée (via la petite roulette qui s’affiche au survol de celle-ci), cliquez sur “Avancé” et ajoutez ce code :

<style>.header, #footer-sections {display: none!important}</style> 

3/Important : si vous êtes sur l’ancienne version de Squarespace (la version 7.0)

Le code n’est pas exactement le même ! Voici la bonne version à mettre :

<style>
.Header, .Footer, .Mobile-bar{
 display:none !important;
}
</style>

Besoin d’aide ?

Pour toutes celles et tous ceux qui manquent de temps ou qui galèrent 😅, sachez que je propose des heures de visio.
Vous pouvez prendre rendez-vous en ligne et réserver un créneau en cliquant ci-dessous.

Tips

Découvrez également mes Fiches Squarespace, un condensé de mes best practices avec notamment un focus sur les codes CSS à connaître.