Standard-Website-Elemente
Die Standard-Website-Elemente stellen grundlegende Funktionen bereit, die auf jeder Website benötigt werden. Dazu gehört beispielsweise ein Vollbild-Fenster für die Bildbetrachtung. Diese Elemente arbeiten im Hintergrund und sorgen für eine einheitliche Benutzererfahrung.
Voraussetzungen
- Du arbeitest mit einer weboffice-Website
- Die Standard-Elemente sind automatisch auf jeder Seite verfügbar
Aufbau der Standard-Elemente
Bild-Vollbild-Fenster: Ein spezielles Fenster, das sich öffnet, wenn Besucher auf ein Bild klicken, um es vergrößert zu betrachten.
Fenster-Struktur: Das Vollbild-Fenster besteht aus:
- Kopfbereich mit Titel und Schließen-Schaltfläche
- Hauptbereich mit dem vergrößerten Bild
- Automatische Größenanpassung an den Bildschirm
Responsive Verhalten: Das Fenster passt sich automatisch an verschiedene Bildschirmgrößen an.
So funktionieren die Standard-Elemente
Automatische Integration: Die Standard-Elemente werden automatisch auf jeder Seite deiner Website eingebunden. Du musst nichts Besonderes tun.
Bild-Vollbild verwenden:
- Besucher klicken auf ein Bild, das für Vollbild-Anzeige konfiguriert ist
- Das Vollbild-Fenster öffnet sich automatisch
- Das Bild wird in optimaler Größe angezeigt
- Besucher können das Fenster über die Schließen-Schaltfläche oder durch Klicken außerhalb schließen
Tastatur-Navigation: Das Vollbild-Fenster kann auch mit der Escape-Taste geschlossen werden.
Touch-Unterstützung: Auf mobilen Geräten funktioniert die Bedienung über Touch-Gesten.
Funktionen im Detail
Vollbild-Modal für Bilder:
- Öffnet sich automatisch beim Klick auf konfigurierte Bilder
- Zeigt Bilder in bestmöglicher Qualität
- Dunkler Hintergrund für optimale Bildbetrachtung
- Titel wird im Kopfbereich angezeigt
- Schließen-Schaltfläche in der oberen rechten Ecke
Barrierefreiheit:
- Korrekte ARIA-Labels für Screenreader
- Tastatur-Navigation möglich
- Fokus-Management beim Öffnen und Schließen
Performance:
- Lazy Loading der Vollbild-Bilder
- Optimierte Bildgrößen für verschiedene Geräte
- Minimaler JavaScript-Code für schnelle Ladezeiten
Tipps und Hinweise
Automatisch verfügbar: Du musst die Standard-Elemente nicht manuell hinzufügen - sie sind immer da, wenn sie gebraucht werden.
Konsistente Bedienung: Alle Vollbild-Fenster auf deiner Website verhalten sich gleich, was für eine einheitliche Benutzererfahrung sorgt.
Mobile Optimierung: Die Elemente sind vollständig für mobile Geräte optimiert und funktionieren mit Touch-Bedienung.
Keine Konfiguration nötig: Die Standard-Elemente funktionieren ohne weitere Einstellungen optimal.
Browser-Kompatibilität: Die Elemente funktionieren in allen modernen Browsern zuverlässig.