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.
Make sure you've selected the outermost container. The background applies to whichever element is selected. If you accidentally select an inner element, such as a text box or an image, you'll only change that element's background rather than the whole popup's. When the correct element is selected you'll see an outline around it and its properties will appear in the styling panel.
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: Click the color swatch next to Background Color to open the picker. You can select one of your saved Universal Theme colors or add a new custom hex code (e.g.,
#000000for black). The popup background updates in real time as you select, so you can compare options before committing.
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.
Note that background images are treated as decorative and do not have an alt text field. If you need alt text on an image, add it as a regular image element instead of a container background.
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. Focus on aspect ratio rather than exact dimensions, and keep images under about 1000 pixels.