Overview of Popup Editor

When you open the editor, the first elements you'll see are the mobile and desktop containers. These define how your pop-up will appear on different devices.

Since most traffic comes from mobile devices, start by designing in the mobile view. Any changes made here will automatically apply to the desktop view. You can switch between views using the mobile and desktop buttons.

Edits made in the mobile view, such as text modifications, will automatically update in the desktop view. This ensures consistency across both versions.

To make specific changes for desktop, you can override styling without affecting the mobile view. For example, adjusting text size to 72 pixels for desktop only.

Each pop-up step contains mobile and desktop components. These elements remain consistent across all steps of your pop-up.

Modify elements like the 'X' button and image container. You can resize the close button, reposition it, or add images to enhance your design.

When you add an image to the desktop container, it applies to all the other steps in the desktop view.

The left-side panel contains text containers that change as you navigate between steps, allowing you to manage content efficiently.

Click the plus button to add child elements like text or images. You can move text into a container, delete elements, or clone existing ones.

The styling editor on the right side of the screen provides built-in design options and supports custom CSS for advanced modifications.

The editor automatically opens relevant settings when you select an element. For example, clicking on text brings up typography and size options.

You can move between steps easily and rearrange them. However, the order in which steps appear is determined by button actions rather than their position in the editor.