Banner-Einstellungen

Ihr Banner konfigurieren

Passen Sie jeden Aspekt Ihres Banners mit unserem umfassenden Einstellungsbereich an. Der Einstellungsbereich bietet präzise Kontrolle über Zeitplanung, Wiedergabeverhalten und Abmessungen.

Planer

Konfigurieren Sie, wann Ihr Banner erscheint:

  • Dauerhafte Sichtbarkeit - Immer sichtbar (Standard)

    Ihr Banner wird dauerhaft in Ihrem Shop angezeigt, ohne zeitliche Einschränkungen.

  • Datumsbereich - Sie können spezifische Start- und Enddaten mit Uhrzeiten festlegen
    • Startdatum: Wählen Sie Tag, Monat, Jahr und Uhrzeit, wann Ihr Banner erscheinen soll. Wenn leer gelassen, ist das Banner sofort nach Veröffentlichung sichtbar.
    • Enddatum: Wählen Sie Tag, Monat, Jahr und Uhrzeit, wann Ihr Banner verschwinden soll. Wenn leer gelassen, bleibt das Banner unbegrenzt sichtbar.

Profi-Tipp: Planen Sie Banner im Voraus für Feiertagsverkäufe oder besondere Events. Dies stellt sicher, dass Ihre Werbeaktionen automatisch zum perfekten Zeitpunkt live gehen, auch außerhalb der Geschäftszeiten.

Wiedergabe-Optionen

Optimieren Sie, wie Ihre Banner-Slides übergehen und sich verhalten:

  • Automatische Wiedergabe - Aktivieren/Deaktivieren der automatischen Slide-Progression
  • Pause beim Hovern - Aktivieren/Deaktivieren der Option, die automatische Slide-Progression zu stoppen, wenn ein Benutzer mit der Maus über das Banner fährt. Nützlich, um Benutzern mehr Zeit zum Lesen des Inhalts zu geben.
  • Navigationspfeile - Ein-/Ausblenden der linken und rechten Pfeile für manuelle Slide-Navigation
  • Navigationspunkte - Ein-/Ausblenden der Indikatorp unkte am unteren Rand des Banners
  • Animationsgeschwindigkeit - Steuern Sie, wie schnell die Slide-Übergangsanimation abläuft (100ms - 2000ms, typischerweise 500ms empfohlen)
  • Animationstyp - Wählen Sie zwischen slide (horizontale Bewegung) oder fade (Überblendung)
  • Intervall (Slide-Intervall) - Legen Sie fest, wie lange jeder Slide angezeigt wird, bevor automatisch zum nächsten gewechselt wird (1000ms - 30000ms). Längere Intervalle funktionieren gut für inhaltsreiche Slides.

Hinweis: Der Animationstyp 'slide' erzeugt eine horizontale Gleitbewegung zwischen Slides, während 'fade' einen sanften Überblendungseffekt erzeugt. Wählen Sie basierend auf dem visuellen Stil Ihres Banners.

Empfohlene Einstellungen

  • Intervallzeit: 5-7 Sekunden pro Slide ist der optimale Punkt für die meisten Banner. Dies gibt Benutzern genug Zeit, den Inhalt aufzunehmen, ohne sich gehetzt zu fühlen.
  • Pause beim Hovern: Aktivieren Sie dies, um Benutzern die Kontrolle über das Tempo zu geben. Es ist besonders nützlich für textreiche Slides oder wenn Benutzer auf Links klicken möchten.
  • Automatische Wiedergabe: Großartig für Hero-Banner und Bildpräsentationen. Erwägen Sie die Deaktivierung für kritische Ankündigungen, bei denen Benutzer alle Slides sehen sollten.
  • Navigationssteuerungen: Zeigen Sie sowohl Pfeile als auch Punkte für maximale Benutzerkontrolle an, oder blenden Sie sie für ein saubereres Aussehen bei einfachen Ein-Slide-Bannern aus.

Abmessungen

Steuern Sie die Größe und das responsive Verhalten Ihres Banners.

Standardmäßig werden die Abmessungen des Banners basierend auf zwei Faktoren berechnet:

  • Breite: 100% des Containers (dehnt sich aus, um den verfügbaren horizontalen Platz zu füllen)
  • Höhe: Der im Feld 'Maximale Banner-Höhe' festgelegte Wert (in Pixeln)

Globale Einstellung: Die 'Maximale Banner-Höhe' ist eine globale Einstellung unter Einstellungen > Theme-Einstellungen. Dieser Wert gilt standardmäßig für alle Banner und gewährleistet konsistente Höhen in Ihrem Shop.

Höhen-Überschreibungsmodi

Sie können das Standard-Höhenverhalten für einzelne Banner überschreiben:

  • Standard - Verwendet die in 'Maximale Banner-Höhe' definierte feste Höhe
    • Am besten für die Beibehaltung konsistenter Banner-Höhen in Ihrem Shop
    • Empfohlen für die meisten Anwendungsfälle
  • Prozentsatz - Legen Sie die Höhe als Prozentwert der Viewport-Höhe (vh) fest
    • Ideal für responsive Designs, die sich an unterschiedliche Bildschirmgrößen anpassen
    • Beispiel: 50% bedeutet, dass das Banner die Hälfte der Browser-Fensterhöhe einnimmt
    • Achten Sie auf Pixelierung auf größeren Bildschirmen - stellen Sie hochauflösende Bilder bereit
  • Vollbild-Höhe - Banner dehnt sich auf 100% der Viewport-Höhe aus (100vh)
    • Perfekt für Hero-Bereiche und Vollbild-Landingpage-Erlebnisse
    • Erzeugt wirkungsvolle, immersive erste Eindrücke
    • Funktioniert am besten mit hochwertigen, großen Bildern oder Videos
  • Benutzerdefiniert - Legen Sie eine spezifische Höhe in Pixeln nur für dieses Banner fest
    • Überschreibt die globale Einstellung mit einem banner-spezifischen Wert
    • Nützlich, wenn ein Banner andere Abmessungen als andere benötigt
    • Denken Sie daran, auf Mobilgeräten zu testen, um übermäßig hohe Banner zu vermeiden

Best Practices:

  • Für Hero-Banner erwägen Sie Vollbild-Höhe oder hohe Prozentwerte (70-100%)
  • Für Ankündigungs-Banner bleiben Sie im Standard-Modus und halten Sie die Höhen moderat (300-500px)
  • Testen Sie immer auf Mobil, Tablet und Desktop, um sicherzustellen, dass Ihre gewählten Abmessungen auf allen Geräten gut funktionieren
  • Wenn Sie Prozentsatz oder Vollbild-Höhe verwenden, stellen Sie sicher, dass Ihre Bilder hochauflösend sind (mindestens 1920px breit), um Unschärfe auf großen Bildschirmen zu vermeiden

Abstände

Fügen Sie Abstände um Ihr Banner hinzu, indem Sie Randwerte für jede Seite konfigurieren. Abstände steuern den leeren Raum zwischen dem Banner und den umgebenden Seitenelementen.

Verknüpfter und unverknüpfter Modus

Die Abstandssteuerung verfügt über eine Verknüpfungstaste, mit der Sie zwischen zwei Modi wechseln können:

  • Verknüpft (einheitlich) - Wenn das Verknüpfungssymbol aktiv ist, teilen sich alle vier Seiten denselben Abstandswert. Das Ändern eines Feldes aktualisiert automatisch alle anderen. Das Badge zeigt den einheitlichen Wert an (z.B. '20px').
  • Unverknüpft (unabhängig) - Wenn das Verknüpfungssymbol inaktiv ist, kann jede Seite ihren eigenen Abstandswert haben. So können Sie unterschiedliche Abstände für Oben, Rechts, Unten und Links unabhängig festlegen. Das Badge zeigt 'Mixed' an, wenn die Werte unterschiedlich sind.

Abstandsfelder

Vier Abstandsfelder sind verfügbar. Jedes Feld unterstützt Pixel (px) oder Prozent (%) als Einheit, und die Einheit kann für jede Seite unabhängig geändert werden:

  • Oben: Abstand oberhalb des Banners
  • Rechts: Abstand rechts vom Banner
  • Unten: Abstand unterhalb des Banners
  • Links: Abstand links vom Banner

Best Practices:

  • Verwenden Sie den verknüpften Modus für schnelle, einheitliche Abstände um das Banner
  • Verwenden Sie den unverknüpften Modus, wenn Sie engere Seitenabstände, aber mehr vertikalen Freiraum benötigen (oder umgekehrt)
  • Ein kleiner Abstand oben und unten (z.B. 10-20px) hilft, das Banner vom angrenzenden Inhalt zu trennen
  • Setzen Sie den linken und rechten Abstand auf 0, wenn das Banner innerhalb seines Containers von Rand zu Rand reichen soll
  • Erwägen Sie Pixel (px) für die oberen und unteren Abstände, um einen gleichmäßigen vertikalen Abstand beizubehalten, während Prozent (%) für die linken und rechten Abstände besser geeignet sein kann, da es sich proportional an verschiedene Bildschirmbreiten anpasst