Sections

Sections are the top level structure of every page. They group content in larger visual blocks.

By default, a new section contains one row with one column. Sections can have multiple rows, and they can be sorted with drag and drop. Learn more about managing the layout and how to add and edit sections.

The following settings can be found in the Builder panel of YOOtheme Pro. Just click on the edit icon right next to the name the section to open the section settings. Two tabs are shown right next to the section's name: Settings and Advanced.

Define the main appearance of a section by selecting a Style. There is an option to Overlap the following section with a slant or texture. This must be supported by the selected theme style. Otherwise, it has no visual effect.

Style

Description

Default

Adds the default background of your site – often white or light gray.

Muted

Adds a muted background – often slightly darker than the default background.

Primary

Adds a primary background – often a vibrant color.

Secondary

Adds a secondary background – often dark gray.

Note The Primary and Secondary styles usually result in sections that contrast with the default background color, and therefore use a light text color. Learn more about how to define which sections automatically recolor their content.

By default, content looks great on any section style. There are two cases when you might want to adjust the text color.

After picking a background image or video, you have to select the appropriate Text Color depending on whether it’s a dark or a light image or video. Only choose Light or Dark if Default doesn’t look good.

The Primary and Secondary styles often result in a colorful or dark section, and therefore use a light text color. Checking the Preserve color option will disable automatic text recoloring. For example, cards have their own background color. So, when using cards inside sections, you may not want their content to be recolored. Learn more about how the theme style automatically recolors content.

Set the maximum content width for a section using the Max Width setting. The Default, Small, Large and Expand options add a horizontal padding which adjusts to the viewport width. The None setting has no padding, which is useful for fullscreen slideshows.

By default, the height of a section is expanded by the height of its content.

Viewport

If the section height is smaller than the viewport height, the section is expanded to fill the viewport height. A section that directly follows the header will subtract the header’s height from it.

Viewport (Minus 20%)

This setting acts the same as Viewport but minus 20% in height.

Viewport (Minus the following section)

This setting acts the same as Viewport, but the height of the following section is also substracted to make it fit into the viewport, too.

Expand

On short pages a section can be expanded to fill the viewport height. This is useful if the page doesn’t have a scrollbar and the document background color is shown below the last section.

If a viewport height is set, the Vertical Alignment setting becomes available to align the section content vertically. This will only come into effect if the section height is larger than the content itself; otherwise, it will be exactly as high as its content.

Apply an animation to elements once they enter the viewport. This will animate all elements inside the section. It’s also possible to Delay element animations so that animations are slightly delayed and don't play all at the same time. Slide animations can come into effect with a fixed offset or at 100% of the element’s own size.

Section animations can be overwritten for each element in the element’s setting by choosing a different animation there or selecting None to disable the animation for this element.

Important Before any element inside a section can show an animation, one must be activated on the section itself; otherwise, the animation of a single element won't be applied.

Choose a section's Title, its position, rotation and breakpoint. Section titles are displayed vertically on the outer edges of sections. They are a typographic decoration element; do not use them to replace your main headings.

Setting

Description

Text

Set a text for the section title.

Position

Define the title’s position within the section.

Rotation

Rotate the title 90 degrees clockwise or counterclockwise.

Breakpoint

Set the breakpoint of the section title which will be displayed on the defined screen size and larger.

The CSS field allows you to apply custom styling to any section. YOOtheme Pro provides the special class selector .el-section for each section. Custom CSS rules will only apply to this specific section.