# Design und Theme-Editor

Source: https://help.epilot.cloud/de/portale/design-und-domain/design-und-theme-editor
Last updated: 2026-10-28

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 [#so-funktionierts]

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:

<Screenshot src="https://help.epilot.cloud/img/confluence/7e5c31de3e-design-04-ergebnis-loginseite.webp" alt="design-04-ergebnis-loginseite.png" width="1600" height="900" maxWidth="760" />

Das Layout (kompakt oder breit) und die angebotenen Sprachen legst du getrennt vom Design fest. Mehr dazu in [Layout, Logo und Sprachen](https://help.epilot.cloud/de/portale/design-und-domain/layout-logo-und-sprachen).

## Konfiguration [#konfiguration]

### Bestehendes Design auswählen [#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.

<Screenshot src="https://help.epilot.cloud/img/confluence/13d6b6d861-design-01-design-auswaehlen.webp" alt="design-01-design-auswaehlen.png" width="1600" height="900" maxWidth="760" />

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 [#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.

<Screenshot src="https://help.epilot.cloud/img/confluence/b005d672bd-design-02-von-grund-auf.webp" alt="design-02-von-grund-auf.png" width="1600" height="900" maxWidth="760" />

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 [#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.

<Screenshot src="https://help.epilot.cloud/img/confluence/065678a3f3-design-03-designs-app.webp" alt="design-03-designs-app.png" width="1600" height="900" maxWidth="760" />

10\. Klicke oben rechts auf **Speichern**. Mit **Schließen** verlässt du den Editor.

<Callout type="warning">
  **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](https://help.epilot.cloud/de/portale/einstieg-in-portale/portale-verwalten)).
</Callout>

<Callout type="info">
  **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.
</Callout>

## Häufige Fragen [#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](https://help.epilot.cloud/de/portale/design-und-domain/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](https://help.epilot.cloud/de/portale/seiten-und-blocke/blockubersicht).