Understanding the Design Environment
The Alia Popup Editor is designed to provide a seamless experience for creating high-converting popups. The interface is divided into specific containers that allow you to visualize how your design will appear across different devices.
Device Containers and Mobile-First Design
When you first open the editor, you will see the Mobile and Desktop containers. These represent the boundaries of your popup on each respective device type.
Mobile-First Approach: Because the majority of web traffic is mobile, we recommend starting your design in the mobile view.
Automatic Syncing: Changes made in the mobile view—such as text edits or content updates—automatically reflect in the desktop view to ensure consistency.
Switching Views: Use the mobile and desktop toggle buttons at the top of the editor to jump between views.
💡 Pro Tip: While mobile changes sync to desktop, you can override styling for desktop specifically. For example, you might set a headline to 72px on desktop while keeping it smaller for mobile users.
Managing Elements and Styling
The editor allows for both global and granular control over your design elements. When you click on a component, the editor provides options to manage its appearance.
Shared Styles: When editing text, you can choose Edit shared style. This applies your changes across all elements of the popup, maintaining a unified brand look.
Individual Styling: If you need a specific element to stand out, select Edit just this element. This ensures your changes only apply to the selected component.
The Styling Panel: Located on the right side of the screen, this panel offers built-in design options and a field for Custom CSS if you require advanced modifications.
Creating a Link style
To apply or restore styling to hyperlinks, create a text style named Link. The editor automatically applies that style to hyperlinks in your popup.
Key Components and Customization
Each popup step contains essential components that remain consistent throughout the user journey. You can customize these via the left-side panel:
The Close Button: You can resize, reposition, and restyle the 'X' button to fit your aesthetic.
Image Containers: To replace a template image, click the image section in the left-side panel and upload your own file.
Adding New Images: Click the + icon on the container (Add child elements) and select Image to insert a new visual element.
Note: When you add an image to the Container, it will automatically apply to all other steps within the mobile or desktop view for that popup.
Image sizing guidance
Focus on aspect ratio rather than exact pixel dimensions:
Half-screen images work best at roughly 1:2
Square images at 1:1
Keep image dimensions under about 1000 pixels for performance.
If you see a 413 error when uploading, the file is too large. Resize the image before uploading, since the editor's downsizing options only apply after a file has been successfully uploaded.
Layout and Navigation
Managing the structure of your popup is handled through text containers and the "Add Elements" functionality. The left-side panel contains text containers that change as you navigate between steps, allowing you to manage content efficiently.
Adding and Arranging Components
By clicking the Plus (+) button, you can add child elements like text blocks or additional images.
The editor allows you to:
Move text blocks into different containers.
Clone existing elements to save time.
Delete unnecessary components to declutter the design.
Adjusting spacing
If padding is already set to zero and you need elements closer together, adjust margins instead. Modify the parent container's spacing, reduce the bottom margin of the upper element, or as a last resort use a negative top margin.
Automatic Context Menus
To speed up your workflow, Alia uses Automatic Drop-Down Menus. When you select an element (like a text block), the editor automatically opens the relevant settings, such as typography, size, and weight, so you don't have to search for them.
Navigating Steps
Popups often consist of multiple steps (e.g., an initial offer followed by a success message). You can easily move between these steps and rearrange them in the sidebar.
Important: While you can rearrange the order of steps in the editor for your own organization, the actual order the customer sees is determined by Button Actions. Ensure your buttons are configured to link to the correct next step.
What requires Custom CSS
Some customizations have no native setting and need Custom CSS in the Styling Panel:
Checkbox background color
Resizing a trademark or symbol character within text, by adjusting the font size of the element containing it
Vertically formatted numbered lists
Layering a popup behind another site element, such as a cookie banner, by lowering the popup's z-index (for example below 1000)
Common display issues and fixes
Site text appears bold or restyled after the popup loads
This is usually a font collision between the popup and your theme. Enable the "use font from site" setting, or switch to a custom font that matches your site.
A Google Font isn't displaying correctly
This can happen if the font was added as a custom font, for example via import. Removing the custom version resolves it.
Buttons or quiz options aren't clickable on desktop
Another element, often an image, is overlapping the buttons. If the overlapping element doesn't have click-through enabled, it blocks interaction. Adjust layering or enable click-through. This can appear on some screen sizes and not others.
An image appears cut off on mobile
Check for masking effects applied to the image itself, such as wave masks. If the image file already includes a mask and the container applies one as well, parts of it can end up hidden. Remove the mask from the image file or adjust layering.
Elements don't render correctly on Safari
Layout constraints such as fixed aspect ratios can break rendering in Safari. Adjusting or removing aspect ratio settings and resizing the element usually resolves it.
The mobile view appears blank in the editor
This typically means the campaign is configured as desktop-only, so no mobile design has been set up yet.
Final Check: Always use the Preview mode after making adjustments to ensure your visual and functional elements align perfectly on both mobile and desktop screens.