---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle"
locale: de
meta:
"og:title": "Academy Article"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Storefront-Funktionen](https://academy.laioutr.com/bereiche/storefront-funktionen)
- [Inhalt und Navigation](https://academy.laioutr.com/leitfaeden/inhalt-und-navigation)
- [Preisseite mit Plan Cards und Vergleichstabelle bauen](https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle)
# Preisseite mit Plan Cards und Vergleichstabelle bauen
Eine Preisseite entsteht in Studio aus dem Plan Card Slider für die Tarife und der Plan Comparison Table für den Funktionsvergleich. Ein Umschalter wechselt alle Karten zwischen monatlicher und jährlicher Abrechnung, die Tabelle filtert auf Unterschiede und hält ihre Kopfzeile sichtbar.
## Bevor du startest
- Tarif
- Laioutr-UI-Lizenz für das Projekt (Plattform-Variante)
- Rolle
- Editor oder Admin im Projekt
- Dauer
- 9 Min.
### Voraussetzungen
- Tarife mit Leistungen und Preisen als Vorlage
- Zielseiten für Anmeldung, Demo oder Kontakt
Zuletzt geprüft am 15. Oktober 2026
Für Abo- und SaaS-Angebote bringt Laioutr UI Bausteine für Preisseiten mit. Diese stellen Tarife transparent dar und führen direkt zur Anmeldung, zur Demo oder zum Kontakt.
### Plan Card und Plan Card Slider
Eine **Plan Card** zeigt einen Tarif mit Name, Preis, enthaltenen und nicht enthaltenen Leistungen, Anzahl der Nutzerplätze und einem Button. Bei jährlicher Abrechnung erscheint der günstigere Preis, der monatliche wird durchgestrichen. Der **Plan Card Slider** stellt mehrere Tarife auf Desktop nebeneinander und mobil als wischbares Karussell dar. Ein Umschalter zwischen monatlicher und jährlicher Abrechnung aktualisiert alle Karten gleichzeitig. Beträge erscheinen in Währung und Zahlenformat des aktiven Markts.
### Plan Comparison Table
Die **Plan Comparison Table** vergleicht alle Funktionen Zeile für Zeile. Funktionen lassen sich in Abschnitte mit Anker gruppieren, verlinken und auf Unterschiede filtern. Die Kopfzeile mit einem Button je Tarif bleibt beim Scrollen stehen.
## Schritt für Schritt
1. 1 ### Schritt 1: Seite anlegen
In Studio eine Seite für die Preise anlegen oder öffnen und oben eine kurze Einleitung mit Überschrift platzieren.
2. 2 ### Schritt 2: Tarife als Karten anlegen
Den **Plan Card Slider** einfügen und je Tarif Name, Preis, Preis bei jährlicher Abrechnung, enthaltene und nicht enthaltene Leistungen sowie Button-Text und Link pflegen.
3. 3 ### Schritt 3: Abrechnungsumschalter platzieren
Den Umschalter zwischen monatlicher und jährlicher Abrechnung über den Karten platzieren, nicht darin. So bleibt er mobil sichtbar, während durch die Karten gewischt wird.
4. 4 ### Schritt 4: Vergleichstabelle aufbauen
Darunter die **Plan Comparison Table** einfügen. Funktionen in Abschnitte gruppieren, jedem Abschnitt einen Anker geben und Funktionen bei Bedarf mit Detailseiten verlinken.
5. 5 ### Schritt 5: Buttons festlegen
Für jeden Tarif festlegen, wohin der Button führt: zur Anmeldung, zur Demo-Buchung oder zum Kontaktformular.
6. 6 ### Schritt 6: Mobil prüfen und veröffentlichen
In der Vorschau die Mobilansicht prüfen, durch die Karten wischen und die Tabelle scrollen. Mit **Save** den Entwurf sichern und mit **Publish** veröffentlichen, wenn alles passt.
## Ergebnis prüfen
In der Vorschau zwischen monatlicher und jährlicher Abrechnung umschalten und prüfen, ob alle Karten gleichzeitig wechseln. In der Vergleichstabelle nach unten scrollen, die stehende Kopfzeile prüfen und den Filter für Unterschiede ausprobieren.
## Häufige Fragen
Wie viele Tarife lassen sich darstellen?
Der Plan Card Slider nimmt beliebig viele Tarife auf, von zwei bis zu längeren Staffeln. Auf Desktop stehen die Tarife nebeneinander, mobil werden sie zum Karussell mit Punkten zur Orientierung.
Muss jeder Tarif direkt online buchbar sein?
Nein. Der Button jeder Karte und jeder Spalte führt zu einem frei wählbaren Ziel, etwa zur Anmeldung, zu einer Demo-Buchung oder zum Kontaktformular.
Wie lassen sich gemeinsame Funktionen ausblenden?
Die Vergleichstabelle hat einen Filter, der nur Zeilen mit Unterschieden zwischen den Tarifen zeigt. So konzentriert sich der Vergleich auf das, was die Entscheidung beeinflusst.
Welche Währung zeigen die Karten?
Beträge werden in Währung und Zahlenformat des aktiven Markts ausgegeben. Für weitere Märkte ist keine eigene Karte nötig.
## Passend dazu
- [Growth Kits: Bausteine je Geschäftsmodell](https://academy.laioutr.com/artikel/growth-kits-bausteine-je-geschaeftsmodell)5 Min.
Growth Kits sind Pakete aus Sections, Blocks, Seitenvorlagen und Funktionen für ein Geschäftsmodell: Shop, Content, Booking, Marketplace, Retail und Multichannel, SaaS, Publisher und Listen. Teams kombinieren mehrere Kits in einem Projekt und finden die Bausteine im Studio in der Section-Bibliothek.
- [Landingpage aus vorhandenen Sections bauen](https://academy.laioutr.com/artikel/landingpage-aus-vorhandenen-sections-bauen)10 Min.
Eine Landingpage entsteht in Studio als Seite vom Typ Landing Page mit eigenem Pfad und wird aus installierten Sections zusammengesetzt: Hero, Inhalte, Produktslider mit Shopdaten, Header und Footer als globale Sections.
- [Märkte und Übersetzungen in Studio pflegen](https://academy.laioutr.com/artikel/maerkte-und-uebersetzungen-in-studio-pflegen)6 Min.
Sprachen und Märkte werden in Cockpit unter Translations und Markets angelegt, Studio nutzt sie im Markt- und Sprachwähler. Übersetzbare Felder werden je Sprache gepflegt; leere Felder zeigen den Wert der Fallback-Sprache.
- [Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion](https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos)8 Min.
Laioutr UI bringt fertige Inhalts-Sections wie Hero Slider, CTA-Banner, Card Grids, Testimonials, USP Banner, Logo Slider, Galerie und Promotion Banner mit. Redaktionen platzieren sie in Studio, füllen sie mit eigenen Inhalten und passen Größe, Ausrichtung und Hintergrund an.
## [Inhalt und Navigation](https://academy.laioutr.com/leitfaeden/inhalt-und-navigation)
In diesem Leitfaden suchen
1. [Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion](https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos)8 Min.
2. [Bild und Video, Popups, Hinweise und Navigation in der Seite](https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation)7 Min.
3. [Shop-Navigation und Footer einrichten](https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten)10 Min.
4. [Blog mit Übersicht und Artikelseiten aufbauen](https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen)8 Min.
5. [Standortsuche und Filialseiten einrichten](https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten)8 Min.
6. [Preisseite mit Plan Cards und Vergleichstabelle bauen](https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle)9 Min.
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "de",
"name": "Default",
"url": "https://academy.laioutr.com/",
"workTranslation": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Storefront-Funktionen",
"item": "https://academy.laioutr.com/bereiche/storefront-funktionen",
"position": 2
},
{
"@type": "ListItem",
"name": "Inhalt und Navigation",
"item": "https://academy.laioutr.com/leitfaeden/inhalt-und-navigation",
"position": 3
},
{
"@type": "ListItem",
"name": "Preisseite mit Plan Cards und Vergleichstabelle bauen",
"item": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Wie viele Tarife lassen sich darstellen?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Der Plan Card Slider nimmt beliebig viele Tarife auf, von zwei bis zu längeren Staffeln. Auf Desktop stehen die Tarife nebeneinander, mobil werden sie zum Karussell mit Punkten zur Orientierung.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Muss jeder Tarif direkt online buchbar sein?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Nein. Der Button jeder Karte und jeder Spalte führt zu einem frei wählbaren Ziel, etwa zur Anmeldung, zu einer Demo-Buchung oder zum Kontaktformular.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Wie lassen sich gemeinsame Funktionen ausblenden?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Die Vergleichstabelle hat einen Filter, der nur Zeilen mit Unterschieden zwischen den Tarifen zeigt. So konzentriert sich der Vergleich auf das, was die Entscheidung beeinflusst.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle#/schema/question/4",
"@type": "Question",
"inLanguage": "de",
"name": "Welche Währung zeigen die Karten?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Beträge werden in Währung und Zahlenformat des aktiven Markts ausgegeben. Für weitere Märkte ist keine eigene Karte nötig.
"
}
}
]
}
```