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.
To start, 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.
The Customize pane consists of various features that allow you to take further control over your Element's styling and functionality:
- ID – Sets an HTML ID on the Element.
- Class – Sets an HTML Class on the Element.
- Element CSS – Use this feature for increased stylistic control of your Element, especially over nested markup. Click here for more detailed information on this feature, such as using
$elto dynamically target the base tag, et cetera.
- Hide During Breakpoints – Hides the Element at different screen sizes when design alterations are needed. Click here for more information.
- Conditions – Adds / removes Elements from the page when certain criteria are met (e.g. “If a featured image is set...”). Click here for more information.
- Custom Attributes – Use this option to add custom HTML attributes to the root tag of the Element (e.g.
data-info="123"). This can be particularly helpful when integrating with various scripts and libraries.
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 Global Blocks to utilise the power of a reusable Element that reflects changes globally. Use your powers wisely :)
See something inaccurate? Let us know