Global Block

In this article, we're going to discuss the powerful Global Block Element and how to use it.

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

Update: Global Blocks have been replaced with the Component Builder. Please use Components in place of Global Blocks on future builds.

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

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.

Global Block Setup

Customize

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 $el to 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.

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.

Demo

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

Summary

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