Sektionstypen

Der Section-Editor bietet 22 Sektionstypen in 8 Kategorien. Jeder Typ hat eigene Einstellungen und optionale Blöcke (wiederholbare Inhaltseinheiten).

Übersicht

Kategorie	Typen
Hero	Hero, Hero-Slider
Produkte	Hervorgehobene Produkte, Produkt-Spotlight, Produkt-Bundles, Produkt-Karussell, Produkt-Vergleichstabelle
Kollektionen	Kollektion-Grid
Inhalte	Rich Text, Text mit Bild, Mehrspalter, Akkordeon FAQ, Timeline
Social Proof	Vertrauenssiegel, Testimonials, Statistik-Zähler
Conversion	Newsletter, Kontaktformular
Medien	Kundengalerie, Marken-Logos
Navigation	Ankündigungsleiste
Standorte	Showroom-Standorte

---

Hero

Hero

Großflächiger Hero-Bereich mit Hintergrundbild oder Video, Überschrift und Call-to-Action-Button.

Einstellung	Typ	Beschreibung
Überschrift	Text	Hauptüberschrift
Unterüberschrift	Text	Ergänzender Text
Button-Text / Button-Link	Text / URL	Call-to-Action
Hintergrundbild	Bild	Hintergrundfoto
Medientyp	Auswahl	Bild oder Video
Video-URL	URL	Video-Hintergrund (wenn Medientyp = Video)
Overlay-Farbe	Farbe (RGBA)	Halbtransparente Überlagerung
Textfarbe	Farbe	Farbe von Überschrift und Text
Textposition	Auswahl	Links, Mitte oder Rechts
Mindesthöhe	Bereich	300–800 px
Button-Stil	Auswahl	Gefüllt, Outline oder Text-Link

Keine Blöcke. Maximal 2 pro Seite.

Hero-Slider

Zeigt den bestehenden Homepage-Slider als Section-Editor-Baustein an.

Einstellung	Typ	Beschreibung
Abstand	Auswahl	Kein, Klein, Mittel, Groß

Keine Blöcke. Die Slider-Inhalte werden über Einstellungen → Slider verwaltet.

---

Produkte

Hervorgehobene Produkte

Produktraster mit konfigurierbarer Spaltenanzahl und optionalen Preisen/Bewertungen.

Einstellung	Typ	Beschreibung
Überschrift / Unterüberschrift	Text	Abschnittsüberschriften
Kollektion	Kategorie	Produktkategorie als Quelle
Produktanzahl	Bereich	2–12 Produkte
Spalten	Auswahl	2, 3 oder 4
Preis anzeigen	Schalter	Preis ein-/ausblenden
Bewertung anzeigen	Schalter	Sternbewertung ein-/ausblenden
Schnell hinzufügen anzeigen	Schalter	Warenkorb-Button ein-/ausblenden
Button-Text / Button-Link	Text / URL	„Alle anzeigen"-Link

Keine Blöcke.

Produkt-Spotlight

Einzelnes Produkt groß inszeniert mit redaktionellem Text und CTA.

Einstellung	Typ	Beschreibung
Produkt	Produkt-ID	Anzuzeigendes Produkt
Überschrift	Text	Redaktionelle Überschrift
Redaktioneller Text	Rich Text	Ausführliche Beschreibung
Button-Text / Button-URL	Text / URL	Call-to-Action
Bildposition	Auswahl	Links oder Rechts
Hintergrundfarbe	Farbe	Abschnittshintergrund

Keine Blöcke.

Produkt-Bundles

Zeigt Produkt-Bundles mit Einzelpreisen und Paketpreis.

Einstellung	Typ	Beschreibung
Überschrift / Unterüberschrift	Text	Abschnittsüberschriften

Block: bundle_card (max. 6)

Block-Feld	Typ	Beschreibung
Produktliste	Produkt-Liste	Produkte im Bundle (max. 6)
Bundle-Preis	Text	Paketpreis
Ersparnis-Text	Text	z. B. „Sie sparen 15 %"
Badge-Farbe	Farbe	Farbe des Ersparnis-Badges

Produkt-Karussell

Horizontales Produktkarussell mit automatischem Abspielen und Pfeil-Navigation.

Einstellung	Typ	Beschreibung
Überschrift	Text	Abschnittsüberschrift
Kategorie	Kategorie-ID	Produktquelle
Sichtbare Spalten	Bereich	2–6 (Standard: 4)
Autoplay	Schalter	Automatisch weiterblättern
Autoplay-Geschwindigkeit	Bereich	2–10 Sekunden
Pfeile anzeigen	Schalter	Navigationspfeile ein-/ausblenden

Keine Blöcke.

Produkt-Vergleichstabelle

Vergleichstabelle für bis zu 6 Produkte mit konfigurierbaren Attributzeilen.

Einstellung	Typ	Beschreibung
Überschrift	Text	Tabellenüberschrift
Produktliste	Produkt-Liste	Zu vergleichende Produkte (max. 6)
Bilder anzeigen	Schalter	Produktbilder in der Kopfzeile
Preise anzeigen	Schalter	Preiszeile ein-/ausblenden
Unterschiede hervorheben	Schalter	Abweichende Werte markieren

Block: attribute_row (max. 20)

Block-Feld	Typ	Beschreibung
Attributname	Text	Zeilenüberschrift (z. B. „Holzart")
Wert 1–6	Text	Wert je Produkt

---

Kollektionen

Kollektion-Grid

Raster mit Kategorie-Karten, jeweils mit Bild und Link.

Einstellung	Typ	Beschreibung
Überschrift / Unterüberschrift	Text	Abschnittsüberschriften
Spalten	Auswahl	2, 3 oder 4

Block: collection_card (max. 12)

Block-Feld	Typ	Beschreibung
Kollektion	Kategorie-ID	Verlinkte Kategorie
Bild	Bild	Kartenbild
Titel	Text	Angezeigter Name
Link	URL	Ziel-URL

---

Inhalte

Rich Text

Freier Text mit Überschrift — ideal für Fließtext, Ankündigungen oder redaktionelle Inhalte.

Einstellung	Typ	Beschreibung
Überschrift	Text	Abschnittsüberschrift
Inhalt	Rich Text	Formatierter Text (HTML)
Textausrichtung	Auswahl	Links, Mitte oder Rechts
Breite	Auswahl	Schmal, Mittel, Breit, Voll
Hintergrundfarbe	Farbe	Abschnittshintergrund
Textfarbe	Farbe	Textfarbe

Keine Blöcke.

Text mit Bild

Zweispaltiges Layout mit Text auf einer und Bild auf der anderen Seite.

Einstellung	Typ	Beschreibung
Überschrift	Text	Überschrift
Inhalt	Rich Text	Beschreibungstext
Bild	Bild	Seitenbild
Bildposition	Auswahl	Links oder Rechts
Bildverhältnis	Auswahl	Seitenverhältnis
Button-Text / Button-Link	Text / URL	Optionaler CTA
Button-Stil	Auswahl	Gefüllt, Outline oder Text-Link
Hintergrundfarbe	Farbe	Abschnittshintergrund

Keine Blöcke.

Mehrspalter

Flexibles 2–4-Spalten-Layout mit Icons, Bildern und Text.

Einstellung	Typ	Beschreibung
Überschrift / Unterüberschrift	Text	Abschnittsüberschriften
Textausrichtung	Auswahl	Links, Mitte oder Rechts

Block: column (max. 4)

Block-Feld	Typ	Beschreibung
Icon	Auswahl	Vordefiniertes Icon
Bild	Bild	Überschreibt das Icon
Überschrift	Text	Spaltenüberschrift
Inhalt	Rich Text	Spaltentext
Link	URL	Optionaler Link

Akkordeon FAQ

Aufklappbare Fragen und Antworten — ideal für häufige Fragen oder Produktdetails.

Einstellung	Typ	Beschreibung
Überschrift / Unterüberschrift	Text	Abschnittsüberschriften
Mehrere gleichzeitig öffnen	Schalter	Erlaubt mehrere offene Einträge

Block: faq_item (max. 20)

Block-Feld	Typ	Beschreibung
Frage	Text	Die Frage
Antwort	Rich Text	Die Antwort

Timeline

Zeitleiste für Firmengeschichte, Produktionsprozesse oder Kundenwege.

Einstellung	Typ	Beschreibung
Überschrift / Unterüberschrift	Text	Abschnittsüberschriften
Layout	Auswahl	Vertikal oder Alternierend

Block: event (max. 20)

Block-Feld	Typ	Beschreibung
Jahr	Text	Zeitangabe (z. B. „2020" oder „Schritt 1")
Titel	Text	Überschrift des Eintrags
Beschreibung	Text	Detailtext
Icon	Text	Emoji als Icon (optional, sonst Schrittnummer)
Bild	Bild	Optionales Bild

---

Social Proof

Vertrauenssiegel

Horizontale Reihe oder Raster mit Trust-Badges (Icons + Text).

Einstellung	Typ	Beschreibung
Überschrift	Text	Abschnittsüberschrift
Layout	Auswahl	Horizontal oder Raster
Hintergrundfarbe	Farbe	Abschnittshintergrund

Block: badge (max. 6)

Block-Feld	Typ	Beschreibung
Icon	Auswahl	Vordefiniertes Icon
Bild	Bild	Eigenes Bild (überschreibt Icon)
Titel	Text	Badge-Titel
Untertitel	Text	Ergänzender Text

Testimonials

Kundenstimmen als Karten mit Bewertung und Avatar.

Einstellung	Typ	Beschreibung
Überschrift / Unterüberschrift	Text	Abschnittsüberschriften
Layout	Auswahl	Raster, Karussell oder Liste
Spalten	Auswahl	1, 2 oder 3
Bewertung anzeigen	Schalter	Sterne ein-/ausblenden
Avatar anzeigen	Schalter	Profilbilder ein-/ausblenden

Block: testimonial (max. 12)

Block-Feld	Typ	Beschreibung
Autor	Text	Name des Kunden
Ort	Text	Herkunftsort
Bewertung	Auswahl	1–5 Sterne
Text	Text	Kundenstimme
Avatar	Bild	Profilbild

Statistik-Zähler

Kennzahlen in einem Raster — ideal für „30+ Jahre Erfahrung" oder „5.000+ Kunden".

Einstellung	Typ	Beschreibung
Überschrift / Unterüberschrift	Text	Abschnittsüberschriften
Layout	Auswahl	2, 3 oder 4 Spalten
Animation	Schalter	Zähl-Animation beim Scrollen

Block: stat (max. 6)

Block-Feld	Typ	Beschreibung
Wert	Text	Angezeigte Zahl (z. B. „30+")
Bezeichnung	Text	Kurzbezeichnung (z. B. „Jahre Erfahrung")
Beschreibung	Text	Optionaler Zusatztext

---

Conversion

Newsletter

Newsletter-Anmeldeformular mit konfigurierbarem Text und Erfolgsmeldung.

Einstellung	Typ	Beschreibung
Überschrift	Text	Formularüberschrift
Inhalt	Text	Beschreibung
Platzhalter	Text	Eingabefeld-Platzhalter
Button-Text	Text	Absenden-Button
Erfolgsmeldung	Text	Nachricht nach erfolgreicher Anmeldung
Hintergrundfarbe / Textfarbe	Farbe	Abschnittsstil
Breite	Auswahl	Schmal, Mittel, Breit, Voll

Keine Blöcke.

Kontaktformular

Kontaktformular mit konfigurierbaren Feldern.

Einstellung	Typ	Beschreibung
Überschrift	Text	Formularüberschrift
Beschreibung	Text	Einleitungstext
Name anzeigen	Schalter	Namensfeld ein-/ausblenden
Telefon anzeigen	Schalter	Telefonfeld ein-/ausblenden
Betreff anzeigen	Schalter	Betrefffeld ein-/ausblenden
Nachricht anzeigen	Schalter	Nachrichtenfeld ein-/ausblenden
Button-Text	Text	Absenden-Button
Erfolgsmeldung	Text	Nachricht nach dem Absenden

Keine Blöcke.

---

Medien

Kundengalerie

Fotogalerie mit Lightbox — ideal für Kundenfotos oder Referenzbilder.

Einstellung	Typ	Beschreibung
Überschrift / Unterüberschrift	Text	Abschnittsüberschriften

Block: image (max. 24)

Block-Feld	Typ	Beschreibung
Bild	Bild	Foto-URL
Alt-Text	Text	Bildbeschreibung
Bildunterschrift	Text	Optionale Unterschrift

Marken-Logos

Horizontale Logo-Leiste mit optionalem Graustufen-Effekt und Auto-Scroll.

Einstellung	Typ	Beschreibung
Überschrift	Text	Abschnittsüberschrift
Graustufen-Hover	Schalter	Logos grau, bei Hover farbig (Standard: an)
Auto-Scroll	Schalter	Endloses horizontales Scrollen
Scroll-Geschwindigkeit	Bereich	10–100 px/s

Block: logo_item (max. 12)

Block-Feld	Typ	Beschreibung
Bild	Bild	Logo-Datei
Alt-Text	Text	Firmenname
Link	URL	Optionale Verlinkung

---

Navigation

Ankündigungsleiste

Schmale Leiste am Seitenrand für Hinweise, Aktionen oder wichtige Links.

Einstellung	Typ	Beschreibung
Text	Text	Anzeigetext
Link	URL	Ziel-URL beim Klicken
Hintergrundfarbe / Textfarbe	Farbe	Leistenstil
Schließbar	Schalter	Besucher kann die Leiste schließen
Layout	Auswahl	Einzeltext oder Mehrere Links

Block: link (max. 8, nur im Layout „Mehrere Links")

Block-Feld	Typ	Beschreibung
Text	Text	Linktext
URL	URL	Ziel-URL

Maximal 1 pro Seite.

---

Standorte

Showroom-Standorte

Standortkarten mit Kontaktdaten und optionaler Google-Maps-Einbettung.

Einstellung	Typ	Beschreibung
Überschrift / Unterüberschrift	Text	Abschnittsüberschriften
Layout	Auswahl	Raster oder Liste

Block: location (max. 6)

Block-Feld	Typ	Beschreibung
Name	Text	Standortname
Adresse	Text	Straße, PLZ, Ort
Telefon	Text	Wird als klickbarer tel:-Link angezeigt
E-Mail	Text	Wird als klickbarer mailto:-Link angezeigt
Öffnungszeiten	Text	Mehrzeilig möglich
Bild	Bild	Standortfoto
Karten-URL	URL	Google Maps Embed-URL

---

Eigenes CSS

Jede Sektion kann über den Reiter CSS individuell gestaltet werden. Das CSS wird automatisch auf die jeweilige Sektion beschränkt — es beeinflusst keine anderen Sektionen.

Erlaubt:

• Alle Standard-CSS-Eigenschaften
• @media-Queries für responsive Anpassungen
• Lokale Bilder (/media/...) und Data-URIs

Nicht erlaubt (wird automatisch entfernt):

• @import-Regeln
• Externe URLs (nur /media/ und /assets/ sind zugelassen)
• JavaScript-Ausdrücke in CSS-Werten

---

Nächste Schritte

• Section-Editor — Sektionen hinzufügen, bearbeiten und veröffentlichen
• Design & Farben — Globale Farben und Schriften anpassen