Want a more compact, centered popup experience on desktop? In this guide, you’ll learn how to create a non-fullscreen popup that sits neatly in the middle of the screen—perfect for a cleaner, more focused design.
Step 1: Open the Popup Editor
Navigate to your popup editor to begin editing your desktop version.
Step 2: Locate the Fullscreen Containers
Inside the desktop container, you’ll see two containers that cover the entire screen:
One is the background layer
The other is the top layer (your actual popup content)
Step 3: Select Both Containers
Click on both to confirm they’re full-screen. These layers stack on top of each other to create your current layout.
Step 4: Set Your Background and Popup Layers
Change the color of the top layer to serve as the popup backdrop.
The background layer beneath it will now act as your overall background color.
Step 5: Resize the Popup Container
Adjust the top layer container to be:
80% width
Max width: 800px
Optional: Add a border radius (e.g., 8px) for a softer look
Step 6: Center the Popup on Screen
Click the outermost container and set the layout to:
Horizontal
Align: center
Justify: center
This will position your popup perfectly in the middle of the screen.
You should now see a clean popup window centered on your screen—not taking up the full viewport.
Step 8: Add In Images and the Close Button (X)
Select the main popup container and set its position to Relative.
This step ensures that any absolutely positioned elements (like the X button or image overlays) stay aligned within the container.
And that's it! You've successfully modified your pop-up to not be full screen.