Popups: Bottom Bar

Bottom Bars can be used for a variety of reasons, including announcements or options. Another common use of a popup bottom bar is to comply with the EU Cookie Consent law. In this example, we’ll quickly create a Cookie Consent banner. The bar will satisfy several requirements:

  1. Show on any page of the site. (Publish Settings > Conditions)
  2. Show immediately when the page loads. (Publish Settings > Triggers)
  3. Show an overlay to hide the site underneath. (Popup Settings > Settings Tab)
  4. Prevent scrolling of the site underneath. (Popup Settings > Advanced Tab)
  5. Only close when the user clicks the OK button, making sure to prevent closing when clicking the overlay or pressing ESC. (Popup Settings > Advanced Tab)
  6. Only show the popup once, so the user doesn’t have to continually deal with it on subsequent page views. (Publish Settings > Advanced Rules)

To adjust the Popup Settings, click the Popup Settings gear icon in the panel’s bottom toolbar. To adjust the Publish Settings, click the arrow next to the Publish / Update button and choose either Conditions, Triggers, or Advanced Rules.


Create Popup

  1. Go to Dashboard > Templates > Popups > Add New
  2. Name your template and click ‘Create Template
  3. Choose a template from the Library or create your own design

Popup Settings

Settings

  1. Set the Horizontal position to Center and the vertical position to bottom.
  2. Show Overlay
  3. Hide Close Button

Style

Configure style as desired

Advanced

  1. Prevent Closing on Overlay: Yes
  2. Prevent Closing on ESC Key: Yes
  3. Disable Page Scrolling: Yes

Publish Settings

Conditions: Include: Entire Site

Triggers: On Page Load: within 0 seconds

Advanced Rules: Show Up To X Times: 1

Share it on social networks

Was this article helpful?

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page