Preistabelle zu Carrd.co hinzufügen

Carrd bringt von Haus aus kein Preistabellen-Element mit. Wenn du Abo-Pläne mit einem Monats-/Jahres-Umschalter anzeigen willst, musst du eigenen Code einbetten oder ein Drittanbieter-Widget nutzen.

Dieses Tutorial behandelt das CarrdMe-Preistabellen-Plugin (5 $), das dir eine responsive dreispaltige Preistabelle mit Billing-Cycle-Umschalter gibt. Ich erwähne am Ende außerdem zwei kostenlose Alternativen, falls du Optionen vergleichen willst.

Du brauchst einen Pro-Standard-Plan (19 $/Jahr) oder höher. Das ist der niedrigste Carrd-Plan, der das Embed-Element für eigenen Code unterstützt.

Was ist Carrd.co?

Carrd.co ist eine Plattform zum Bauen einseitiger, responsiver Websites. Beliebt für persönliche Profile, Landing Pages und einfache Business-Websites wegen des niedrigen Preises und der einfachen Bedienung. Pläne starten kostenlos; der Pro-Standard-Plan für 19 $/Jahr schaltet eigene Domains, Formulare und Code-Embeds frei.

Mehr Carrd-Tutorials:

• Einen Sticky Header zu Carrd hinzufügen
• Carrd-Cookie-Hinweis hinzufügen
• Carrd.co Review
• Akkordeon-FAQs zu Carrd.co hinzufügen
• Eine eigene Domain zu Carrd.co hinzufügen
• Responsive Carrd.co-Mobile-Navbar
• Zurück-nach-oben-Button auf Carrd

Die komplette Liste der Carrd-Plugins, -Themes und -Tutorials findest du auf carrdme.com.

So fügst du die Preistabelle zu Carrd hinzu

1. Den Preistabellen-Code herunterladen

Gehe zu CarrdMe pricing table und lade das Plugin herunter. Es kostet 5 $ und enthält einen einzigen HTML/CSS/JS-Code-Block. Du kannst es auf unbegrenzt vielen Carrd-Websites nutzen.

2. Farben anpassen

Der Code nutzt CSS-Custom-Properties für die Haupt-Akzentfarbe. Suche diesen Block nahe dem Anfang der <style>-Sektion:

:root {
  --priceb-col-gr: linear-gradient(
    135deg,
    rgba(163, 168, 240, 1) 0%,
    rgba(105, 111, 221, 1) 100%
  );
}

Dieser Verlauf gilt für die Buttons, den Umschalter und das Highlight der Featured-Card. Ersetze die Farbwerte passend zu deiner Marke. Du kannst ein Tool wie CSS Gradient nutzen, um einen neuen Verlauf zu generieren.

3. Die Schrift anpassen

Die Standard-Schrift erbt von der Seite. Um eine spezifische Schrift zu nutzen, ändere diese Zeile in der <style>-Sektion:

font-family: inherit;

Ersetze inherit durch deinen bevorzugten Font-Stack, z. B. 'Inter', sans-serif.

4. Plannamen und Preise bearbeiten

Du musst zwei Stellen aktualisieren: die HTML-Anzeige und die JavaScript-Umschaltlogik.

HTML, die sichtbaren Preiswerte:

<li id="basic" class="price bottom-bar">&dollar;199.99</li>

Das zeigt den Standard-Preis (jährlich), weil der Umschalter auf „Annually” startet. Halte es gleich dem annual-Wert im JavaScript unten, das diese Werte austauscht, wenn der Besucher zwischen monatlich und jährlich umschaltet.

JavaScript, das Preis-Datenobjekt:

const prices = {
  basic: { monthly: "$19.99", annual: "$199.99" },
  professional: { monthly: "$24.99", annual: "$249.99" },
  master: { monthly: "$39.99", annual: "$399.99" },
};

Ändere die Plannamen (falls du sie umbenennst) und setze deine echten Preise. Die Keys (basic, professional, master) müssen zu den id-Attributen auf den entsprechenden <li>-Elementen im HTML passen.

5. Feature-Listen bearbeiten

Jede Plan-Karte hat eine Liste von Features. Ersetze die <li>-Einträge durch deine eigenen:

<li class="bottom-bar">1 TB Storage</li>
<li class="bottom-bar">5 Users Allowed</li>
<li class="bottom-bar">Send up to 10 GB</li>
<li class="bottom-bar">Unlimited</li>

Füge Einträge hinzu oder entferne sie nach Bedarf. Die bottom-bar-Klasse fügt eine Trennlinie zwischen den Zeilen hinzu, behalte sie also auf jedem Eintrag für konsistentes Styling.

6. Die Call-to-Action-Buttons aktualisieren

Jede Karte hat einen Button, der auf deine Checkout- oder Signup-Seite verlinkt. Ersetze die URL und den Label-Text:

<li>
  <a href="https://your-checkout-url.com"><div class="btn">Get Started</div></a>
</li>

7. Das Embed zu Carrd hinzufügen

Im Carrd-Editor:

1. Füge ein Container-Element in der Sektion hinzu, wo die Preistabelle stehen soll.
2. Füge innerhalb dieses Containers ein Embed-Element hinzu.
3. Setze Type auf Code und Style auf Inline, damit die Tabelle dort rendert, wo das Embed sitzt.
4. Füge den kompletten Code (HTML, CSS und JavaScript) in das Code-Feld ein.
5. Setze Container-Ausrichtung und -Abstände nach Bedarf.

8. Veröffentlichen und testen

Speichere deine Carrd-Website und veröffentliche sie. Die Preistabelle rendert nur auf der Live-Website. Carrds Editor führt eingebettetes JavaScript nicht aus.

Prüfe diese Dinge:

• Schaltet der Monats-/Jahres-Umschalter die Preise korrekt um?
• Zeigen alle drei Spalten die richtige Breite?
• Stapelt die Tabelle auf Mobile vertikal und bleibt lesbar?
• Verlinken die Buttons auf die richtigen URLs?

Troubleshooting

Preistabelle erscheint nicht: Stelle sicher, dass du auf Pro Standard oder höher bist. Die Free- und Pro-Lite-Pläne unterstützen das Embed-Element nicht. Bestätige außerdem, dass der Style des Embeds auf Inline steht. Mit Hidden verschiebt Carrd den Code an den Seiten-Head oder Body-Rand statt in deinen Container – die Tabelle landet dann außerhalb deines Layouts oder ist gar nicht sichtbar.

Umschalter wechselt die Preise nicht: Prüfe, dass die JavaScript-Objekt-Keys (basic, professional, master) exakt zu den id-Attributen auf den HTML-<li>-Elementen passen. Ein Tippfehler an einer der beiden Stellen bricht den Umschalter. Der Umschalter-Input nutzt außerdem die generische id="checkbox" und das Script deklariert const checkbox und const prices – wenn ein anderes Embed auf derselben Seite dieselbe ID oder Variablennamen nutzt, benenne sie in diesem Embed um (auch das for="checkbox" am Umschalter-Label).

Tabelle sieht auf Mobile kaputt aus: Der Standard-Code ist responsive, aber wenn dein Carrd-Container zu schmal ist, können die Spalten überlappen. Versuche, den Container zu verbreitern oder ein Media-Query-Override für kleinere Bildschirme hinzuzufügen.

Farben aktualisieren sich nicht: Stelle sicher, dass du die CSS-Variablen in :root bearbeitest, nicht irgendwo anders im Style-Block. Die Browser-DevTools (F12) helfen dir zu verifizieren, welche Styles tatsächlich angewendet werden.

Kostenlose Alternativen

Wenn das 5-$-CarrdMe-Plugin nicht das ist, was du brauchst, gibt es zwei kostenlose Optionen:

Jason’s Plugins für Carrd: plugins.carrd.co bietet eine kostenlose Preistabelle mit Hover-Effekten. Lade sie als Template herunter, öffne sie in Carrd und kopiere den Code des Embed-Elements in deine eigene Website. Erfordert Pro Standard.

Common Ninja: commoninja.com/widgets/pricing-tables/carrd gibt dir einen visuellen Editor zum Bauen einer Preistabelle und generiert dann einen Embed-Code, den du in Carrd einfügst. Der kostenlose Tier enthält Common-Ninja-Branding; bezahlte Pläne starten bei ein paar Dollar pro Monat, um es zu entfernen. Diese Option funktioniert gut, wenn du einen Drag-and-Drop-Editor statt Code-Bearbeitung willst.

Das CarrdMe-Plugin in diesem Tutorial ist ein guter Mittelweg: Es ist günstig (5 $, einmalig), hat kein Branding, gibt dir vollen Code-Zugriff, und der Monats-/Jahres-Umschalter ist eingebaut.