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.
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.
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.
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.
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.