Adding a Sticky Bar using Elementor Pro Only

To add a sticky bar at the bottom of every page in Elementor Pro without affecting the current site footer (so both appear simultaneously), follow these steps:

1. Create a Sticky Bar Section #

1. Open Elementor Theme Builder:
   • Go to Templates > Theme Builder in your WordPress dashboard.
   • Click on Add New Template and select Section.
2. Design the Sticky Bar:
   • Add a new section and design your sticky bar using widgets like text, buttons, or images. For example:
     • Add a call-to-action (CTA) button.
     • Include links to promotions or important announcements.
   • Style the section with background colors, padding, or borders to make it visually distinct.
3. Set Position to Sticky:
   • Select the section by clicking on the six-dot icon.
   • Go to Advanced > Motion Effects in the Elementor panel.
   • Under the “Sticky” option, choose Bottom from the dropdown menu.
   • Set the sticky behavior for specific devices (desktop, tablet, mobile) as needed.
4. Adjust Z-Index:
   • In the same Advanced tab, set a high Z-Index (e.g., 9999) to ensure the sticky bar appears above other content on the page.
5. Save as a Global Template:
   • Save this section as a global widget or template so you can use it across all pages.

2. Add the Sticky Bar to Every Page #

1. Use Display Conditions:
   • After designing the sticky bar, click on Publish.
   • Set display conditions to show it on Entire Site, ensuring it appears on all pages.
2. Ensure Footer Visibility:
   • Since this sticky bar is positioned as “fixed” at the bottom of the browser window, it will not interfere with your existing footer. Both will be visible simultaneously:
     • The sticky bar remains at the bottom of the viewport.
     • The footer remains part of your page layout and scrolls naturally.

3. Optional: Add Dismiss Button (Close Icon) #

To make the sticky bar more user-friendly:

1. Add an Icon widget (e.g., an “X” for closing) inside your sticky bar.
2. Use custom CSS or JavaScript to hide the sticky bar when users click on the close icon:

<script> document.querySelector('.close-button').addEventListener('click', function() { document.querySelector('.sticky-bar').style.display = 'none'; }); </script>

Replace .close-button and .sticky-bar with your actual class names.