Popup Layout, Overlay, and Close Button in Spexo Builder

This guide explains how to configure popup layout, overlay, and close button settings in Popup Builder. These settings control how your popup appears, where it is positioned, and how users interact with it.

You can use these options to improve user experience and control popup behavior. You can also match the popup design with your website layout and branding.

Why Layout and Interaction Settings Matter #

Popup layout and interaction settings affect how users experience your popup. A well-configured popup feels clear and easy to use. Poor configuration can feel intrusive and reduce engagement.

Control popup size and position
Improve readability and accessibility
Reduce unwanted interruptions
Create better visual hierarchy

Before You Start #

Before configuring layout and behavior settings, make sure your popup is already created. You should also configure the basic popup logic before adjusting design and interaction settings.

Popup Layout Settings #

Layout settings define how your popup is displayed on the screen. You can control the display type, size, alignment, animation, and page scroll behavior.

Display As #

This setting controls how the popup appears on the website.

Modal Popup – Traditional centered popup with background overlay
Top Bar Banner – Notification bar displayed at the top of the page

When to Use Each

Modal Popup – Best for offers, forms, announcements, and promotional content
Top Bar Banner – Best for less intrusive notices, cookie messages, and simple promotions

Note: Some options such as Disable Page Scroll are available only with the Modal Popup display type.

Width #

This setting controls the overall width of the popup.

Use pixels for fixed width layouts
Use percentage for responsive layouts
Example: 650px or 80%

Height #

This setting defines the popup height.

Auto – Height adjusts based on content
Custom – Height is set manually using px or vh

Alignment #

This setting controls where the popup appears on the screen.

Horizontal Align – Left, Center, Right
Vertical Align – Top, Middle, Bottom
Content Align – Controls alignment of content inside the popup

Entrance Animation #

This setting controls how the popup appears when triggered.

Fade In
Slide In
Zoom In
Bounce

Animation Duration controls how long the animation takes. The default value is 1 second.

Z Index #

This setting controls the stacking order of the popup.

Default value is 9999
Higher values place the popup above other elements

Disable Page Scroll #

This setting prevents users from scrolling the page while the popup is open.

On – Background scrolling is disabled
Off – Users can scroll behind the popup

Overlay Settings #

Overlay settings control the background layer behind the popup. This helps focus user attention and improves popup visibility.

Show Overlay #

Yes – Displays a semi transparent background behind the popup
No – No overlay is displayed

Prevent Closing on Overlay Click #

Off – Clicking outside the popup closes it
On – Popup closes only through the close button

Close Button Settings #

Close button settings define how users can close the popup and how the close button behaves.

Show Close Button #

Yes – Displays the close button
No – Hides the close button

Show Up Delay #

This setting adds a delay before the close button appears.

Default value is 0 seconds
Useful when you want users to view content before closing

Position #

This setting controls close button placement.

Vertical Position – Distance from top in px
Horizontal Position – Distance from right in px
Default is 10px from top and right

Popup Styling Options #

Styling settings allow you to customize the popup appearance to match your website branding. These options affect the popup container itself.

Background #

This setting controls how the popup background looks.

Solid Color – Choose a single background color
Gradient – Create a smooth gradient background
Image – Add a custom background image

Tip: Use brand colors and maintain strong contrast between text and background.

Padding #

This setting controls spacing inside the popup container.

Adjust top, right, bottom, and left padding
Default padding is usually around 20px

Proper padding keeps content readable and avoids a cramped layout.

Border Radius #

This setting controls how rounded the popup corners appear.

0px – Sharp corners
10px – Slightly rounded corners
20px or more – Rounded modern look

Border #

This setting adds a border around the popup.

Set border width
Choose border style
Select border color

Box Shadow #

This setting adds depth to the popup and improves visual separation from the page.

Adjust blur and spread
Set shadow color
Control horizontal and vertical position

Best Practice: Use subtle shadows for a cleaner and more professional popup design.

Overlay Styling #

Overlay styling controls how the background behind the popup looks. This helps keep focus on the popup content.

Overlay Background Color #

Default is a semi transparent dark background
You can change both color and transparency

Tip: Use rgba colors when you want better control over transparency.

Overlay Opacity #

This setting controls how dark or light the overlay appears.

Lower opacity creates a lighter effect
Higher opacity creates stronger focus on the popup

Close Button Styling #

These options let you customize how the close button looks in normal and hover states.

Normal State #

Icon Color – Change the X icon color
Background Color – Set close button background
Border – Add border style and color
Icon Size – Adjust size of the icon
Box Size – Control overall button size
Border Radius – Make button corners rounded

Hover State #

Change icon color on hover
Change background color on hover
Add smooth transition effects

Tip: Use subtle hover effects so the close button feels interactive without becoming distracting.

Best Practices for Popup Layout and Interaction #

Avoid very large popups that block the full page
Use subtle animations instead of aggressive effects
Keep the close button visible and easy to reach
Use balanced overlay opacity for focus and readability
Test popup layout on desktop, tablet, and mobile
Use percentage based width for better responsiveness
Avoid heavy background images that slow loading
Maintain consistent branding across all popup designs

Frequently Asked Questions #

What is the difference between Modal Popup and Top Bar Banner #

Modal Popup appears as a centered popup with overlay. Top Bar Banner appears as a horizontal bar at the top of the page.

Can I disable background scrolling when the popup is open #

Yes. You can enable Disable Page Scroll when using Modal Popup layout.

Can I hide the close button #

Yes. You can disable the close button in Close Button settings.

Why is my popup appearing behind other elements #

This usually happens because the Z Index value is too low. Increase the Z Index so the popup appears above other elements.

Need help? Feel free to contact our support for further assistance.

Get the free elementor addons, flexible widgets, and powerful extensions with Spexo Addons, including prebuilt websites to speed up your website building experience for WordPress.

Top Features

Resources

Company

Disclaimer: Spexo Addons for Elementor & Spexo (formerly SastraWP) is an independent product by Fast Themes. It does not represent Elementor.com

Days

Hours

Mins

Secs

Buy Spexo PRO