Blöcke im Überblick¶
Das HBDEV New Theme stellt 18 eigene Inhaltsblöcke bereit, die im WordPress Block-Editor (Gutenberg) zur Verfügung stehen. Alle Blöcke basieren auf ACF (Advanced Custom Fields) und bieten eine Vorschau im Editor.
Kategorien¶
Text & Bild¶
Blöcke, die Text und Bilder oder Videos kombinieren.
| Block | Beschreibung | Seite |
|---|---|---|
| Hero | Hero-Section mit Headline, Text, Button und optionalem Video/Bild-Hintergrund | Details |
| Hero-Slider | Vollbreites Karussell mit mehreren Slides | Details |
| Text-Link-Bild | Zwei-Spalten-Layout: Text + Bild (umkehrbar) | Details |
| Video-Text | Wie Text-Link-Bild, aber mit eingebettetem Video | Details |
Text¶
Blöcke für reine Textinhalte und Listen.
| Block | Beschreibung | Seite |
|---|---|---|
| Benefits-List | Auflistung von Vorteilen mit aufklappbaren Details | Details |
| Text-Box-Grid | Grid-Layout aus Textboxen | Details |
| WYSIWYG | Freier Rich-Text-Editor | Details |
Bilder¶
Blöcke für Bilddarstellungen.
| Block | Beschreibung | Seite |
|---|---|---|
| Fullwidth-Image | Vollbreites Bild | Details |
| Bildvergleichslider | Vorher/Nachher-Bildvergleich mit Schieberegler | Details |
Sonder-Blöcke¶
Spezialisierte Blöcke für besondere Inhalte.
| Block | Beschreibung | Seite |
|---|---|---|
| FAQ | Accordion mit Fragen und Antworten | Details |
| Kundenfeedback | Testimonials und Kundenstimmen | Details |
| News-Slider | Karussell mit Beiträgen | Details |
| Shortcode-CTA | Formular-Einbindung (Shortcode) mit Text und Bild | Details |
| Audio-Block | Audio-Player mit begleitendem Text und Bild | Details |
| Galerie-Slider | Bildergalerie als Karussell mit Text | Details |
| Spacer | Vertikaler Abstand zwischen Blöcken | Details |
Gemeinsame Funktionen¶
Die meisten Blöcke teilen sich folgende Optionen:
Kicker¶
Ein kleiner Text oberhalb der Überschrift — in Grossbuchstaben mit erweitertem Buchstabenabstand. Ideal für Kategorien oder Einordnungen wie „Unsere Leistungen" oder „Über uns".
Überschriften-Markup¶
Bei Blöcken mit Überschrift kann die HTML-Ebene gewaehlt werden (H1 bis H6). Das beeinflusst die SEO-Hierarchie, nicht das Aussehen.
Badges¶
Kleine Schlagwörter als Pillen-Buttons. Können als einfache oder farbige Variante (mit Gradient) angezeigt werden.
Glow-Buttons (CTAs)¶
Animierte Call-to-Action-Buttons mit Leuchteffekt. Verfügbar in 6 Farbvarianten:
| Variante | Farbverlauf |
|---|---|
| Pink | Pink nach Lila |
| Cyan | Hellblau nach Blau |
| Orange | Orange nach Gelb |
| Purple | Lila nach Pink |
| Green | Gruen nach Cyan |
| White | Weiss |
Jeder Block mit CTA-Buttons bietet einen primären und einen sekundären Button.
Border-Option¶
Viele Blöcke können mit einem dezenten Rahmen versehen werden (1px, abgerundete Ecken mit 14px Radius).
Lazy Loading¶
Bilder können mit nativem Lazy Loading versehen werden — sie werden erst geladen, wenn sie in den sichtbaren Bereich scrollen.
Dekoratives Bild¶
Bilder können als „dekorativ" markiert werden. Dekorative Bilder haben keinen Alternativtext und werden von Screenreadern übersprungen.
Anker (Anchor)¶
Jeder Block kann eine eigene HTML-ID erhalten, um als Sprungmarke zu dienen (z.B. für interne Links wie #kontakt).