Global Styles

This is a feature in our pro version only.

Global Styles are an awesome way to build re-usable styles that you can use throughout your website. This has a couple of advantages:

  1. It writes the CSS for the element once. For example, if you have a page with 10 containers, all with the style styles (padding, for example), the Global Style will write the CSS for that block once, and re-use it for every Container using that style. So instead of writing the same CSS 10 times, we only write it once.
  2. If you ever need to change a style, for example, your primary button style, you can do it in one place and have that style update throughout your entire site instantly.

Another cool thing about Global Styles is that you can still set block-specific styles in blocks that are using a Global Style.

For example, let’s say you build a primary button Global Style, but for one button on your about page you want to make the font size a little larger – you can still use the Global Style and only up the font size for this one button.

Adding a Global Style

To add a new Global Style, go to GenerateBlocks > Global Styles, and click the Add New button at the top.

Now, add a GenerateBlocks block to the page, and you’ll see a Global Styles panel in the block settings.

You’ll see that a unique ID is generated for this block by default. This is how all of our blocks work. What makes Global Styles unique is that you get to change the unique ID.

For this example, we’re creating a Container Global Style, which will be the main container on our website. So, I’ll rename our unique ID to something short, but descriptive, like main.

Now we can design this Container and save it.

Multiple Blocks Inside One Style

You can use this one Global Style and add multiple GenerateBlocks blocks to it without any issues. They will all be registered as Global Styles and be usable as you build your content.

The only reason you would want to create more than one Global Style post is for organizational purposes. For example, this would be a decent setup:

  • Buttons – this Global Style has all of the button we’re going to use on our website.
  • Containers – this Global Style has all of the containers we’re going to use on our website.
  • Headlines – this Global Style has all of the headlines we’re going to use on our website.

Using a Global Style

Now that we have added a Global Style, we can use it in our content.

In our example above, we created a Container block and named it main. Now when we go into a page and add a Container block, we can tell it to use a Global Style.

You’ll see in the screenshot above that the main Global Style is appearing in our dropdown.

If we choose this style, our block will immediately update to use the styles from that Global Style. Global Styles are grouped by block type, so only Container Global Styles will appear in the dropdown for the Container Block.

How Does It All Work?

The system we’ve developed is very simple, which we’re very proud of. Here’s how it works.

When you add a new Global Style, the content of that Global Style is saved to the database, just like a regular post.

Now when we view a page on our website, GenerateBlocks processes that saved content through our CSS generator, so CSS is built for the blocks in the Global Style, even though they aren’t actually rendering on the page.

In the example above, we named our Container Global Style main. GenerateBlocks will now generate CSS for that style like this:

.gb-container-main {
    /* CSS properties */
}

This CSS is generated on all pages that contain GenerateBlocks.

Now when we choose a Global Style for one of our blocks, it adds the above class to that block:

<div class="gb-container gb-container-main">
    ...
</div>

This applies the CSS to the block.

Global Styles do not apply to content, including things like icons and shapes. They only apply to the CSS generated by the blocks.

Things You Shouldn’t Do

There are a couple of things you should avoid with this system.

  1. Don’t copy blocks from Global Styles and paste them into a page or post. This will bring along their attributes, and that page will now generate CSS for that individual block. Remember, this system works by using CSS that’s already been generated – the blocks on your page should have no settings at all (unless you want to customize it individually).
  2. Don’t bloat your Global Styles. Try to keep things simple – every GenerateBlocks block inside a Global Style will generate CSS on your pages, so “Draft” un-used Global Styles in a single Global Style entry if needed.