Laptop open showing the Gutenberg editor in WordPress

How to stay on-brand with Gutenberg

, ,

It’s been a little over a month since Gutenberg rolled into WordPress 5.0. Since then, the exact reaction to it has been hard to peg down with reviews kind of all over the place.

But one of the best aspects of the new editor is the power it gives to users. While it’s not quite a full page editor like Divi or Beaver Builder, it does venture into that direction and it gives users the power to easily add a bunch of different elements.

Still, with great power comes great responsibility, and if you’re new to the editor, it can be tricky to find the balance between using the new tools and staying “on brand” with your small business. So many shiny new things to use.

So, here are a few tips to help you stay on brand with Gutenberg and WordPress 5.0 and up.

Find the limits of your theme

The first thing you should do to make sure you keep your site looking good with Gutenberg is to find the limits of what you can do with it in your theme. Find what the theme supports and what looks good and what doesn’t.

See if it supports the new align wide and align full classes (which essentially takes the block and stretches it out of the main container). If the theme doesn’t have a sidebar, you should be pretty much good to go. But things get a little bit more tricky and weirder if a sidebar or two is involved.

So play around with the theme either in drafts or with a development/staging server. This will guide you whenever you’re creating a new post or page and keeping your site from looking like a mess.

Tell the Story of Your Small Business With a Website

Every small business has a story. And every small business needs a website to help tell it. A website allows people to find you online, serves as a home base for any marketing effort and can help you tell the story of your business. So if you’re ready to give your business its first website or are ready to take your site to the next level, let’s get started on making that happen.

Let’s Get Started on Telling Your Story With a Website

Figure out heading structure

Also, you’ll need to figure out the heading structure for posts and pages on your site and stick to it. Creating headings in WordPress has always been fairly easy with the TinyMCE editor, but Gutenberg makes it even easier with the heading block. But you still need to be cautious about how you use it.

Typically with a website, the theme will make the post title a heading 1 or H1. Then your headings in the post will be heading 2 or H2, subheadings under those will be heading 3 or H3 and so on and so forth.

Screenshot of custom color palettes in the Gutenberg editor

How to add a custom color palette to your website with Gutenberg

One of the best parts of Gutenberg is the easy color changes. But how do you keep your colors on brand? Three words: custom color palettes.

This is pretty important both for users and search engines. The different font sizes that come with each of the heading types helps users navigate through the post, especially if it’s long. And search engines, like Google, use those headings to index your pages so it shows up in searches.

But you need to make sure you have the right heading types in the right places and to put the right text in them, i.e. no full sentences.


One of the biggest elements you now have control of is easily adding color to the page. You can quickly change the color of text and the background of some elements.

I love giving people the power to easily change or edit their site without needing a developer, but it can go sideways quickly, especially with colors. Sites with a bunch of different colors might look cool to you, but for potential customers and clients, it’s a massive turn off. So make sure you stick to your branding with colors.

Gutenberg makes it easy to select the right colors with custom color palettes.

Add a color palette

One of the best ways you can control the colors on your website is by adding a custom color palette. If a block has a color picker option, you’ll see a set of colors in addition to the color picker. By default, these colors span the rainbow. But, you can set specific colors to show for that section to make sure you and/or other folks who run your site never stray from your business’ branding.

I wrote about how to add a custom color palette to your website earlier this year. It involves some coding, but it’s pretty simple and will save you so much time and frustration down the road.

Don’t overthink or over do it

But the biggest thing to remember with Gutenberg and staying on brand is to not overthink what you’re doing or to over do it. You chose this particular theme because you like the way it looked, right? Then don’t ruin it with a really bad design choice.

So before you add that weird color or do something strange to the text or add an odd element, think about your potential clients and customers. Would they run away from your site if they saw that on the page? If so, it’s probably a good idea to not do it.

Remember, just because you can doesn’t mean you should.

Keep Learning with the Small Business Websites Newsletter

There’s a lot to learn when it comes to websites. How do you build a website that’s going to help your business grow? How do you manage a website to help your business grow? What’s the latest website news that you should know about? What are some websites you can look to for inspiration?

The Small Business Websites Newsletter helps you answer each of these questions. The biweekly newsletter will take a deep dive into some website-related topic, like SEO, WordPress, how to plan a website and more, to help you learn more about websites. I’ll also include some website news that you should know about as well as add inspiration I’ve found that might help you. And you’ll even get discounts for various products I offer. And all of this is for free.

So if you want to be better at building or managing your small business website (or any website for that matter), then you’ll want to sign up today!

"*" indicates required fields

GDPR Compliance*
This field is for validation purposes and should be left unchanged.