Element Settings

Elements have settings which recur across all elements like content fields, options to position the element in the layout and animations.

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 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 with an icon picker
Video A video field which opens the media manager
Link A link field with a link and 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.

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

Setting Description
Position Define the position of the element. Static positions it in the normal content 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 allow you 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

The parallax effect animates a number of CSS properties from a start value to an end value. Use the slider or type in the exact value in the field to the right. The following properties can be animated.

Option Description
Horizontal Animate the horizontal position (translateX) in pixels.
Vertical Animate the vertical position (translateY) in pixels.
Scale Animate the scaling. 1 means 100% scale, 2 means 200% scale, and 0.5 means 50% scale.
Rotate Animate the rotation clockwise in degrees.
Opacity Animate the opacity. 1 means 100% opacity, and 0 means 0% opacity.

There are additional options to control parallax animation behavior.

Option Description
Easing Determine how the speed of the animation behaves over time. 0 transitions at an even speed. A positive value starts off quickly slowing down until complete while a negative value starts off slowly increasing the speed until complete.
Viewport Set the animation end point relative to the viewport height, e.g. 0.5 for 50% of the viewport. It is very useful to stop the animation of a text when it’s in the middle of the screen.
Target Animate the element as long as the section is visible. This is very useful when multiple elements in same section are animated. Use this setting to make sure that their animations all happen at the same time even if they have different heights and different positions inside the section.
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.

Setting 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

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