How to use the Background Section element
The user interface of the Thrive editor has been upgraded!
Please, check out the changes here, before proceeding.
With the help of the "Background Section" element you can add backgrounds with various styles to your page and customize them to your liking. Here is how to do that:
Start by clicking on the plus sign from the right sidebar to open the list of elements. Then look for the "Background Section" element and when you have found it, drag & drop it to the desired place on the page:
At first, you will see no major changes, only a blank element added to your page.
You will need to use the options of the element that opened in the left sidebar to customize the background section to your liking and then, add content to it.
1. Main options
Inherit from landing page
If this option is active, then you will not be able to change the width of the "Background Section", since this will be inherited from the landing page that you are using.
By default, this option is active. If you want to customize the width of the "Background Section", then you will have to deactivate the "Inherit from landing page" option by clicking on the switch next to it:
Content Maximum Width
If you have deactivated the "Inherit from landing page" option, then the "Content Maximum Width" option will appear, along with the "Content covers the entire screen width area" option, which may also be activated by default.
If you do not want the content that will be placed in the "Background section" to cover the entire screen width and you would rather adjust the width yourself, then deactivate the "Content covers the entire screen width area" option, by clicking on the switch next to it:
This will make the "Content Maximum Width" option available and you will be able to adjust the width of the "Background Section" by either dragging the slider under this option or entering a value manually into the box next to it:
Section Minimum Height
With the help of this option you can adjust the height of the "Background Section". To modify the height, simply drag the slider under this option or enter a value manually in the box next to it:
In case you want the height to match the screen, all you have to do is to click on the switch next to the "Match height to screen" option, to activate it:
Activating this will make the "Section Minimum Height" option unavailable, since the height of the background section will match that of the screen.
Customizing the "Vertical Position" is another option that you have here. You will see the changes regarding this option, after you have added some content to your "Background section".
The "Vertical Position" option allows you to choose how to align the content that will be in the "Background section". You can choose to position the content at the top, bottom or center inside the background section, by clicking on the preferred position from this section:
2. Background Style
Besides the "Main options" the more general options are also available for the "Background Section" element. We have separate tutorials about each of these in our knowledge base. So, if you need detailed instructions on how to use these, please consult our tutorials here.
Out of these general options, the "Background Style" is very important when it comes to the "Background Section" element.
This option allows you to add different types of layers to your "Background Section". You can add a "Solid color", an "Image", a "Gradient", a "Pattern" or even a video as a background. Furthermore, you can add "Background effects" as well.
These work well on their own, as stand alone backgrounds; but they can also be used in a more complex way. The 'Solid color', the 'Gradient' and the 'Pattern' could serve as effects for an image background for example.
In order to add a "Solid Color" as a background, click on the color option (first option from the "Add layer" section). A color picker will open. Select the color you would like from it (a) and then, start to drag the line (b) to set its opacity.
When you are satisfied with the color and its opacity, just click on "Apply" (c):
To add an image as the background style click on the second option from the "Add layer" section. Then, click on the "Choose image" section (a) to add the image from your Media Library.
Once the image is added, you will be able to choose where to display it (b), using the "Image Display" drop down, as well as the option next to it. Furthermore, you will also be able to choose whether or not you want it as a static background (c):
Note: If you choose to make the image a static background then, the image itself will not move when visitors will scroll down on your page.
Only the content will be dynamic, whilst the background will be static. This is very similar to creating a parallax effect.
If you wish, you can choose to add a gradient as your background style as well. In order to do this, click on the third option, which is the "Gradient", from the "Add layer" section. The gradient that you add can be linear or radial. Select it from the "Orientation" section (a) by opening the drop down and selecting the preferred option. If the effect is linear, you can also choose its angle (b).
You can also set a color and its opacity (c) in order to make your background suitable for your needs.
Last, but not least, you also have the possibility to add a "Pattern" as a layer for your background. You can choose a pattern, from the "Select pattern" section (a), and you can also set its color, as well as opacity if you click on the "Color" option here (b):
The "Background Style" also lets you add a video to the background section. In order to do this, you only have to turn on the "Video Background" option, select the source you want to upload the video from (YouTube, Vimeo, Wistia or Custom - from your own device) and then, follow the steps according to the source you have chosen:
After you do this, the video will be played in the background.
Tip: If you wish the video to be even more visible, you can increase the "Minimum Height" of the "Background Section".
3. Decorations option
This is another general option that is important when it comes to the "Background Section" element. This option allows you to customize the sides of the background section. You will have to select which side you want customized (a), then, the decoration type you want to add to it (b):
This can be either a "Slanted edge", a "Pointer", a "Divider" or a "Fancy Divider". Each of them come with their own set-up options (like width, height, tilt, invert etc.) that you can use to further customize them.
If you would like to find out more about how to use the "Decorations" option, as well as the set of options for each decoration, please click on this link.
Adding content to the 'Background Section'
When you have finished customizing your background section, you can start adding content to it. This is pretty easy. All you have to do is select the element(s) you wish to add and then, drag & drop them inside the "Background Section".
Tip: Make sure the content you add is visible and you do not use too intense colors when setting up the background itself.
If you wish to find out more about the Thrive Architect elements, please click here.
Hopefully this article was useful for you. If so, please give us a smile below :)