Table of Contents
The concept of "Global Blocks" is something we've wanted to get built into our tools natively almost since the launch of our builders, and there has been plenty of discussion around it in the community as well. In fact, our very own Michael Bourne developed his own working version that was available as a free plugin for quite some time (big props to Michael for his invaluable contributions to our community)!
The idea behind Global Blocks is relatively simple: to have the ability to design something once and then utilize it throughout multiple pages or areas of your website. Down the road if edits ever need to be made, users can go back to the "single source of truth" (i.e. the representative Global Block) and edit it once there, and then have those changes reflected throughout the entire website.
To better understand this idea in action, let's walk through the entire process of creating a global block. First, navigate to the Global Blocks menu item in the primary navigation:
Once you've done that, you'll find an interface that looks very similar to the index screen for the Content Builder. To create a new Global Block, click the Add New button at the top of the workspace and your new item will appear in the list below. You can then double-click the title to rename the item (similar to other areas of our builders). For this example, we're going to imagine we're designing a simple call to action that we want to assign at the end of all pages, so I've renamed it "Final CTA":
As for the design we're going to create, we'll go with this design below. It's fairly straightforward with some large headlines and a button centered within our section that has a background image on it:
Once you click into the item on the Global Blocks index to begin creating, you'll find an interface that is an exact duplicate of our Content Editor, so you'll feel right at home working here and won't have anything new to learn:
After you're done designing, you can go into any builder and look for the Global Block Element in the Elements list, which is used to output your already built Global Block:
When you add the Global Block Element to the page, you'll find one control in the Inspector pane that will allow you to assign which Global Block you want to output. This input is searchable, which is very helpful if you find that you've created many Global Blocks over time:
Then you can repeat this assignment process for every page that you wish to output your Global Block on. For this example, let's say that you've added your "Final CTA" block to 10 different pages across your website.
Now imagine that you want to go back and make some changes to the button (perhaps you need to update the link that is used, or you want to try out a new color to see if it converts better). If this was designed individually across all pages, you would need to open up and edit each instance of this design ten times over, which certainly can add up in terms of time spent simply navigation between each page and finding the element you need to make the updates.
However, since we've designed this as a Global Block, we can simply go back to that one instance of the Global Block, make our edits there, and when we save those changes they will automatically show up across all of our pages where the block is used:
What is the purpose of the Global Blocks Manager?
The purpose of the Global Blocks manager is to allow people do design content once and then assign it to multiple locations on your website. If updates ever need to be made to that content in the future, it can be updated once from the "single source of truth" in the Global Block Manager and those changes will be reflected across all Global Block assignments throughout the website.
Can I use a Global Block for a singular element?
Yes. For instance, if you have an individual button that you want to use in different parts of multiple pages, you can make a Global Block that is just that button and nothing else and place it anywhere you need.
Do Global Blocks come with any extra markup?
Global Blocks will always be wrapped in a Section, Row, and Column. Because Global Blocks need to support whole sections, this means that all of the markup that comes with a Section is always output around your content. If you wish to create a Global Block that is just a singular element as mentioned previously, you will need to make sure to remove all of the spacing (e.g. margins, padding, et cetera) that comes with these containing elements. You can quickly remove all spacing from containing elements by clicking the Remove Spacing button at the bottom of your Sections in the Layout pane.
Can Global Blocks contain multiple Sections?
Yes, you're not limited to creating one Section at a time when designing your Global Blocks. If you have a situation where you need multiple Sections to be output at a time, you can create as many as you wish and when you assign your Global Block in a builder, all Sections contained within will be output.
Can Global Blocks be nested?
Yes. This can begin to feel a bit like the movie Inception (but with HTML, not dreams) if you're not careful, but nesting of Global Blocks is certainly possible. Feel free to experiment and see what you can accomplish using this if you feel it's needed, but keep in mind the relationships between all of the markup that will come with that.
Can Global Blocks be referenced by shortcode?
Yes. On the Global Block index screen, you'll notice that there is a shortcode displayed in the line above the item's title. Instead of referencing your Global Block by Element in a builder, you can use this shortcode instead. It's a great way to introduce complex content into areas of the builder that are traditionally meant for text, such as dropdowns, modals, off canvas areas, accordions, and more.