Seiten auf sanifair.de werden über Seiten > Neue Seite hinzufügen angelegt. Der eigentliche Seiteninhalt wird mit dem ACF Flexible Content Feld Page Components aufgebaut, das unterhalb des Gutenberg-Editors im Classic-Editor-Bereich erscheint.
Neue Seite anlegen #
- Navigiere zu Seiten > Seite hinzufügen.
- Gib einen Titel ein.
- Scrolle nach unten zum Bereich Page Components.
- Klicke auf Add Component, um einen neuen Block auszuwählen.
- Wähle den gewünschten Block-Typ aus der Liste der verfügbaren Blöcke.
- Fülle die Felder des Blocks aus.
- Wiederhole Schritte 4–6 für weitere Blöcke.
- Klicke auf Veröffentlichen bzw. Aktualisieren.
Verfügbare Blöcke (Page Components) #
Es stehen 32 Block-Typen zur Verfügung. Jeder Block wird über Add Component hinzugefügt und kann per Drag & Drop umsortiert werden.
1. Breadcrumb #
Zeigt eine Breadcrumb-Navigation am oberen Seitenrand. Standardmäßig wird die Breadcrumb automatisch generiert; sie kann aber auch manuell definiert werden.
- Breadcrumb-Modus: Automatisch (Standard) oder Manuell
- Manuelle Breadcrumbs: Wiederholbares Feld mit Titel und URL für jeden Pfad-Eintrag
Backend #
2. Block: Anchor #
Setzt einen unsichtbaren Anker auf der Seite, zu dem per Hash-Link navigiert werden kann (z.B. #kontakt).
- Anchor Name: Eindeutiger Name für den Anker (ohne #)
Backend #
3. Hero Slider #
Vollbreiter Bild-Slider für den oberen Seitenbereich. Unterstützt mehrere Slides mit Text und Button.
- Slides: Wiederholbar – je Slide: Image, Headline, Text, Button (Text + Link)
- Options: Theme, Autoplay ein/aus, Slider-Höhe
Backend #
Frontend #
4. Video Block #
Zeigt ein Video mit Poster-Bild und Play-Button an. Geeignet für eingebettete oder selbst-gehostete Videos.
- Title / Subtitle: Optionaler Über- und Untertitel
- Play Button Text: Beschriftung des Play-Buttons
- Poster Image: Vorschaubild vor dem Abspielen
- Video URL: URL zum Video
- Overlay Farbe / Text Farbe: Farbgebung des Overlays
Backend #
Frontend #
5. Block: Teaser CTA #
Ein kompakter Call-to-Action-Block mit Überschrift, Unterzeile und Button. Gut für Zwischenrufe.
- Überschrift / Unterzeile: Headline-Texte
- Button Link: Ziel des Buttons
- Hintergrundfarbe / Button Stil / Größe: Design-Einstellungen
Backend #
Frontend #
6. Block: Hero-2 #
Erweiterter Hero-Block mit mehreren Teaser-Karten. Unterstützt Partnerschaftsmodelle als Unterpunkte.
- Überschrift / Untertitel: Allgemeine Einstellungen
- Mindesthöhe (Desktop): CSS-Höhe des Blocks
- Partnerschaftsmodelle: Wiederholbar mit Titel, Kurzbeschreibung, Detailtext, Bild
Backend #
7. Block: Text Intro #
Einfacher Textblock für einleitende Absätze, typischerweise unter dem Hero.
- Überschrift / Beschreibungstext: Hauptinhalt
- Überschriftengröße / Inhaltsbreite: Layout-Optionen
- Button Label / Button Link: Optionaler CTA-Button
- Hintergrundfarbe: Design-Einstellung
Backend #
Frontend #
8. Block: Hero Video Intro #
Kombiniert ein Hintergrundvideo mit anklickbaren Kacheln, die per Hover einen Overlay zeigen.
- Hintergrund Video: MP4-Datei als Hintergrund
- Kacheln: Wiederholbar – Typ (Text/Bild), Bar-Text, Überschrift (Hover), Beschreibung (Hover), Button Link
Backend #
Frontend #
9. Block: Teaser Text, Bild, CTA #
Zweispaltiger Block mit Text auf einer und Bild auf der anderen Seite, plus CTA-Button.
- Überschrift / Text: Textinhalt
- Button Text / Button Link: Aufruf zur Aktion
- Bild: Zugeordnetes Bild
- Bild-Position / Bild-Breite: Layout-Optionen
- Farben: Hintergrundfarbe der Sektion
Backend #
10. Block: Teaser Kachel #
Raster von Teaser-Kacheln mit Bild oder Icon, Überschrift und Text.
- Überschrift: Optionaler Sektions-Titel
- Kacheln: Wiederholbar – Kachel-Typ (Bild/Icon), Bild, Icon, Überschrift, Text, Link
- Hintergrundfarbe: Farbe der Sektion
Backend #
11. Block: Ansprechpartner Flip #
Zeigt Ansprechpartner-Karten mit Flip-Effekt (Vorder- und Rückseite).
- Titel / Hintergrundfarbe: Sektions-Einstellungen
- Karten pro Reihe: Layout für Desktop
- Ansprechpartner: Wiederholbar – Vorderseite (Foto), Rückseite (Footer-Infos)
Backend #
Frontend #
12. Block: Text Steps mit Bild #
Zeigt eine Schritt-für-Schritt-Liste mit Icons/Titeln/Beschreibungen neben einem Bild.
- Überschrift: Sektions-Titel
- Schritte/Vorteile: Wiederholbar – Icon, Titel, Beschreibung
- Medien: Begleitbild zur Liste
Backend #
Frontend #
13. Block: Promise Features #
Hebt Versprechen oder Alleinstellungsmerkmale mit Icon, Überschrift und Beschreibung hervor.
- Haupt-Überschrift: Titel der Sektion
- Features: Wiederholbar – Bild/Icon, Überschrift, Beschreibung
Backend #
Frontend #
14. Block: Blog Teaser #
Zeigt ausgewählte oder automatisch gezogene Blog-Beiträge als Teaser-Kacheln.
- Überschrift / Untertitel: Sektions-Texte
- Posts auswählen / Fallback-Kategorie: Inhaltsauswahl
- Button Text / Link: Link zu allen Beiträgen
- Hintergrundfarbe: Design-Option
Backend #
15. Block: Blog Grid #
Vollständiges Blog-Raster mit Filteroptionen nach Kategorie.
- Featured Post: Hervorgehobener Beitrag oben
- Posts pro Seite: Anzahl der angezeigten Beiträge
- Auszüge anzeigen: Textvorschau ein/aus
- Kategorie-Filter: Filter-Leiste aktivieren
- Hintergrundfarbe: Design-Option
Backend #
Frontend #
16. Block: Akkordeon #
Akkordeon-Komponente für aufklappbare Inhaltsabschnitte. Ideal für FAQs oder strukturierte Inhalte.
- Überschrift: Optionaler Sektions-Titel
- Inhalte: Wiederholbar – Icon, Titel, Text (aufklappbar)
- Hintergrundfarbe: Design-Option
Backend #
Frontend #
17. Block: Reiter #
Tab-Navigation mit mehreren Inhaltsbereichen, zwischen denen geklickt werden kann.
- Reiter: Wiederholbar – Label, Titel, Text, Aufzählungen (mit Überschrift und Liste der Einträge)
Backend #
Frontend #
18. Block: Interactive Worldmap #
Interaktive Weltkarte, auf der Standorte oder Regionen markiert werden können.
- Headline: Überschrift der Karte
Backend #
Frontend #
19. Block: Image Overlay #
Hintergrundbild oder -farbe mit überlagerten Inhalten.
- Hintergrund-Typ: Bild oder Farbe
- Hintergrundbild / Hintergrundfarbe: Hintergrund-Asset
- Inhaltsbild: Vordergrund-Bild (optional)
Backend #
20. Block: Card NL #
Karten-Layout, speziell für die niederländische Version der Website.
- Background Image / Background Color Class: Hintergrund-Einstellungen
- Cards: Wiederholbar – Card Image, Headline, Text
Backend #
21. Block: Teaser Text, Bild, CTA NL #
Zweispaltiger Teaser-Block (Niederländisch) – analog zum deutschen Teaser Text, Bild, CTA.
- Überschrift / Text / Button Text / Button Link / Bild: Wie beim deutschen Pendant
- Bild-Position / Bild-Breite: Layout-Optionen
Backend #
22. Block: Zertifizierung / Qualitätssiegel #
Slider für Logos von Zertifizierungen oder Gütesiegeln.
- Überschrift / Überschrift Größe / Überschrift Farbe: Titel-Einstellungen
- Hintergrundfarbe / Hintergrundbild: Design
- Automatisches Abspielen / Autoplay Geschwindigkeit: Slider-Einstellungen
- Zertifizierungen: Wiederholbar – Logo-Bilder
Backend #
Frontend #
23. Block: Partnerfinder #
Interaktiver Standort- und Partnerfinder. Zeigt SANIFAIR-Standorte auf einer Karte mit Filterfunktion.
- Title: Optionaler Block-Titel
Backend #
24. Block: Statistics #
Zeigt Kennzahlen und Statistiken als große Zahlen mit Beschreibungen an.
- Überschrift: Sektions-Titel
- Statistics: Wiederholbar – Zahl/Wert, Beschreibung, Quelle/Referenz
Backend #
25. Block: Benefits #
Auflistung von Vorteilen oder Benefits mit Bild und Beschreibung je Eintrag.
- Überschrift / Beschreibung: Sektions-Texte
- Vorteile: Wiederholbar – Titel, Bild, Beschreibung
Backend #
26. Block: FAQ #
Häufig gestellte Fragen mit aufklappbaren Antworten (ähnlich Akkordeon).
- Überschrift / Untertitel: Sektions-Texte
- FAQ Einträge: Wiederholbar – Frage, Antwort
- Hintergrundfarbe: Design-Option
Backend #
Frontend #
27. Contact Form Tabs #
Kontaktformular in Tab-Struktur, z.B. für verschiedene Anliegen.
- Background Color: Hintergrundfarbe
- Tab Items: Wiederholbar – Tab-Label und zugehöriges Formular
Backend #
28. Block: Text mit Overlay #
Text-Block über einem Hintergrundbild mit optionalem Button.
- Titel / Text: Hauptinhalt
- Button Text / Button URL: CTA
- Hintergrundbild: Bild-Hintergrund
Backend #
Frontend #
29. Block: Spacer #
Unsichtbarer Abstandsblock zum Einfügen von vertikalem Freiraum zwischen Blöcken.
- Theme: Hell oder Dunkel (beeinflusst Hintergrundfarbe)
- Vertical space: Höhe des Abstands
Backend #
30. Block: Flexibles Konzept #
Umfangreicher Inhaltsblock für Konzept-Seiten mit Icons, Features und mehreren Sektionen.
- Hauptüberschrift / Beschreibung / Unterüberschrift: Haupt-Texte
- Features/Vorteile: Wiederholbar – Text
- Icon-Bereiche: Wiederholbar – Icon-Bild, Titel, Text
Backend #
Frontend #
31. Block: Shortcode #
Ermöglicht die Einbindung eines beliebigen WordPress-Shortcodes innerhalb der Seitenstruktur.
- Shortcode: Der auszuführende Shortcode
- Hintergrundfarbe der Sektion: Optionale Hintergrundfarbe
Backend #
Frontend #
32. Reusable Component #
Bindet eine wiederverwendbare Komponente aus dem CPT Reusable Components ein. Änderungen am Reusable Component wirken sich automatisch auf alle Seiten aus, die ihn verwenden.
- Select Reusable Component: Auswahl der gewünschten Komponente aus der Liste
Backend #
