Skip to content
  • There are no suggestions because the search field is empty.

How to Create Elementor Template: Popup

A popup template in Elementor lets you create a reusable popup design that can be shown on your website when needed. Popups are often used for things like:

  • announcements
  • promotions
  • newsletter sign-ups
  • event reminders
  • special offers
  • contact forms

This guide will walk you through how to create a popup template in a simple, beginner-friendly way.

What a Popup Template Is

A popup template is a design saved inside Elementor that opens on top of your website content.

You can use it to display a message or action without creating a full new page.

A popup might include:

  • a heading
  • text
  • an image
  • a button
  • a form
  • a close button

Once created, your popup can be published and connected to rules for where and when it appears.

Before You Start

Before creating a popup, make sure:

  • you are logged into WordPress
  • you have access to Elementor
  • you know what the popup is for
  • you have any text, images, links, or form details ready

It is also a good idea to keep popups simple. Too much content can make them harder to read, especially on mobile.

When to Use a Popup

A popup works best when you want to draw attention to something important.

Good uses for a popup:

  • limited-time promotions
  • sign-up forms
  • location notices
  • event announcements
  • important customer messages

Try to avoid using a popup for too many different messages at once.

How to Create a Popup Template

  1. In WordPress, go to Elementor > Templates
  2. Click Popups
  3. Click Add New Popup
  4. Enter a clear name for your popup
  5. Click Create Template

You may see a library of ready-made popup designs. You can:

  • choose a pre-made layout, or
  • close the library and build your own from scratch

How to Build the Popup

Once the popup editor opens, you can begin designing it just like a page in Elementor.

You can add widgets such as:

  • Heading
  • Text Editor
  • Image
  • Button
  • Form
  • Icon
  • Spacer

A simple popup usually includes:

  • a short headline
  • a short message
  • one main button or form
  • enough spacing to keep it easy to read

Example

A basic promotional popup might include:

  • Heading: “Don’t Miss This Week’s Specials”
  • Short text: “Check out the latest deals available now.”
  • Button: “View Specials”

How to Adjust Popup Layout Settings

Popup settings are slightly different from regular pages.

To change the popup’s overall size and behavior:

  1. Click the gear icon in the lower left corner of Elementor
  2. Open the popup settings
  3. Adjust things like:
    • width
    • height
    • position
    • overlay background
    • entrance animation
    • close button settings

Keep the popup large enough to read easily, but not so large that it feels overwhelming.

How to Style the Popup

You can style the popup using Elementor’s normal editing tools.

You can change:

  • colors
  • fonts
  • spacing
  • background color
  • border radius
  • shadows
  • button styles

If your website has brand guidelines, try to match your popup to the rest of your site.

How to Publish the Popup

When your popup design is ready:

  1. Click Publish
  2. Elementor may ask you to set Display Conditions, Triggers, and Advanced Rules

These control:

  • where the popup appears
  • when it appears
  • who sees it

What Display Conditions Mean

Display Conditions tell Elementor where to show the popup.

Examples:

  • on the entire website
  • on a specific page
  • on certain sections of the site

If you only want the popup on one page, be careful not to set it for the entire site by accident.

What Triggers Mean

Triggers control when the popup appears.

Common options include:

  • on page load
  • after a delay
  • on scroll
  • on click
  • on exit intent

For most clients, simple is better. A popup that appears immediately on page load can be effective, but it can also feel intrusive if overused.

What Advanced Rules Mean

Advanced Rules control more specific behavior, such as:

  • how often the popup appears
  • whether returning visitors see it again
  • whether it should appear only on certain devices

These settings can be helpful, but if you are unsure, use simple default rules or ask support for help.

Best Practices for Popups

Keep the message short

Popups work best when they focus on one clear message.

Use one main action

Try not to include too many buttons or competing links.

Check mobile view

Always preview your popup on mobile to make sure it is readable and easy to close.

Avoid too many popups

Too many popups can frustrate visitors and hurt the website experience.

Make it easy to close

Visitors should always be able to exit the popup easily.

Naming Your Popup Template

Use clear names so you can find your popup later.

Good examples:

  • Homepage Promo Popup
  • Event Signup Popup
  • Specials Alert Popup
  • Newsletter Popup

Avoid unclear names like:

  • Test
  • New Popup
  • Final Version 2

Common Mistakes to Avoid

  • making the popup too large
  • adding too much text
  • forgetting to test mobile view
  • setting display conditions too broadly
  • showing the popup on every page by mistake
  • forgetting to update buttons or links
  • creating a popup that appears too often

How to Edit a Popup Later

To update an existing popup:

  1. Go to Elementor > Templates
  2. Click Popups
  3. Find the popup you want to edit
  4. Click Edit with Elementor
  5. Make your changes
  6. Save or update the popup

When to Contact Support

Reach out to support (support@rankreallyhigh.com) if:

  • you are not sure where the popup should appear
  • the popup is showing on the wrong pages
  • the popup does not open or close properly
  • the layout looks broken on mobile
  • you want help setting advanced display rules
  • you need a popup for a more custom use case