# Landing Page gestalten: Seite um den Design-Generator einrichten

> Gib dem Design-Generator deiner Web-Campaign einen Header, einen Hintergrund und einen Titel und teste die Seite auf dem Smartphone.

Source: https://bluepic.io/de/help/campaigns/landing-page  
Language: de  
Category: campaigns  
Last updated: 2026-10-22

Im Schritt **Landing Page** einer Web-Campaign baust du eine Seite um deinen Design-Generator: mit Header, Hintergrund und Titel. So passt die Seite zu deiner Marke, bevor Nutzer ein Template ausfüllen. Wie der Design-Generator selbst aussieht, legst du unter **Generator Theme** fest.

Das geht in vier Schritten:

1. Lege die Landing Page im Schritt **Landing Page** an.
2. Gestalte den Header.
3. Gestalte Hintergrund und Titel um den Design-Generator.
4. Teste die Seite auf einem Smartphone.


## Landing Page anlegen

1. Klicke in der Navigation des Studios auf **Campaigns**. Die Übersicht deiner Campaigns öffnet sich.
2. Klicke auf deine Web-Campaign. Sie öffnet sich beim Schritt **Templates**.
3. Klicke oben auf den Schritt **Landing Page**. Links stehen die Einstellungen, rechts siehst du eine Vorschau deines Design-Generators.

   > **Der Schritt Landing Page fehlt?** Nur Web-Campaigns haben eine Landing Page. Widget- und Team-Campaigns haben diesen Schritt nicht. Erstelle für eine Landing Page eine Web-Campaign.

4. Klicke auf **Add landing page**. Die Landing Page ist jetzt angelegt. In der Vorschau steht über dem Design-Generator ein Beispieltitel mit Untertitel, auf weißem Hintergrund.

   > **Die Vorschau zeigt nur „Widget has no URL“?** Die Campaign ist offline, zum Beispiel nach **Delete URL** im Schritt **Share**. Klicke in der Vorschau auf **Create URL**. Die Campaign ist dann wieder online und die Vorschau erscheint.

   ![Schritt Landing Page: links Header Section und Body Section, rechts die Vorschau der Seite.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-web-campaigns-02/public)

## Header gestalten

Der Header ist ein Streifen ganz oben auf der Seite. Du brauchst ihn nicht, wenn dir Hintergrund und Titel reichen.

1. Klicke unter **Header Section** auf **Add header section**. Der Header ist jetzt angelegt und erscheint oben in der Vorschau, mit einem Beispieltitel auf dunklem Grund.
2. Gib den Inhalt des Headers ein:

   - Für einen Titel: Ersetze bei **Title** den Beispieltitel durch deinen Text.
   - Für eigenes HTML: Klicke auf **Custom HTML** und gib dein HTML ein. Es ersetzt den Titel.

3. Wähle bei **Background** den Hintergrund des Headers:

   - Für eine Farbe: Klicke auf das runde Farbfeld und wähle eine Farbe. Die Schrift wird automatisch schwarz oder weiß, damit sie auf der Farbe lesbar bleibt.
   - Für ein Bild: Klicke auf **Upload Image**. Im Popup **Image Library** wählst du ein Bild aus oder lädst mit **Upload** ein neues hoch. Am besten passt ein Bild im Format 16:3, zum Beispiel 1920 × 360 Pixel.

Mit **Remove header section** entfernst du den Header wieder, mit allen seinen Einstellungen.

## Hintergrund und Titel gestalten

Unter **Body Section** gestaltest du den Bereich, in dem der Design-Generator steht.

1. Wähle unter **Body Section** bei **Background** den Hintergrund der Seite:

   - Für eine Farbe: Klicke auf das runde Farbfeld und wähle eine Farbe. Die Schrift wird automatisch schwarz oder weiß.
   - Für ein Bild: Klicke auf **Upload Image** und wähle ein Bild aus. Am besten passt ein Bild im Format 16:9, zum Beispiel 1920 × 1080 Pixel.

2. Gib den Text über dem Design-Generator ein:

   - Für Titel und Untertitel: Ersetze bei **Title** und **Subtitle** die Beispieltexte durch deine Texte.
   - Für eigenes HTML: Klicke auf **Custom HTML** und gib dein HTML ein. Es ersetzt Titel und Untertitel.

3. Schau in der Vorschau rechts, ob alle Texte auf ihrem Hintergrund gut lesbar sind.

> **Tipp:** Für mehr Kontrolle über die Texte setze unter **Text Styling** das Häkchen bei **Advanced text styling**. Jeder Titel und Untertitel bekommt dann Einstellungen für Farbe, Schriftart, Stil und Ausrichtung.

## Seite auf dem Smartphone testen

Die Vorschau zeigt die Seite nur so, wie sie an deinem Computer aussieht. Wie Nutzer sie auf dem Smartphone sehen, testest du auf einem echten Smartphone.

1. Klicke oben auf den Schritt **Share**. Unter **Sharing URL** steht der Link deiner Campaign.
2. Klicke auf **Copy URL**. Die Meldung „Copied to clipboard“ erscheint. Der Link ist jetzt in deiner Zwischenablage.
3. Öffne den Link auf deinem Smartphone, zum Beispiel über eine Nachricht an dich selbst. Die Landing Page öffnet sich.
4. Prüfe, ob Header, Titel und Hintergrund gut aussehen und alle Texte lesbar sind.

Mit **Remove landing page** unter **Advanced** entfernst du die Landing Page wieder. Bluepic fragt dabei nicht nach und löscht alle ihre Einstellungen.

## Mehr dazu

- [Campaign erstellen: mehrere Templates in einem Design-Generator teilen](https://bluepic.io/de/help/campaigns/create-campaign)
- [Generator Theme: Einstellungen](https://bluepic.io/de/help/campaigns/generator-theme)
- [Markenportal einrichten: Dateien zum Download in der Campaign anbieten](https://bluepic.io/de/help/campaigns/brand-portal-assets)
- [Eigene Domain verwenden](https://bluepic.io/de/help/campaigns/custom-domains)