Trigger a popup with text link in Elementor Pro and CSS

How to open a popup when you click on a text link using Elementor Pro and a bit of CSS?

Check this video on how to create just that or continue reading below!

In this post, we will see how to create a simple popup and then display it when you click on a word or a text link on your page. This tutorial is using Elementor Pro version.

Download Elementor Pro here.

*This post may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale, with no extra cost to you. That way you are supporting my blog and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.

First, create a Popup template

You first need to create a popup by going to Templates > Popups > Add New Popup. After that, give your popup a name, go to ‘Create Template’ and insert widgets, like heading, text or an image to create and style your popup. Hit ‘Publish’ and add a condition ‘Entire Site’ if you wish to display your popup on your whole website. Click on ‘Next’ and ‘Save and Close’.

After this, click on the ‘Settings’ in the left sidebar and in the ‘Advanced’ panel, go to ‘Advanced’ and ‘Open by Selector’ field. Make up a name and type it here, for example .trigger. Remember this name that you specify here – you will use it in a bit!

Click on ‘Update’ and go to your page where the text triggering the popup should be. Switch to the ‘Text’ tab of the text widget and insert the code around the word or words that should be used as a popup trigger.

The whole line with the code would look something like this:

I want my popup to appear when I click <a class=”trigger” href=”#”>HERE</a>

Click ‘Update’ and there you go! Now you have a link in your text that triggers a popup by calling out a selector that you specified in your popup settings.

Download Elementor Pro here.

*This post may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale, with no extra cost to you. That way you are supporting my blog and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.

*This post may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale, with no extra cost to you. That way you are supporting my blog and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.

Share this post:

Leave a Comment

Related posts:

General instructions:

  1. Open the exercise in your browser and read the task and the content on the left side of the screen. 
  2. You will be editing the content on the right side of the screen.
  3. In order to do that, right click on the exercise page that you opened and go to ‘Inspect’.
  4. Go to ‘Sources’ in the top bar and if you cannot see an empty CSS sheet where you can type the code, press Ctrl + P and start typing ‘styl’ in the search bar. Then press enter to open the CSS sheet.
  5. Follow the notes on the left and start typing your CSS code to see the changes online!
  6. Important! Do not refresh the page while you are editing the code, as these changes are in preview mode only and you can see them immediately, as soon as you write a line of functioning code.
  7. Use the custom classes in the notes on the left side of the screen, as well as ‘Elements’ on the top bar of the ‘Inspect’ to target and style the classes and elements. For example, you can enable the small icon on the top left of the ‘Inspect’ window (‘Select an element in the page to inspect it’) to find the default class name of the element you want to edit, while you are in the ‘Elements’ tab.

Tips:

  1. If the code is not showing any changes, try adding the !important tag at the end of the line before closing it (before the “;” symbol) and see if it works then.
  2. Don’t forget there are usually more ways to achieve the same result. Be creative!
  3. If you get stuck, write your email address in the form on the left side of the screen and you will get the solution (CSS code) in your email.

Sources:

  1. You can find a lot of tutorials on my youtube channel. 
  2. Watch the tutorial on how to solve these exercises here.

Please check your email and stay tuned for updates on the course.

We will notify you shortly when it’s available for presale.