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.
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.
- 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
$elas 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.
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