Een aangepaste knop toevoegen aan Squarespace

De call-to-action-knop is het meest waardevolle element op een landingspagina, aangezien elke bezoeker die je naar de afrekenpagina, een contactformulier of een downloadbare bron stuurt, er eerst op moet klikken. En een knop die opvalt ten opzichte van de rest van de sectie — met een eigen kleur, een icoon of een hover-effect — levert een merkbaar hogere klikfrequentie op dan een knop die opgaat in de omgeving.

Squarespace heeft een ingebouwd Button Block, maar je stijlt het vanuit het globale Site Styles-paneel in plaats van door de knop zelf te selecteren. Knoppen zijn er in drie typen: primair, secundair en tertiair. Elk type wordt over je hele site gestyled, dus je hebt in totaal drie knopdesigns. Als je een primaire knop opnieuw stijlt, geldt dat voor elke primaire knop op je site, en hetzelfde geldt voor de secundaire en tertiaire typen. De instellingen zijn op zichzelf ook beperkt, zonder opties voor iconen, hover-effecten of kleurverlopen.

Er zijn twee manieren om één knop een eigen ontwerp te geven zonder alle andere knoppen op je site te veranderen. Je kunt zelf CSS schrijven of kant-en-klare CSS kopen en deze in je Custom CSS-paneel plakken om dat specifieke blok aan te passen, of je kunt een gratis gehoste widget gebruiken, de cta knop in een visuele builder vormgeven en de embedcode in een codeblok plakken.

Ben je een Squarespace-site-eigenaar, marketeer of designer die een aangepaste CTA-knop op Squarespace wil zonder CSS te schrijven of een ontwikkelaar te betalen voor een codefragment? Dan laat deze gids je stap voor stap zien hoe je een knop toevoegt op Squarespace met beide methoden — te beginnen met de CSS-methode en daarna de widget.

Optie 1: Gebruik ingebouwde blokken met aangepaste CSS-fragmenten

De standaardmanier om een uniek knopontwerp op een Squarespace-pagina te krijgen, is het ingebouwde knopblok toevoegen en vervolgens de stijl overschrijven met je eigen CSS. Squarespace heeft hiervoor een Custom CSS-paneel, en door een enkel blok via het ID aan te spreken, blijft de wijziging beperkt tot één knop in plaats van elke knop van dat type.

Zo voeg je een knop toe op Squarespace met aangepaste CSS:

1. Open de pagina in je editor, beweeg de muis over de sectie waar je de knop wilt toevoegen, klik op Add Block en kies Button.

2. Klik op het potloodicoon of dubbelklik op de knop om je tekst en link in te stellen. Kies primair, secundair of tertiair en klik vervolgens op Save in de linkerbovenhoek.

3. Zoek vervolgens het blok-ID. Elk blok op een Squarespace-pagina heeft een uniek ID, en door dit vóór je CSS te plaatsen, beperk je de wijziging tot die ene knop in plaats van dat deze wordt toegepast op elke knop van dat type. Je kunt het vinden door de pagina te inspecteren in je browser, met de rechtermuisknop op het blok te klikken en Inspect te selecteren, of door een van de gratis Squarespace ID-finder browserextensies te gebruiken. 

4. Ga buiten je editor naar Website in de zijbalk, klik op Pages, dan op Custom Code en selecteer Custom CSS.

5. Schrijf en sla je regels op — richt je op dat blok-ID en klik vervolgens op Save. De eigen stijlen van Squarespace zijn specifiek genoeg, waardoor je vaak !important moet toevoegen om je regels effect te laten hebben. Eenmaal opgeslagen ziet die ene knop eruit zoals jij wilt, terwijl alle andere knoppen op je site ongewijzigd blijven.

Verkeerde targeting is het meest voorkomende probleem, aangezien een codefragment dat is geschreven voor “.sqs-block-button-element” zonder een blok-ID ervoor, elke native knop op je site opnieuw stijlt — inclusief je header-CTA en je afrekenknopen. Een ander veelvoorkomend probleem is hoe het eruitziet op mobiel — vaste breedtes en grote lettergroottes die er op een desktop goed uitzien, kunnen de knop van het telefoonscherm duwen of de tekst in regels van één letter breken.

Codefragmenten zijn makkelijk genoeg te vinden, en Squarespace-designers publiceren er genoeg gratis op hun blogs, hoewel de meer uitgebreide hover- en animatie-effecten vaak als betaalde add-ons worden verkocht. Hoe dan ook, je plakt code die je niet zelf hebt geschreven in een paneel dat je hele site beïnvloedt, en je staat er alleen voor als het gaat om het debuggen als er iets niet goed uitziet.

Optie 2: Voeg een gratis, aanpasbare cta knop-widget toe (aanbevolen)

De knop bouwen in een apart hulpmiddel is het alternatief voor aangepaste CSS op Squarespace, aangezien je een nieuwe knop op de pagina plaatst in plaats van de stijl van een native knop te overschrijven. Hierbij stel je de knop in via een visuele builder, kopieer je de embedcode en plak je deze in een codeblok op je pagina.

Controleer voordat je begint je Squarespace-abonnement. Het toevoegen van een embedcode aan een codeblok is een premiumfunctie waarvoor het Core-abonnement of hoger vereist is. Bij het instapabonnement blijft de code in het blok staan, maar werkt deze niet.

Wat betreft welke widget je het beste kunt kiezen: de Button Widget van Jotform is een gratis cta knop-widget voor Squarespace die je meer visuele controle geeft dan het native blok. Je kunt de achtergrond-, tekst- en hoverkleuren onafhankelijk van elkaar aanpassen, een icoon voor of na het label toevoegen, en de hoekradius, hoogte, padding, tekstgrootte en schaduw instellen. 

Zo voeg je een knop toe op Squarespace met de widget:

1. Klik op je Jotform Workspace-pagina op Create, selecteer Website Widget, zoek naar “Button” en klik vervolgens op Use Widget.

2. Kies onder het tabblad General wat de knop doet — of dat nu het openen van een webpagina is, het starten van een e-mail of het openen van een WhatsApp-chat — en voer vervolgens je link-URL en knoplabel in. Schakel over naar het tabblad Style voor kleuren, iconen en vormen, en dan naar het tabblad Layout om te kiezen of de knop inline of zwevend is en of deze wordt weergegeven op desktop, mobiel of beide.

3. Klik op Publish en klik vervolgens op Copy Code in het Embed-gedeelte. 

4. Klik in je Squarespace-editor op Add Block, kies Code, stel de blokmodus in op HTML, verwijder de plaatsaanduidingstekst, plak je code en klik op Save.

Omdat de knop in Jotform is gestyled in plaats van in je Custom CSS-paneel, conflicteert deze niet met je globale Site Styles en hebben je wijzigingen geen invloed op andere knoppen op je site. Een andere kleur of label testen betekent de widget bewerken in plaats van een blok-ID opzoeken en een codefragment herschrijven.

Geef je Squarespace-site een boost met slimme, serverloze widgets

Als marketeer, site-eigenaar of designer is je tijd te waardevol om te besteden aan het opzoeken van een blok-ID, zodat één cta knop er anders uit kan zien dan de rest van je site. Een knopwidget lost dat in een paar minuten op, en je kunt het later opnieuw stijlen zonder je Custom CSS-paneel weer aan te raken.

Een knop is slechts een van de vele dingen die je aan een Squarespace-pagina kunt toevoegen zonder een codefragment of een betaalde plug-in. De directory met gratis websitewidgets van Jotform heeft meer dan 150 opties, waaronder

• Een afteltimer voor een lancering of inschrijfdeadline, die urgentie creëert die een statische knop niet kan bieden
• Een popup voor het aanmeldaanbod waarvoor je anders een betaalde plug-in nodig zou hebben
• Een social feed die je nieuwste berichten op de pagina toont, zodat een site die je af en toe bijwerkt er toch actueel uitziet

Elk van deze widgets wordt op dezelfde manier via een codeblok ingesloten als de knop. Dat betekent dat je niet elke keer een nieuw codefragment of een nieuwe plug-in hoeft aan te schaffen wanneer je nog een element aan een pagina wilt toevoegen.

Als je nog bezig bent met het maken van een website of een herontwerp plant, is het handig om te weten welke onderdelen je later zonder een ontwikkelaar kunt toevoegen. De Jotform-Squarespace-integratie sluit formulieren op dezelfde manier in op je site, zodat een knop die mensen naar een aanmeldpagina stuurt, naadloos kan doorschakelen naar het formulier dat hun gegevens verzamelt.

Welk Squarespace call-to-action-alternatief je ook kiest, een cta knop die opvalt is meer waard dan een knop die bij al het andere op de pagina past. De widget is simpelweg een snellere en voordeligere manier om die klik te verdienen.