---
title: "Preistabelle zu Carrd.co hinzufügen"
description: "Füge deiner Carrd-Website eine responsive Preistabelle mit Monats-/Jahres-Umschalter hinzu. Deckt kostenpflichtige und kostenlose Plugin-Optionen mit Schritt-für-Schritt-Setup ab."
date: 2023-11-27
categories: ["web-development"]
tags: ["carrd"]
---
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](https://try.carrd.co/bitdoze) 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](https://www.bitdoze.com/de/carrd-sticky-header-hinzufuegen/)
- [Carrd-Cookie-Hinweis hinzufügen](https://www.bitdoze.com/de/carrd-cookie-hinweis-hinzufuegen/)
- [Carrd.co Review](https://www.bitdoze.com/de/carrd-review/)
- [Akkordeon-FAQs zu Carrd.co hinzufügen](https://www.bitdoze.com/de/carrd-akkordeon-hinzufuegen/)
- [Eine eigene Domain zu Carrd.co hinzufügen](https://www.bitdoze.com/de/carrd-domain-verbinden/)
- [Responsive Carrd.co-Mobile-Navbar](https://www.bitdoze.com/de/carrd-mobile-navbar/)
- [Zurück-nach-oben-Button auf Carrd](https://www.bitdoze.com/de/carrd-zurueck-nach-oben-button/)
> Die komplette Liste der Carrd-Plugins, -Themes und -Tutorials findest du auf [carrdme.com](https://carrdme.com/).
## So fügst du die Preistabelle zu Carrd hinzu
Video: [How To Add Pricing Table to Carrd.co](https://www.youtube.com/embed/Q3UpuDDs0AY)
[Carrd-Plugins und -Themes](https://carrdme.com/)
### 1. Den Preistabellen-Code herunterladen
Gehe zu [CarrdMe pricing table](https://carrdme.com/) 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 ``-Sektion:
```css
: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](https://cssgradient.io/) 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 ``-Sektion:
```css
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:**
```html
$199.99
```
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:**
```js
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 `
- `-Elementen im HTML passen.
### 5. Feature-Listen bearbeiten
Jede Plan-Karte hat eine Liste von Features. Ersetze die `
- `-Einträge durch deine eigenen:
```html
1 TB Storage
5 Users Allowed
Send up to 10 GB
Unlimited
```
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:
```html
Get Started
```
### 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?
[Carrd.co](https://try.carrd.co/bitdoze)
## 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-`
- `-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](https://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](https://www.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.
[Carrd-Plugins und -Themes](https://carrdme.com/)