How to set up a popup menu in Elementor Pro templates

Popup Menu in Elementor Pro Templates

Share This Post

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Table of Contents

Elementor Logo

In this WPDesigns article, we will discuss how to set up Popup Menu in Elementor Pro Templates.

Note: This guide is aimed at people who have downloaded a WPDesigns template and have all the components ready to be put together.  It will cross over if you have your own site.  If you would like to download a WPDesigns Elementor Template. You can visit our Template Library and get your own, and use the import and set up guide that we have created.

The WPDesigns Guide to Popup Menu in Elementor Pro Templates

WPDesigns provides a variety of professionally designed templates that are ready to be downloaded by you.  After importing the templates you can simply modify them to match your brand and customize them as much as you like.

Because our website Templates are created using Elementor Pro you don’t need any extra plugins to create the popups.  There are two types of popup headers you will see – Full Page Menu Header and Simple Popup Menu Header. If you decide to go for a popup header rather than a more standard header, you can easily switch between the full page and the popup. The full page menu popup header is designed to cover the entire page with a menu. The basic popup is designed to cover 30% of the page’s view width.

Adding Your Popup Menu

If you would like to change the header of your website to a popup menu, there are a couple of steps that you will have to take.  

  1.  Locate Your Current Header
  2.  Remove Current Display Conditions
  3.  Locating New Header
  4. Adding New Display Conditions
  5. Link the Popup to Your Header
  6. Customize Your Popup Menu in Elementor Templates

1. Locate Your Current Header

  1. Navigate to WordPress Dashboard > Templates > Theme Builders > Header tab.
  2. Check the Instances column to see if there is anything marked.  If you have a header set then it will likely say Entire Site. If not you can skip to the next section.
  3. Find the header you’d like to remove the condition from.
Navigate To Header List
1. Navigate to the Header list
Instances Column
2. Check the instances column for existing conditions
Opening Display Condition Window
3. Opening display condition window
Removing Condition
4. Removing existing condition

2. Remove Current Display Conditions

  1. To remove the Display Conditions you will need to open the header using Edit with Elementor.
  2. Click the small arrow next to the Update button on the bottom left of the screen.
  3. Select Display Options.
  4. When the popup opens click the cross next to the Display Condition that you would like to remove.  Generally, it would be for Entire Site but this may not be the case if you have certain headers for certain pages.
  5. Click Save.

3. Locating New Header

  1. Navigate to WordPress Dashboard > Templates > Theme Builders > Header tab.
  2. Check the header templates that are available and pick the one that you would like to add to your site.
  3. Click on Edit with Elementor to open up the template.
Navigate To Header List
5. Navigate to header list on your WP Dashboard & select Header
Opening Display Condition Window
6. Opening display condition window
Adding Condition
Adding Condition

4. Adding New Display Conditions

  1. To add the new Display Conditions you will need to open the header using Edit with Elementor.
  2. Click the small arrow next to the Update button on the bottom left of the screen.
  3. Select Display Options.
  4. When the popup opens click Add Condition and the default display condition will be Entire Site.  You can change this if you would like the header to display only on certain pages.
  5. Click Save.
  1. To link the popup to your header you will need to click on the hamburger icon on the right of the header.  This is what visitors will click to open the menu.  It is a universally recognized symbol so will cause no confusion.
  2. You can then look to the left of the screen into the link box and you will see a small black symbol for a database.  This is the dynamic icon. 
  3. Click the icon and select popup from the list.
  4. It should default to Open Popup.
  5. Type into the box “Menu Popup” and it will locate both the simple popup and the full page popup.
  6. Click the popup you prefer and it will be added to the hamburger icon.
  7. Click Update and you now have your popup linked to the header.
Adding Popup Action
Adding popup action
Adding Popup In The Link
Adding popup in the link
Navigate To Popup Lists
Navigate to popup lists

6. Customize Your Popup Menu in Elementor Templates

Now that your popup is linked into your menu it is a good idea to customize it to make it the perfect fit for you and your business.

  1. Head back to the WordPress Dashboard.
  2. Navigate WordPress Dashboard > Templates > Popups.
  3. Open the popup you added to the menu using Edit with Elementor.
  4. You can now customize the popup just as you would a normal post or page on your Elementor website.  If you would like some help to use Elementor you can check out our Elementor Guide – Link coming soon.

Search

Social Media

Recent Posts

Josh

Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.