/ Documentation /Blocks/Global Block Style Extension

Global Block Style Extension

Global Block Style is a feature in Spectra that allows you to create and manage consistent styles for your blocks across your entire website. This can be a huge time-saver, especially if you have a lot of pages on your site and you want to make sure that all of your blocks look the same.

Let’s go through the following sections of this document to learn more about Global Block Style Extension in Spectra

What is Global Block Style

Global Block Styles are a way to create and manage consistent styles for your Spectra blocks across your entire website.

Example: To create a global block style, simply edit a block (Heading block) and make the desired changes to its appearance. Then, you can make it a Global Block Style in the block settings. This will save your changes as a new global block style.

Once you have created a global block style, you can apply it to any other Heading block on your website by clicking the Link to Existing Style in the block settings and selecting the desired style.

Note:

The way Spectra offers Global block styles is dependent on the specific block. If you assign styling to a specific block like an icon block, those stylings will only show up in other Icon block Global Block Style dropdowns.

Where can I use the Global Block Extension?

Imagine you’re setting up your website, adding a cool new block, and giving it that perfect look. Now, wouldn’t it be awesome if you could reuse that style easily? That’s where the Global Block Style comes into play. Just hit the “Add New” button, give it a name then your block stylings are now saved as Global Block Style.

If you want to use this styled block somewhere else on your site, you can do it easily. Add a new block, go to the Advanced Settings of the block. There you will notice the Global Block Syle module. Under Link to Existing Style, pick a style of that specific block from the list – your block is linked, with the chosen style.

How to Use Global Block Extension

Now that we understand more about why you might want to use a Spectra Global Block Extension, let’s look at how you can activate it.

Note that for this tutorial, we’ll assume you already have Spectra Pro installed and activated on your website.

Once you have Spectra installed on your site, you can navigate to Spectra > Blocks / Extensions > Extensions. In the Block/Extensions section, you can find the ‘Global Block Style‘ extension, which allows administrators to enable or disable the Global Block Style feature.

Now go to any page or post and add any block. Inside individual block settings, navigate to the ‘Advanced’ section to see the ‘Global Block Style.’ This is where you can manage and apply block styles.

After making customizations to a block, you can convert it into a Global Block Style. Click the ‘Add New’ button in the ‘Global Block Style’ module. A popup dialogue opens, prompting users to name the style. Upon entering a name, your block stylings are now saved as Global Block Style.

Now, to use a Global Block Style in another block, you can simply drag and drop a new block, and go to the Advanced settings. Here, you can see the ‘Link to Existing Style’ option. The dropdown menu by default displays ‘None’. You can select the desired Global Block Style from the dropdown. Then the selected style is instantly applied to the block.

Once a block is linked to a Global Block Style, any modifications made to that particular block will seamlessly propagate to all other blocks that are also linked to the same Global Style.

To do so, make all necessary changes to the block and click ‘Update Style’. Then the same styles will be applied to the block where this Global block Style is applied.

This dynamic synchronization ensures a consistent and unified appearance throughout your blocks, minimizing the need for manual adjustments and saving you valuable time and effort.

In case you want to have control over every detail, then there is a feature for you – the “Unlink Global Block Style” option. This handy tool lets you tweak a specific block without changing others that are linked to the same Global Block Style. It’s like having the freedom to make your block stand out while keeping everything else intact.

In the ‘Global Block Style’ section, you can manage your styles. Clicking on the edit icon opens a popup with options to update style titles, delete specific global block styles, and even remove all global block styles if needed.

In case you have added multiple Global Block Styles for a specific block, then you apply the desired style of your choice to another specific block from the dropdown.

We hope this article has been helpful. If you have any questions, please feel free to leave a comment below.

Important Note:

As of now, we have implemented Global Block Style in the core blocks only listed below

  • Heading block
  • Icon block 
  • Call to action
  • Info box
  • Countdown
  • Buttons
  • Buttons child block
  • Image block
  • Container
Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

%title %title
On this page
Build Ultra High Performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.