The base of the Page Builder is its Sections. The Section is what ‘wraps’ the group of widgets that you set in the page. By clicking on Section Settings you can find many useful options to make the page more designed and creative.
Width Content
1. 100% Width – Displays the content from one side of the site to the other, with no regard to the site’s general width and margins.
2. Boxed – The regular site content width (usually including margins, depending on the theme’s design)
Background
Every section can be set with a different background, this way creating a contrast between the sections, allowing enjoyable browsing and very designed pages.
Text Color – You can set the section’s text color to be displayed above the background
Background Color – The section’s background color will be used as the base of the section’s background even if you choose a background image as well. Insert a HEX color (e.g. #000000)
Background Image – If you set the background image, it will be displayed above the background color (if you set a color).
Background Repeat – Allows to set a repeat for the background image, perfect for pattern backgrounds
Background Size – By default the image will be displayed as is, however if you choose the Cover mode the image will adjust to the user’s screen resolution
Background Position – Allows to set the exact position in which the image will be displayed on the page
Background Attachment – In a regular mode the background image will scroll along with the page, however if you choose the Fixed mode the image will fixed in place even as the page is scrolled
Parallax Effect – You can choose between Scroll Up and Scroll Down, thus creating a dynamic feeling while scrolling. For best results we recommend you use images with a ratio of 1:1 (e.g. 1000X1000px)
Parallax Speed – You can select the effect’s speed from between 1-10 while the default is 5
Background Video – Enter the URL of your YouTube video
Hide video on Mobile – You can hide the background video on mobile and instead display a background image (recommended)
Padding
You can add a padding top / bottom in the section to add the content’s space between the sections
Section Visibility
Using the drop down menu you can choose in which screen mode the section will be hidden / displayed, according to the following devices: Desktop, Mobile, Tablet, Logged-in users or disabled
Developers’ Settings
To every section you can add CSS Classes for full controll over the section design by using the external style.css file or CSS ID which allows you to place a unique anchor in every section, very useful for a One Page.