5/5

How To Trigger A Popup With a Menu Item

For this tutorial I will show you how to trigger a popup via a custom menu item. The process is pretty simple and won’t require too much of your time.

My Working Environment

Theme: Hello Theme

Elementor Version: Pro

Let’s Begin

I am going to assume you have already designed your popup using the Elementor Popup Builder.

Open your popup settings and go to the advanced tab.

Once their you will need to add a selector that will be used to trigger the popup.

Next we need to configure our conditions. Below are the conditions I set for my demo.

Setting up the menu item.

Navigate to your menus and select the menu you want to use.

Before we get to far ahead we need to display the css classes option for each menu item.

To do this select screen options in the top right corner and check css classes and close the screen options tab.

Add a custom link to your menu.

Open your custom link item and give it the css class you chose for your popup selector.

If you have followed my instructions when you visit the menu on the front end you popup will show when you click the menu item.

Hope This helps. 😀

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

How To Add A Reading Progression Bar To Your Elementor Site

In todays article we will be going over 2 ways to add a reading progression bar to your Elementor Powered Site. The first requires a wordpress plugin with simple options for the average user and the second is going to…

How to Make Attention Grabbing Buttons

Often times a button with just an hover effect isn’t enough to grab your visitors attention. So in this brief article I am going to show you how easy it is to make attention grabbing buttons to help with conversions…

How to Outline Text in Elementor

Outline text with a stroke often times gives your designs a really cool effect to make your designs come alive. So we are going to go over just how easy it is to implement outline text in Elementor. Let’s Begin…

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?