How to Change Background Color in Flatsome

Flatsome has the easiest ways to customize a website. You can easily customize the backgrounds with the help of the customizer. There is no need to use any plugin or customize code for that.

In this tutorial, we’ll demonstrate to you how to change background color of your Flatsome-powered website. Besides that, we’ll also show you the related background customization so that you can easily customize your website and make it beautiful. You’ll need to use the licensed version of the Flatsome theme to use its full power.

To change the background color, or to do other customization, you’ll need to go to the customizer first, then you can do the customizations you want. In this article, we’ll demonstrate to change various backgrounds and all of them will be started from the customizer.

Go to the website, then click on the Customize option at the top. This is the main door of our WooCommerce tutorial for Flatsome. For everything we’ll do, we’ll use this customizer.

How to Change Background Color in Flatsome

Flatsome has three types of Layouts. Those are– Full Width, Boxed, and Framed.  Among those, Full Width has one type of background color, and others have two. One is for the background, and another is for the content background. 

When you’re using Full Width, you’ll be given a single “background color-changing option”, and changing it will change the background and content background and if you want to change the color of products then you can use WooCommerce color swatches as well.

See also  20+ Best Free Blog Themes for WordPress

On the other hand, while using a Boxed or Framed layout, you can control the background and content background separately. In this tutorial, we’ll change the background for the Framed one.

Step 1: After opening the customizer, among all options, select Layout, and click on that.

Step 2: Then find the option of Background Color. Click on Select Color to choose what color you want to pick for the background. 

Step 3: Select any color you want, then publish it by clicking on the Publish button on the top. That’s it. 

You’ll see the background is changed from the default color to your desired color. Doing the same process with the Boxed layout will work the same.

If you try this with Full Width, the content background will be also changed.


How to Change Content Background Color in Flatsome

Step 1: After entering the Customizer, a left sidebar will appear. Among those options, select Layout.

Step 2: Scroll down the left sidebar, then find the Content Background section. Click on Select color to choose your desired color. Then click Publish to publish it. (You’ll not find this option if you’re using a Full-Width layout). You can know how to change video backgrounds for WordPress if you want.


How to Change Footer Background Color in Flatsome 

Step 1: In the Customize section, click on the Footer.

See also  WooCommerce Variable Product Attributes Setup 2023

Step 2: Now, you’ll find three sections of the footer. To change the background color of footer-1, click on the Background Color, select any according to your need, then click on the publish button to make this effective.

Step 3: Then right under the footer-1, you’ll find the footer-2 section. Change the background color using the same process. 

Step 4: At the bottom of your site, you’ll find the footer-3, follow the same process as footer-1 & footer-2 to change the footer-3 background. 

It is essential to change the footer background with an appealing look as you can add Flatsome payment icons to the footer and other necessary links that must have to look awesome.


How to Change Notification Background Color in Flatsome 

Step 1: Go to the Customizer, scroll down, and click on Notifications.

Step 2: In Flatsome, the cookie is disabled by default. You need to enable it first if you want to change its background of it. Then select what color you want to use as a background.

Step 3: After setting this properly, click on the Update button to save it. Now, you’ve set the notification background according to your choice. In that case, you can also know how to create a newsletter popup to get notified to your customers in their email as well.

See also  Best 10+ Page Builder Plugins in WordPress 2023


We’ve tried to show different ways of changing the background color in the Flatsome theme. It also includes changing the color of different types of backgrounds. Feel free to try those to create a unique website that stands out from the crowd.

In case you’re facing anything not similar due to the update of Flatsome, let us know about it so that we can update the tutorial asap. You can also try our WooCommerce plugin list to create beautiful websites using Flatsome.

Subscribe To Our Newsletter!
Hi, I’m Mohamed. I share delicious recipes that I have cooked and loved. I’ve been food blogging for over 10 years and have a Diploma in Nutrition. You will find many healthy recipes as well as my favourite comfort food on the blog because I believe in a balanced diet.

Related Posts

Fintech’s biggest hits and misses of 2023

As 2023 comes to a close, we’re here to look back at the biggest fintech stories of the year. Silicon Valley Bank’s implosion felt like a fintech…

It’s critical to regulate AI within the multi-trillion-dollar API economy

Alex Akimov Contributor With two decades of tech leadership experience, Alex Akimov, former head of API at Adyen, now revolutionizes embedded finance at Monite by building best-in-class…

EU’s provisional deal on gig worker rights fails to get enough backing from Member States

Not so fast on that Christmas present for precarious gig workers in the EU: A political deal announced mid month, which aims to bolster platform workers rights…

Arduino exploring India manufacturing to limit counterfeit sales

Arduino is considering manufacturing in India. The startup, best known for its open source microcontroller boards, hopes to restrict the rise of counterfeit boards and cater to…

Top robotics names discuss humanoids, generative AI and more

Last month, I took an extended break. In a bid to keep my robotics newsletter Actuator (subscribe here) up and running, however, I reached out to some…

Pornhub owner pays US government $1.8M to resolve sex trafficking probe

Pornhub’s parent company Aylo Holdings will pay $1.8 million to the U.S. government to resolve a charge of profiting off of sex trafficking. The company, formerly known…