Last updated on

While it’s perfectly acceptable to use a single background color for your entire WordPress website, we recommend exploring designs with multiple backgrounds to help organize and break up content.

Varied backgrounds and content give your viewers something interesting to look at on the page, which increases the time they will spend on your site. On average, you only have 15 seconds to convince a new visitor to stay on your site and consume your content. Having a dynamic background design helps make the best first impression and hook those valuable visitors.

How to Change Backgrounds in the Post and Page Builder

The Post and Page Builder plugin provides an easy way to swap out backgrounds. Using the DropTab, you can change the background for the Section, Row, or Column you are currently in. Each of these elements have the same background options.

Post and Page Builder DropTab Background

Background Options

Use a Background Color

The colors shown here include the active color palette and several gradients. To use a different color, click the box next to the paint brush icon in the Custom Color row to open a color picker with opacity slider.

Post and Page Builder Color Background

Default gradients can be customized by clicking the Settings button at the top of the panel.

Post and Page Builder Gradient Background

From here you can select two colors to use in the gradient, and if the colors should blend horizontally (side to side) or vertically (up and down).

Post and Page Builder Gradient Background Settings

Use a Background Image

The Post and Page Builder includes some stock photos suitable for any website, or click the Add Media button to open the Media Library and select your own. To further customize any image background, click the Settings button at the top of the panel.

Post and Page Builder Image Background

From here you can change the Vertical Position of the image on the page, Image Size (Cover Area or Tiled), and choose a Scroll Effect (Parallax or Fixed) if desired.

Setting the vertical position to 0 will show the top of the image at the top of its container, and setting it to 100 will show the bottom of the image at the bottom of its container. In both cases the height of the image will be determined by the size of the container it is in. By default, the Vertical Height is set to 50 and the image centers in the height of the container.

Post and Page Builder Image Background Overlay

You can also set an overlay color to help with text contrast on your site. Click the box under the paint brush to open the color picker with an opacity slider to choose your desired color. After clicking the Back button at the top of the panel, the color overlay will show in the image previews at the top of the panel.

Use a Background Pattern

The Post and Page Builder includes over 200 patterns to choose from, and any color can be applied to them. Use the box next to the paint brush icon in the Custom Color row to select any color and opacity.

Post and Page Builder Pattern Background

Congratulations!
You should have a better understanding of how to change backgrounds in the Post and Page Builder. Next, you may want to learn how to add and save BoldGrid Blocks.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

4 thoughts on “How to Change Backgrounds in the Post and Page Builder

  1. Hi,
    I am trying to change the background of my home page but the image does not fill the screen – there are black gaps on the edges. I have tried different image sizes – 1920*1240, 2000*1200, but they all do the same.
    Any ideas?

  2. I am trying to change the background in the Services section. I have selected an image the same way I did for the home page (change background), but it is not working. I can’t seem to get rid of the color overlay and there is no opacity slider. If I select the orange Add Block button, it shows it correctly with the selected image, but once I am done with adding a block, it goes back to the color overlay- which is how it appears on the live website.

Leave a Reply to Nigel Cancel Reply

Your email address will not be published. Required fields are marked *