Changing the block background

Choosing the right background color for an individual block can help its content stand out from the rest of your website. It's a great way to highlight your offer or your brand. You can choose to change the background of individual blocks or keep the pre-designed background images.

How to change a background image

1. Place your cursor over the block you want to change and click the "picture" Replace Image icon.

Screen_Shot_2019-09-05_at_15.20.00.png

2. Choose the new background image on your computer. 

Tip: Your block background image should measure 1920 pixels wide or more. If your background image is too small, it will appear blurred and pixelated. This article addresses this issue in more detail.

3. Using the moving grid, select the part of the image you want to use as a background. The shape of the grid has been designed in such a way so you choose the image that proportionally fits the block design. 

4. Click Select to complete the change.

5. If you are unhappy with the background change, tap the Undo button in the top right corner or press Ctrl-Z on your keyboard.

Quickly changing the background color

To change the block background color, follow these steps:

1. Go to Block settings

2. Click on Appearance.

3. Choose one of the available color options. For this example, we have chosen a black background:

Screen_Shot_2019-09-25_at_11.42.18.png

Note that the font colors of this block have also changed.

 

Change the background overlay

You can quickly add a transparent layer on top of your block background to make your content stand out more. Here's how you can do it:

1. Hover your cursor over the block that contains a background to activate the control panel. Click on Edit Image:

Screen_Shot_2020-06-01_at_15.29.02.png

2. In the Image Resizer tool, click the Change Overlay icon:

Screen_Shot_2020-06-01_at_16.26.12.png

Move the sliding handle to achieve the desired level of transparency for the overlay:

Jun-01-2020_16-29-04.gif

Once you have achieved the desired result, click the "check" Save icon to save the background changes.

 

Changing the text block background

To change the text block background, follow these steps:

1. Navigate to the text block and click on the “gear” Settings icon to access the Block Settings area.

2. In the Appearance tab, you can choose a background color for your block. Each background color has been professionally selected to match the look and feel of your website template.

Screen_Shot_2021-02-12_at_19.18.02.png

Note: the pre-defined text colors will be adjusted to lighter or darker ones, in order to maintain the contrasting color scheme and make the text more legible. You can learn more about text color formatting in this tutorial: Changing text colors.

Screen_Shot_2021-02-12_at_19.19.29.png

3. Once you are done customizing your Text block, click Save to apply the changes. On mobile, click the floppy disk icon in the top right corner.  

 

Can I remove the background?

If your block design has an image background, you cannot delete this image. If you prefer to have a plain white or black background for your block, then you can choose a new block with a plain background from the Block Library.

To have a background of a different color, create an image with your chosen color background in an image editor and choose this file as a block background. Here are more details about how to do it.

Other helpful articles

Adding an animated background

Adding block background overlays

Changing background to plain color

Changing a color palette

Was this article helpful?
0 out of 0 found this helpful