Website-Layout bearbeiten

Überblick

Im Bereich Layout und Design passt du das visuelle Erscheinungsbild der Event-Website an. Du kannst Farben und bestimmte Layout-Optionen konfigurieren, ohne Inhalte zu verändern.

Funktionen

Layout-Einstellungen bearbeiten

Öffne das Event, dessen Website-Layout du bearbeiten möchtest.
Navigiere im linken Menü zum Bereich Website und wähle dort den Tab für Layout oder Design.
Verändere die Einstellungen, die du ändern willst (z. B. Farben).
Drücke "Speichern" (unten rechts in blau).

Layout-Varianten testen

Nimm Änderungen an Farben oder Layout-Optionen vor.
Öffne die öffentliche Event-Website in einem neuen Tab oder Fenster.
Überprüfe, wie sich die Änderungen auf unterschiedlichen Geräten (Desktop, Tablet, Smartphone) auswirken.

Felder

Layout

Wähle hier das entsprechende Layout aus, das für deine Website gelten soll.

Logo

Website-Logo: Bild, das im Header der Event-Website angezeigt wird (z. B. Event- oder Organisationslogo).
Darkmode-Logo: Bild, das nur in der Darkmode-Version des Events angezeigt wird
Favicon: Bild, das in Browser-Tabs, Lesezeichen und App-Verknüpfungen verwendet wird. Am besten ein quadratisches Bild hochladen. Das Bild wird sonst gestreckt.

Theme

Helles/Dunkles Theme: Auswahl, ob die Website im hellen oder dunklen Modus dargestellt wird (sofern verfügbar).
Automatischer Modus: Optional kann eingestellt werden, dass sich das Theme an den Systemeinstellungen der Besucher:innen orientiert.

Farben

Die Farben sind in ERADIANT in Schichten und Funktionsgruppen aufgeteilt. Idealerweise stammen alle Farbtöne eines Events aus einer Farbfamilie (z. B. Grau oder Blau) und sind eher gedeckt – so bleibt die Seite ruhig und gut lesbar.

Background / Canvas: Grundhintergrund der Seite. Auf diesem „Canvas“ liegen alle Inhalte.
Card / Panel: Hintergrundfarbe für Karten, Panels oder Flächen, auf denen Texte und Eingabefelder sitzen. Im Event-Modul werden diese Flächen oft als „Card“ oder „Panel“ bezeichnet.
Raised (nur Backend): Eine zusätzliche, leicht „angehobene“ Kartenfarbe, um innerhalb eines Panels nochmals zu gliedern. Diese Ebene wird auf öffentlichen Event-Seiten aktuell nicht verwendet.
Primary (Text): Primäre Markenfarbe als Textfarbe für wichtige Hervorhebungen (z. B. Links, wichtige Labels). Die generelle Schriftfarbe ist weiß oder schwarz (je nach Modus) und nicht die Primary (Text). In einigen Blöcken kann diese separat eingestellt werden kann.
Primary (Hintergrund): Primäre Markenfarbe als Hintergrundfarbe (z. B. Buttons, aktive Elemente). Sie sollte so gewählt sein, dass der Text darauf einen guten Kontrast hat.
Secondary (Text): Zweite Markenfarbe als Textfarbe. Sie sollte nur sparsam eingesetzt werden, damit das Design nicht zu bunt wird.
Secondary (Hintergrund): Zweite Markenfarbe als Hintergrundfarbe. Wird aktuell auf den ERADIANT-Event-Seiten in der Regel nicht verwendet und ist vor allem eine Option für Sonderfälle.
Success: Farbe für positive Rückmeldungen oder erfolgreiche Aktionen (z. B. „Erfolgreich gespeichert“). Wird vor allem für Texte oder Badges genutzt. Wir empfehlen einen Blau- oder Grünton zu empfehlen (Hinweis: Farbenschwäche).
Error: Farbe für Fehler oder negative Zustände (z. B. Validierungsfehler, Fehlermeldungen). Ebenfalls hauptsächlich für Texte/Bages. Wir empfehlen, einen Rotton zu verwenden.
Border: Randlinie um Boxen o. ä..
Header-Hintergrund: Hintergrundfarbe von Header (ganz oben auf der Website).
Footer-Hintergrund: Hintergrundfarbe von Footer (ganz unten auf der Website).

Hinweis:
Die Trennung zwischen Primary/Secondary als Text und Primary/Secondary als Hintergrund hilft dabei, unterschiedliche Helligkeiten oder Sättigungen derselben Marke zu nutzen – z. B. eine kräftigere Variante für Buttons (Hintergrund) und eine etwas ruhigere für Text, um Lesbarkeit und Kontrast sicherzustellen.

Nutzung

Über die Layout-Einstellungen passt du das Erscheinungsbild der Event-Website an das Branding deiner Organisation oder deines Events an. Stimmige Farben verbessern die Benutzerfreundlichkeit und den Gesamteindruck der Website.