Erscheinungsbild
Im Bereich „Erscheinungsbild" legen Sie Aussehen, Aufbau und Inhalte Ihres Frontends fest. Diese Anleitung zeigt kurz, wie die vier Unterbereiche zusammenhängen und in welcher Reihenfolge Sie beim Bearbeiten am besten vorgehen.
Kein Zugriff auf den Bereich?
Für die Verwaltung des Erscheinungsbilds wird die Gruppe „ Erscheinungsbild verwalten“ benötigt. Bitte wenden Sie sich an ihren Administrator
Campus Classic Layout bei Bestandskunden
Bei Bestandskunden ist standardmäßig das Campus Classic Layout aktiv. Dieses Layout stellt sicher, dass die bekannte Optik bis zur Umstellung auf ein neues Layout erhalten bleibt. Das Campus Classic Layout kann im Bereich Erscheinungsbild → Layout aktiviert werden, unterstützt aber keine weiteren Konfigurationsmöglichkeiten. Die beschriebenen Möglichkeiten stehen nur in neuen Layouts wie Campus Main zur Verfügung.
Bereichsübersicht
| Bereich | Wofür |
|---|---|
| Designvorgaben | Wiederverwendbare Werte pflegen: Farben, Schriftgrößen, Abstände, Radien, Schriften. Wirkt überall sofort, wo referenziert. |
| Layout | Struktur der Seite wählen und aktivieren. Genau ein Layout ist systemweit live. |
| Texte & Inhalte | Redaktionelle Inhalte pflegen: Impressum, Header/Footer-Texte, Hero-Banner. Sofort live, pro Sprache. |
| Einstellungen | Globale Optionen |
Design bearbeiten
- Im ersten Schritt muss ein passendes Layout aktiviert werden - dadurch wird es Systemweit als Standard gesetzt. Je nach System stehen ein oder mehrere Layouts zur Auswahl.
- Über die Designvorgaben können dann zentrale Werte an das Corporate Design angepasst werden. Die vorhandenen Vorgaben wie Farben, Schriften, Abstände und weitere Parameter können hierzu geändert oder neue hinzugefügt werden.
- Die vorhandenen Designvorgaben stehen anschließend in den Layout-Einstellungen zur Auswahl und werden dort den jeweiligen Gestaltungseigenschaften zugeordnet. Hier werden die gepflegten Designvorgaben verwendet um das aussehen des Layouts zu verändern. So wirken sich die zentral gepflegten Werte auf das gesamte Layout aus und erlauben ein zentral gepflegtes und einheitliches Layout.
- Über die Layout Vorschau können die Änderungen jederzeit überprüft werden (Nur sichtbar für Benutzer mit entsprechender Berechtigung).
- Anschließend werden die Änderungen veröffentlicht und sind somit für Besucher der Seite sichtbar
- Unabhängig vom Aussehen der Seite können jederzeit Texte & Inhalte gepflegt werden um die Seite redaktionell anzupassen.
Designvorgaben
Designvorgaben sind ein zentraler Katalog benannter, wiederverwendbarer Werte — z. B. „Radius M" (8 px) oder eine Markenfarbe. Sie werden unter „Designvorgaben" verwaltet, unabhängig von einem konkreten Layout.
Verfügbare Typen:
- Farbe
- Radius
- Schriftgröße
- Abstand
- Rahmenbreite
- Schrift
In den Layout-Einstellungen wird an jeder passenden Stelle nicht direkt ein Rohwert eingegeben, sondern eine Designvorgabe aus einer Auswahlliste gewählt (mit Live-Vorschau des jeweiligen Werts). Ändert man später den hinterlegten Wert einer Designvorgabe zentral, wirkt sich das automatisch auf alle Stellen aus, die diese Vorgabe verwenden — ganz gleich in welchem Layout oder Tab. Auch manuell überschriebene Felder reagieren weiterhin auf Änderungen an der Designvorgabe, die ihnen konkret zugewiesen wurde. Sie übernehmen lediglich nicht mehr automatisch die Auswahl aus den Grundlegenden Einstellungen.
Wird eine noch verwendete Designvorgabe gelöscht, springt jede Stelle, die sie referenziert hat, automatisch auf einen Standardwert zurück; diese Aktion kann nicht rückgängig gemacht werden.
Designvorgaben unterliegen nicht dem Entwurf-/Veröffentlichungsprozess der Layout-Einstellungen. Wird der Wert einer Designvorgabe geändert und gespeichert, ist diese Änderung sofort live.
Layout bearbeiten
Beim Bearbeiten eines Layouts gibt es zwei Bereiche:
- Grundlegende Einstellungen — layoutweite Basiswerte: Farben, Standard-Eckenradius, Schriftgrößen, Abstände usw.
- Inhaltselemente — Werte einzelner Komponenten (Buttons, Karten, Eingabefelder, Hero-Banner …), gruppiert nach Komponente.
Globale Designvorgaben werden allgemeinen Layout-Vorgaben zugeordnet und ergeben so einen visuell einheitliches Design. Gezielte Überschreibungen an Website-Elementen erlauben flexible Anpassungen an die individuellen Bedürfnisse.
Gespeichert wird immer zuerst als Entwurf. Die Vorschau zeigt jederzeit den aktuellen Entwurf. Erst „Veröffentlichen" übernimmt die Entwurfswerte in das für Besucher sichtbare Erscheinungsbild. Solange ein Layout nicht aktiv ist, wirken Änderungen ausschließlich in der Vorschau bzw. erst nach einer Aktivierung.
Wie Grundlegende Einstellungen und Inhaltselemente zusammenspielen
Fast jedes Auswahlfeld im Tab „Inhaltselemente" ist mit einem passenden Feld im Tab „Grundlegende Einstellungen" verknüpft. Solange für ein Inhaltselement kein eigener Wert gewählt wurde, übernimmt es automatisch den Wert aus den Grundlegenden Einstellungen — das Auswahlfeld zeigt dann die Markierung „vererbt".
Beispiel: Die Rahmenstärke eines Eingabefelds ist standardmäßig mit „Rahmenstärke für Eingabefelder" aus den Grundlegenden Einstellungen verknüpft. Ändert man diesen Wert dort, ändert sich automatisch auch die Rahmenstärke aller Eingabefelder, die noch keinen eigenen Wert haben.
Wählt man stattdessen für ein einzelnes Inhaltselement bewusst einen eigenen Wert, wechselt die Markierung auf „Manuell überschrieben" — auch dann, wenn der gewählte Wert zufällig mit dem aktuellen Wert der Grundlegenden Einstellungen übereinstimmt. Ein manuell gesetzter Wert folgt künftigen Änderungen an den Grundlegenden Einstellungen nicht mehr automatisch.
Über die Option „Layout Standard" im Auswahlmenü lässt sich ein manuell gesetzter Wert jederzeit wieder auf die automatische Übernahme aus den Grundlegenden Einstellungen zurücksetzen.
Faustregel: Ohne eigenen Eingriff steuern die Grundlegenden Einstellungen automatisch alles. Erst ein bewusst gewählter Wert bei einem einzelnen Inhaltselement durchbricht diese automatische Steuerung — gezielt für genau dieses eine Element.
Texte & Inhalte
Unter „Texte & Inhalte" werden die festen, redaktionellen Inhaltsbereiche einer Seite gepflegt — z. B. Impressum, Datenschutz, AGB, Kopf- und Fußbereich, Hauptnavigation oder der Hero-Banner der Startseite. Welche Bereiche zur Verfügung stehen, hängt vom aktiven Layout ab; die Spalte „Im Einsatz" zeigt, welche davon im aktuell aktiven Layout tatsächlich sichtbar sind.
Jeder dieser Bereiche hat einen festen Platz im Layout und wird pro Sprache einzeln gepflegt — ein Sprachwechsler in der Bearbeitungsansicht zeigt jeweils nur den aktiven Sprachbereich. Die verfügbaren Felder, beispielsweise Text, Bild, Link oder Auswahl, stammen aus der jeweils zugeordneten Komponente. Welche Inhaltsbereiche und Felder verfügbar sind, hängt vom jeweiligen Layout ab.
Wichtiger Unterschied zu Layout-Einstellungen und Designvorgaben: Änderungen an Texten & Inhalten sind sofort live — es gibt hier keinen Entwurfs-/Veröffentlichungs-Schritt.
Beim Wechsel des aktiven Layouts bleiben die Inhalte eines Bereichs erhalten, solange das neue Layout denselben Bereich ebenfalls vorsieht (z. B. Impressum, Header, Footer sind i. d. R. layoutübergreifend verfügbar).
In den Layout-Einstellungen erscheint bei Komponenten mit zugehörigem Inhaltsbereich direkt neben den Designwerten ein Link „Inhalte bearbeiten" — so lässt sich vom Aussehen eines Elements direkt zu dessen Text-/Bildinhalt springen.