So fügen Sie einen benutzerdefinierten Button in Squarespace hinzu

Der Call-to-Action-Button ist das wertvollste Element auf einer Landingpage – denn jeder Besucher, den Sie zur Kasse, zu einem Kontaktformular oder zu einer herunterladbaren Ressource leiten möchten, muss auf einen solchen CTA Button klicken, um dorthin zu gelangen. Und ein Button, der sich von seinem umgebenden Bereich abhebt – durch eine eigene Farbe, ein Icon oder einen Hover-Effekt – erzielt eine deutlich bessere Klickrate als einer, der im Design untergeht.

Squarespace verfügt über einen nativen Button-Block, allerdings gestalten Sie diesen über das globale Menü „Website-Stile” und nicht direkt am Button selbst. Buttons gibt es in drei Varianten: primär, sekundär und tertiär. Jede Variante wird seitenübergreifend gestylt, sodass Ihnen insgesamt drei Button-Designs zur Verfügung stehen. Wenn Sie einen primären Button umgestalten, wirkt sich das auf jeden primären Button Ihrer Website aus – und dasselbe gilt für die sekundäre und tertiäre Variante. Auch die Einstellungen selbst sind begrenzt: Es gibt keine Optionen für Icons, Hover-Effekte oder Farbverläufe.

Es gibt zwei Möglichkeiten, einem einzelnen Button ein eigenes Design zu geben, ohne alle anderen Buttons auf Ihrer Website zu verändern. Sie können eigenes CSS schreiben oder kaufen und es in das Feld „Benutzerdefiniertes CSS” einfügen, um gezielt diesen einen Block anzusprechen. Oder Sie nutzen ein kostenloses gehostetes Widget, gestalten den Button in einem visuellen Builder und fügen den Einbettungscode in einen Code-Block ein.

Wenn Sie Squarespace-Website-Betreiber, Marketer oder Designer sind und einen benutzerdefinierten CTA Button in Squarespace hinzufügen möchten – ohne CSS zu schreiben oder einen Entwickler für ein Code-Snippet zu bezahlen –, zeigt Ihnen diese Anleitung Schritt für Schritt, wie Sie einen Button in Squarespace einfügen. Wir behandeln beide Methoden: zuerst die CSS-Methode und anschließend das Widget.

Option 1: Native Blöcke mit benutzerdefinierten CSS-Snippets verwenden

Der Standardweg zu einem individuellen Button-Design auf einer Squarespace-Seite besteht darin, den nativen Button-Block hinzuzufügen und dessen Styling anschließend mit eigenem CSS zu überschreiben. Squarespace bietet dafür ein Feld für benutzerdefiniertes CSS, und indem Sie einen einzelnen Block über seine ID ansprechen, bleibt die Änderung auf diesen einen Button beschränkt – statt auf jeden Button desselben Typs.

So fügen Sie einen Button in Squarespace mit benutzerdefiniertem CSS hinzu:

1. Öffnen Sie die Seite in Ihrem Editor, bewegen Sie den Mauszeiger über den Abschnitt, in dem Sie den Button einfügen möchten, klicken Sie auf Block hinzufügen und wählen Sie Button.

2. Klicken Sie auf das Stift-Symbol oder doppelklicken Sie auf den Button, um Text und Link festzulegen. Wählen Sie primär, sekundär oder tertiär und klicken Sie anschließend oben links auf Speichern.

3. Ermitteln Sie als Nächstes die Block-ID. Jeder Block auf einer Squarespace-Seite hat eine eindeutige ID. Wenn Sie diese Ihrer CSS-Regel voranstellen, wird die Änderung auf genau diesen einen Button beschränkt, anstatt auf jeden Button desselben Typs angewendet zu werden. Sie finden die ID, indem Sie die Seite in Ihrem Browser untersuchen, mit der rechten Maustaste auf den Block klicken und Untersuchen wählen, oder indem Sie eine der kostenlosen Squarespace-ID-Finder-Browsererweiterungen verwenden. 

4. Gehen Sie außerhalb des Editors in der Seitenleiste auf Website, klicken Sie auf Seiten, dann auf Benutzerdefinierter Code und wählen Sie Benutzerdefiniertes CSS.

5. Schreiben und speichern Sie Ihre Regeln – sprechen Sie die jeweilige Block-ID an und klicken Sie dann auf Speichern. Die eigenen Stile von Squarespace sind so spezifisch, dass Sie häufig !important hinzufügen müssen, damit Ihre Regeln greifen. Nach dem Speichern sieht dieser eine Button genau so aus, wie Sie es möchten, während alle anderen Buttons auf Ihrer Website unverändert bleiben.

Das häufigste Problem ist eine fehlerhafte Zielausrichtung: Ein Snippet, das für „.sqs-block-button-element” ohne vorangestellte Block-ID geschrieben wurde, verändert das Styling jedes nativen Buttons auf Ihrer Website – einschließlich Ihres Header-CTA und Ihrer Checkout-Buttons. Ein weiteres häufiges Problem ist die Darstellung auf Mobilgeräten: Feste Breiten und große Schriftgrößen, die auf dem Desktop gut aussehen, können den Button auf dem Smartphone-Bildschirm verschieben oder den Text in einzelne Buchstabenzeilen umbrechen.

Snippets sind leicht zu finden – Squarespace-Designer veröffentlichen zahlreiche davon kostenlos in ihren Blogs. Die aufwendigeren Hover- und Animationseffekte werden allerdings häufig als kostenpflichtige Add-ons verkauft. In jedem Fall fügen Sie Code, den Sie nicht selbst geschrieben haben, in ein Feld ein, das Ihre gesamte Website betrifft – und wenn etwas nicht richtig aussieht, sind Sie beim Debugging auf sich allein gestellt.

Option 2: Ein kostenloses, anpassbares Button-Widget hinzufügen (empfohlen)

Den Button in einem separaten Tool zu erstellen, ist die Alternative zu benutzerdefiniertem CSS in Squarespace – denn Sie platzieren einen neuen Button auf der Seite, anstatt das Styling eines nativen Buttons zu überschreiben. Dabei richten Sie den Button in einem visuellen Builder ein, kopieren den Einbettungscode und fügen ihn in einen Code-Block auf Ihrer Seite ein.

Bevor Sie beginnen, prüfen Sie Ihren Squarespace-Tarif. Das Hinzufügen von Einbettungscode in einen Code-Block ist eine Premium-Funktion, die mindestens den Core-Tarif erfordert. Im Einsteiger-Tarif bleibt der Code zwar im Block, funktioniert aber nicht.

Was die Wahl des Widgets betrifft: Das Button-Widget von Jotform ist ein kostenloses Button-Widget für Squarespace, das Ihnen mehr visuelle Kontrolle bietet als der native Block. Sie können Hintergrund-, Text- und Hover-Farben unabhängig voneinander anpassen, ein Icon vor oder nach der Beschriftung hinzufügen und Eckenradius, Höhe, Innenabstand, Textgröße und Schatten einstellen. 

So fügen Sie einen Button in Squarespace mit dem Widget hinzu:

1. Klicken Sie auf Ihrer Jotform-Workspace-Seite auf Erstellen, wählen Sie Website-Widget, suchen Sie nach „Button” und klicken Sie dann auf Widget verwenden.

2. Legen Sie im Tab „Allgemein” fest, was der Button bewirken soll – ob er eine Webseite öffnet, eine E-Mail startet oder einen WhatsApp-Chat öffnet – und geben Sie dann Ihre Link-URL und die Button-Beschriftung ein. Wechseln Sie zum Tab „Stil” für Farben, Icons und Formen und dann zum Tab „Layout”, um festzulegen, ob der Button inline oder schwebend angezeigt wird und ob er auf Desktop, Mobilgeräten oder beidem erscheint.

3. Klicken Sie auf Veröffentlichen und dann im Bereich „Einbetten” auf Code kopieren. 

4. Klicken Sie in Ihrem Squarespace-Editor auf Block hinzufügen, wählen Sie Code, stellen Sie den Blockmodus auf HTML, löschen Sie den Platzhaltertext, fügen Sie Ihren Code ein und klicken Sie auf Speichern.

Da der Button in Jotform und nicht in Ihrem Feld für benutzerdefiniertes CSS gestaltet wird, kommt es zu keinen Konflikten mit Ihren globalen Website-Stilen, und Ihre Änderungen wirken sich nicht auf andere Buttons auf Ihrer Website aus. Um eine andere Farbe oder Beschriftung zu testen, bearbeiten Sie einfach das Widget – statt eine Block-ID aufzuspüren und ein Snippet umzuschreiben.

Optimieren Sie Ihre Squarespace-Website mit smarten, serverlosen Widgets

Als Marketer, Website-Betreiber oder Designer ist Ihre Zeit zu wertvoll, um sie mit der Suche nach einer Block-ID zu verbringen, nur damit ein einzelner CTA Button anders aussieht als der Rest Ihrer Website. Ein Button-Widget löst das in wenigen Minuten – und Sie können es später umgestalten, ohne erneut Ihr Feld für benutzerdefiniertes CSS anfassen zu müssen.

Ein Button ist nur eines von vielen Elementen, die Sie einer Squarespace-Seite ohne Code-Snippet oder kostenpflichtiges Plug-in hinzufügen können. Das Verzeichnis der kostenlosen Website-Widgets von Jotform bietet über 150 Optionen, darunter

• Einen Countdown-Timer für einen Launch oder eine Anmeldefrist, der Dringlichkeit erzeugt, die ein statischer Button nicht bieten kann
• Ein Popup für das Anmeldeangebot, für das Sie sonst ein kostenpflichtiges Plug-in benötigen würden
• Einen Social Feed, der Ihre neuesten Beiträge auf der Seite anzeigt – so wirkt eine Website, die Sie nur gelegentlich aktualisieren, trotzdem aktuell

Jedes dieser Elemente wird auf die gleiche Weise über einen Code-Block eingebettet wie der Button. Das bedeutet, dass Sie nicht jedes Mal ein weiteres Snippet oder Plug-in kaufen müssen, wenn Sie ein zusätzliches Element auf einer Seite haben möchten.

Wenn Sie gerade noch dabei sind, eine Website zu erstellen, oder einen Relaunch planen, lohnt es sich zu wissen, welche Elemente Sie später ohne Entwickler hinzufügen können. Die Jotform-Squarespace-Integration bettet Formulare auf die gleiche Weise in Ihre Website ein – so kann ein Button, der Besucher zu einer Anmeldeseite führt, nahtlos an das Formular übergeben, das ihre Daten erfasst.

Ganz gleich, für welche Squarespace-Call-to-Action-Alternative Sie sich entscheiden: Ein Button, der auffällt, ist mehr wert als einer, der sich in den Rest der Seite einfügt. Das Widget ist einfach der schnellere und günstigere Weg, den Klick zu gewinnen.