> For the complete documentation index, see [llms.txt](https://docs.premsoft.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.premsoft.de/plugins/cms-elemente/cms-elemente.md). # CMS Elemente Hier findest du alle 21 Elemente kurz erklärt – was sie können und wofür du sie am besten einsetzt. Elemente, die mit **★ Premium** markiert sind, benötigen eine freigeschaltete Premium-Variante (siehe [Premium-Elemente](/plugins/cms-elemente/premium-elemente.md)). ## Inhalt & Struktur ### Akkordeon / FAQ Klappbare Inhaltsbereiche, ideal für FAQ-Listen oder lange Texte. Auf Wunsch gibt das Element automatisch ein **FAQ-Schema** für Suchmaschinen aus, damit deine Fragen als Rich Snippet bei Google erscheinen können. Du wählst Stil (Standard, Minimal, Boxed), Position des Pfeils und ob mehrere Panels gleichzeitig offen sein dürfen. ### Tabs / Reiter Gliedert Inhalte in **Registerkarten** – perfekt für Produktdetails, Größentabellen oder Versandinfos. Horizontal oder vertikal, mit verschiedenen Stilen (Unterstrich, Pills, Rahmen) und einstellbarem Verhalten auf dem Smartphone. ### Inhaltsblöcke mit Ankerlinks · ★ Premium Mehrere Abschnitte mit automatischem **Inhaltsverzeichnis** und Sprungmarken. Besucher springen per Klick direkt zum gewünschten Abschnitt – ideal für lange Ratgeber- und Landingpages. Mit sanftem Scrollen und Hervorhebung des aktiven Abschnitts. ### Section-Trenner · ★ Premium Dekorative **Form-Übergänge** (Wellen, Schrägen u. a.) zwischen zwei Sektionen. Du bestimmst Form, Farbe, Höhe und Ausrichtung – für weiche, moderne Übergänge statt harter Kanten. ### Flexibles Grid · ★ Premium Ein frei konfigurierbares **Spalten-Raster** für individuelle Layouts. Du legst Spaltenanzahl, Abstände und das Verhalten auf Mobilgeräten fest und füllst jede Zelle mit eigenem Inhalt. ## Bühne & Bilder ### Hero-Bild mit Text Großflächiges **Bühnenbild** mit Überschrift, Text und Button. Mit separaten Bildern für Desktop, Tablet und Smartphone, Overlay (einfarbig oder Verlauf) und flexibler Positionierung des Textes – der ideale Seiteneinstieg. ### Call-to-Action Banner Aufmerksamkeitsstarker **Werbebanner** mit Hintergrundbild, Headline, Subline und Button. Mit farbigem Overlay und einstellbarer Inhaltsposition – um Aktionen, Angebote oder Kampagnen zu bewerben. ### Icon-Box **Icon + Titel + Text**, optional verlinkt. Perfekt, um Vorteile, Leistungen oder USPs übersichtlich darzustellen – z. B. „Kostenloser Versand", „Sichere Zahlung". Mehrere Icon-Boxen nebeneinander ergeben eine schöne Vorteils-Übersicht. ### Bild-Galerie mit Lightbox · ★ Premium Eine **Galerie** aus mehreren Bildern, die sich per Klick in einer **Lightbox** (Vergrößerung) öffnen. Mit einstellbarer Spaltenzahl, Bildverhältnis, Hover-Effekt und Bildunterschriften. ### Vorher/Nachher-Slider · ★ Premium Zwei Bilder, die du mit einem **Schieberegler** vergleichst – ideal für Vorher/Nachher-Effekte, Renovierungen, Retuschen oder Produktwirkung. Horizontal oder vertikal, mit beschrifteten Seiten. ### Parallax-Hintergrund · ★ Premium Ein Hintergrundbild mit **Tiefen-Effekt**: Beim Scrollen bewegt sich der Hintergrund langsamer als der Vordergrund. Mit Overlay und frei platzierbarem Inhalt – auf Mobilgeräten optional abschaltbar. ### Video (DSGVO-konform) · ★ Premium Bindet **YouTube- oder Vimeo-Videos** ein – auf Wunsch mit **Zwei-Klick-Lösung**: Das Video lädt erst nach ausdrücklicher Zustimmung des Besuchers. So bleibst du datenschutzkonform. Mit Vorschaubild, Seitenverhältnis und Wiedergabe-Optionen. ## Verkauf & Conversion ### Countdown-Timer · ★ Premium Ein **Countdown** bis zu einem Zieldatum – erzeugt Dringlichkeit bei Aktionen, Sales oder Produktstarts. Mit Tagen/Stunden/Minuten/Sekunden, verschiedenen Stilen und einstellbarem Verhalten nach Ablauf (ausblenden, Text zeigen, weiterleiten). ### Preistabelle · ★ Premium Stellt **Tarife oder Pakete** übersichtlich gegenüber – mit Preis, Intervall, Leistungsliste und Buttons. Ein Tarif lässt sich hervorheben („Beliebt"), inklusive Häkchen-Liste für enthaltene und nicht enthaltene Leistungen. ### Kundenstimmen · ★ Premium Zeigt **Testimonials** mit Zitat, Name, Rolle, Firma, Foto und Sternebewertung – als Raster, Slider oder Einzelansicht. Sozialer Beweis, der Vertrauen schafft und die Conversion steigert. ### Shop the Look · ★ Premium Ein Stimmungsbild mit interaktiven **Produkt-Hotspots**: Besucher klicken auf Punkte im Bild und sehen das jeweilige Produkt – inklusive Preis und „In den Warenkorb". Ideal für Outfits, Einrichtungs-Szenen oder Sets. ## Zahlen & Daten ### Zahlen-Counter **Animierte Zahlen**, die beim Scrollen hochzählen – z. B. „10.000 zufriedene Kunden". Mit Präfix/Suffix, Icon, Nachkommastellen und Tausendertrennzeichen. Mehrere Counter nebeneinander ergeben eine wirkungsvolle Kennzahlen-Reihe. ### Fortschrittsbalken · ★ Premium Stellt Werte als **Balken oder Kreis** dar – ideal für Skills, Auslastung, Spendenziele oder Produkteigenschaften. Mit individuellen Farben pro Balken, Beschriftung und Animation beim Scrollen. ## Karten & Soziales ### Karte (OpenStreetMap) Eine **Standortkarte ohne API-Schlüssel** auf Basis von OpenStreetMap – schnell eingerichtet für Filialen, Treffpunkte oder Anfahrten. Mit Marker, Popup, verschiedenen Kartenstilen und Zoom-Steuerung. ### Google Maps (DSGVO) · ★ Premium Eine **Google-Maps-Karte** mit Zwei-Klick-Consent: Sie lädt erst nach Zustimmung des Besuchers. Mit Kartentyp, Stilen, Marker und Info-Fenster. Benötigt einen eigenen Google-Maps-API-Schlüssel (siehe [Einstellungen](/plugins/cms-elemente/einstellungen.md)). ### Social-Media-Icons Verlinkte **Social-Media-Symbole** für deine Profile (Facebook, Instagram, LinkedIn u. v. m.). Mit verschiedenen Stilen (Flat, Branded, Outline, Kreis, Quadrat), Größe, Farbe und Hover-Effekt. *** Du möchtest eine fertig gestaltete Sektion mehrfach verwenden? Das geht mit den [wiederverwendbaren Sektionen](/plugins/cms-elemente/wiederverwendbare-sektionen.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.premsoft.de/plugins/cms-elemente/cms-elemente.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.