Sections

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.