Sections

Sections group content into larger visual blocks and define their appearance. For example, set a background color or image and define the width, padding and text color of the section content.

Hover a section and click the Edit icon right next to the section name to open its settings. Settings are divided into three tabs: Content, Settings and Advanced.

---

Background

The section background can be set in the Settings tab under Style. Select one of the predefined styles.

Note The colors of these styles are defined by the global theme style selected in the style customizer. They can be modified in the Style → Components → Section panel of YOOtheme Pro.

The Primary or Secondary section styles often have a vibrant or dark color and automatically change the color of their content to light. However, there are cases when this behavior must be prevented, for example, when sections contain cards which have their own background color. Check the Preserve text color option to disable the automatic recoloring by the section. Learn more about how the theme style automatically recolors content in the inverse style documentation.

Some theme styles use slants or textures to create an overlap between two sections. To enable it, check the Overlap the following section option. This even works if the section uses a background image. If instead the following section has the background image, additionally apply the uk-section-overlap-flip class. Mind that if the option is not supported by the theme style, it will have no visual effect.

Image and Video

Additionally, a background image or video can be selected in the Content tab.

Mind that once an image is selected, the video field is hidden. Remove the selected image to show the video field again. The same applies if a video is selected.

Once an image or a video is selected, a button appears to additional settings.

There are three options on how to recolor the image and video in a different tone.

Learn more in the color picker documentation.

Text Color

By default, content looks great on any section style. However, using a background image or video may require to change the text color to either Light or Dark.

---

Width

Set the maximum width for the content within the section. Choose between the Default, X-Small, Small, Large and X-Large to set a fixed max width. The Expand option expands the content to the full width of the section keeping a small padding to the left and right while the None option has no padding at all.

The fixed width options keep a small padding to the left and right if the viewport is smaller than the set maximum content width. Check the Remove horizontal padding option to remove the padding on small viewports.

Use the Expand One Side option to expand the width of one side to the left or right while the other side keeps within the constraints of the max width.

To remove the default padding from the expanding side, open the general settings of the corresponding element and check the Remove left or right padding option.

---

Height

Set the height for a section to adjust it to the viewport height if its content is smaller than the viewport. This is typically used for hero sections.

Note Mind that for the viewport options the first section additionally subtracts the height of the header from it. This ensures that the first section fits into the initial viewport as expected.

Note Options with the height of multiple viewports are intended to be used in combination with the position sticky option for the builder columns as well as the parallax settings to create sticky parallax effects.

If a viewport height is set, section content can be aligned vertically using the Vertical Alignment option.

---

Padding

Set the vertical padding of the section. Choose between the Default, X-Small, Small, Large, X-Large and None. Additionally, remove the top or bottom padding.

Note If two consecutive sections have the same style, it's recommended to remove either the bottom padding of the first section or the top padding of the second section and control the space with just one padding option. This ensures the same padding across all sections.

---

HTML Element

Define the purpose and structure of the content or give it no semantic meaning. This allows you to mark up the content of your website semantically in a way that is meaningful to assistive technologies.

---

Sticky Effect

Choose a sticky effect for the section. Cover the sticky section by the following section while scrolling or reveal it by previous section.

---

Transparent Header

The header can be transparent and overlay the background of the first section. Select whether the header and the navbar have Light Text or Dark Text. This only applies if the section directly follows the header.

By default, this option expands the section height to the top while preserving the position and vertical alignment of the content. Check the Pull content behind navbar option to pull the section and its elements behind the header and navbar. For example, if a section has no vertical padding, this can be used to show a full screen image slideshow behind the header and navbar.

---

Animation

Apply an animation to all elements inside the section once they enter the viewport.

Note For the Grid and Gallery elements, the animation is applied to their items and not the element itself.

Check the Delay element animations option to slightly delay the animations, so they don't play all at the same time.

To disable or change the animation for specific elements, use the animation option in the general element setting.

---

Title

Section titles are a typographic decoration element. They are displayed edgewise on the left or right border of sections. Set the section title in the Content tab. Mind that they do not replace the actual content headings.

Choose the position, rotation and breakpoint of the section title in the Settings tab.

---

Advanced

The Advanced tab contains administrative and HTML attribute settings for the section.

Custom CSS

Apply custom styling to a section in the CSS field. YOOtheme Pro provides the special class selector .el-section to select the 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; }