Stil

Mithilfe des Bereichs „Stil“ lässt sich das Erscheinungsbild Deiner Beekeeper-Plattform so anpassen, dass es mit dem Branding deines Unternehmens übereinstimmt. Dazu gehört auch die Aktualisierung von Logo, Favicon und Farben für Web und Mobile.

Zugang zum Stil

Globale Admins haben zwei Möglichkeiten, auf den Bereich „Stil“ zuzugreifen

Klicken Sie auf der Startseite im Web auf das Zahnradsymbol (⚙️) in der oberen rechten Ecke und wählen Sie „Farben anpassen“
Klicken Sie auf dem Dashboard auf das Dashboard-Symbol (Tachometer) in der oberen Navigationsleiste und gehen Sie zu Einstellungen > Stil

Wie lässt sich die Plattform anpassen?

Logo

📌 Use the preview on the right to check how your logo will look. If needed, adjust the Top navigation bar color, which serves as the background behind the logo file.

Laden Sie Ihr Logo hoch, damit es in der oberen Navigationsleiste sowohl im Web als auch auf dem Handy erscheint.

Unterstützte Dateitypen: .jpeg, .png
Maximale Größe: 110KB
Empfohlene Höhe: Mindestens 100px

📌 Verwenden Sie die Vorschau auf der rechten Seite, um zu prüfen, wie Ihr Logo aussehen wird. Passen Sie bei Bedarf die hervorgehobene Farbe an, die als Hintergrund für die Logodatei dient.

Favicon

Favicons werden in Browser-Registerkarten und Lesezeichen angezeigt.

Dateityp: .ico
Maximale Größe: 10KB
Empfohlene Dimensionen: 16 × 16 pixels
Verwenden Sie einen Favicon-Generator wie favicon.cc, um das richtige Format aus einem Bild zu erstellen.

✅ Eine Vorschau ist verfügbar, damit Sie vor dem Speichern prüfen können, wie Ihr Favicon aussehen wird.

Farben

Sie können das Farbschema der Plattform an Ihre Marke anpassen. Wenn Sie die Hex-Codes Ihrer Marke noch nicht kennen, wenden Sie sich an Ihr Marketing-Team.

Was Sie anpassen können:

Hervorgehobene Farbe – verwendet für Schaltflächen, Links, Icons und andere interaktive Elemente
Farbe der Navigationsleiste (nur Desktop) – in der Kopfzeile der App angezeigt (dient auch als Hintergrund für Ihr Logo)
Farbe der Branding-Leiste – legt die Farbe der Branding-Leiste unterhalb der oberen Navigationsleiste fest.
Hintergrundfarbe (nur für Desktop)
– empfohlen: #FAFAFA; wirkt sich nicht auf die mobile Ansicht aus
Optional: Farbverlauf für Navigations- und Branding-Leisten deaktivieren (standardmäßig ist der Farbverlauf eingeschaltet)

Vorschläge und Best Practices:

🔁 Verwenden Sie dieselbe Farbe für die obere Navigationsleiste und die Branding-Leiste, um ein einheitliches, sauberes Aussehen zu erzielen.
✅ Verwenden Sie die integrierte Vorschau, um zu sehen, wie Ihre Farbauswahl in der Desktop- und der mobilen Ansicht aussieht.
⚠️ Achten Sie auf den Kontrast: Die Farbe der oberen Navigationsleiste dient als Hintergrund für Ihr Logo. Stellen Sie sicher, dass sich das Logo deutlich davon abhebt.
👁️ Die Kontrastprüfung benachrichtigt Sie, wenn die ausgewählten Farben nicht den Standards für Barrierefreiheit und Sichtbarkeit entsprechen.

Speichern von Änderungen

Wenn Sie alle Änderungen vorgenommen haben, klicken Sie oben rechts auf Speichern. Aktualisieren Sie Ihre Webanwendung, um die vorgenommenen Aktualisierungen zu sehen.

Zusätzliche Hinweise

Stilisierungsoptionen sind nur für globale Admins verfügbar
Verwenden Sie die integrierte Vorschau, um die Sichtbarkeit und das Layout vor der endgültigen Fertigstellung zu testen
Internet Explorer wird nicht mehr unterstützt
Achten Sie darauf, dass alle visuellen Elemente einen ausreichenden Kontrast haben und sowohl auf dem Desktop als auch auf dem Handy gut aussehen, um optimale Ergebnisse zu erzielen.

Sehen Sie, wie die Plattform mit den empfohlenen Einstellungen aussehen kann:

Mobile Ansicht + Web-Ansicht: Startseite