🎨 Hintergrund & Banner Einstellungen

Vollständige Anleitung zu allen Funktionen

Banner Hintergrund Wrapper Laufschrift Tipps

🌈 Hintergrund Einstellungen

🎨 Hintergrundtyp

Farbverlauf (Gradient)
Erstellen Sie einen sanften Übergang zwischen zwei Farben:
  • Startfarbe: Obere Farbe des Verlaufs
  • Endfarbe: Untere Farbe des Verlaufs
Ideal für: Moderne, dynamische Designs
Bild
Laden Sie ein Hintergrundbild hoch, das die gesamte Seite ausfüllt.
  • Das Bild wird automatisch skaliert (cover)
  • Bleibt beim Scrollen fixiert (fixed)
  • Wird zentriert positioniert
Einfarbig (Solid)
Wählen Sie eine einzelne Farbe für den gesamten Hintergrund.
Ideal für: Minimalistische Designs mit klarem Fokus auf Inhalte

Wichtig: Bildlöschung

Wenn Sie ein vorhandenes Hintergrundbild löschen möchten, aktivieren Sie die Checkbox "Hintergrundbild löschen" vor dem Speichern. Das Bild wird permanent vom Server entfernt!

📦 Wrapper (Hauptcontainer)

🎨 Wrapper-Typ

Einfarbig
Eine durchgehende Farbe für den Hauptcontainer. Wählen Sie eine Farbe, die gut mit Ihrem Hintergrund harmoniert.
Farbverlauf
Erstellen Sie einen vertikalen Farbverlauf von oben nach unten:
  • Startfarbe: Oben
  • Endfarbe: Unten
Bild
Verwenden Sie ein Bild als Wrapper-Hintergrund. Das Bild wird innerhalb des Containers angezeigt und kann halbtransparent sein.

📏 Größe & Dimensionen

Wrapper-Breite
Standard: 1400px
Lassen Sie das Feld leer für den Standard, oder geben Sie einen eigenen Wert ein (z.B. 1200px, 90%)
Wrapper-Höhe
Standard: auto (passt sich dem Inhalt an)
Sie können auch eine feste Höhe festlegen (z.B. 800px)

✨ Spezialeffekte

Glow-Effekt
Aktivieren Sie einen leuchtenden Schein um den Wrapper:
  • Checkbox aktivieren
  • Glow-Farbe wählen (z.B. #ffffff für Weiß)
Erzeugt einen atmosphärischen Halo-Effekt
Metall-Rahmen mit Licht-Effekt
Ein animierter, metallischer Rahmen mit pulsierendem Licht:
  • Rahmen-Farbe: Grundfarbe des Rahmens (z.B. Gold: #ffd700)
  • Licht-Farbe: Farbe des Leucht-Effekts (z.B. #ff9900)
  • Rahmen-Stärke: 1-20 Pixel
  • Licht-Stärke: 5-50 Pixel
  • Animation:
    • Pulsieren: Sanftes Auf- und Abschwellen
    • Leuchten: Rhythmisches Glühen
    • Schein-Effekt: Dynamischer Farbwechsel
    • Keine Animation: Statischer Rahmen

Design-Tipp: Metall-Rahmen

Für einen edlen Look kombinieren Sie:

  • Rahmen-Farbe: #ffd700 (Gold)
  • Licht-Farbe: #ff9900 (Orange)
  • Animation: Pulsieren
  • Rahmen-Stärke: 8px
  • Licht-Stärke: 15px

📜 Laufschrift (Marquee)

Laufschrift aktivieren
Aktivieren Sie die Checkbox, um eine horizontale Laufschrift zu aktivieren, die sich kontinuierlich von rechts nach links bewegt.
Text
Geben Sie den Text ein, der als Laufschrift angezeigt werden soll. Dieser wird automatisch dupliziert, um eine nahtlose Schleife zu erstellen.
Geschwindigkeit
Bestimmen Sie, wie schnell der Text läuft. Beispiele:
  • 10s - Schnell (10 Sekunden für eine Durchlauf)
  • 15s - Standard
  • 20s - Langsam
Hintergrundfarbe
Farbe des Laufschrift-Containers. Verwenden Sie transparente Werte für einen subtilen Look (z.B. #2220)
Schriftfarbe
Farbe des Textes in der Laufschrift. Wählen Sie einen hohen Kontrast zur Hintergrundfarbe für beste Lesbarkeit.
Schriftgröße
Größe des Textes in Pixeln. Empfohlen: 20-28px für gute Lesbarkeit

💡 Tipps & Best Practices

Farbharmonie

Achten Sie darauf, dass Ihre gewählten Farben gut zusammenpassen:

  • Verwenden Sie maximal 3-4 Hauptfarben
  • Nutzen Sie Online-Tools wie Adobe Color oder Coolors.co für Farbpaletten
  • Testen Sie die Lesbarkeit: Dunkler Text auf hellem Hintergrund oder umgekehrt

Performance

Für optimale Ladezeiten:

  • Komprimieren Sie Bilder vor dem Upload (max. 200 KB empfohlen)
  • Verwenden Sie moderne Bildformate wie WebP oder optimierte PNG/JPG
  • Vermeiden Sie zu viele animierte Effekte gleichzeitig

Responsive Design

Ihre Einstellungen funktionieren auf verschiedenen Bildschirmgrößen:

  • Banner und Wrapper skalieren automatisch auf mobilen Geräten
  • Verwenden Sie prozentuale Werte (%) für flexible Layouts
  • Testen Sie Ihre Seite auf verschiedenen Geräten

Wichtige Hinweise

  • Speichern nicht vergessen: Klicken Sie immer auf "Speichern" am Ende der Seite, sonst gehen Ihre Änderungen verloren!
  • Backup erstellen: Das System erstellt automatisch Backups Ihrer Konfiguration bei jedem Speichern
  • Bildrechte: Verwenden Sie nur Bilder, für die Sie die Rechte besitzen

🎯 Empfohlene Einstellungen für verschiedene Stile

Minimalistisch & Modern:
• Hintergrund: Einfarbig (#0a0a0a)
• Wrapper: Farbverlauf (#1a1a1a → #2d2d2d)
• Banner: Ohne Animation, zentriert, 100% Breite
• Glow: Dezent (#ffffff, geringe Stärke)
Dynamisch & Auffällig:
• Hintergrund: Bild mit Gradient-Overlay
• Wrapper: Metall-Rahmen mit Pulsieren
• Banner: Zoom-In Animation, 90% Breite
• Laufschrift: Aktiviert, leuchtende Farben
Elegant & Klassisch:
• Hintergrund: Dunkler Gradient (#000000 → #1a1a1a)
• Wrapper: Einfarbig mit goldenem Rahmen
• Banner: Slide-Up Animation, zentriert
• Glow: Goldton (#ffd700)

🚀 Schnellstart: Ihre erste Konfiguration

Schritt 1: Banner einrichten
  • Geben Sie einen Banner-Text ein (z.B. "Willkommen auf meiner Website")
  • Laden Sie ein Banner-Bild hoch (empfohlen: 1200x200px)
  • Wählen Sie eine Glow-Farbe passend zu Ihrem Design
  • Optional: Aktivieren Sie eine Animation
Schritt 2: Hintergrund gestalten
  • Wählen Sie einen Hintergrundtyp (Gradient empfohlen für Anfänger)
  • Wenn Gradient: Wählen Sie Start- und Endfarbe
  • Wenn Bild: Laden Sie ein hochauflösendes Bild hoch
Schritt 3: Wrapper konfigurieren
  • Wählen Sie einen Wrapper-Typ (Gradient für modernen Look)
  • Lassen Sie Breite und Höhe zunächst auf Standard
  • Optional: Aktivieren Sie den Glow-Effekt
Schritt 4: Speichern & Testen
  • Scrollen Sie zum Ende der Seite
  • Klicken Sie auf "Speichern"
  • Öffnen Sie Ihre Startseite in einem neuen Tab
  • Passen Sie bei Bedarf nach