Branding-Portal Übersicht

Kompletter Überblick über alle Branding-Funktionen und -Optionen

7 min readLast updated: 1/15/2024142 found helpful

Branding-Portal Übersicht

Das Branding-Portal ist Ihr zentraler Ort, um das Erscheinungsbild Ihres Flight Displays an Ihre Markenidentität anzupassen. Dieser Artikel gibt Ihnen einen vollständigen Überblick über alle verfügbaren Funktionen.

Portal-Navigation

Zugriff auf das Branding-Portal

  • Anmelden

    • - Öffnen Sie https://lobbyflight.com/login

    - Geben Sie Ihre Hotel-E-Mail und Passwort ein

    - Klicken Sie auf "Sign in"

  • Zum Branding navigieren

    • - Klicken Sie in der Haupt-Navigation auf "Branding"

    - Oder verwenden Sie den direkten Link: /portal/branding

  • Portal-Layout

    • - Übersichtliche Sektionen

    - Visuelles Feedback

    - Live-Vorschau verfügbar

    Hauptbereiche

    1. Hotel Logo

    Funktion: Hochladen und Verwalten Ihres Hotel-Logos

    Was Sie tun können:

  • Logo hochladen (PNG, JPG, SVG, WebP)
  • Maximale Dateigröße: 2 MB
  • Logo ersetzen/entfernen
  • Vorschau in Echtzeit

    • Wo es erscheint:

  • Header des Flight Displays (links)
  • Neben dem Hotel-Namen
  • Auf allen Display-Seiten sichtbar

    • Mehr Infos: Logo hochladen und verwalten

    2. Brand Colors

    Funktion: Anpassen der Farbpalette

    Was Sie tun können:

  • Primärfarbe auswählen (Buttons, Akzente)
  • Sekundärfarbe auswählen (Hover, Backgrounds)
  • 8 vordefinierte Themes verwenden
  • Eigene Hex-Codes eingeben
  • Live-Vorschau der Farben

    • Wo es erscheint:

  • Tab-Navigation (Departures/Arrivals)
  • Buttons und interaktive Elemente
  • Header-Akzente
  • Info-Slide-Hintergründe

    • Mehr Infos: Farben anpassen und Themes verwenden

    Funktionen im Detail

    Logo-Bereich

    Upload-Optionen:

    [CODE_BLOCK]

  • Drag & Drop: Datei in den Bereich ziehen
  • File Browser: Datei auswählen über "Upload a logo"
  • Vorschau: Sofortige Anzeige nach Upload
  • Aktionen: Ersetzen, Entfernen

    • [CODE_BLOCK]

    Status-Anzeige:

  • ✅ Logo hochgeladen: Grüne Bestätigung
  • ⏳ Uploading...: Ladeanzeige während Upload
  • ❌ Fehler: Rote Fehlermeldung mit Details

    • Validierung:

  • Dateityp-Check vor Upload
  • Größen-Check (max 2 MB)
  • Automatische Optimierung
  • Fehlerbehandlung mit klaren Meldungen

    • Farb-Bereich

    Theme-Auswahl:

    [CODE_BLOCK]

    8 vordefinierte Themes:

  • Ocean Blue (Standard)
  • Forest Green
  • Royal Purple
  • Sunset Orange
  • Ruby Red
  • Midnight Blue
  • Emerald
  • Slate Gray

    • [CODE_BLOCK]

    Manuelle Eingabe:

  • Color Picker für visuelle Auswahl
  • Hex-Code-Eingabe (#RRGGBB)
  • Automatische Validierung
  • Live-Vorschau während Auswahl

    • Vorschau-Boxen:

  • Primärfarbe: Linke Box
  • Sekundärfarbe: Rechte Box
  • Farbcode angezeigt
  • Klickbar zum Bearbeiten

    • Speicher-Funktion

    Auto-Save:

  • Logo: Automatisch nach Upload gespeichert
  • Farben: Manuelles Speichern erforderlich

    • Bestätigungen:

  • "Logo uploaded successfully!"
  • "Colors saved successfully!"
  • Grüne Bestätigungsmeldung (3 Sekunden)

    • Fehlerbehandlung:

  • Rote Fehlermeldungen
  • Detaillierte Fehlerbeschreibung
  • Lösungsvorschläge

    • Workflow-Beispiele

    Erstmalige Einrichtung

    Schritt 1: Logo hochladen

    [CODE_BLOCK]

  • Navigieren Sie zu Branding
  • Laden Sie Ihr Hotel-Logo hoch (max 2 MB)
  • Überprüfen Sie die Vorschau
  • ✅ Logo wird automatisch gespeichert

    • [CODE_BLOCK]

    Schritt 2: Farben anpassen

    [CODE_BLOCK]

  • Scrollen Sie zu "Brand Colors"
  • Wählen Sie ein Theme ODER
  • Wählen Sie eigene Farben
  • Klicken Sie auf "Save Colors"
  • ✅ Farben gespeichert

    • [CODE_BLOCK]

    Schritt 3: Vorschau testen

    [CODE_BLOCK]

  • Klicken Sie auf "Preview" in der Navigation
  • Sehen Sie Ihr Branding live
  • Testen Sie auf verschiedenen Geräten
  • Bei Bedarf: Zurück zu Branding und anpassen

    • [CODE_BLOCK]

    Schritt 4: Display aktivieren

    [CODE_BLOCK]

  • Kopieren Sie die Display-URL
  • Öffnen Sie sie auf Ihrem Android-Display
  • Fügen Sie zum Home Screen hinzu
  • ✅ Display läuft mit Ihrem Branding!

    • [CODE_BLOCK]

    Rebranding durchführen

    Szenario: Ihr Hotel hat neue Markenfarben

    Prozess:

    [CODE_BLOCK]

  • Altes Logo entfernen:

    • - Klicken Sie auf "Remove Logo"

    - Bestätigen Sie

  • Neues Logo hochladen:

    • - Laden Sie das neue Logo hoch

    - Überprüfen Sie Darstellung

  • Neue Farben einstellen:

    • - Primärfarbe ändern

    - Sekundärfarbe ändern

    - Klicken Sie auf "Save Colors"

  • Display aktualisieren:

    • - Warten Sie 5 Minuten (Auto-Refresh) ODER

    - Drücken Sie F5 auf dem Display

  • ✅ Rebranding abgeschlossen

    • [CODE_BLOCK]

    Responsive Design

    Desktop-Ansicht (>1024px)

    Layout:

  • Zwei Spalten
  • Logo-Bereich links
  • Farb-Bereich rechts
  • Volle Vorschau-Größe

    • Tablet-Ansicht (768px - 1024px)

    Layout:

  • Eine Spalte
  • Logo-Bereich oben
  • Farb-Bereich unten
  • Kompakte Vorschau

    • Mobile-Ansicht (<768px)

    Layout:

  • Gestapelt vertikal
  • Vollbreite Elemente
  • Touch-optimierte Buttons
  • Kleinere Vorschau-Boxen

    • Tipp: Verwenden Sie Desktop/Tablet für beste Branding-Erfahrung.

    Animationen und Feedback

    Framer Motion Animationen

    Beim Laden der Seite:

    [CODE_BLOCK]

  • Stagger-Effekt (Elemente erscheinen nacheinander)
  • Fade-in von oben
  • 0.5s Dauer
  • Smooth Easing

    • [CODE_BLOCK]

    Beim Hover:

    [CODE_BLOCK]

  • Buttons: Leichtes Heben (translateY)
  • Farb-Boxen: Skalierung (scale 1.02)
  • Sanfte Übergänge (0.2s)

    • [CODE_BLOCK]

    Beim Speichern:

    [CODE_BLOCK]

  • Erfolg: Grüne Slide-in-Meldung
  • Fehler: Rote Shake-Animation
  • Auto-Dismiss nach 3 Sekunden

    • [CODE_BLOCK]

    Visuelles Feedback

    Lade-Zustände:

  • Upload: Spinner-Animation
  • Speichern: "Saving..." Button-Text
  • Prozess: Disabled-State während Verarbeitung

    • Erfolgs-Meldungen:

  • Grüner Hintergrund (#22C55E)
  • Checkmark-Icon
  • Klare Bestätigungstexte

    • Fehler-Meldungen:

  • Roter Hintergrund (#EF4444)
  • X-Icon
  • Detaillierte Fehlerbeschreibung

    • Tastatur-Shortcuts

    Schneller arbeiten mit Tastatur:

    [CODE_BLOCK]

    Ctrl/Cmd + S: Farben speichern

    Tab: Zwischen Feldern navigieren

    Enter: In Color Picker Farbe bestätigen

    Esc: Modals/Dialoge schließen

    [CODE_BLOCK]

    Abo-Plan-Unterschiede

    Branding in allen Plänen

    Basic (€69/Monat):

  • ✅ Logo hochladen
  • ✅ Farben anpassen
  • ✅ 8 Themes verfügbar
  • ✅ Live-Vorschau

    • Pro (€89/Monat):

  • ✅ Alle Basic-Features
  • ✅ Mehr Display-Optionen
  • ✅ 3 Flughäfen

    • Premium (€129/Monat):

  • ✅ Alle Pro-Features
  • ✅ White-Label-Optionen (kommend)
  • ✅ Unbegrenzte Flughäfen

    • Branding-Features sind in allen Plänen gleich!

    Best Practices

    1. Vorbereitung

    Bevor Sie starten:

  • Logo in hoher Qualität bereit (PNG empfohlen)
  • Markenfarben als Hex-Codes notiert
  • Display-Gerät bereit für Tests
  • Team informiert über Änderungen

    • 2. Reihenfolge

    Empfohlener Ablauf:

    [CODE_BLOCK]

  • Logo hochladen

    • ↓

  • Farben anpassen

    • ↓

  • Vorschau testen

    • ↓

  • Feintuning durchführen

    • ↓

  • Display aktivieren

    • [CODE_BLOCK]

    3. Testing

    Wichtige Tests:

  • Desktop-Vorschau im Portal
  • Display-URL auf echtem Gerät
  • Verschiedene Tageszeiten (Licht!)
  • QR-Code-Scan vom Smartphone
  • Team-Feedback einholen

    • 4. Dokumentation

    Was Sie dokumentieren sollten:

  • Logo-Version/Dateiname
  • Verwendete Hex-Codes
  • Datum der Änderungen
  • Verwendetes Theme (falls relevant)

    • Warum?:

  • Konsistenz über alle Kanäle
  • Einfaches Zurücksetzen bei Bedarf
  • Team-Referenz

    • Fehlerbehebung

    Änderungen nicht sichtbar

    Problem: Branding erscheint nicht auf Display

    Lösung:

  • Überprüfen Sie "Saved successfully!" Meldung
  • Warten Sie 5 Minuten (Auto-Refresh)
  • Oder: F5 auf Display drücken
  • Oder: Browser-Cache leeren

    • Upload schlägt fehl

    Problem: Logo kann nicht hochgeladen werden

    Lösung:

  • Dateigröße prüfen (max 2 MB)
  • Dateiformat prüfen (PNG, JPG, SVG, WebP)
  • Internetverbindung prüfen
  • Anderen Browser versuchen

    • Farben nicht wie erwartet

    Problem: Farben sehen anders aus

    Lösung:

  • Display-Kalibrierung prüfen
  • Auf echtem Display-Gerät testen
  • Umgebungslicht berücksichtigen
  • Kontrast mit WebAIM Tool prüfen

    • Häufig gestellte Fragen

    Wie lange dauert das Branding-Setup?

    Normalerweise 10-15 Minuten für Logo + Farben.

    Kann ich Änderungen rückgängig machen?

    Ja, Sie können jederzeit Logo/Farben ändern. Alte Versionen werden nicht gespeichert.

    Muss ich das Display neu starten nach Änderungen?

    Nein, Auto-Refresh nach 5 Minuten. Oder manuell F5 drücken.

    Kann ich verschiedene Brandings für verschiedene Displays haben?

    Nein, ein Hotel = ein Branding für alle Displays.

    Unterstützen Sie Video-Logos?

    Nein, nur statische Bilder (PNG, JPG, SVG, WebP).

    Nächste Schritte

    Nach dem Branding-Setup:

  • Flughafen-Auswahl konfigurieren - Wählen Sie Ihre Flughäfen
  • Display-Verhalten anpassen - Konfigurieren Sie Refresh, Rotation
  • Display-Vorschau öffnen - Sehen Sie alles live

    • Support

    Fragen zum Branding-Portal?

  • E-Mail: support@rifadigital.com
  • Telefon: +43 650 753 1811
  • Live-Chat: Montag-Freitag, 9:00-18:00 Uhr

    • Was this article helpful?

    Contact support

    In this article

    Related Articles

    Logo hochladen und verwalten

    8 min read

    Farben anpassen und Themes verwenden

    10 min read