Spring Sale: Our new update is live! Save 30% on Pro and Pro Unlimited for a limited time.

Global Block

In this article, we're going to discuss the Global Block Element and its settings.

  1. Global Block Usage
  2. Customize
  3. More Information
  4. Demo
  5. Summary

Global Blocks are a great way to layout and design something once and then use it multiple times in different areas of your website. Whenever you want to do a change in retrospective you can do so on a global base meaning that it will affect every section where you've used the global element even though you only need to change it in one place.

Global Block Element

In either Header, Content or Footer Builder in Pro, just go to Elements then search for "Global Blocks" then drag the Element into the canvas.

Global Block Usage

When you "Inspect" a Global Block element, you'll only see one option field which is selecting the Global Block you want to use.

Global Block Setup


The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

Global Block Customize
  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes

More Information

To get a more detailed introduction into the world of Global Blocks and how to setup one make sure to check out this article.


To see a live demo of the Global Block Element click here.


Now you know how to use the Global Block Element to utilise the power of a reusable element that reflects changes globally.

See something inaccurate? Let us know