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.


Style

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.

Section Style

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.


Image and Video

Select a background image or video for a section. Once an image is selected, the video field is hidden and vice versa. A button appears to edit further image or video settings.

Background Image or Video

Background Image Settings

Setting Description
Width Height Set the width and height in pixels. Learn more about image dimensions and responsiveness.
Image Size Determine whether the image will fit the section dimensions by clipping it or by filling the empty areas with the background color. By default, the image will not be resized.
Image Position Set the initial background position relative to the section layer. By default, the image is centered.
Image Effect Add a parallax effect or fix the background with regard to the viewport while scrolling.
Image Visibility Display the image only on this device width and larger. This is useful to hide background images if the content becomes illegible on small viewports.

There are three options of how to recolor the image in a different tone.

Setting Description
Background Color Use the background color in combination with blend modes or a transparent image to fill the area if the image doesn't cover the whole section.
Blend Mode Determine how the image or video will blend with the background color.
Overlay Color Set an additional transparent overlay to soften the image or video.

Text Color

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.

Text Color

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.

Preserve Color


Max Width

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.

Max Width


Height

Set the height of a section.

Setting Description
None 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.

Height

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.

Vertical Alignment


Padding

Set the vertical padding of the section using the Padding setting. Choose if you want to remove the top or bottom padding altogether.

Padding


Transparent Header

The header can be transparent and overlay the section background. Select whether the header and the navbar have dark or light text. This only applies if the section directly follows the header.

The Pull content beneath navbar option controls whether the section content event starts beneath the header or an invisible placeholder makes sure the content is not overlapped by the header.

Transparent Header


Animation

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.

Animation

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.


Title

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.

Advanced Settings

The Advanced tab contains general settings for the HTML markup and CSS.

Setting Description
Name Define a name to easily identify this section inside the page builder. The name will appear in the builder overview.
ID Define a unique identifier for the section. Use this identifier as a URL fragment in any link to navigate to this element, e.g. #myId.
Class Define one or more class names for the section. Separate multiple classes with spaces.
CSS Enter your own custom CSS.

Custom CSS

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.

Examples

/* Select this section */
.el-section { background: red; }

/* Select all direct child elements of this section */
.el-section > * { background: red; }

/* Select all child elements with the uk-button class of this section */
.el-section .uk-button { background: red; }

YOOtheme Pro