Some of the elements you use in Bricks may need to exist on every page of your site. Maybe you have some OffCanvas content or a back-to-top button. With Bricks, we work with templates & pages to display content in the main content area, and only header/footers are global. So where to add these fixed global elements that aren’t part of the header for footer content? Let’s go through how we add elements outside of these areas and make global across your site.
Create a site-wide template
First, we want to create a new template to house all of our global elements. Let’s name it ‘site wide’. And make sure to select ‘section’ as the template type.
Add in your global elements.
Inside this template, we can then in any elements that we need to be global.
Generally speaking, it’s going to be content that is either hidden by default, or fixed to the viewport and needs to overlay the other content. Alerts, Notifications, OffCanvas’, Modals, Cursor, floating share buttons, back to top button, etc.
Once the elements are in place, we need to set up the conditions for the template.
Set up the global condition and hook
This is the important part. What we’re trying to do is both make the template global, but also ensure it exists outside of any other content. We don’t want these elements to be inside a header, or inside any of the main content areas. Instead, we want them all below the footer, out of the way.
Head to the template settings > conditions and set the condition to be ‘entire website’ with the hook ‘bricks_after_footer’.
That’s it
Now these elements are global and separate to everything else on every page. They will be output after the footer template at the very bottom of the page. Any time you need to add in new global elements simply return to this template and add in the elements there.
If you need some elements to be removed on certain pages, then we can use Bricks’ conditions settings on those elements to add the individual conditions for when not to be included.