Getting CSS Selectors

CSS Selectors can be used for calling and triggering popups, especially for header and footer elements, widgets where you cannot control the content, or if you want numerous elements throughout your site to trigger the same popup. You can use any valid CSS Selector with our Triggers and all targeted elements will become Click Triggers.

Method #1: Popup Maker Get CSS Selector Tool

Added in version 1.5, this tool allows you to get any CSS Selector on your site within a few clicks, without having to dig through your site's code.

Find this tool in the Popup Maker Admin Bar on the front end of you site.

Clicking the Get Selector menu item will bring up the following prompt:

Click the OK button, then click an element anywhere on the current page. The tool will then display the CSS Selector for the element you clicked, allowing you to then input into the Popup Maker Custom CSS Selectors Field.

Method #2: For Chrome Users

If, for some reason, you want to get the CSS Selector without using the tool above, you can do that too, but it's recommended to have some knowledge of HTML and CSS.

You can use this extension for Google Chrome to make getting CSS selectors a snap - or follow the steps below. After grabbing the CSS selector code from the front-end of your website, simply paste that into the extra selectors field in the popup editor.

Method #3: Getting the ‘CSS Selector Code’ Manually

If you want to get the CSS Selector the old fashioned way, you can do that too, but it's recommended to have some knowledge of HTML and CSS.

Let’s say I want a popup to trigger when someone clicks the ‘Get Our Newsletter’ menu item on the below website, but I can’t get to the code to add the popmake class or slug.

extra_selector_ex_1.jpg

The first thing we need is the selector for that menu item. In Google Chrome, right click the menu item and click ‘Inspect.’

extra_selector_ex_2.jpg

A console of sorts will be displayed, but we’re just concerned with the Select Element Button highlighted in green above. Click that button, then click the menu item you want the selector for on your page.

The element line should now be highlighted in the console. Right click on the element line in the console, then hover over ‘Copy,’ then click ‘Copy Selector.’

extra_selector_ex_3.jpg

Save and Publish

All you have to do now is input that selector in the CSS Selectors field in the Popup Editor. Go to the relevant popup in the WP Admin and find your Trigger. Click it to paste your custom CSS Selector into the CSS Selectors field.

extra_selector_ex_4.jpg

Make sure you test and verify that everything is working properly. Once you’ve done that: Congratulations, you’re all done! Now go get ‘em!

Useful Tidbit:  If your navigation menu you're putting the link in, for example, is on every page, you obviously want the popup to be available on every page, and it will be - Popup Maker automatically defaults to 'site wide' unless you tell it otherwise in the Conditions Menu.

Still need help? Contact Us Contact Us