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:
- Show on any page of the site. (Publish Settings > Conditions)
- Show immediately when the page loads. (Publish Settings > Triggers)
- Show an overlay to hide the site underneath. (Popup Settings > Settings Tab)
- Prevent scrolling of the site underneath. (Popup Settings > Advanced Tab)
- 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)
- 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
- Go to Dashboard > Templates > Popups > Add New
- Name your template and click ‘Create Template’
- Choose a template from the Library or create your own design
![Popups: Bottom Bar 4 file jsbcpqivUu Popups: Bottom Bar 3](https://elementor.com/help/wp-content/uploads/2020/04/file-jsbcpqivUu-1024x555.png)
Popup Settings
Settings
- Set the Horizontal position to Center and the vertical position to bottom.
- Show Overlay
- Hide Close Button
![Popups: Bottom Bar 6 file UvztinjKYC Popups: Bottom Bar 5](https://elementor.com/help/wp-content/uploads/2020/04/file-UvztinjKYC-565x1024.png)
Style
Configure style as desired
Advanced
- Prevent Closing on Overlay: Yes
- Prevent Closing on ESC Key: Yes
- Disable Page Scrolling: Yes
![Popups: Bottom Bar 8 file 2MfY3lnvyY Popups: Bottom Bar 7](https://elementor.com/help/wp-content/uploads/2020/04/file-2MfY3lnvyY-539x1024.png)
Publish Settings
Conditions: Include: Entire Site
![Popups: Bottom Bar 10 file p2zr0PkrZk Popups: Bottom Bar 9](https://elementor.com/help/wp-content/uploads/2020/04/file-p2zr0PkrZk-1024x705.png)
Triggers: On Page Load: within 0 seconds
![Popups: Bottom Bar 12 file YMQXs0LYFq Popups: Bottom Bar 11](https://elementor.com/help/wp-content/uploads/2020/04/file-YMQXs0LYFq-1024x707.png)
Advanced Rules: Show Up To X Times: 1
![Popups: Bottom Bar 14 file 7puNuRVoqA Popups: Bottom Bar 13](https://elementor.com/help/wp-content/uploads/2020/04/file-7puNuRVoqA-1024x707.png)
Keep visitors engaged with an exit-intent popup. Elementor Premium Services offers expert help designing and implementing the perfect popup.