Customizing the appearance of your Alia popups is key to creating a seamless user experience and maintaining brand consistency. One of the most fundamental design elements you can control is the popup's background color. This guide will walk you through the simple steps to change your popup's main background color using the Alia editor.
1. Select the Popup's Main Container
Before you can change the background color, you need to ensure you've selected the correct element in your popup. The background color typically applies to the outermost container of your popup.
To select the main container:
First, open the specific popup you wish to edit in the Alia dashboard.
In the Alia editor, navigate to your popup design.
Click on the outermost layer or border of your popup. You'll see an outline around the selected element, and its properties will appear in the styling panel on the right.
Ensure that the selected element is indeed the "Main Container" or the highest-level element in your popup's structure. If you accidentally select an inner element (like a text box or an image), you'll only change its background, not the entire popup's.
2. Find Background Settings in the Styling Panel
Once the main container of your popup is selected, the styling panel on the right side of the Alia editor will update to show its customizable properties. This is where you'll find all the design options, including background settings.
Follow these steps to locate the background options:
With the main container selected, look at the styling panel on the right-hand side of your screen.
Scroll down through the various styling categories until you find the section explicitly labeled "Background".
Within this section, you'll see options for "Background Color", "Background Image", and potentially "Gradient".
3. Choose Your Desired Background Color
Now that you've located the background settings, you can easily select and apply the perfect color for your popup. The Alia color picker offers a range of options for precise color selection.
Here's how to change the background color:
Click on the color swatch or icon next to the "Background Color" option within the "Background" section. This will open dropdown where you can select the added colours or add a new colour.
As you select a color, you'll see the background of your popup update in real-time.
Once you're satisfied with your selection, click outside the color picker to close it.
Note: You'd need to make this change on mobile and desktop separately to make sure both have the same colour background.