How To Change the WordPress Block Background Color

Looking to change the WordPress block background color? It’s surprisingly easier than you think! And this guide will show you how to do it.

Approximate read time: 5 minutes

Sometimes the simple things don’t seem so simple.

You’ve searched and searched in WordPress to change the background color of a block. But you haven’t had any luck.

So, you’ve come to the right place. 

We’ll show you exactly how to use the WordPress block editor as a background color changer so you can customize your site today!

Let’s get started.

Why change a WordPress block’s background color?

Designing your website to your liking is one of the best parts about owning a website.

You decide what colors will be used, the layout of your website, and so much more. Background color is just one of the many decisions you’ll make. But little decisions like this will make your website stand out or fade into the crowd. 

So, having customization options is a huge deal.

But changing your background color in WordPress can be more than just a design choice.

Contrast colors to draw attention to your forms or call-to-action (CTA), it can make your text stand out more for better readability, or you may even want to change to a background image to stand out truly.

So, why change a WordPress block’s background color?

Because you can.

How do I change the background color of a block in WordPress?

There are a few different ways to change the background color of a block. And it will mostly depend on which theme editor you’re using.

So, we’ll cover two of the top ways:

Change the background color of a block with Gutenberg Blocks

Gutenberg is the classic WordPress editor and one of the most commonly used editors.

If you’re using a WordPress theme like Twenty-Twenty, or a similar free WordPress theme, then you’re most likely using the Gutenberg Editor.

So, go to the post/page where you want to change the block background color.

For our example, we’re going to add a Group Block. 

We want to display a form on our Spaceship business website. We’re having a huge sale, and we’re very excited. For our form builder, we chose Formidable Forms because of its excellent order form template.

You can get the free WordPress plugin for basic uses if you want to follow along. Install and activate the plugin, and you’re ready to go.

So, click inside the Group Block and search Formidable. 

Now, select your order form from the dropdown menu.

Looking great! So, we want the form to stand out. These people are getting the discount of a lifetime on some top-notch spaceships. This doesn’t happen often.

So, let's make the background color bright red. To do this, click the Background button in the right-hand menu.

You can select whatever color you want from the color palette or choose a gradient! It's your choice.

Another quick tip: you’ll see the text color tab above the background tab. You can click this to change the font color of your block.

Finally, we ended up with a great form to sell some spaceships. And the bright red will catch some eyes.

You may need to change the color of our font in Formidable Forms, but you've got a basic order form for now.

Don't need an order form? No problem!

This same process can be used with any type of block. So, follow the basic steps, and you're good to go ?.

Change the background color of a block with Elementor

Elementor is one of the most popular WordPress editors, with around 8% of all websites using it.

And part of that is because it offers advanced options that are easy to use.

So, to change the background color of a block with Elementor, go to your post/page and choose the block or add one.

Using the same example, we will add an order form with Formidable Forms.

So, search Formidable.

Now we’ll select our order form, so it’s added to our page. At the top of the left-hand menu, you'll see Advanced. Choose it and click on the Background tab to add a background color.

Here, you can choose the color you want to use. Our internal research has shown the red background color option has been effective for spaceship sales. So, we’ll stick with red in the color picker.

And now our form is ready to be published! Pretty easy, right?

Wrapping up

We hope this guide helped you out!

We know we’re excited about Sally’s Spaceship Emporium and the possibilities for our website using Formidable Forms.

If you’re interested in supercharging your forms, we recommend trying out our plugin and checking out our pricing page to see everything you can get at a great price!

 Get Formidable Forms now!

Don’t stop here, though. Learn how to change contact form button colors in WordPress, also! We’ll have you designing buttons like you’re Louis-Vuitton!

Last, follow us on Facebook, Twitter, and YouTube for more WordPress tips and tricks!

Read more about form design!

• How to Change Contact Form Button Color in WordPress
  Read More

  Conversational Form Design: Everything You Need to Know
  Read More

  5 Best WordPress Portfolio Plugins for Powerful Design
  Read More