Your popup design plays a critical role in grabbing attention and driving conversions. A well-designed background ensures your message is readable and aligns with your brand identity. In this guide, you'll learn how to edit the background of your popup on both mobile and desktop versions using solid colors or custom images.
Editing the Mobile Popup Background
Since most traffic often comes from mobile devices, we recommend starting your design process here. Follow these steps to customize your mobile background:
Select the Mobile Universal Container: Click on the mobile universal container within the Alia popup editor. This container holds all your elements and defines the overall background area.
Locate the Background Settings: Look at the right-hand side panel. You will find a dedicated section for background settings specific to the selected container.
Choose a Background Color or Image:
Color: Use one of your saved Universal Theme colors or set a custom hex code (e.g.,
#000000for black).
Image: Switch the background type toggle to Image. You can then upload a new file or select an existing asset from your library.
Recommended Image Settings: To ensure your background looks professional on all screen sizes, set the Background Size to Cover and the Position to Center.
Editing the Desktop Popup Background
Once you are satisfied with your mobile design, you must configure the desktop version. Alia allows for specific layouts for each device to ensure the best user experience.
Switch to Desktop View: Click the desktop icon/tab at the top of the editor to toggle the view.
Repeat the Background Selection: Just like the mobile process, select the universal container and navigate to the background settings.
Adjust Image and Color: Pick your desired color or upload a desktop-optimized image. You can adjust the size and positioning independently of the mobile settings.
Note: Design changes made in the mobile view do not automatically carry over to the desktop view. Always review and edit both views separately to maintain a consistent brand experience across all devices.
Summary of Best Practices
To create the most effective popups, keep these tips in mind:
Ensure high contrast between your background and your text for better accessibility.
Use the preview mode to see how the images look on desktop and mobile.
Keep image file sizes optimized to ensure fast loading times for your visitors.