Layout and Containers

Shape your popup's layout yourself: group elements in containers, drag them into a new order, and add or remove text, images and containers.

The popup editor lets you build the layout you want instead of working within a fixed template. You can group elements into containers, drag them into a new order, and add or remove text, images and containers on any step. This is sometimes called the modular editor, and it's on for every account — open any popup in the editor to start.

How the layout is organized

When you select a step, the right-hand panel shows that step's elements as a tree.

• Every step has a Content container at the top of the tree. Everything on the step sits inside it
• Inside it, elements sit in containers, which can hold other containers
• Click any row in the tree to open that element's or container's settings

Some desktop layouts also have an Additional image that sits above or below the Content container. It's the only element that can sit outside Content.

Container settings

Click a container in the tree to open its settings:

• Gap — the space between the elements inside it
• Direction — stack the elements vertically or place them side by side
• Align and Justify — line the elements up inside the container
• Width and Height
• Margin and Padding — space outside and inside the container
• Custom CSS — styles that apply only to this container

Tip: to change the space between a heading and the text below it, open the container that holds them and change its Gap. The spacing is set on the container, not on the text.

Reorder elements

Drag any element or container to a new place in the tree, including into or out of another container. A placeholder shows where it will land. Movable rows have a grab handle on the right.

• Form items such as name, birthday or a dropdown can be moved anywhere on the step, alongside text and images
• If you drop something where it isn't allowed, it snaps back to where it was
• When you move an element into a different container, it takes on that container's gap, direction and alignment. Containers keep their own settings when you move them

What can't be moved

• The Add button group, Add form item and Add discount code rows
• Anything inside the Contact Card or Network Opt-in blocks — each moves as one unit, and nothing can move in or out of them
• Nothing can be moved outside the step's Content container

Add text, images and containers

1. At the bottom of the tree, click + Add
2. Choose Text, Image or Container
3. The new element is added at the end of the Content container — drag it where you want it
4. Fill it in: type your text, upload an image, or drag elements into the container

New elements start empty. Empty elements only show in the editor and never appear on your live popup, including any space around them.

A popup with an empty text, image or container can be saved as a draft, but it can't be activated until you fill it in or remove it. The empty element is marked with a red dot and a message such as "Please enter text".

Buttons, form items and discount codes are still added with their own Add button group, Add form item and Add discount code options.

Remove elements

Hover over a row in the tree and click the trash icon.

• You can remove text, images, buttons, form items and discount codes
• You can remove a container if it only holds text and images. You'll be asked to confirm, because everything inside the container is removed too

There's no undo. Once you remove a container, everything inside it is gone.

What can't be removed

Some parts of the popup are needed for the opt-in to work, so they can't be removed. Their trash icon is greyed out, with a "Can't be removed" tooltip:

• The email and phone input fields
• The legal text
• Special or locked containers such as Network Opt-in at the success step
• Any container that holds one of these — for example, the main container on the Email and SMS steps

Good to know

• New popups start cleaner. New popups no longer include an empty image and empty body text by default. Add them when you need them. Existing popups had these empty defaults removed too
• Popup-wide Custom CSS has moved to the Layout & Styles tab. Elements and containers have their own Custom CSS. See Customize with CSS
• Input states only change the field you're editing. The Default, Active and Error tabs now preview only the field you've selected, not every input at once
• Logos and images look alike in the tree. They use the same icon, so a removed logo has to be uploaded again as an image and then select style to update the image to a logo
• Check alignment after changing the layout. If you switch a popup from fullscreen to lightbox, check the text alignment. It's set in the container's Align settings
• Duplicating keeps your layout. A duplicated popup copies its structure, including elements you added or removed

If you have any questions, do not hesitate to contact the Recart Support team. We'd be happy to help!