The background section allows you to add a section that you can use as a kind of divider. The name 'background' can therefore be a bit confusing, as it doesn't refer to the actual background of the theme. The background section is ideal for separating two sections with a visually appealing color set through your color schemes.
To activate this section you first have to add the section to your page. This can be done in a few small steps.
1) Click on 'add section' which can be found in your left sidebar
2) Scroll down, or search for 'Background', then click on 'Background'
3) Done, your Background section is added.
General settings
The general settings contains the settings for the styling and layout of the 'background' section.
Simply click on the 'section' to open the settings.
On the right sidebar, the following settings will show
Background
Color scheme:
Select the color scheme for the background + text. You can select the color pallets here.
Background opacity:
Control the background opacity using the range slider.
Banner height:
Set the height of the section. We advice to use the 'custom minimal height' option to get the perfect height for your section.
Enable custom minimal height:
Enable the custom minimal height setting to enable the custom height. Once enabled you can control it using the slider. This way you can make a great divider!
Banner width:
Choose the width of the section, do you want full width or regular width?
Mobile layout
Banner height:
Set the height of the section for mobile.
Spacing
Bottom spacing desktop:
Set the amount of whitespace at the bottom of the section on desktop.
Bottom spacing mobile:
Set the amount of whitespace at the bottom of the section on mobile.
Control the stacking order of sections:
Increase or decrease the z-index value to control the visual layering of sections, ensuring the desired display arrangement when using negative spacing.
When we increase the z-index, the section will overlap: