ajouter un bloc de défilement de texte sur sur son site Squarespace
Dans ce tutoriel, nous allons voir ensemble une nouveauté Squarespace 2022 : le bloc Défilement.
Jusqu’à présent, si l’on voulait intégrer ce type d’élément sur son site Squarespace, il fallait le coder à la main : mais SQ a décidé de nous simplifier la tâche en intégrant directement cette option dans les blocs préconçus.
Et pour les plus à l’aise, on va aller un peu loin et on va voir comment intégrer ce bloc en pleine page, sans les marges à gauche et à droite, grâce au code CSS. Si vous avez pas tout compris, pas de panique, on va décortiquer tout ça ensemble !
[L’article qui suit est une transcription de la vidéo associée !]
créer un bloc de défilement sur son site Squarespace (niveau débutant)
créer une section dédiée
Dans l’interface Squarespace de notre site, je vais ouvrir l'éditeur en haut à gauche. Pour intégrer le blog défilement, je vais rajouter une nouvelle section, à part, et vous allez comprendre pourquoi après. En cliquant sur “Ajouter une section”, je vais intégrer un élément vide par défaut.
Par défaut, Squarespace intègre automatiquement un bloc de texte. Je vais venir cliquer sur le petit “plus” pour ajouter un nouveau bloc.
intégrer le nouveau bloc “Défilement”
On retrouve en tête de page le nouveau bloc “Défilement”. On peut le retrouver également en bas de la liste des blocs proposés.
On peut changer les éléments en cliquant sur l’élément à modifier. Par exemple, on pourrait indiquer “nouveau” pour une boutique !
Si vous voulez intégrer des éléments spéciaux, comme des vagues ou des flèches, je conseille d'ouvrir un éditeur de texte, comme Google Docs. En cliquant sur “Insertion”, puis “Caractères spéciaux”, vous allez pouvoir chercher le type de caractère qui vous intéresse. Une fois le caractère spécial choisi, je le copie avec Controle + C. En revenant dans Squarespace, vous allez pouvoir le coller avec Control + V dans l’élément de texte.
modifier le design du bloc
Côté design, on peut changer également pas mal de choses. Comme l’intensité de l'onde, le style du texte... Le style des éléments est calqué sur vos vos paramètres de titres et paragraphes dans vos paramètres de Design.
En fonction de votre identité visuelle, vous allez pouvoir changer la taille du texte, l'orientation du défilement, la vitesse, l'espacement entre les différents éléments…
ajuster la taille de la section
Une immense section n’est pas forcément très esthétique pour ce type de bloc. Après avoir supprimé le bloc de texte inutile, dans les paramètres de section et on va venir, en hauteur de section, cliquer sur les trois petits points, et sélectionner le paramétrage le plus petit (10) pour créer un effet plus rapproché.
créer un bloc de défilement sur son site Squarespace et en ajuster la largeur en pleine page (niveau intermédiaire / avancé)
Pour ceux qui veulent aller plus loin et qui sont un petit peu plus à l'aise avec avec leur site, passons aux choses sérieuses !
intégrer le bloc et préparer la section
On va créer une nouvelle section et on va voir comment intégrer ce bloc, et cette fois, en pleine page. On allons refaire exactement la même chose : nouvelle section, ajouter un bloc de défilement, enlever le bloc de texte inutile.
De la même façon, on va sélectionner une hauteur de section minimum en cliquant sur les trois petits points, puis abaisser le paramètre au minimum. On enregistre bien avant de passer à l’étape suivante !
installer l’extension Chrome Find Squarespace IDs
Avant de venir intégrer le code CSS, nous allons avoir besoin de d'identifier le code de la section que l'on veut modifier.
Vous allez avoir besoin d'une extension Chrome qui s'appelle Squarespace ID Finder. Vous allez pouvoir l’installer directement en tapant son nom dans votre barre de recherche Google, puis en cliquant sur “Installer”.
Une fois que c'est fait, en revenant sur votre site, vous allez avoir accès, en haut à droite, au bouton correspondant à l’extension. En cliquant dessus, s’affichent tous les codes des blocs et sections de votre site Squarespace !
quelques notions de code CSS avec Squarespace…
Chaque partie de votre page web construite avec Squarespace est en fait une section. En haut de page, l’en-tête, de type “Collection”, puis la première section, et ainsi de suite.
Nous allons identifier le code de la section que nous voulons passer en pleine largeur. Vous pouvez déjà copier le code en cliquant sur l’encart, et le copier dans une appli de type bloc notes. Et on va garder cette information au chaud.
Intégrer le code CSS, pour basculer la section Squarespace en pleine largeur
Pour intégrer le code CSS, je vais aller dans mon interface générale Squarespace, puis Design, et CSS personnalisé.
Par simplicité, j’ai déjà collé le code à utiliser :
section[xxx] {
.content-wrapper {
padding-right: 0!important;
padding-left: 0!important;
max-width: 100%!important;
}
.sqs-row {
margin: 0!important;
}
.marquee-block {
padding:0!important;
}Mais on voit que qu’il ne sert à rien, puisque nous n’avons pas intégré le code de la section. Vous ne pouvez pas vous contenter de copier-coller ce bout de code, ça ne fonctionnera pas.
On va venir changer la référence de la section à laquelle ce bloc de code va s'appliquer. On vient récupérer le code de la section concernée, grâce à Squarespace Finder IDs, ou dans mon bloc-note… pour venir la coller :
section[data-section-id="600898c1453ae36bd089794"] {
.content-wrapper {
padding-right: 0!important;
padding-left: 0!important;
max-width: 100%!important;
}
.sqs-row {
margin: 0!important;
}
.marquee-block {
padding:0!important;
}Mon bloc de défilement s’est immédiatement transformé en bloc en pleine largeur : n’oubliez pas d’enregistrer votre code CSS !
Webdesigner et consultante Squarespace, j’accompagne et je crée pour mes clients des sites intelligents, stratégiques et haut de gamme. On travaille ensemble ?
Personnalisez en quelques clics et copier-coller votre site Squarespace : intégrer votre police, personnaliser les cookies… sans apprendre à coder !
