Using
Section is visually separted component usually occupying full width of the screen. The section contains other components.
For each section you can adjust the height, background, and content width. Typography settings are available inside the section.
It is possible to stylize the upper and lower edge of the section. More details here.
Content Width
By default the width of the content inside the section is limited by the site container width. You can set the site container width in the theme settings.
Container fullwidth option allows you to make fullscreen section content.
This section content width is limited by the site container
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This section content is fullwidth
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Minimum height
Enable minimum height option allows you to force the section height to be higher than the content.
The units of measure px and vh are supported.
If you want to make a section according to the current device screen height, set the minimum height to 100vh.
Background settings
As the background of the section, you can select:
- Color fill
- Gradient fill
- Image
- Youtube video
- Video from the Media Library
To make the text look more contrast activate Enable overlay parameter.
This is section with image background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is section with image background and overlay
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is section with color filled background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is section with fixed image background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is section with gradient background
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is section with video background
WebM and MP4 formats is supported.
Color Settings
You can set custom color settings inside the section for text, links, and headings.
Sticky section
When this option is enabled, the section will stick to the upper edge of the screen when scrolling down the site.