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.

Tab Description
Content Contains content fields and in case of multiple items elements content items.
Settings Contains element-specific and general settings.
Advanced Contains advanced settings.

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 Field Description
Title A text field for headings
Meta A text field for the meta text like the author or published date
Content A text area for the main text
Image An image field which opens the media manager
Icon An icon field which opens the icon picker
Video A video field which opens the media manager
Link A link field which opens the file picker
Date A text field for dates

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.

Multiple content items

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.

Add content items

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.

Display settings for content fields

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.

Option Description
Position Define the position of the element. Static positions it in the normal content flow. Relative – in the normal flow but with an offset relative to itself. Absolute removes it from the flow and positions it relative to the containing column.
Left Set the horizontal offset of the element's left edge in pixels. A different unit like % and vw can also be used.
Right Set the horizontal offset of the element's right edge in pixels. A different unit like % and vw can also be used.
Top Set the horizontal offset of the element's top edge in pixels. A different unit like % and vw can also be used.
Bottom Set the horizontal offset of the element's bottom edge in pixels. A different unit like % and vw can also be used.
Z Index Position the element above or below other elements. If they have the same z-index, the position will depend on the order in the layout.
Margin Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. The first element’s top margin and the last element’s bottom margin are always removed. Define those in the grid settings instead. Margins of an element can be removed from the top and bottom.
Max Width Set the maximum content width.
Max Width Breakpoint Define the device width starting from which the element’s max-width will apply.
Block Alignment Define the alignment in case the container exceeds the element’s max-width.
Block Alignment Breakpoint Define the device width starting from which the alignment will apply.
Block Alignment Fallback Define an alignment fallback for device widths below the breakpoint.
Text Alignment Center, left and right alignment may depend on a breakpoint and require a fallback.
Text Alignment Breakpoint Define the device width starting from which the alignment will apply.
Text Alignment Fallback Define an alignment fallback for device widths below the breakpoint.
Animation Overwrite the animation settings from the section. This won’t have any effect unless animations are enabled for the section. Or enable a parallax animation for this element.
Visibility Show or hide the element on this device width and larger. If all elements are hidden, columns, rows and sections will hide accordingly.

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.

Parallax setting button

Create a parallax effect by animating the following properties. Use the range slider to set a default value or type in a custom value with an optional unit in the field to the right.

Option Value Description
Translate X Pixels Animate the horizontal position. Optional units are %, vw and vh.
Translate Y Pixels Animate the vertical position. Optional units are %, vw and vh.
Scale Vector Animate the scaling vector, e.g. 2 is 200% and 0.5 is 50% scale. Optional units are px, vw and vh.
Rotate Degree Animate the rotation clockwise in degrees between 0 and 360.
Opacity Number Animate the opacity, e.g. 0 is 0% and 1 is 100% opacity.

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.

Parallax 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.

Option Description
Transform Origin Define the origin of the element's transformation.
Easing Adjust the speed of the animation over time. 0 transitions at an even speed. A negative value starts off quickly slowing down until complete while a positive value starts off slowly increasing the speed until complete.
Target The animation starts and stops depending on the position of the element in the viewport. Alternatively, use the position of a parent container.
Start and End The animation starts when the element enters the viewport and ends when it leaves the viewport. Optionally, set a start and end offset in px, % or vh, for example, 100px, 50vh or 50vh + 50%. Percent relates to the target's height. Basic mathematics operands, + and - are supported.
Z Index Set a higher stacking order.
Breakpoint Display the parallax effect only on this device width and larger. It is useful to disable the parallax animation on small viewports.

Advanced Settings

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

Option Description
Name Define a name to easily identify this element inside the page builder. The name will appear in the builder overview.
Status Disable the element or the element item and publish it later. It will only be shown to the editor while the customizer is open.
Dynamic Content Set the fields source for the dynamic content.
ID Define a unique identifier for the element. Use this identifier as a URL fragment in any link to navigate to this element, e.g. #myId.
Classes Define one or more class names for the element. Separate multiple classes with spaces.
Attributes Define one or more attributes for the element. Separate attribute name and value by = character. Use one attribute per line.
CSS Enter your own custom CSS.

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.

Custom CSS autocompletion


/* 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; }
YOOtheme Pro Documentation