So erstellen Sie eine responsive Squarespace-Preistabelle ohne benutzerdefiniertes CSS

Eine Preistabelle macht es Ihren Kunden leicht, auf einen Blick zu sehen, was sie für ihr Geld bekommen. Das ist wichtig – egal ob Sie SaaS-Tarife, Agenturpakete, Mitgliedschaften oder Abonnements verkaufen. Tatsächlich gaben in einer Zuora/Harris-Poll-Studie von 2024 80 Prozent der US-amerikanischen Erwachsenen an, dass Flexibilität beim Kauf und bei der Bezahlung wiederkehrender Produkte für sie „wichtig”, „sehr wichtig” oder „absolut unverzichtbar” sei.

Squarespace bietet jedoch keinen nativen Block für eine klassische Preistabelle mit Zeilen und Spalten. Sie können zwar eine eigene mit Text, Buttons und der Fluid Engine erstellen, müssen dies aber für Desktop- und Mobil-Layouts separat tun. 

Oder – falls Sie Ihren Nachmittag nicht damit verbringen möchten, drei Preisboxen auf zwei verschiedenen Bildschirmgrößen manuell auszurichten – zeige ich Ihnen einen weniger mühsamen Weg.

Option 1: Preistabelle mit nativen Squarespace-Layout-Blöcken erstellen

Squarespace verfügt bereits über einen Pricing-Plan-Block. Je nachdem, was Sie verkaufen, müssen Sie also möglicherweise gar keine Tabelle von Grund auf zusammenbauen. Der Block funktioniert mit Preisplänen für Mitgliedschaften und geschützte Inhalte, darunter Member Sites, Kurse, Videos und kostenpflichtige Blogs. 

Sie können kostenlosen, einmaligen, ratenbasierten oder wiederkehrenden Zugang anbieten und mehrere Plan-Blöcke nebeneinander platzieren, um eine Tarifübersicht zum Vergleich zu erstellen.

Wenn das zu Ihrem Angebot passt, gehen Sie wie folgt vor:

1. Preisplan erstellen: Erstellen Sie unter Products den Inhalt oder die Mitgliedschaft, die Sie verkaufen möchten, und legen Sie Preise und Zugangsregeln fest. Sie können auch Pläne erstellen, die mehrere berechtigte Inhalte bündeln.
2. Pricing-Plan-Block hinzufügen: Bearbeiten Sie Ihre Seite, klicken Sie auf Block hinzufügen (+), wählen Sie Pricing Plan und wählen Sie den erstellten Plan aus.
3. Plan gestalten: Wählen Sie unter Design, ob Titel, Beschreibung, Preis, Vorteile und Button angezeigt werden sollen. Fügen Sie weitere Blöcke hinzu, wenn Sie mehrere Pläne nebeneinander darstellen möchten.

Der Haken ist allerdings, dass der Pricing-Plan-Block von Squarespace an Mitgliedschaften und geschützte Inhalte gebunden ist. Für eine Preistabelle, die SaaS-Tarife, Agenturpakete, Freelancer-Retainer oder andere Dienstleistungen vergleicht, eignet er sich nicht.

Für solche Fälle ist die native Lösung die Fluid Engine: Hier bauen Sie jede Tarifstufe aus einzelnen Text- und Button-Blöcken auf und richten sie als Spalten aus. Allerdings müssen Desktop- und Mobil-Layout separat angepasst werden. 

Squarespace selbst schreibt in der Dokumentation, dass der Block dafür gedacht ist, Zugang zu geschützten Inhalten zu verkaufen – nicht um eine allgemeine Tarifübersicht für Pläne, Pakete oder Dienstleistungen zu erstellen.

Sie können auch Squarespace-spezifische Preistabellen-Plug-ins von unabhängigen Entwicklern kaufen. Will Myers beispielsweise verkauft eines für 25 $ pro Website mit drei voreingestellten Stilen und Squarespace-7.1-Unterstützung. Empfehlen würde ich es allerdings nicht, da es weder Teil des offiziellen Extensions-Marktplatzes von Squarespace noch eine offizielle Squarespace-Integration ist.

Option 2: Kostenloses, anpassbares Preistabellen-Widget hinzufügen

Verwenden Sie das Preistabellen-Widget von Jotform, wenn Sie lieber eine Vergleichstabelle statt mehrerer nebeneinander aufgereihter Karten haben möchten.

Mit dem visuellen Builder können Sie monatliche und jährliche Tabellen anlegen, Pläne und Features bearbeiten, jeden Call-to-Action (CTA) mit dem gewünschten Ziel verlinken und zwischen Karten-, Karussell- oder vollständigen Vergleichs-Layouts wählen. 

Außerdem können Sie eine empfohlene Tarifstufe mit einem Beliebt-Label hervorheben, Rabatte und durchgestrichene Preise hinzufügen sowie Farben, Typografie, Buttons, Spaltenbreiten und das mobile Verhalten anpassen. 

So starten Sie schnell und unkompliziert: 

1. Preistabelle erstellen: Fügen Sie Ihre Pläne, Preise, Features, Beschreibungen und CTA-Links hinzu. Sie können mehrere Tabellen anlegen (z. B. für monatliche und jährliche Preise) und Besuchern ermöglichen, zwischen ihnen zu wechseln.
2. Layout auswählen und gestalten: Wählen Sie eine Vorlage wie Modern Grid, Compact Columns, Classic Comparison oder Card Carousel und passen Sie das Design an Ihre Squarespace-Website an. 
3. In Squarespace einbetten: Klicken Sie auf Try It on Your Website for Free, kopieren Sie den generierten Einbettungscode und öffnen Sie dann Ihre Squarespace-Seite. Fügen Sie einen Code-Block hinzu, fügen Sie den Code als HTML ein, stellen Sie sicher, dass Display Source deaktiviert ist, und speichern und überprüfen Sie die Seite.

Jotform stellt die Preistabelle als einzelnes Embed bereit, sodass Squarespace sie nur noch anzeigen muss. Und vorerst fallen keine wiederkehrenden Widget-Kosten an: Jotform Website-Widgets sind bis 2027 kostenlos.

Wo Sie schon in der Widget-Bibliothek sind …

Hören Sie nicht bei Preistabellen auf. Mit Jotform Website-Widgets können Sie weitere Funktionen hinzufügen, darunter:

• Das FAQ-Widget für Fragen zu Preisen, Abrechnung, Kündigung, Features und Onboarding
• Das Google-Reviews-Widget, um Social Proof direkt neben der Kaufentscheidung zu platzieren – statt Besucher zu Google zu schicken, damit sie ihn dort selbst suchen
• Das Popup-Widget für Newsletter-Anmeldungen, Rabatte, Demos, Launch-Ankündigungen oder Exit-Angebote

Und nachdem die Preistabelle ihren Job erledigt hat, kann die Squarespace-Integration von Jotform den nächsten Schritt übernehmen – mit eingebetteten Registrierungs- oder Zahlungsformularen.