Designing a full screen campaign: best practices

A full screen campaign takes over your visitor's whole screen, so the design has two parts: the backdrop that fills the screen, and the form container that sits on top of it and holds your content.

The easiest way to get a great result is to design desktop first, then switch to mobile and fine-tune. This guide walks you through that order, step by step.

Before you start: choose where full screen applies

You can use full screen for the whole campaign or just for a single step. Pick the option that fits your flow:

• For all campaign steps: Go to General → Position and select Full screen.
• For one specific step: Go to the Design step, open the Settings tab and select full screen for that step only.

You can also choose differently for desktop and mobile. For example, you might show full screen on desktop and a popup on mobile.

Choosing your full screen background image

The backdrop fills the whole screen, so pick an image that works at that size and loads quickly. Plan on using two versions: a landscape image for desktop and a portrait image for mobile.

• Keep the focus in the center. Screens crop the image differently, so keep the important part away from the edges.
• Skip text in the image. It may get cut off or hidden behind your form.
• Keep the file light. The upload limit is 2 MB, but we recommend staying below 250 KB so your campaign loads fast. Tools like TinyPNG or Squoosh can help.
• Use JPG for photos. Use PNG only if you need transparency.

Image on one side only (desktop)

Want the image on just one side, say the left, with your form on the other? Use a full-size 1920 × 1080 px image with the photo on the left half and a plain color or soft fade on the right. Then set Form position to the right so the form sits on the plain side.

The image still covers the whole backdrop, so it scales well on most screens. Very wide or tall screens crop the edges slightly, so keep your subject well inside the left half.

Prefer a smaller image? Click the backdrop, set Image size to Custom, lower the Image width, and pick the left position under Image position. The backdrop color fills the rest of the screen, so choose one that matches your image.

On mobile, a split layout won't fit a portrait screen. Use a full portrait image instead, or remove the backdrop image and add one inside the form.

Step 1: Design on desktop

Start in desktop view. Here you set up the look for your campaign backdrop that every full screen step in your campaign will share.

Set the backdrop background

1. Click the backdrop (the area around your form).
2. In the sidebar, choose an image, a color, or a mix of both for the background.

The backdrop is shared, so this background applies to all full screen steps in your campaign. You only need to set it once.

Place your form

1. With the backdrop selected, find the Form position box in the sidebar.
2. Choose where the form container should sit on the screen.

Form position also applies across all full screen steps on desktop, so your campaign stays consistent from step to step.

Size your form container

Click the form container to open its settings in the sidebar.

• To make it taller: Use the Height setting.
• To make it wider: Drag the gray line at the edge of the container.

Can't see the gray line? Make sure nothing is selected first. Click Cancel or Done in the sidebar, or click the backdrop. Then hover over the edge of the container and the line will appear.

Step 2: Switch to mobile and fine-tune

Now switch to mobile view. A background image that looks great on a wide desktop screen doesn't always work on a tall, narrow phone screen. Changes you make to the backdrop image here only affect mobile, so your desktop design stays as it is.

If the background image doesn't look right

Click the backdrop and try one of these:

• Adjust the position of the image so the important part stays in view.
• Upload a different image that suits a portrait screen better.
• Remove the image and use a color instead.

If you'd rather show the image inside the form

Sometimes an image simply works better as part of your content than as a background. You have two options:

• Add the image to the form container.
• Add a new container with an image element in it.

If the image should only appear on mobile, remember to hide it on desktop. You can do this from the Layout tab, or at the top of the sidebar when the element is selected.

Good to know: Only the backdrop is shared across steps. If you add an image element or a new container instead, it only applies to the full screen step you're working on. Repeat it on the other steps if you need it there too.

Quick reference: what's shared and what isn't