Responsive section layouts
What is a responsive section
A page is made up of many responsive sections. A "responsive section" auto resizes its layouts when viewed on a mobile size client. For example, a "two column" responsive section will automatically fold to form a stacked single column. All contents inside the sections inherit the responsive properties.
How to adjust spacing between sections
- Select "Section Properties"
- Adjust "Paddings"
Section backgrounds
- Section background image - this automatically fits the image horizontally to the device width
- Section video background - this fits the video as the section background
- Section background color - this fills the entire section with the selected color
How to add an image background to a section
- Choose "Section Properties"
- Choose "Background Image"
- Select the image you wish to use as background
How to add a video background to a section
- Choose "Section Properties"
- Choose "Background Video"
- Select the video you wish to use as background
- If you wish to display the video in full width, please set the section to 100% width with no left and right padding.
- Test video background in "Preview". (Please note video backgrounds do not show in the editor, please use "Preview" or publish the page in order to test the video background)
Design tips:
- When using a video background, we also recommend adding a photo as the "image background", this allows the page to display the image background while the video is downloading, providing the web visitor with a better experience.
- While you can technically add any sized video as the background, please keep the file size in mind as you select videos. A smaller video will load faster and will consume less server bandwidth. Try to keep your video file size under 10 mb. If you're looking for examples of videos suitable for website backgrounds, check out https://coverr.co