Overview
By default, popups are designed to occupy the full screen to capture maximum attention. However, sometimes, you might want to change it to a non full screen popup. In this guide, we will learn how to create a focused popup that sits neatly in the middle of the browser window.
Step-by-Step Configuration
Follow these steps within the Alia editor to modify your layout hierarchy.
Step 1: Open the Editor
Navigate to your popup editor and ensure you are working on the Desktop version of your popup.
Step 2: Duplicate the Container
Locate the Fullscreen Desktop Container in the element tree. Click the three dots (options menu) on the container and select Copy. Then, click the three dots again and select Paste as child element.
Step 3: Clean Up the Hierarchy
Because you pasted the container as a child, you now have a duplicate set of elements. Delete the elements directly inside the outermost container, leaving only the new child container and the elements inside it.
Note: The goal is to have an outer container acting as the "overlay" and an inner container acting as the "popup box."
Step 4: Align the Outer Container
Select the outermost desktop container and update the layout settings on the right-hand panel:
Direction: Vertical
Vertical Align: Center
Horizontal Align: Center
Step 5: Set Child Container Layout
Select the inner (child) desktop container and set its Layout type to Relative.
Step 6: Adjust Dimensions
In the "Size" section of the right-hand editor for the child container, set the Width and Height to 80% (or your preferred fixed dimensions).
Step 7: Style the Overlay
Select the outermost desktop container again. Set the Background Color to black (#000000) and adjust the Opacity to 50%. This creates the classic dimmed background effect.
💡Pro Tip: To give your popup a softer, modern look, select the child container and add a Border Radius (e.g., 8px or 12px) under the styling tab.
Remember to preview your changes and that's it! You've successfully modified your pop-up to not be full screen.