Various Options for Block Background

There are several options for customizing your block background. This tutorial will walk you through them. 

Changing the background image

To change the image that appears in your block, click on the Edit image icon.

Once the Image resizer tool loads, upload the new image from your computer.

Once it has loaded, click on Submit "check" icon:

Your new background image will be uploaded. Depending on the image, your block design might change automatically.

Using preset background colors

Click the Block settings icon in the menu:

In the Appearance tab, check the Add overlay option. Then you can customize the shade and intensity of the overlay using one of the preset options:

You can choose from white, back, and gray background overlay shades.

You can also increase the overlay opaсity by dragging the handle below the Add overlay option:

This can help your text stand out more on top of the muted background image.

Once you are happy with the result, click Save. 

Changing the background color

You can also easily change the block background and fill it with a specific color. To set a plain color as a block background, follow these steps:

1. Use an image editor or a screenshot tool to create a rectangle shape filled with the color of your choice. Alternatively, search online for "color swatches" and take a partial screenshot of the color you like.

2. Upload this piece of the image as a block background. Hover your mouse over an existing block background image and click on Edit image icon.

The Image resizer tool will load. Click on the Upload image icon.

Locate the color sample image on your computer and upload it on your website. The image will automatically multiply providing a solid layer of color on the block background:

Adding an animated image as a background

Do you want to create a whole new look for your block or a website? Try adding an animated image as a background.

Before you begin

You can find an animated .gif file available for a download. Use this Google search or try these websites to download animated images for your background:

• Gifer.com
• Animateimages.com
• Motionelements.com (paid)

Add an animated background image

1. Navigate to the page and a block where you want to add an animated background.

2. Hover over any area on the page to trigger the block editing menu. Click on the Replace image icon.

3. Locate an animated .gif file on your computer and select it.

Note: your file size should not exceed 5 Mb. To upload larger files, you will be prompted to upgrade.

4. Your animated background will be automatically resized and added as a background.