ajouter un bouton à une FAQ / bloc Accordéon dans Squarespace

Vous utilisez Squarespace pour créer votre site web et vous adorez la simplicité de l’outil ? Moi aussi ! 💁‍♀️ En revanche, simplicité ne veut pas dire rigidité ! J’adore les blocs Accordéon pour tous les usages que l’on peut en faire. En natif, il est possible d’ajouter du texte, un lien hypertexte, et… c’est tout ? 

Dans cet article, nous allons aller plus loin et voir ensemble comment personnaliser vos blocs Accordéon en y ajoutant un bouton ! Nous allons détourner l’usage du lien hypertexte pour le transformer en bouton cohérent avec le reste de votre identité visuelle.

pourquoi utiliser un bloc Accordéon natif sur son site Squarespace ?

Les blocs Accordion, que l’on appelle également “blocs FAQ”, ou plus traditionnellement “panneaux accordéon”, sont des éléments très interactifs, et très appréciés dans le design web. Ils permettent d'organiser de grandes quantités d'informations de manière compacte et hiérarchisée, offrant ainsi une meilleure expérience utilisateur. 

Quelques raisons pour lesquelles vous voulez utiliser des blocs Accordion sur votre site Squarespace :

Optimisation de l'espace : Les blocs Accordion permettent de révéler du contenu uniquement lorsque l'utilisateur clique sur un titre, ce qui économise de l'espace sur la page et évite de surcharger visuellement votre site. 👏

Amélioration de la lisibilité : En regroupant des informations connexes sous des titres clairs, les blocs Accordéon facilitent la lecture et la compréhension du contenu.

Facilitation de la navigation : Les utilisateurs peuvent rapidement trouver l'information qu'ils recherchent en parcourant les différents titres des accordéons - et vous pouvez les rediriger efficacement grâce aux dits boutons. 💁‍♀️

Personnalisation de l'expérience utilisateur : En permettant aux utilisateurs de choisir quelles informations ils souhaitent afficher, les blocs Accordéon offrent une expérience plus personnalisée.

Flexibilité : Les blocs Accordéon peuvent être utilisés pour présenter une variété de contenus, tels que des FAQ, des tutoriels, des spécifications techniques, des témoignages…

Esthétique : Les blocs Accordéon peuvent être stylisés pour s'intégrer parfaitement à votre design global et créer un aspect professionnel et moderne. C’est d’ailleurs ce que l’on va voir ensemble dans ce tuto !

les avantages à ajouter un bouton à votre bloc Accordéon et/ou FAQ

L'ajout d'un bouton à vos blocs Accordion peut sembler relever du détail… en revanche, il peut avoir un impact significatif sur l'efficacité de votre site et l'expérience utilisateur. La stratégie, encore et toujours ! Quelques avantages clés :

Appel à l'action clair : Un bouton bien conçu va inciter vos visiteurs à effectuer une action précise et spécifique que vous aurez décidé en amont : visiter une autre page de votre site, mais aussi s'inscrire à une newsletter, télécharger un freebie… Par ricochet, vous allez également améliorer la conversion de votre site.

Personnalisation de l'expérience utilisateur : En ajoutant des boutons personnalisés, vous pouvez créer des parcours utilisateurs uniques et adaptés à vos différents segments d'audience. Idéal pour rediriger votre cible en fonction de ses particularités !

Organisation du contenu : Les boutons peuvent être utilisés pour organiser le contenu de vos accordéons et faciliter la navigation. Par exemple, vous pouvez ajouter un bouton "En savoir plus" pour accéder à des informations supplémentaires, ou un bouton "Contact" pour entrer en contact avec votre équipe.

Amélioration de l'accessibilité : Les boutons peuvent être utilisés pour améliorer l'accessibilité de votre site en offrant des raccourcis vers des sections importantes du contenu. ⚠️ À noter que l’accessibilité est un point sur lequel Google a mis l’accent en 2024 dans ses critères algorithmiques… Un site accessible = un (très) bon point SEO !

vers le tutoriel vidéo pas à pas

le code à utiliser pour ajouter un bouton à un bloc FAQ / Accordéon :

.sqs-block-accordion .accordion-item__description a {
text-decoration: none; /*retire le trait sous le lien hypertexte*/
background-color: #d3552e !important; /*change la couleur du fond*/
padding: 10px 25px 10px 25px !important; /*ajoute du padding à l’intérieur du bouton*/
border-radius: 50px; /*ajoute du radius - facultatif*/
text-transform: none !important; /*change le style de texte none - uppercase - lowercase - capitalize*/
letter-spacing: 1px; /*ajoute de l’espace entre chaque lettre - facultatif*/
font-weight: normal; /*transforme en gras, lighter, normal, bold ou bolder*/
font-size: 1rem; /*change la taille du texte*/
color: #fff !important; /*change la couleur du texte*/ 
}
.sqs-block-accordion .accordion-item__description p {
padding-bottom: 10px; 
}

plus d’articles et de tuto 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 savoir coder !