Design und Theme-Editor
Mit dem Design passt du dein Portal an deine Marke an: Farben, Schrift, Rundung der Elemente und Logo. Du wählst dafür ein bestehendes Design aus oder legst direkt im Portal Builder ein neues an. Im Bereich Designs von epilot bearbeitest du die Designs im Detail.
Dieser Artikel zeigt dir, wie du deinem Portal ein Design zuweist, ein neues Design erstellst und es im Design-Editor anpasst.
So funktioniert's
Ein Design ist eine Sammlung von Gestaltungsvorgaben, die du in epilot zentral pflegst. Ein Design kann sowohl für Journeys als auch für Portale verwendet werden. Im Portal steuert es unter anderem:
-
Farben: zum Beispiel die Hauptfarbe für Buttons und Hervorhebungen.
-
Typografie: Schriftfamilie und Schriftfarben.
-
Rundung: wie rund Ecken von Buttons, Feldern und Karten sind.
-
Logo: das Logo in der Navigationsleiste und auf der Login-Seite.
So sieht das Ergebnis zum Beispiel auf der Login-Seite des Portals der Stadtwerke 2PUNKT0 aus:

Das Layout (kompakt oder breit) und die angebotenen Sprachen legst du getrennt vom Design fest. Mehr dazu in Layout, Logo und Sprachen.
Konfiguration
Bestehendes Design auswählen
1. Öffne dein Portal im Portal Builder und klicke oben rechts auf das Zahnrad-Symbol.
2. Wechsle in den Bereich Design. Im Reiter Bestehendes Design wählst du unter Portal-Design auswählen das gewünschte Design, zum Beispiel das Design eurer Website.

3. Klicke auf Speichern. Über das Symbol rechts im Feld öffnest du das gewählte Design im Bereich Designs, um es zu bearbeiten.
Neues Design im Portal Builder erstellen
Hast du noch kein passendes Design, legst du direkt in den Portal-Einstellungen ein neues an.
4. Wechsle im Bereich Design in den Reiter Von Grund auf.
5. Fülle unter Design anpassen die Felder aus:
-
Design-Name: ein Name, an dem du das Design wiedererkennst, zum Beispiel „Stadtwerke 2PUNKT0 Portal“.
-
Akzentfarbe: deine Markenfarbe als Hex-Wert, zum Beispiel #0593FF.
-
Rundung: wie rund Ecken dargestellt werden, zum Beispiel Mittel.
-
Schriftfamilie: die Schrift deines Portals.
-
Logo: Ziehe dein Logo in das Feld oder wähle eine Datei aus.

6. Klicke auf Design erstellen. Mit Zurücksetzen verwirfst du deine Eingaben.
7. Klicke auf Speichern, damit dein Portal das neue Design verwendet.
Design im Design-Editor bearbeiten
Alle Details eines Designs bearbeitest du im Bereich Designs unter Konfiguration.
8. Öffne Konfiguration > Designs und klicke auf das Design, oder öffne es direkt über das Symbol im Feld Portal-Design auswählen.
9. Wechsle links über der Vorschau in den Reiter Kundenportal. Rechts siehst du die Einstellungen für Portale:
-
Navigationsleiste: im Reiter Optik die Hintergrundfarbe, im Reiter Logo das Logo.
-
Hintergrund: Hintergrundfarbe der Seite und Papierhintergrund für Karten und Flächen.
-
Farben: Primär für Buttons und Hervorhebungen und eine Farbe für Fehlermeldungen.
-
Typografie: im Reiter Farbe die Primäre Schriftfarbe und Sekundäre Schriftfarbe, im Reiter Schrift die Schrift.
-
Form: der Randradius in Pixeln.

10. Klicke oben rechts auf Speichern. Mit Schließen verlässt du den Editor.
Wichtig
Ein Design kann in mehreren Portalen und Journeys verwendet werden. Änderungen am Design wirken sich auf alle aus, die es nutzen. Willst du ein neues Aussehen erst testen, erstelle ein eigenes Design und weise es zunächst einer nicht zugewiesenen Konfiguration zu (siehe Portale verwalten).
Tipp
Achte auf ausreichenden Kontrast zwischen Schriftfarbe und Hintergrund, damit alle Kunden die Texte gut lesen können. Prüfe das Ergebnis mit Als Nutzer anzeigen im Portal Builder auf Desktop und Mobil.
Häufige Fragen
Kann ich für Portal und Journeys dasselbe Design verwenden?
Ja. Im Design-Editor gibt es dafür die Reiter Journey Beispiel und Kundenportal. So sehen Journeys im Portal und das Portal selbst einheitlich aus.
Wo ändere ich das Logo?
Im Design unter Navigationsleiste > Logo. Mehr dazu in Layout, Logo und Sprachen.
Ich habe das Design geändert, sehe aber keine Änderung im Portal. Woran liegt das?
Prüfe, ob du das Design im Editor gespeichert hast und ob dein Portal dieses Design verwendet (Bereich Design > Portal-Design auswählen). Lade das Portal danach neu.
Kann ich einzelne Blöcke anders gestalten?
Das Design gilt für das ganze Portal. Was du an einzelnen Blöcken einstellen kannst, zeigt die Blockübersicht.