Comment ajouter un bouton personnalisé sur Squarespace

Le bouton call to action est l’élément le plus stratégique d’une page d’atterrissage : chaque visiteur que vous dirigez vers le paiement, un formulaire de contact ou une ressource téléchargeable doit cliquer sur un bouton CTA pour y accéder. Et un bouton qui se démarque de la section environnante — grâce à sa propre couleur, une icône ou un effet au survol — obtient un taux de clics nettement supérieur à celui qui se fond dans le décor.

Squarespace dispose d’un bloc Bouton natif, mais sa mise en forme se fait depuis le panneau global Styles du site plutôt qu’en sélectionnant le bouton lui-même. Les boutons existent en trois types : primaire, secondaire et tertiaire. Chaque type est stylisé sur l’ensemble de votre site, ce qui vous donne trois designs de bouton au total. Modifier le style d’un bouton primaire s’applique à tous les boutons primaires de votre site, et il en va de même pour les types secondaire et tertiaire. Les options de personnalisation sont également limitées : pas de possibilité d’ajouter des icônes, des effets au survol ou des dégradés.

Il existe deux façons de donner à un seul bouton son propre design sans modifier tous les autres boutons de votre site. Vous pouvez écrire ou acheter du CSS personnalisé et le coller dans votre panneau CSS personnalisé pour cibler ce bloc spécifique, ou vous pouvez utiliser un widget hébergé gratuit, styliser le bouton dans un éditeur visuel et coller le code d’intégration dans un bloc de code.

Si vous êtes propriétaire d’un site Squarespace, marketeur ou designer et que vous souhaitez un bouton CTA personnalisé sur Squarespace sans écrire de CSS ni payer un développeur pour un extrait de code, ce guide vous explique comment ajouter un bouton sur Squarespace avec les deux méthodes — en commençant par la méthode CSS, puis le widget.

Option 1 : Utiliser les blocs natifs avec des extraits de CSS personnalisé

La méthode classique pour obtenir un bouton personnalisé sur une page Squarespace consiste à ajouter le bloc bouton natif, puis à remplacer sa mise en forme par votre propre CSS. Squarespace dispose d’un panneau CSS personnalisé prévu à cet effet, et cibler un bloc unique par son identifiant permet de limiter la modification à un seul bouton au lieu de tous les boutons du même type.

Voici comment ajouter un bouton sur Squarespace avec du CSS personnalisé :

1. Ouvrez la page dans votre éditeur, survolez la section dans laquelle vous souhaitez ajouter le bouton, cliquez sur Ajouter un bloc, puis choisissez Bouton.

2. Cliquez sur l’icône en forme de crayon ou double-cliquez sur le bouton pour définir votre texte et votre lien. Choisissez primaire, secondaire ou tertiaire, puis cliquez sur Enregistrer dans le coin supérieur gauche.

3. Ensuite, trouvez l’identifiant du bloc. Chaque bloc d’une page Squarespace possède un identifiant unique, et le placer devant votre CSS limite la modification à ce seul bouton personnalisé au lieu de l’appliquer à tous les boutons du même type. Vous pouvez le trouver en inspectant la page dans votre navigateur, en faisant un clic droit sur le bloc et en sélectionnant Inspecter, ou en utilisant l’une des extensions de navigateur gratuites permettant de trouver les identifiants Squarespace. 

4. En dehors de votre éditeur, accédez à Website dans la barre latérale, cliquez sur Pages, puis sur Custom Code, et sélectionnez Custom CSS.

5. Rédigez et enregistrez vos règles — ciblez cet identifiant de bloc, puis cliquez sur Save. Les styles natifs de Squarespace sont suffisamment spécifiques pour que vous ayez souvent besoin d’ajouter !important pour que les vôtres prennent effet. Une fois enregistré, ce bouton personnalisé s’affiche exactement comme vous le souhaitez, tandis que tous les autres boutons de votre site restent inchangés.

L’erreur de ciblage est le problème le plus courant : un extrait de code écrit pour « .sqs-block-button-element » sans identifiant de bloc devant modifie le style de tous les boutons natifs de votre site, y compris votre bouton CTA dans l’en-tête et vos boutons de paiement. Un autre problème fréquent concerne l’affichage sur mobile — des largeurs fixes et des tailles de police importantes qui rendent bien sur ordinateur peuvent faire déborder le bouton de l’écran du téléphone ou couper le texte en lignes d’une seule lettre.

Les extraits de code sont assez faciles à trouver, et les designers Squarespace en publient de nombreux gratuitement sur leurs blogs, bien que les effets de survol et d’animation les plus élaborés soient généralement vendus sous forme de modules complémentaires payants. Dans tous les cas, vous collez du code que vous n’avez pas écrit dans un panneau qui affecte l’ensemble de votre site, et vous êtes livré à vous-même pour le déboguer si quelque chose ne s’affiche pas correctement.

Option 2 : Ajouter un widget de bouton personnalisable gratuit (recommandé)

Créer le bouton dans un outil séparé constitue l’alternative au CSS personnalisé sur Squarespace, puisque vous placez un nouveau bouton call to action sur la page au lieu de modifier le style d’un bouton natif. Ici, vous configurez le bouton dans un éditeur visuel, copiez le code d’intégration et le collez dans un bloc de code sur votre page.

Avant de commencer, vérifiez votre forfait Squarespace. L’ajout d’un code d’intégration dans un bloc de code est une fonctionnalité premium qui nécessite le forfait Core ou supérieur. Avec le forfait d’entrée de gamme, le code reste dans le bloc mais ne fonctionne pas.

En ce qui concerne le widget à choisir, le widget Bouton de Jotform est un widget de bouton gratuit pour Squarespace qui vous offre plus de contrôle visuel que le bloc natif. Vous pouvez personnaliser indépendamment les couleurs de fond, de texte et de survol, ajouter une icône avant ou après le libellé, et ajuster le rayon des coins, la hauteur, les marges intérieures, la taille du texte et l’ombre. 

Voici comment ajouter un bouton sur Squarespace à l’aide du widget :

1. Sur votre page Espace de travail Jotform, cliquez sur Créer, sélectionnez Widget pour site web, recherchez « Button » puis cliquez sur Utiliser le widget.

2. Dans l’onglet Général, choisissez l’action du bouton — qu’il s’agisse d’ouvrir une page web, de lancer un e-mail ou d’ouvrir une conversation WhatsApp — puis saisissez l’URL de votre lien et le libellé du bouton. Passez à l’onglet Style pour les couleurs, les icônes et les formes, puis à l’onglet Mise en page pour choisir si le bouton est intégré ou flottant et s’il s’affiche sur ordinateur, sur mobile ou les deux.

3. Cliquez sur Publier, puis cliquez sur Copier le code dans la section Intégration. 

4. Dans votre éditeur Squarespace, cliquez sur Ajouter un bloc, choisissez Code, définissez le mode du bloc sur HTML, supprimez le texte indicatif, collez votre code et cliquez sur Save.

Comme le bouton est stylisé dans Jotform plutôt que dans votre panneau CSS personnalisé, il n’entrera pas en conflit avec vos styles globaux de site, et vos modifications n’affecteront pas les autres boutons de votre site. Tester une couleur ou un libellé différent revient simplement à modifier le widget au lieu de rechercher un identifiant de bloc et de réécrire un extrait de code.

Boostez votre site Squarespace avec des widgets intelligents et sans serveur

En tant que marketeur, propriétaire de site ou designer, votre temps est trop précieux pour le passer à rechercher un identifiant de bloc afin qu’un seul bouton CTA puisse se démarquer du reste de votre site. Un widget de bouton résout ce problème en quelques minutes, et vous pouvez le modifier ultérieurement sans avoir à retoucher votre panneau CSS personnalisé.

Un bouton n’est qu’un des nombreux éléments que vous pouvez ajouter à une page Squarespace sans extrait de code ni plug-in payant. Le répertoire de widgets gratuits pour sites web de Jotform propose plus de 150 options, notamment

• Un compte à rebours pour un lancement ou une date limite d’inscription, créant un sentiment d’urgence qu’un bouton statique ne peut pas générer
• Un popup pour l’offre d’inscription que vous ne pourriez autrement gérer qu’avec un plug-in premium
• Un flux de réseaux sociaux qui affiche vos dernières publications sur la page, pour qu’un site que vous mettez à jour occasionnellement ait toujours l’air actuel

Chacun de ces éléments s’intègre via un bloc de code de la même manière que le bouton. Cela signifie que vous n’avez pas besoin d’acheter un autre extrait de code ou plug-in chaque fois que vous souhaitez ajouter un élément supplémentaire à une page.

Si vous êtes encore en train de créer un site web ou de planifier une refonte, il est utile de savoir quels éléments vous pouvez ajouter ultérieurement sans faire appel à un développeur. L’intégration Jotform-Squarespace intègre des formulaires sur votre site de la même manière, de sorte qu’un bouton d’appel à l’action qui dirige les visiteurs vers une page d’inscription peut être relié au formulaire qui collecte leurs informations.

Quelle que soit l’alternative de bouton call to action Squarespace que vous choisissez, un bouton qui se démarque a plus de valeur qu’un bouton qui se fond dans le reste de la page. Le widget est simplement un moyen plus rapide et plus économique d’obtenir le clic.