Elements

Elements are the main part of the layout since they display actual content. Many element settings like content fields, options to position the element in the layout and animations recur across all elements.

Click on an element to open the element settings. Three tabs are shown right next to the element’s name: Content, Settings and Advanced.

For element-specific settings take a look the basic, multiple items and system element documentations.

Note Options have a description under its fields. If the option name and field are aligned side by side, hover the name to show the description in a tooltip.

---

Content Fields

All content fields of an element are shown in the Content tab. Here is a list of common content fields.

---

Content Items

Multiple items elements, like the Gallery or the Grid element, allow creating multiple content items. The Content tab shows the list of all created items. To edit an item, simply click on it. A panel will open where you can change the item's content and settings. Use the Copy and Delete icons which appear on hover to duplicate or delete the item. Change the order of the items using drag and drop.

To add a new item, click the Add Item button. Alternatively, click the Add Media button to add multiple items at once from the media manager. For each selected image, a new item will be added. The item's image and name will be automatically filled out.

Each item has the same content fields: Title, Meta, Description, Image and Link. Below the items there is a list of Display Settings to quickly hide these content fields without having to edit each item.

---

HTML Element

Organize the layout into logical pieces using the HTML element option. Containers like section, row, column and the Sublayout element can use the <address>, <article>, <aside>, <footer>, <header>, <hgroup>, <nav> or <section> element. Builder elements and their items have a corresponding HTML element option as well. This allows you to mark up the content of your website semantically in a way that is meaningful to assistive technologies.

---

General Settings

The Settings tab contains all element-specific settings. These are divided into smaller groups. At the end of the settings list, there is a group of General layout settings which recur across all elements. They include options to position the element, define its size and text alignment, animations and visibility on different devices.

---

Parallax Settings

The Parallax settings are used to animate an element depending on the scroll position of the document. To configure a parallax animation, set the Animation to Parallax in the General settings.

Create a parallax effect by animating one of the following properties. The range slider sets a value in a default unit. To set a specific value or use a different unit, use the input field to the right.

An animation sequence consists of one or multiple animation stops. Use the Add and Delete icons which appear on hover on the right to add or delete the animation stops.

Setting just one animation stop animates the element from its initial value to the defined stop value. Setting two animation stops animates the element from the first stop value to the second stop value. Setting multiple stops adds intermediate stops along the animation sequence. By default, the animation is equally distributed between the stops. Alternatively, specify percentage to position the stops along the animation sequence.

Note The position value is set in percent without the percent unit.

There are additional options to control the behavior of the parallax animation.

---

Sticky Parallax Effects

Parallax settings can be combined with sticky columns to create advanced sticky parallax effects directly in YOOtheme Pro. Here is the concept behind the sticky parallax effects.

First of all, add a section or a row which is multiple viewports high. This will define the duration of the parallax animation. Within this section or row, add a sticky column which has a height of one viewport. And finally in this column add elements that have the parallax effect. Since the column is sticky, the elements will not scroll out of the viewport, but will be animated while scrolling.

Lets start the implementation with an actual example in YOOtheme Pro. Set the section height to, for example, 2 Viewports. Open the row settings and set the row height to Viewport. In the column settings, set the position sticky option to Column within Section. Now the column is one viewport high and will be sticky while scrolling the section which is 2 viewports high. Finally, add elements with parallax effects to the sticky column. Make sure to set the parallax Target option to Section so the animation starts and stops depending on the section's height. By default the animation starts when the section enters the viewport and stops when it has left the viewport. Optionally, set both Start and End offsets to 100vh. This will start the animation once the section fully covers the viewport and end it when the section starts leaving the viewport. Often the main element is centered within the column while others are positioned absolutely in the fore- or background.

Note To use a row instead of a section as sticky container, set the row height manually in the CSS field in the Advanced row settings.

.el-row {
    height: 200vh;
}

If there is more than one sticky main element, just use multiple sticky columns.

Instead of setting a fixed height on a section or row, the height can be defined by elements of a column which is not sticky.

To create a sticky background effect, add a row with a column which has a height of one viewport and is sticky within its section. Add a background image or video to the column. This column is only used for the background and does not contain other elements. In the second row, add elements with the parallax effect and make sure that their height is larger than the viewport. At last, pull the second row above the previous one using custom CSS.

.el-row {
    position: relative;
    z-index: 1;
    margin-top: -100vh;
}

To create a sticky parallax effect where elements fade in and out equally distributed along the animation sequence, use the start and end offsets to give each element the same duration. There is a trick to make calculating those offsets more easy. Just set the End offset to 100vh + 100% so the end of the animation is the same as its start. Now you can just subtract the sum of the start offset and the duration.

For example, let's divide a parallax effect into two visual parts using a section with a height of 200vh. Since the animation should start once the section is fully visible, meaning at 100vh, there are 100vh left for the whole duration of the animation. So each part will be animated for 50vh.

To add a third part with the same duration, use a custom section height of 250vh.

If the section has a height of 300vh, there are 200vh left for the whole duration of the animation. So each part will be animated for 66.666vh.

---

Advanced Settings

The Advanced tab contains settings which are not directly related to the layout. They also recur across all elements.

Custom CSS

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

There are even more selectors available for specific visual content parts of an element, e.g. .el-title, .el-meta, .el-content, .el-image and .el-link. All available selectors for an element are listed below the CSS field. Auto-completion is also activated, so if you start typing .el-, a dropdown will suggest all available selectors for the current element.

Examples

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

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

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

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

/* Select the title of this element */
.el-title { background: red; }