Dynamischer Hintergrundbereich
Für Plain Jane und Plain Jane Interactive
Was Sie lernen werden
Wie man dynamische Hintergrundsektionen hinzufügt und konfiguriert
Erweiterte Hintergrundoptionen, einschließlich Videos, Bilder und Überlagerungen
Mobile Optimierung und responsive Hintergrundeinstellungen
Animations- und Übergangseffekte
🎯 Was ist die Dynamic Background Section?
Die Dynamischer Hintergrundbereich ist ein leistungsfähiges, flexibles Hintergrundsystem in Plain Jane v3.1, das es Ihnen ermöglicht, immersive Seitenhintergründe mit erweiterten Anpassungsoptionen zu erstellen. Im Gegensatz zu statischen Hintergründen unterstützt diese Sektion Video-Hintergründe, Bildüberlagerungen, Verläufe und responsive Mobile-Konfigurationen.
Hauptfunktionen:
Video-Hintergrundunterstützung mit Fallback-Bildern
Verlauf-Überlagerungen mit Opazitätskontrollen
Getrennte Konfigurationen für Mobilgeräte und Desktop
Animations- und Übergangseffekte
Mehrere Optionen für Hintergrundgröße und Positionierung
Leistungsoptimiertes Laden
Verfügbar in:
✅ Plain Jane v3.1+
✅ Plain Jane Interactive v2+
🔧 So fügen Sie die Dynamic Background Section hinzu
Gehen Sie zu Onlineshop > Themes > Anpassen
Navigieren Sie zu der Seite, auf der Sie den Hintergrund hinzufügen möchten
Klicken Sie Sektion hinzufügen
Wählen Sie Dynamischer Hintergrund
Konfigurieren Sie die Hintergrundeinstellungen in der Seitenleiste
💡 Hinweis: Diese Sektion wird häufig auf Startseiten, Landingpages und speziellen Werbeseiten verwendet.
🖼️ Optionen zur Hintergrundkonfiguration
Hintergrundstil
Farbiger Hintergrund
Option für einfarbigen Hintergrund
Wählen Sie einen beliebigen Hex-Farbwert
Getrennte Farboptionen für Desktop und Mobil
Ideal für minimalistische Designs
Bildhintergrund
Laden Sie benutzerdefinierte Hintergrundbilder hoch
Unterstützung für hochauflösende Bilder
Mehrere Größen- und Positionierungsoptionen
Automatische Optimierung für das Web
Video-Hintergrund
Laden Sie MP4-Videodateien für dynamische Hintergründe hoch
Automatischer Fallback zu Bildern auf Mobilgeräten (zur Leistungssteigerung)
Schleifen- und Autoplay-Steuerungen
Optimiert für Leistung und Datenverbrauch
Desktop-Hintergrundeinstellungen
Hintergrundfarbe
Primäre Hintergrundfarbe für Desktop
Standard:
#ffffff(weiß)Wird als Fallback verwendet, wenn Bilder/Videos nicht geladen werden
Hintergrundbild
Laden Sie ein desktop-spezifisches Hintergrundbild hoch
Empfohlene Mindestgröße: 1920x1080px
Unterstützt JPG-, PNG- und WebP-Formate
Hintergrundvideo
Laden Sie ein Hintergrundvideo für den Desktop hoch
MP4-Format empfohlen
Halten Sie die Dateigröße unter 10 MB für optimale Leistung
Automatische Schleifen- und Stummschalt-Einstellungen
Mobile Hintergrund-Einstellungen
Mobile Hintergrundfarbe
Getrennte Farbeinstellung für Mobilgeräte
Oft anders als auf dem Desktop für eine bessere mobile Erfahrung
Optimiert für kleinere Bildschirme
Mobile Hintergrundbild
Mobil-spezifisches Hintergrundbild
Empfohlene Größe: 800x1200px (Hochformat)
Ersetzt automatisch Video-Hintergründe auf Mobilgeräten
Hintergrundbild auf Mobilgeräten anzeigen
Schalter zum Ein- / Ausschalten von Bildern auf Mobilgeräten
Verbessert die Leistung bei langsameren Verbindungen
Verwendet Farb-Hintergrund als Fallback
🎨 Überlagerungs- und Verlaufseffekte
Obere Überlagerung
Überlagerung Obere Farbe
Verlaufsüberlagerungsfarbe am oberen Rand des Hintergrunds
Erzeugt Tiefe und verbessert die Lesbarkeit von Text
Getrennte Einstellungen für Desktop und Mobil
Opazität der oberen Überlagerung
Steuert die Transparenz der oberen Überlagerung (0–100%)
Desktop: Einstellbare Opazität für Designflexibilität
Mobil: Getrennte Opazitätssteuerung für Mobile-Optimierung
Untere Überlagerung
Überlagerung Untere Farbe
Verlaufsüberlagerungsfarbe am unteren Rand
Erzeugt sanfte Farbübergänge
Verbessert die visuelle Hierarchie
Opazität der unteren Überlagerung
Steuert die Transparenz der unteren Überlagerung
Unabhängige Einstellungen für Desktop und Mobil
Ermöglicht subtile oder dramatische Effekte
📱 Mobiloptimierung
Responsives Verhalten
Automatischer Mobilwechsel
Videos wechseln automatisch zu Bildern auf Mobilgeräten
Optimiert für mobilen Datenverbrauch
Erhält visuelle Konsistenz über Geräte hinweg
Mobil-spezifische Einstellungen
Getrennte Farb-, Bild- und Überlagerungseinstellungen
Optimierte Dateigrößen für die mobile Anzeige
Berücksichtigung touch-freundlicher Interaktionen
Leistungsoptimierung
Lazy Loading für Hintergrundbilder
Komprimierte Videodateien für schnelleres Laden
Automatische Formatwahl basierend auf Browserunterstützung
⚙️ Erweiterte Anpassung
Hintergrundgröße
Cover (Standard)
Skaliert den Hintergrund, um den gesamten Bereich abzudecken
Kann Teile des Bildes/Videos zuschneiden
Am besten für Fullscreen-Effekte
Contain
Skaliert, um innerhalb des Containers zu passen
Zeigt das gesamte Bild/Video
Kann leeren Raum lassen
Auto
Verwendet die natürliche Größe des Hintergrundmediums
Keine Skalierung angewendet
Am besten für spezifische Designanforderungen
Hintergrundposition
Zentriert (Standard)
Zentriert den Hintergrund im verfügbaren Raum
Ausgewogene Komposition
Ausrichtung oben/unten
Am oberen oder unteren Rand des Containers ausrichten
Nützlich für bestimmte Fokuspunkte
Ausrichtung links/rechts
Horizontale Positionskontrolle
Kreative Layoutmöglichkeiten
🚀 Best Practices
Leistungsoptimierung
Video-Hintergründe
Halten Sie Videodateien unter 10 MB
Verwenden Sie H.264-Codierung für beste Kompatibilität
Stellen Sie hochwertige Poster-Bilder als Fallbacks bereit
Testen Sie bei verschiedenen Verbindungsgeschwindigkeiten
Bildoptimierung
Komprimieren Sie Bilder ohne Qualitätsverlust
Verwenden Sie nach Möglichkeit das WebP-Format
Stellen Sie geeignete Größen für Desktop und Mobil bereit
Berücksichtigen Sie die Auswirkungen der Dateigröße auf Ladezeiten
Designüberlegungen
Lesbarkeit der Inhalte
Verwenden Sie Überlagerungen, um die Lesbarkeit von Text sicherzustellen
Testen Sie Kontrastverhältnisse für Barrierefreiheit
Berücksichtigen Sie unterschiedliche Betrachtungsbedingungen auf Geräten
Stellen Sie Fallback-Farben für fehlgeschlagene Ladevorgänge bereit
Mobile Erfahrung
Priorisieren Sie mobile Leistung über visuelle Effekte
Testen Sie auf tatsächlichen Mobilgeräten mit langsameren Verbindungen
Berücksichtigen Sie Datenverbrauchsfolgen für Benutzer
Bieten Sie sinnvolle Fallbacks an
Barrierefreiheit
Bewegungsempfindlichkeit
Bieten Sie Optionen zum Deaktivieren von Video-Hintergründen
Respektieren Sie die Bewegungseinstellungen des Benutzers
Verwenden Sie nach Möglichkeit subtile Animationen
Testen Sie mit Barrierefreiheitswerkzeugen
Farbkontrast
Stellen Sie ausreichenden Kontrast für Textlesbarkeit sicher
Testen Sie mit verschiedenen Hintergrundkombinationen
Berücksichtigen Sie farbenblinde Nutzer
Nutzen Sie Verlaufsüberlagerungen strategisch
🔧 Fehlerbehebung
Häufige Probleme
Video spielt nicht
Überprüfen Sie das Video-Dateiformat (MP4 empfohlen)
Vergewissern Sie sich, dass die Dateigröße innerhalb der Grenzen liegt
Stellen Sie richtige Encodierungseinstellungen sicher
Testen Sie in verschiedenen Browsern
Schlechte mobile Leistung
Reduzieren Sie die Bilddateigrößen
Aktivieren Sie mobile Hintergrundoptimierungen
Testen Sie auf echten Mobilgeräten
Erwägen Sie, Videos auf Mobilgeräten zu deaktivieren
Ladeprobleme
Optimieren Sie Bild- und Videodateigrößen
Prüfen Sie die Anforderungen an die Internetverbindung
Verifizieren Sie, dass Dateiformate unterstützt werden
Testen Sie mit unterschiedlichen Browser-Caching-Einstellungen
Browserkompatibilität
Video-Unterstützung
Moderne Browser: Volle Unterstützung
Ältere Browser: Fallback zu Bildern
Mobile Browser: Bildersatz aus Leistungsgründen
Bildformate
WebP: Beste Kompression, Unterstützung moderner Browser
JPEG: Universelle Kompatibilität
PNG: Am besten für Grafiken mit Transparenz
Zuletzt aktualisiert