# Neuer Journey-Starter (Beta)

Source: https://help.epilot.cloud/de/journeys/journey-builder-grundlagen/neuer-journey-starter-beta
Last updated: 2026-11-11

Neu Beta

Mit dem **modernen Journey-Starter** gestaltest du den Einstieg in deine Journeys neu: Du wählst ein Layout, legst fest, wie deine Kunden zwischen den Journeys wechseln, und passt die Auswahl für Smartphones an. So wird aus mehreren Tarifrechnern ein Einstieg, der zu deiner Website passt.

Dieser Artikel zeigt dir, wie du den modernen Journey-Starter aktivierst und Layout, Journey-Auswahl und Hero einrichtest.

<Callout type="info">
  **Hinweis**

  Der moderne Journey-Starter ist neu und eine **Beta-Funktion**. Du schaltest ihn pro Journey ein und testest ihn, bevor er für alle freigegeben wird. Bis dahin kann er sich noch ändern. In epilot heißt er **Moderner Journey Launcher**. Wie du einen Journey-Starter anlegst, liest du im Artikel [Journey-Starter konfigurieren](https://help.epilot.cloud/de/journeys/journey-builder-grundlagen/journey-starter-konfigurieren).
</Callout>

***

## So funktioniert's [#so-funktionierts]

Der moderne Journey-Starter bündelt wie bisher mehrere Journeys in einem Fenster. Neu sind drei Dinge, die du im Journey Builder rechts im Tab **Inhalt** einstellst. Die Vorschau links zeigt jede Änderung sofort.

* **Layout**: der Rahmen um die Journey-Auswahl, von schlicht bis zum Hero mit eigenem Text und Bild.

* **Journey-Auswahl**: die Form, in der du die verknüpften Journeys anbietest, zum Beispiel als Tabs oder Kacheln.

* **Auswahl auf Mobilgeräten**: ein eigener Stil für schmale Bildschirme.

Textfarben, Schatten und der Hero-Verlauf folgen automatisch dem Design deiner Journey. Du musst sie nicht einzeln einstellen.

**Beispiel:** Ein Stadtwerk bietet Strom, Gas, Wärmestrom und Ladestrom an und hat für jede Sparte einen Tarifrechner. Auf der Startseite soll der Einstieg auffallen: ein Hero in der Markenfarbe mit der Überschrift &#x2A;Dein Tarif in wenigen Minuten.*, darauf eine Karte mit den vier Sparten als Tabs. Auf dem Smartphone wäre die Tab-Leiste zu breit, deshalb erscheinen die Sparten dort als Dropdown.

<Screenshot src="https://help.epilot.cloud/img/confluence/80c7a8c72f-moderner-starter-01-hero.webp" alt="moderner-starter-01-hero.png" width="1600" height="895" maxWidth="760" />

## Konfiguration [#konfiguration]

### Modernen Journey-Starter aktivieren [#modernen-journey-starter-aktivieren]

1\. Öffne deinen Journey-Starter im Journey Builder und klicke oben auf **Einstellungen**.

2\. Wechsle zu **Beta-Funktionen**, aktiviere **Moderner Journey Launcher** und klicke auf **Übernehmen und schließen**.

<Callout type="info">
  **Hinweis**

  Ist der moderne Journey-Starter für deine ganze Organisation eingeschaltet, ist der Schalter aktiv und gesperrt. Daneben steht **Für deine Organisation aktiviert**.
</Callout>

### Journeys verknüpfen [#journeys-verknüpfen]

3\. Klicke unter **Verknüpfte Journeys** auf **Journey hinzufügen** und wähle die Journey aus, zum Beispiel *Neukundenanmeldung Strom*.

4\. Trage im Feld **Tab-Beschriftung** den Text ein, den deine Kunden sehen, zum Beispiel *Strom*. Über das Symbol links daneben wählst du ein Icon.

5\. Wiederhole das für jede weitere Journey. Die Reihenfolge änderst du per Drag & Drop am Griff links, über das **X** entfernst du eine Journey. Das Pfeil-Symbol öffnet die verknüpfte Journey in einem neuen Tab.

<Screenshot src="https://help.epilot.cloud/img/confluence/2ad2af1c04-moderner-starter-02-verknuepfte-journeys.webp" alt="moderner-starter-02-verknuepfte-journeys.png" width="1600" height="900" maxWidth="760" />

### Layout wählen [#layout-wählen]

6\. Wähle unter **Layout** den Rahmen für deinen Journey-Starter:

* **Pur**: nur die Auswahl, direkt auf deiner Seite. Passt, wenn deine Website den Rahmen schon mitbringt.

* **Karte**: Auswahl und Journey zusammen auf einer Karte. Passt, wenn sich der Journey-Starter vom Rest der Seite abheben soll.

* **Hero**: ein Hero in deiner Markenfarbe mit deinem Text, die Karte liegt darauf. Passt für Startseiten und Kampagnenseiten.

<Screenshot src="https://help.epilot.cloud/img/confluence/5b948f31d3-moderner-starter-03-layout-und-auswahl.webp" alt="moderner-starter-03-layout-und-auswahl.png" width="1600" height="996" maxWidth="760" />

7\. Im Layout **Karte** legst du unter **Kartenoberfläche** fest, wie die Karte aussieht: **Standard**, **Flach**, &#x2A;*Getönt (in Markenfarbe)**, **Umrandet** oder **Erhöht**.

8\. Optional: Gib der Karte einen **Kartentitel** und eine **Kartenbeschreibung**, zum Beispiel *Tarif berechnen* und &#x2A;Wähle deine Sparte und berechne deinen Preis.* Beide Felder gibt es auch im Layout **Hero**.

<Screenshot src="https://help.epilot.cloud/img/confluence/f7bc2155dc-moderner-starter-04-layouts-pur-karte.webp" alt="moderner-starter-04-layouts-pur-karte.png" width="1600" height="900" maxWidth="760" />

### Journey-Auswahl gestalten [#journey-auswahl-gestalten]

9\. Wähle unter **Journey-Auswahl** den **Stil**:

* **Tabs**: eine Leiste, die aktive Journey ist hervorgehoben. Gut für zwei bis vier Journeys mit kurzen Namen.

* **Karten**: große Boxen mit dem Icon über dem Namen. Gut, wenn die Auswahl selbst im Mittelpunkt steht.

* **Kacheln**: kompakte Boxen, von denen mehr in eine Reihe passen. Gut für viele Journeys.

* **Dropdown**: ein Feld, das die ganze Liste öffnet. Gut bei wenig Platz oder langen Namen.

<Screenshot src="https://help.epilot.cloud/img/confluence/156244eecd-moderner-starter-05-stile.webp" alt="moderner-starter-05-stile.png" width="1600" height="900" maxWidth="760" />

10\. Lege unter **Beschriftung der Auswahl** fest, was in der Auswahl steht: **Automatisch**, **Icon und Text**, **Nur Icon** oder **Nur Text**. **Automatisch** zeigt Icons und Text, wenn der Journey-Starter breit genug ist, und auf schmalen Bildschirmen nur Icons. Eine Journey ohne Icon zeigt immer ihren Text. Ein Dropdown zeigt immer den Journey-Namen mit Icon.

<Callout type="info">
  **Tipp**

  Vergib für jede Journey ein Icon. Dann bleibt die Auswahl auch auf schmalen Bildschirmen verständlich, wenn **Automatisch** nur noch Icons zeigt.
</Callout>

### Auswahl auf Mobilgeräten anpassen [#auswahl-auf-mobilgeräten-anpassen]

11\. Aktiviere **Andere Auswahl auf Mobilgeräten**, wenn deine Kunden auf dem Smartphone eine andere Auswahl sehen sollen.

12\. Wähle unter **Auf Mobilgeräten** einen eigenen **Stil** und eine eigene **Beschriftung der Auswahl**, zum Beispiel **Dropdown** statt **Tabs**. Über die beiden Geräte-Symbole oben in der Vorschau wechselst du zwischen Desktop- und Mobilansicht.

<Screenshot src="https://help.epilot.cloud/img/confluence/9d1d10e228-moderner-starter-06-mobil.webp" alt="moderner-starter-06-mobil.png" width="1600" height="900" maxWidth="760" />

### Hero einrichten [#hero-einrichten]

Diese Einstellungen erscheinen, wenn du das Layout **Hero** gewählt hast.

13\. Schreibe unter **Hero-Text** den Text, der neben der Karte steht. Über das Format-Menü baust du ihn auf: Die **Dachzeile** ist die kleine Zeile über der Überschrift, **Überschrift 1** die Überschrift, **Normaler Text** die Unterzeile. Dazu kommen **Fußnote**, **Aufzählung**, **Nummerierte Liste** und Links. Mit **Durch Platzhalter ersetzen** holst du den Beispieltext zurück.

14\. Wähle unter **Hintergrund** im Tab **Farbe** eine Farbe. Lässt du das Feld leer, nutzt der Hero die Primärfarbe deines Journey-Designs. Verlauf und Textfarbe folgen ihr.

15\. Optional: Wechsle zum Tab **Bild**. Mit **Aus Dateimanager auswählen** nimmst du ein Bild, das schon in epilot liegt. Es können nur öffentliche Bilder ausgewählt werden. Oder du lädst ein neues Bild hoch: bis 3 MB, als .jpg, .png, .gif oder .svg. Solange kein Bild gesetzt ist, zeigt der Hero den Farbverlauf.

16\. Lege unter **Anordnung** fest, wie **Text und Karte** zueinander stehen: **Automatisch**, **Nebeneinander** oder **Untereinander**. Mit **Abgerundete Ecken** rundest du die Ecken des Heros ab.

<Screenshot src="https://help.epilot.cloud/img/confluence/6331d1903a-moderner-starter-07-hero-einstellungen.webp" alt="moderner-starter-07-hero-einstellungen.png" width="1600" height="773" maxWidth="760" />

17\. Klicke auf **Speichern & veröffentlichen**.

<Callout type="warning">
  **Wichtig**

  Damit deine Kunden den Journey-Starter nutzen können, müssen er selbst und alle verknüpften Journeys aktiv sein. Die verknüpften Journeys müssen außerdem öffentlich sein. Private Journeys können deine Kunden im Journey-Starter nicht öffnen.
</Callout>

## Häufige Fragen [#häufige-fragen]

**Muss ich meinen Journey-Starter neu anlegen?**

Nein. Du aktivierst den modernen Journey-Starter in den Einstellungen deines bestehenden Journey-Starters. Die verknüpften Journeys, ihre Beschriftungen und Icons bleiben erhalten.

**Kann sich der moderne Journey-Starter noch ändern?**

Ja. Beta-Funktionen können sich bis zur Freigabe für alle noch ändern.

**Wo stelle ich Farben und Schriften ein?**

Im Design deiner Journey. Textfarben, Schatten und der Hero-Verlauf folgen automatisch dem Journey-Design. Nur die Hintergrundfarbe und das Bild des Heros legst du direkt im Journey-Starter fest.

**Warum sehen meine Kunden auf dem Smartphone nur Icons?**

Unter **Beschriftung der Auswahl** steht **Automatisch**. Auf schmalen Bildschirmen zeigt diese Einstellung nur Icons. Wähle **Icon und Text** oder aktiviere **Andere Auswahl auf Mobilgeräten** und stelle dort zum Beispiel **Dropdown** ein.

**Kann ich die Auswahl ganz ausblenden?**

Ja, mit &#x2A;*Journey-Tabs ausblenden (unsichtbarer Launcher)** unter **Verknüpfte Journeys**.