Editing Backgrounds (Sections)

4 March 7, 2021

This tutorial builds upon the concepts shown in the previously tutorial “Editing Backgrounds (Columns). Please ensure you have read that tutorial before you attempt this one otherwise you might find it more difficult. However, we will attempt to recap some concepts as we move along.

Backgrounds come in all shapes, let’s revisit the photo that we used to showcase the different backgrounds.

In the previous tutorial, we changed the “Orange Background”. That was a column background.

In this tutorial however we will focus on editing a “Section Background”. A section has columns within it. In the above example, the three boxes of “Why We Are A Better Agency”, “What Your Website Includes” and “Different Types of Websites” are 3 Columns within a section. Each of those columns had different photos, buttons and colours but once more, they were all within the same section. Let’s break it down for you a bit better.

Think of it like this:

The entire surroundings of the yellow box is the section. However there are columns within it. Let’s show you.
Notice there are different columns with different types of content.

Now let’s put it all together.

Here, you will see that within the large box that is the section. Within the section there is the columns.

So now that you understand the different between the column and section on your website, you’ll realise that we learnt to change the background of the Column. Now we need to learn how to change the background of the section. Now backgrounds for sections has more options and work very similar to changing the background of a column with few differences.

Previously we learnt that clicking the Column icon allows you to edit the Column but now we were learn about where the “Section Icon” is. This will open the “Section Settings” the same way the “Column Icon” opened the “Column Settings”.

Recall from the previous lesson, clicking the “Column Icon” as shown in the image will open the “Column Settings” .
As compard to the “Column Icon”, by hovering over any Column will show you 3 Options at the top that looks like ( + ::: x ). Select the ::: Icon and that will open the “Section Settings.

In the following photo, we will Zoom on the Section Settings icon.

Here you can see the menu options. To open the Section Settings, click the ::: . (3 Colons)

Upon clicking that this menu on the left panel will open. To change the “Background” please select the “Style Tab” and you will see the various “Background Settings”

Here you would see the “Background Option” and even an option to add an “Overlay” to the background.

You should select with Background Type you wish you have. There are types such as Colours, Gradient, Videos and Slideshow/Photo. After you select your preffered option you will be greeted by more settings to adjust as you please. Let’s do it for you and show you.

We selected the “Background Colour” type and chose a black background. Notice how the background of the entire section behind the columns changed colour.
In this photo, we selected another “Type”, this time we selected “Slideshow”- We inserted one photo of a laptop and Sharpie marker which you can see.

This will conclude you adding a background to a section. Sections can be anything such as a header or call to action. Backgrounds can be anything such as “Photos, Videos, Colours or even Gradients”. Best wishes. In terms of adding backgrounds, this will conclude our tutorials on them.