4 exemples des codes personnalisés les plus populaires pour Squarespace

Squarespace est une plateforme robuste dotée d’options de personnalisation qui répondent à des styles et à des besoins professionnels variés. Ses fonctionnalités de pointe s’adaptent à un large éventail de cas d’utilisation, ce qui en fait un choix incontournable pour de nombreux entrepreneurs et créatifs comme vous. Mais lorsque vous rencontrez des problèmes particuliers qui ne peuvent pas être résolus par ces fonctionnalités intégrées, c’est là qu’il devient intéressant d’ajouter la magie du code.

Je m’appelle Rache et j’ai fondé Squarestylist, une bibliothèque de ressources créatives qui permet d’intégrer des éléments de design et du code à des sites web pour renforcer leur caractère merveilleux et inspirant. Avec un peu de code, je vais vous montrer ci-dessous comment réaliser quatre des personnalisations de sites web les plus demandées. 

Avant de nous lancer, il est préférable de consulter notre précédent billet de blog sur la façon d’ajouter du code personnalisé à votre site Squarespace. Celui-ci servira de rappel pour les meilleures pratiques lorsque vous ajouterez ce code, extrait après extrait. 

Remarque : ce contenu a été créé par un membre de Squarespace Circle et ne constitue pas une recommandation officielle de Squarespace. Le produit Squarespace évoluant fréquemment, le code Squarespace est susceptible d’être modifié à tout moment et Squarespace ne peut garantir que les exemples de code ci-dessous fonctionneront perpétuellement. Les équipes d’assistance client ne sont pas en mesure de résoudre les problèmes liés au code personnalisé ajouté aux sites web Squarespace. Une partie du code ci-dessous a été ajoutée par injection de code, fonctionnalité qui n’est disponible que dans certains forfaits Squarespace.

1. Ajouter un bouton « Faire défiler vers le haut »

La fonction de défilement vers le haut est un ajout pratique à votre site Squarespace, en particulier pour les pages plus longues. Elle permet aux utilisateurs de revenir facilement en haut de la page pour accéder au menu ou aux éléments de navigation. 

Voici les étapes à suivre pour ajouter un bouton de défilement accessible, avec personnalisation de marque. 

1. Faites défiler votre page vers le bas et modifiez le pied de page.

2. Ajoutez une image à n’importe quelle partie de votre pied de page. Cette image vous servira de bouton de défilement vers le haut. Vous pouvez choisir ou créer une image ou un élément graphique qui correspond à votre branding. Pensez à ajouter une flèche ou le texte « Défilement vers le haut » pour plus de clarté.

3. Définissez le texte de remplacement sur « Défilement vers le haut » pour l’ accessibilité.

4. Définissez le lien sur « #top » et assurez-vous que le bouton « Ouvrir le lien dans un nouvel onglet » est désactivé.

5. Pour ajouter la fonctionnalité qui fait n’apparaître le bouton que lorsque la page défile, ajoutez le premier extrait de code ci-dessous à Pages > Outils du site web > Injection de code > Pied de page.

6. Pour personnaliser votre bouton de défilement vers le haut,, vous pouvez ajouter du code CSS à Page > Outils du site web > CSS personnalisé.

Code : Étape 5

<script>

document.addEventListener(’DOMContentLoaded’,()=>{const b=document.body,l=document.querySelector(’footer a[href="#top"]’),f=l?.closest(’.fe-block’);f?.classList.add(’scroll-to-top’’);const t=()=>b.classList.toggle(’is-scrolled’’,window.scrollY>200);window.addEventListener(’scroll’’,t);t()});

</script>

Code : Étape 6

html.fe-block.scroll-to-top a@media screen and (min-width:768px){body.is-scrolled .fe-block.scroll-to-topbody.is-scrolled .fe-block.scroll-to-top abody:not(.sqs-edit-mode-active):not(.header--menu-open) .fe-block.scroll-to-topbody:not(.sqs-edit-mode-active):not(.header--menu-open) #footer-sections
.fe-block.scroll-to-top {
right:2vw;
bottom:2vw;
width:100px;
height:100px;
}

2. Changer la couleur de navigation de l’en-tête sur une seule page

La personnalisation de la couleur de navigation de l’en-tête d’une page est une demande courante, souvent nécessaire lorsqu’une page possède un arrière-plan ou une palette de couleurs unique. Avant d’appliquer un code personnalisé, explorons les fonctionnalités intégrées de Squarespace qui sont conçues pour répondre à cette exigence.

1. Cliquez sur Modifier l’en-tête du site et accédez à l’onglet Design.

2. Dans la section Couleurs, vous trouverez les options de style, dont Adaptatif.

3. L’option Couleurs adaptatives permet à votre en-tête d’adapter le thème de couleur de votre première section pour un meilleur contraste.

Vous pouvez également essayer les options Plein ou Dégradé pour un en-tête cohérent sur toutes les pages.

Si ces options natives ne répondent pas à vos besoins, vous pouvez utiliser un code personnalisé pour mieux contrôler les couleurs de votre en-tête et de ses éléments :

1. Accédez à la page dont vous souhaitez modifier la couleur d’en-tête.

2. Cliquez sur l’icône Paramètres à côté du nom de la page.

3. Dans l’onglet Avancé, vous trouverez la zone d’injection de code pour la page actuelle.

4. Collez le code ci-dessous en veillant à inclure les balises d’ouverture et de fermeture.

Code

<style>
:root {
--headerbg: #F4BAB5;
--headerText:#12294C;
}
/
*Change Header Background Color */
@media (min-width: 800px) and (hover: hover), (min-width: 1025px) {
.header-border {
    background: var(--headerbg);
}
}
/*Change Color  Header Nav Links on Desktop */
.header-display-desktop nav.header-nav-list a {
    color: var(--headerText) !important;
}
/*Change Color Header Nav Elements on desktop */
.header-display-desktop a.user-accounts-text-link.header-nav-item {
color: var(--headerText) !important;
}
 .header-display-desktop .header-title-text a {
color: var(--headerText) !important;
}
 .header-display-desktop .header-actions-action.header-actions-action--social svg {
fill: var(--headerText) !important;
}
 .header-display-desktop .Cart-inner path {
fill: var(--headerText) !important;
stroke: var(--headerText) !important;
}
 .header-display-desktop span.sqs-cart-quantity {
color: var(--headerText) !important;
}
</style>

Ce code utilise des variables CSS pour faciliter la personnalisation des couleurs. Vous pouvez modifier les codes couleur pour la couleur de fond et la couleur du texte. 

Lorsque vous attribuez ces couleurs, pensez à vos contraintes d’accessibilité, par exemple en veillant à ce que le contraste entre la couleur des éléments d’en-tête et la couleur d’arrière-plan de l’en-tête soit suffisant. Le code ci-dessus a été écrit pour n’affecter que l’affichage sur ordinateur, qui est probablement votre cible.

3. Masquer le titre du site sur la page d’accueil

Il peut parfois être nécessaire de masquer le titre de votre en-tête ou votre logo sur une page spécifique, généralement la page d’accueil. Cette situation peut se présenter si vous avez un logo bien visible dans la première section et que vous voulez éviter les répétitions.

Voici comment masquer le titre du site sur une page définie :

1. Sélectionnez la page dont vous souhaitez masquer le titre.

2. Cliquez sur l’icône Paramètres à côté du nom de la page.

3. Accédez à l’onglet Avancé.

4. Ajoutez le code ci-dessous dans la zone d’injection de code pour l’en-tête de la page.

Code

<style>
.header-display-desktop .header-title {
    display : none ;
}
</style>

4. Appliquer une image de curseur personnalisée

Ajouter un curseur personnalisé peut rendre votre site unique, mais il est important de le faire de manière réfléchie afin de garantir une bonne expérience utilisateur. Voici comment ajouter un curseur personnalisé à votre site Squarespace.

1. Préparer l’image de votre curseur.

• Elle doit être en dessous de 128 pixels en largeur ou en hauteur (30 à 50 pixels est généralement recommandé).

• Utilisez si possible un fichier SVG afin d’éviter la pixellisation. Un fichier PNG de petite taille convient également.

2. Charger l’image de votre curseur.

• Créez une page temporaire dans la section Pages non liées de votre site.

• Ajoutez un bloc Texte et insérez l’image de votre curseur en tant que fichier lié.

• Enregistrez, puis cliquez sur le lien pour obtenir le chemin du fichier.

3. Ajouter le code CSS personnalisé.

• Accédez à votre panneau CSS personnalisé.

• Collez le code ci-dessous et insérez le chemin de votre fichier entre guillemets.

Code

body:not(.sqs-edit-mode-active) {
  cursor:url(" "), auto;
}

Par défaut, ce code ne modifiera que le curseur par défaut, et celui-ci reviendra au pointeur standard pour le survol des liens et des boutons. Si vous souhaitez également un curseur personnalisé pour le survol, utilisez le code ci-dessous et téléchargez une image séparée pour le survol.

Code

body:not(.sqs-edit-mode-active) {
  a:hover, button:hover {
    cursor:url(""), pointer; 
  }
}

Les curseurs personnalisés peuvent apporter une touche unique à votre site web. Utilisez-les cependant avec prudence, et veillez en particulier à ne pas perturber l’expérience de navigation habituelle de vos utilisateurs.

Aller au-delà du copier-coller

Bien qu’il soit pratique de copier-coller ces extraits de code, il est recommandé de comprendre comment ils fonctionnent. Cette compréhension est essentielle pour résoudre les problèmes et apporter des modifications personnalisées à votre site Squarespace.

Si cela vous intéresse, consultez mon cours de base sur le CSS (gratuit pour les utilisateurs de Squarespace). Il aborde les fondamentaux du CSS, les cas d’utilisation courants de code dans Squarespace et les endroits où trouver de l’aide. 

J’espère que cette ressource vous a incité à ajouter vous-même des personnalisations bien pensées à votre site. Bonne programmation !