Global Blocks

In this article, we're going to discuss Global Blocks, when and how to use them. Global Blocks are available both in X and Pro themes.

  1. What are Global Blocks
  2. When to Use Global Blocks
  3. How to Create a Global Block
  4. How to Use a Global Block
  5. Frequently Asked Questions
  6. Summary

What are Global Blocks

Global Blocks gives you 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, you can go back to the separate Global Block control center and edit it once there, and then have those changes reflected throughout the entire website.

When to Use Global Blocks

Use Global Blocks whenever you want to have one set of content used in different parts of the website, with the ability to change all instances from one location. A good example would be an opt-in form which you want to show both on the homepage and the contact page and it does the same thing. You will add the form using a Global Block and use the Global Block element to add then on the homepage and the contact page. If you want to change the title or functionality of the opt-in form during the course of time you can change it once from the Global Block user interface and the changes will be applied to both homepage and contact page.

How to Create a Global Block

Follow the steps below to create a Global Block:

Pro > Global Blocks
  1. Go to X/Pro > Global Blocks.
  2. You will see a list of previously created Global Blocks or an empty list.
  3. Click the Add New link to add a new Global Block.
  4. Enter a unique name for the Block and hit the Create button.
  5. A Global Block item will be added to the list which contains the name of the block and a shortcode which you can use later.
  6. Click the Pencil Icon to edit the Global Block
  7. You will be redirected to an interface which is very similar to the builders that you are familiar with in X and Pro.
  8. Use builder to add elements and create your Global Block and save the result.
Global Blocks Add NewGlobal Blocks Create TitleGlobal Blocks Overview

How to Use a Global Block

Now that you have created the Global Block it's time to use it on the website. You have two ways to use the Global Block:

  • Global Block Element
  • Global Block Shortcode

All the builders of the website including the Cornerstone in X and Content, Header and Footer builders in Pro have an element called Global Block. Whenever you want to add the Global Block to a builder, search for the Global Block element and drag it to the page. You will be given with the list of the Global Blocks available which you can select to use:

ImageImage

The other way of using the Global Block is to copy the shortcode of the Global Block. To see the shortcode go to X/Pro > Global Blocks and copy the shortcode that you see in the listing of the blocks. [cs_gb id=41] in the case below:

Global Blocks Element

Now, you can paste the shortcode wherever you want on your WordPress installation and it will show the Global Block. For example, you can paste the Global Block shortcode into the Custom HTML widget by going to Appearance > Widgets and dragging the Custom HTML widget to the desired widget area and paste the code there:

Custom HTML Widget

Frequently Asked Questions

What is the purpose of the Global Blocks Manager?
The purpose of the Global Blocks manager is to allow people to 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.


Keep in mind: We have included this shortcode for greater flexibilty, but can not always guarantee it will work when combined with other plugins or custom development techniques. Everytime a Global Block shortcode is used (or Element), you are effectively doing all the database calls to load a page of content. This can have performance concerns if used heavily, like in custom template loops for example.

Summary

We've discussed Global Blocks in this article, we described what a Global Block is and when to use it. Then, we've delved into details of Global Block creation and after that using Global Blocks throughout the website. Finally, we've answered frequently asked questions about the general usage of Global Blocks.

See something inaccurate? Let us know