elementor popups wordpress create

How To Create Popups In Elementor

Table of Contents

Have you ever wanted to create stunning popups in your site using ? Popups are a great way to get more subscribers and leads.

One of the most highly requested features for Elementor, one that is often overlooked when users install it, and one that rarely gets utilized to its fullest potential is the ability to create popups within Elementor.

While you can create a popup using plugins, it is not 100% necessary. Since you already have WordPress installed and running, all you need to do is to utilize the Elementor page builder that uses a simple drag-and-drop interface to build WordPress pages or posts.

In this tutorial, we are going to learn how to create a popup in the Elementor WordPress plugin. It is a very simple and easy tutorial but it can be really useful for you if you need to make any kind of alert for your website visitors.

Popup In Elementor

Creating popup modals in Elementor is a paid feature. You need to have an Elementor Pro subscription to create some amazing popups that will be helpful to convert your website visitors into subscribers or registered users.

ELEMENTOR PRO PRICING PLANS

We recommend Elementor pro to all our clients as it is easier to create stunning designs with it. And easy to maintain the content on the website. Whether it is a good practice or not is a discussion for some other day.

When you have an Elementor Pro plugin installed on your alongside the free version, it is still not easy to find the popups option.

This is because the popups feature of Elementor is not a widget but a separate feature.

CREATE NEW ELEMENTOR POPUP

To create popups, go to your WordPress Dashboard > Templates > Popups page.

Press the Add New button. Put the popup name and press the Publish button in the right column.

Once published, you will be able to see the Edit with Elementor button on top of the same page. Click on it and start creating your first popup modal in Elementor builder.

When you finish creating your first popup with Elementor, you should press the Publish button. You will then see a popup from Elementor that requires how and where the newly create popup is to be used.

ELEMENTOR POPUP PUBLISH SETTINGS

In the popup publish settings, you should first select the conditions.

Select where the popup you are creating has to be displayed. Popups in Elementor can be created for the complete website or just some sections of it.

Once the conditions are set, press the Next button.

Here you will be asked for different kinds of triggers that can be used to trigger the popup modal that you are creating using Elementor. Very important and useful setting.

Here you can set the popup to show only once when loading the website page. Or show the Elementor popup when hovering over a certain item. Or show when the visitor is going to close the browser tab.

Trigger Elementor Popup On Button Or Link Click

When publishing a popup with Elementor page builder, you will see conditions and triggers in its settings. But for some reason, there is no option to trigger a popup when clicked on a button or a link.

This feature can also be done but unfortunately, Elementor doesn't have an easy way to do this.

To trigger a popup modal when a button is clicked on a page, you have to first set a CSS ID or Class name to the button.

BUTTON CSS CLASS NAME

Now that we have named a CSS class to the button, remember and copy this name.

For the same button settings, go to the Content tab on top. Find the Link field and put the CSS class name here with “#” in the beginning.

BUTTON LINK POPUP TRIGGER

This is important as we will be using this CSS class name and link name in the popup settings next.

Now go to your Popup Settings in Elementor. This can be found by clicking the gear icon at the low end of the Elementor page builder.

ELEMENTOR POPUP SETTINGS GEAR ICON

Now go to the Advanced tab from the top and find the Open By Selector field.

Here input this shortcode with your CSS class name:

a[href="#your-css-class-name"]

Now your Elementor popup modal will open whenever someone clicks the button with this CSS class name.

If you are using this same popup on different pages for different buttons, follow the same steps above. In the Open By Selector field you should enter multiple times the above shortcode like this:

a[href="#your-css-class-name-1"], a[href="#your-css-class-name-2"], a[href="#your-css-class-name-3"]

The comma and space will help the Elementor plugin to know that it should trigger this popup for multiple buttons.

This way you will be able to create a popup in the Elementor Pro plugin when someone clicks a button. Similarly, you can do this for a text link.

Trigger a popup on a page when someone clicks on a link by putting the link URL as #random-link-name

Then go to the Popup Settings page and follow the same steps above to put the link in the Open By Selector field.

Similarly, you can create an Elementor popup to trigger when someone clicks on the menu. Just name the menu with a unique CSS class name and follow the above steps.

Using small size images in popups helps load them faster. Read our blog post to get Free Image Size Reduction Trick and get images that are easy and fast to load in a popup.

Elementor Popup Entrance and Exit Animation

Creating popups in Elementor can be confusing sometimes. When you want to make the animations for the popup, there are two places that can confuse you.

When you edit the main section of the popup and go into its Advanced tab, under the Motion Effects tab, there is also an Entrance Animation option.

WRONG SETTINGS ELEMENTOR POPUP ANIMATION

Do not confuse this with the complete popup animation. This setting should not be set.

The right setting is in the Popup Settings panel. This panel can be accessed by clicking the gear icon in the Elementor page builder panel for popups.

RIGHT SETTINGS ELEMENTOR POPUP ANIMATION

Here you should set the type of Entrance and Exit animation for your popups.

Elementor Popups Rounded Borders

One of the attractive features of a popup is its borders. Based on the design they can be sharp or rounded.

When you want to have a rounded bordered popup, again it can be confusing in Elementor as to where to put the right setting.

Because the Border option is seen in almost all elements and widgets of Elementor.

To set the right Border settings, go again in the Popup Settings panel by clicking on the gear icon in the left bottom corner of the Elementor panel.

Then click on the Style tab.

ROUDED BORDER POPUPS IN ELEMENTOR

In the Popup tab, you will see the Border Radius option. Input your numbers here and get rounded border popup modals in Elementor.

Elementor Change Popup Conditions

When you publish your popup first time in Elementor, it asks for various publishing settings options. But when you want to change the popup conditions again, it is again confusing for a new Elementor user to find this setting.

To change the popup conditions in Elementor, you have to click on the upper arrow icon button beside the Update button.

ELEMENTOR CHANGE POPUP CONDITIONS

When you click on this small button, you will see the Display Conditions, Triggers, and Advanced Rules panel link as a list.

In my view, these settings should be more visible and easily accessible. Something that Elementor can improve in their future updates.

Final Words

In the above tutorial, we saw how to create to be used on your website. We specifically saw a unique case of a button trigger to the Elementor popup.

This part is confusing for many WordPress Elementor designers. Keep this guide as a reference by bookmarking our website.

can be confusing at times. But they can be used to create some advanced popups like Elementor popups with dynamic content.

Plus I have found Elementor popups are mobile friendly too. And custom mobile popup designs can also be made with the Elementor Pro plugin.

If you have a special trick with the Elementor Pro plugin when creating popups modal, do share them in the comments below.

Share This Article:
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Email
Reddit
Related Articles:
image size reduce online
Facebook
Free Image Size Reduction Trick

Without Any Plugin Did you know that a normal website gets most of its weight from the images used in it? It is true. The majority of website size is mostly because of the images used in its pages. Optimizing images without losing quality is a difficult task for average

Read More »
free wordpress hosting
Plugins
Host Your WordPress Website For Free Forever

Hosting a WordPress website can be an expensive thing if not done properly. It can go from just a few dollars to thousands of dollars a month. Finding WordPress hosting can be a difficult task. If you own a small blog or website that you do not update often then

Read More »
free high quality backlinks
Backlinks
Get Free High Quality Backlinks The Creative Way

A backlink in the SEO world is a link from a post or a page on one website to another. If a website is linking to your content, it means you got a backlink. These backlinks are also called “inbound links”. Sometimes they are also called “incoming links”. Carrying a

Read More »
google seo ranking factors
Backlinks
Top 8 Google SEO Ranking Factors In 2022

There are tons of articles on the internet speaking about the best SEO ranking factors. A lot of them speak about the same factors in a different way. Today we wrote about the top 8 Google SEO ranking factors after going through tons of articles online. We decided to write

Read More »
feature snippets complete guide
Search Engine Optimization (SEO)
A Beginner’s Guide To Google Featured Snippets

Did you know that Google already has the answer to your customer’s question? You’re probably thinking that you can outrank Google because it’s something they don’t have, but I would think again. Why? Because the answer is staring right at you in the search results. More and more websites are

Read More »
Subscribe to our newsletter
Chat With Our SEO community members On discord
Discord SEO Community Chat
  • Just-iko avatar Just-iko Thank you very much for answering ☑️ ✨
  • ddev66 avatar ddev66 Put your content in the right HTML tags and Google will show it this way.

    In the picture that you show, the first content is put in a list with bold headings.
    The second content is a FAQ on that page.

    Put in the right HTML tags and Google will pick it up nicely.
  • Just-iko avatar Just-iko Hello, I'm a newbie in this field, any guidance would be appreciated :) some questions please, is there any idea on how to make our website could appears like that in Google search? The one that I marked..
  • ddev66 avatar ddev66 Semrush or Ahrefs will help you for spying competitors.

    I think Semrush has a trial period as well.
  • Aadhi avatar Aadhi Buy semrush, you can buy it at cheap rate by using Group buy method
  • SG.CK avatar SG.CK Any free tool for spy traffic and ranking ?
  • ddev66 avatar ddev66 Search on google “htaccess redirect rules”
    Put them in your website’s htaccess file if you are using Apache
  • BrunoAfonso avatar BrunoAfonso how should I go to solve this issue
  • BrunoAfonso avatar BrunoAfonso Can you explain a little bit more? My website is not wordpress, I use amazon web services
  • ddev66 avatar ddev66 You can make a 301 redirect to the correct page on your website.
    If you are using Wordpress then SEO plugins like rank math have this feature.
    If you don’t want to use SEO plugins then there are many good redirect plugins in the Wordpress repository.
    And if you are not using Wordpress then .htaccess file is your friend.
  • BrunoAfonso avatar BrunoAfonso For example, is this image, the second link "THU Main Event" goes to a different page that it's supposed to. How do I fix this.
  • BrunoAfonso avatar BrunoAfonso So I have a website and when you search for it, one of the hyperlinks that google provides goes to the wrong page, is there a specific way for me to change that?
  • ddev66 avatar ddev66 Need more explanation
  • BrunoAfonso avatar BrunoAfonso Hello people, does anyone know how to fix a hyperlink within a google search?
  • ddev66 avatar ddev66 Semrush shows you all the links that it considers as toxic in its domain overview dashboard. You can then use these website list to disavow in GSC.
  • rrakesharmaa avatar rrakesharmaa I want to remove high spam backlinks via Disavow tool. So i need these links.
  • ddev66 avatar ddev66 extract high spam score backlinks.
    This is little confusing for me to understand

    Do you want to remove high spam backlinks to your website or do you want to receive backlinks from websites that have a high spam score?
  • yaswanth avatar yaswanth Now I use the Search console live URL inspector. It shows the page source and screenshot with an error(If any).
    Result: The page is not mobile friendly in the screenshot. All the element's styles are broken.

    Now, I feel like, " What the hell is happening in rich result tester? The google bot shows everything is ok, and in the search console, this is happening."

    # Problem Digging Stage final stage - Solving the problem
    The easiest way to solve the problem is to compare the thing and find the difference.
    Is rich results tester a google bot? Yes!
    Is it owned by google? Yes!
    Is it have any link with the official search console crawler? No!

    Now, What is the difference between 2 crawlers?
    Their IPs are different. They work differently.

    Summary: Google bot (Offical bot) is not able to crawl all elements in the webpage. It is not able to read all styling files. All other bots(services that use crawl as Google Bot) can view/crawl the page.

    List of official google bot IPs: https://developers.google.com/search/apis/ipranges/googlebot.json

    Solution: Rather than digging into all files, we changed the hosting server located in the exact location.

    Thank you for reading this article. It takes a few mins to read this article, but It took hours to find the correct problem with a solution. If you find this article valuable, give it a like and if you have any questions, feel free to ask them.
  • yaswanth avatar yaswanth Solving Critical Indexing Problem (CASE STUDY)

    Last week I received a message from a friend he is requesting me to help him index a page of his website. I said, " Wait, sometime google will index automatically" Then he said he was getting problem with his homepage. So, I started digging. First, I want to find the problem. Then all other things were easy.

    # Problem Digging Stage 1 - Analyze the top layers
    Checking the basic things
    1) No Index tags
    2) Canonical tags
    3) Website page Age

    Result: Nothing Found

    # Problem Digging Stage 2 - Getting Deeper
    1) Checking status codes (If there is any redirects, 404 error, or soft 404 errors)
    2) Using an SEO browser to check the web page accessibility
    3) Trying with different user agents

    Result: Nothing Found

    # Problem Digging Stage 3 - Analyzing and
    comparing past and current stages of webpage
    1) Checking the Wayback machine for any spam content history
    2) Checking the search console for errors
    3) Other page's indexability

    Result: I got some clue. Search console shows "Page is not mobile friendly."

    # Problem Digging Stage 4 -Finding the reason for the search console error.
    When I checked the web page with SEO Browser, the page was mobile friendly, and I also tried "crawl as Googlebot." Everything looks good. Then where is the problem?

    One thing was confirmed google is not able to view the webpage clearly. And all other bots are not getting any problems.

    So, I decided to use only google properties in the further process (Because only the google bot gets stuck).
    I selected three tools to process further.
    1) Google page speed insights
    2) Google rich results tester
    3) Search console Live URL inspector

    First, I used page speed insights to check If the google bot can crawl/view the page or not(If there are any issues in crawling, then the tool returns a lighthouse error)
    Result: everything is ok

    Second I used Google rich results tester. It provides the page source and screenshot of the webpage.
    Result: everything is ok
  • achann avatar achann Backlink actually link that provided outside web, so if you use instagram and insert your web link that still counted as backlink.
  • achann avatar achann If you want to be free, why not using mailchimp for email blast. Or maybe you can use whatsender for whatsapp blast, there is nulled version I think.
  • achann avatar achann Um.. Maybe you can use whatsapp blast and give link? Or maybe you can use email marketing and give link to your web?
  • rrakesharmaa avatar rrakesharmaa How can I extract high spam score backlinks for my website? Is there any free tool that provides all high spam score sites HELP ME PLEASE 🙂
  • nkap avatar nkap <@211319858258771968> hey, would you be able to share the website that you want guest posts on? I’m in touch with a few fintech businesses and can ask them whether they’d be interested in putting a post on your site.
  • ddev66 avatar ddev66 <@211319858258771968> it sure will work. Make sure to write that it’s free to post as guests. A lot of websites do not mention this and writers usually think it’s paid opportunity only.

    Keep us updated of how well this goes for your website.
  • soutaraku avatar soutaraku Thank you so much for the detailed guide. I'll see if I can put up the Guest Post page to start with! I hope my email gets bombarded in a good way haha
  • ddev66 avatar ddev66 You should start putting up a page called Guest Posting on your other website where you put articles, etc.. and put all the requirements there which you are looking for in the guest posts. Make sure to leave your email as well for easier contacts.

    Build up some links to this page. Because most of the writers are looking to write for high metrics website that have good DA, TF, etc...

    Once you have a page setup it will help you get attention from people who are searching on Google.

    Next you can start sending the URL of this page to people whom you think might be interested to write for your service on social networks like twitter, linkedin, etc.

    Also list this page URL on websites that have posts like free guest posts list in SaaS, free guest posts list in "your niche", etc. Something like this: https://underwp.com/the-best-free-guest-posting-websites-list-in-2022-over-3000/

    These will get you enough traction to attract guest posts from various contributors over the time. Your email will be bombarded with emails following the above tips.
  • soutaraku avatar soutaraku I can translate guest post to Japanese and put it on our website to share stories from overseas. I thought it would be interesting for our readers and a good way for link building.
  • soutaraku avatar soutaraku It's not titled as contribute/guest posts page, but there's a website we put interview articles and such. We surely can put guest posts on that website.
  • ddev66 avatar ddev66 <@211319858258771968> does your website have contribute/guest posts page?
  • soutaraku avatar soutaraku Hi guys! I'm a Japanese SEO specialist/ content editor working for a fintech company, and looking for someone to put guest posts on our website (preferably about fintech or SaaS market). Are there any good place to look for people willing to guest post?

    In Japan, not many people write guest posts, so I'm kinda lost. Twitter trick is only guiding light to me, <@838326478924021760>. Thanks for sharing.
  • Deleted User avatar Deleted User trying it out right now
  • nkap avatar nkap Great idea! Will definitely try it out. Thanks mate.
  • ddev66 avatar ddev66 A good trick to get guest posts for your website. <@456226577798135808> <@755307075625549854>
  • Büşra avatar Büşra Thank you very much. I'll try 😊
  • nkap avatar nkap Yeah me too!!
  • naaz avatar naaz <@755307075625549854> Thank you for the detailed answer. Hope <@341197404302737408> finds the right solution for this.
  • nkap avatar nkap <@341197404302737408> Just these:

    You can try 3 things: (I suggest you try the 3rd option first)

    1. If there are any links in your coverage report that’s actually not from your domain/property, I’d recommend you use the Search Console’s removal tool to remove these from your property.

    2. If you’re using any page builders like elementor etc make sure you turn off search engine indexing for things like templates. You can find this in Yoast SEO settings. With this setting your templates and unnecessary pages won’t be indexed. Are you using elementor by any chance?

    3. It’s also possible that your site has been hacked. If random URLs are appearing in analytics and search console the first thing that you should do is check your .htaccess file to see if someone has put any rewrite rules.
  • ddev66 avatar ddev66 <@755307075625549854> got any views on this?
  • ddev66 avatar ddev66 did you change your permalinks sometime back in last few months?
  • naaz avatar naaz <@838326478924021760> bringing to your attention on this.
  • Büşra avatar Büşra hello guys! I need to help about SEO optimation. I'm using wordpress Yoast. I saw dummy link like as ``` https://myURL.com/cuisine/35/17498``` I haven't these in page. Btw ı'm using google search console. Why may be this? Is anyone has idea about that?
  • ankit662003 avatar ankit662003 does anyone know how to create seo silos?
  • ankit662003 avatar ankit662003 hi
  • ddev66 avatar ddev66 Just know that we are all here to help each other
  • ddev66 avatar ddev66 No worries mate.
  • Alex25 avatar Alex25 The thing is idk what to ask .
    I'm just stuck
  • ddev66 avatar ddev66 Drop your queries here

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.