What's On This Page...
- Popup Uses & FAQs
- How To Use
- How To Design
- Popup Example
- Video Tutorial
If you are looking for related Elementor Pro tutorials feel free to browse the attached lessons or get in touch with specific questions.
How Do I Create a Popup In Elementor?
There’s two important steps in creating a popup within your Elementor website (you’ll need Elementor Pro in order to create these). The two important factors are building the popup and then creating a trigger (typically a button) that will cause the popup to appear). Let’s first start with the design of the popup below…
How Do I Design a Popup?
Designing a popup within Elementor is quite easy. See below on this page for a full video walkthrough behind-the-scenes.
First, navigate within your WordPress backend to Templates and then Popups (shown in the screenshot attached.
Navigate to the top of this new page, after clicking on popups, and click on Add New. You will be shown a list of premade design templates or have the option to upload your own.
Where Can You Place Elementor Popup?
Popups within Elementor are typically placed within a button or set to appear when a page is loaded (other customizations can be implemented as well but for now we will only be talking about the basics).
What Can You Put Inside Elementor's Popups?
The sky is the limit when it comes to Elementor popups and integrations. Let’s say you have an email list in Mailchimp and want to integrate the signup form. You can easily place the code from Mailchimp inside an HTML block from Elementor and map the fields to your mailchimp or custom form fields.
You can do everything from presenting further options for the site visitors to selling digital products. I’ve found it very helpful to have the end goal in mind when creating popups and integrating other marketing software but please do not hesitate to reach out should you need assistance or want to brainstorm some ideas.
Here's An Example of an Elementor Pro Popup:
The orange button below will trigger a popup when clicked, it’s a real contact form that will go to my email when submitted. The design was taken from one of Elementor’s premade design templates. Let’s take a look at how it was created (quick video walkthrough below).
Step 1. Create Your New Popup & Choose a Design Template
The fastest way to get a new popup up and running is to choose one of Elementor’s premade designs and customize from there. You can certainly change out any of the images, text and placeholders as needed during the customization process.
1. Start by actually creating the popup container. In your WordPress dashboard navigate to, Templates (underneath Elementor) then click on Popups in the new dropdown that appears.
2. At the top of this new page, there is a button that says Add New, click on this.
3. You will be prompted to name your new popup, label this whatever you’d like but you will need the name later on.
4. The new screen that appears will allow you to either choose a design from Elementor’s template library or you can upload your own (I recommend choosing a premade design and customizing as needed). Click on insert underneath one of the designs to use it.
Step 2. Customize Your Design (Will Vary By Needs)
Once you’ve chosen your popup template design, you can customize as needed. This step will be different for everyone, based on your needs, but here’s a brief video of me customizing the form within the popup. Feel free to reach out should you need some help or brainstorming power during this portion.
In this video I go through adding new form fields and resizing to better fill the space.
Step 3. Publishing Your Popup
The last step in your design process, before connecting to a button, is to actually publish the form. This stage is required in order to make the popup available on your site.
Just like you might publish a page or blog post within Elementor, click on Publish. The new screen that pops up after you click on publish will ask you about conditions and triggers. For now we can simply click on save and continue.
Step 4. Connecting To a Button
Now that the design process is finished (you can always come back to make changes if needed), it’s time to connect your new popup feature to a button on the site. You will need to know the name of your new popup for this last step.
1. First, drag in a button element on the page.
2. Navigate to the button’s settings and click on dynamic tag (it’s a very small button located to the right of the link field in the button settings (shown in video).
3. Within the dynamic tag dropdown, scroll down to Popup and click on this.
4. Elementor can be a bit wonky in this stage and what most likely will happen now is that the link field will now say “Popup.” Click on this new field (shown in video here), and you will see a new blank field appear. While it should appear directly above where you’d just clicked, it sometimes will appear at the very top left of the screen.
5. Click inside this blank field and start typing the name of your newly created popup. Give it a few seconds and your Elementor database will generate a list of matching results, click on the name of the popup that you’ve just created. In this example I had named my popup Test Popup
Congrats! You’ve successfully created your new Elementor Popup and connected it to a button.
