Element Settings

Learn more about the general element settings.

The following settings can be found in the Builder panel of YOOtheme Pro. Just click on any element to open the element settings. Three tabs are shown right next to the element’s name: Content, Settings and Advanced.


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 used for headings.
Meta A text field used for meta text like the author or publication date.
Content A text field for the main text blocks.
Image An image field with an image picker.
Icon An icon field with an icon picker.
Video A video field with a video picker.
Link A URL field with link and file picker.
Date A text field for dates.

Multiple Content Items

Some elements, like the Gallery or the Grid element, allow creating multiple content items. Each item has the same content fields. So the Content tab allows you to create a list of content items which can easily be managed.

Action Description
Add Click the Add Item button to add an item.
Add From Click the Add From button to add multiple items at once from the Media Manager
Edit Click the item's name to edit it.
Copy Click the copy icon which shows up on hover to duplicate the item.
Delete Click the trash icon which shows up on hover to delete the item.
Sort Reorder the items by moving them with drag and drop.

Multiple Content Items

A list of display settings that show and hide content fields is situated below the content items. This is very useful because you can hide content fields later with just one click, and you don't have to edit each content item.

Display Settings for Content Fields


General Settings

The Settings tab contains all the specific settings for an element. These are different for each element. Typically related settings are grouped into small sections.

Note Hovering the name of a setting will show a tooltip with a brief explanation on the left side.

General settings, which are the same across all elements, are grouped in a General section at the bottom. Here is a short overview.

Setting Description
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 Fallback Define an alignment fallback for device widths below the breakpoint.
Max width Set the maximum content width.
Max Width Alignment Define the alignment in case the container exceeds the element’s max-width.
Max Width Breakpoint Define the device width starting from which the element’s max-width will apply.
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.
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 Define when the element should be hidden. Empty rows or sections will never be shown. When all elements are hidden, the whole row or section will be hidden automatically.

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 section in the Settings tab.

Parallax Setting Button

Basically, the parallax effect simply animates a number of CSS properties from a start value to an end value. YOOtheme Pro provides sliders so that you can easily pick good values for these properties. Alternatively, you can use the provided text fields to enter a value manually. Here is a list of all properties which can be animated.

Setting 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 how the parallax animation behaves.

Setting Description
Easing Determine how the speed of the animation behaves over time. A value below 1 is faster in the beginning and slower towards the end while a value above 1 behaves inversely.
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 general settings for the HTML markup and CSS.

Setting Description
Name Define a name to easily identify this element inside the page builder. The name will appear in the builder overview.
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.
Class Define one or more class names for the element. Separate multiple classes with spaces.
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 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; }

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

YOOtheme Pro