Kopfzeile mit Menü
Klebende Kopfzeile mit Logo, WordPress-Menü (Weg B, Links unter Design → Menüs), Hauptaktion und Klappmenü für schmale Bildschirme. Untermenüs mit Schalter (aria-expanded), Escape mit Fokus-Rückgabe, Schatten beim Scrollen.
Seven Bytes Designset
Alle Blöcke im Überblick
10 Blöcke, Stand 21. September 2026. Jeder Block ist neutral gestaltet und wird im Projekt auf dessen Design umgestellt.
Zu einem Block
- Kopfzeile mit Menü Kopfzeile
- Hero mit Video Hero
- Karten-Slider Inhalt
- Beitragsliste mit Filter Inhalt
- FAQ-Akkordeon Inhalt
- Bewertungen mit Karussell Bewertungen
- Popup mit Hinweis Hinweis und Aufruf
- Kontakt mit Formular Kontakt
- Standort mit Karte Kontakt
- Fußzeile mit Menüs Fußzeile
Kopfzeile
Hero
Hero mit Video
Hero über die volle Breite mit Standbild und Hintergrundvideo: Video lädt erst nach dem ersten Bild, blendet nach kurzer Haltezeit über, Pause-Knopf (WCAG 2.2.2), bei reduzierter Bewegung oder jedem Fehler bleibt das Standbild.
Inhalt
Karten-Slider
Randloser Kartenstreifen mit Einrasten, beginnt an der Inhaltskante und läuft rechts aus. Pfeile, Zähler und Fortschrittsbalken, per Tastatur scrollbar, ohne Bibliothek (3 KB Skript).
Beitragsliste mit Filter
Beitragsraster aus Oxygens nativem Post-Loop (Rohmodus, Karte als Component) mit Kategorie-Pillen aus dem Term-Loop. Ganze Karte klickbar über einen einzigen Titel-Link, Filter als echte Links auf die Kategorie-Archive.
FAQ-Akkordeon
Fragen und Antworten als natives details/summary, ohne JavaScript. Immer nur eine Antwort offen, mit Tastatur bedienbar, Symbol rein aus CSS.
Bewertungen
Bewertungen mit Karussell
Links Gesamtwertung mit Avatarstapel, Sternen und Link zur Bewertungsplattform, rechts je eine Stimme als figure/blockquote mit Pfeilen, Zähler und Pfeiltasten. Ansage per aria-live.
Hinweis und Aufruf
Popup mit Hinweis
Einmaliger Hinweis als natives dialog-Element (showModal): Fokusfalle, Escape, Abdunklung und Fokus-Rückgabe vom Browser. Erscheint an einer geplanten Stelle im Lesefluss oder beim Verlassen des Fensters, nie per Zeit-Timer.
Kontakt
Kontakt mit Formular
Kontaktwege links (Telefon und E-Mail mit Symbolen), rechts ein Fluent-Formular in einer Karte, komplett gestylt: Fokus, Fehlerzustand, eigenes Häkchen, Auswahlpfeil, Erfolgsmeldung. Skript verknüpft Fehlermeldungen barrierefrei mit den Feldern.
Standort mit Karte
Standortangaben (Adresse, Zeiten, Anfahrt, Einzugsgebiet) neben einer Google-Karte, die erst nach Klick lädt. Vorher eine gezeichnete Straßenskizze mit Hinweis. Null Anfragen an Google vor der Einwilligung, gemessen.
Fußzeile
Fußzeile mit Menüs
Dunkle Fußzeile: Logo und Kurztext als Inhalt, zwei Linklisten als WordPress-Menüs (Fußzeile: Links, Rechtliches), Adresse mit tel:/mailto:. Keine Überschriften-Tags.