# Design a landing page: set up the page around the design generator

> Give the design generator of your web campaign a header, a background and a title, and test the page on a phone.

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

In the **Landing Page** step of a web campaign, you build a page around your design generator: with a header, a background and a title. This way the page matches your brand before users fill in a template. What the design generator itself looks like is set under **Generator Theme**.

This takes four steps:

1. Add the landing page in the **Landing Page** step.
2. Design the header.
3. Design the background and title around the design generator.
4. Test the page on a phone.


## Add the landing page

1. Click **Campaigns** in the Studio navigation. The overview of your campaigns opens.
2. Click your web campaign. It opens at the **Templates** step.
3. Click the **Landing Page** step at the top. The settings are on the left, a preview of your design generator is on the right.

   > **The Landing Page step is missing?** Only web campaigns have a landing page. Widget and team campaigns don't have this step. Create a web campaign for a landing page.

4. Click **Add landing page**. The landing page is now added. In the preview, a sample title and subtitle sit above the design generator, on a white background.

   > **The preview only shows Widget has no URL?** The campaign is offline, for example after **Delete URL** in the **Share** step. Click **Create URL** in the preview. The campaign is then online again and the preview appears.

   ![Landing Page step: header and body section on the left, the preview of the page on the right.](https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/help/KB-web-campaigns-02/public)

## Design the header

The header is a strip at the very top of the page. You don't need it if the background and title are enough.

1. Click **Add header section** under **Header Section**. The header is now added and appears at the top of the preview, with a sample title on a dark background.
2. Enter the content of the header:

   - For a title: Replace the sample title under **Title** with your text.
   - For your own HTML: Click **Custom HTML** and enter your HTML. It replaces the title.

3. Choose the background of the header under **Background**:

   - For a color: Click the round color swatch and pick a color. The text turns black or white automatically, so it stays readable on the color.
   - For an image: Click **Upload Image**. In the **Image Library** popup, pick an image or upload a new one with **Upload**. An image in 16:3 fits best, for example 1920 × 360 pixels.

**Remove header section** removes the header again, with all its settings.

## Design the background and title

Under **Body Section** you design the area the design generator sits in.

1. Choose the background of the page under **Background** in **Body Section**:

   - For a color: Click the round color swatch and pick a color. The text turns black or white automatically.
   - For an image: Click **Upload Image** and pick an image. An image in 16:9 fits best, for example 1920 × 1080 pixels.

2. Enter the text above the design generator:

   - For a title and subtitle: Replace the sample texts under **Title** and **Subtitle** with your texts.
   - For your own HTML: Click **Custom HTML** and enter your HTML. It replaces the title and subtitle.

3. Look at the preview on the right and check that all texts are easy to read on their background.

> **Tip:** For more control over the texts, tick **Advanced text styling** under **Text Styling**. Every title and subtitle then gets settings for color, font, style and alignment.

## Test the page on a phone

The preview only shows the page the way it looks on your computer. To see it the way users see it on a phone, test it on a real phone.

1. Click the **Share** step at the top. Your campaign's link is under **Sharing URL**.
2. Click **Copy URL**. The message "Copied to clipboard" appears. The link is now on your clipboard.
3. Open the link on your phone, for example by sending it to yourself in a message. The landing page opens.
4. Check that the header, title and background look good and all texts are readable.

**Remove landing page** under **Advanced** removes the landing page again. Bluepic doesn't ask first and deletes all its settings.

## Related articles

- [Create a campaign: share several templates in one design generator](https://bluepic.io/help/campaigns/create-campaign)
- [Generator Theme settings](https://bluepic.io/help/campaigns/generator-theme)
- [Set up a brand portal: offer files for download in a campaign](https://bluepic.io/help/campaigns/brand-portal-assets)
- [Use a custom domain](https://bluepic.io/help/campaigns/custom-domains)