Role Name: Here you enter the name that the user role should have, for example: Customer.

Capatibilities: A user role has different permissions in WordPress. You can automatically copy the permissions from an already existing user role. Alternatively, you can use the “Expert Mode” to set the permissions individually.

Hide Element Header: Hides the class selection and the tabs “Content” and “Style”.

Hide Tabs: Hides only the element tabs (“Content” and “Style”)

Clean Up Toolbar: Removes some elements from the builder toolbar to make the backend more clean

Custom Builder Theme: With it you can give the builder a completely new look and change the color environment.

Class Set Name: Here you can define a name for your set.

Class Prefix: Define a prefix for your classes here. For example, if you choose “brf”, all your included CSS classes from your code get automatically prefixed with “brf”. (Before: .example {}, After: .brf-example {})

Page Load: Fires when the page is loaded.

Click: Fires on click to a element of your choice

Scroll Position: Fires when the scroll position is greater then a value of your choice

Animation Type: You can choose between: Flip, Fade, Fade Shrink, Fade Up, Overlay, Overlay Shrink

Trigger: Change the side of the element by trigger a Click or Hover event

Duration: Define a value for the duration of the animation in seconds

Delay: Define a value for the delay of the animation in seconds

Developer: If you are a developer, you can extend the functionality by writing your own JavaScript code for various events. The following events are currently available: On Animation Start, On Animation Complete, On Animation Reverse Complete. 

Icon Style: Choose between: Duotone, Light, Regular, Solid, Thin

Icon Class: Type in the icon class, for example: fa-home

Spin: Activate to spin the icon

Sharp: Activate to enable the Sharp Style of the icon. Currently Font Awesome offers this only for the type “Regular”.

Link: Create a link for your icon

Width: Set the width of the slider (any unit)

Height: Set the height of the slider (any unit)

Color: The color of the drag handler

SVG: You can define a custom SVG here to replace the basic drag arrow

Type: Select the Trigger Type. You can choose between: “Open Popup” and “Close Popup”.

Popup: Select the popup to which you want to apply the trigger. The Close trigger type automatically closes the popup that is currently open.

Enter Viewport: Triggered when the element to which the animation is applied reaches a certain area of the viewport that you can specify.

Click: Will be triggered as soon as a click event takes place. You can decide on which element the event should listen. For example, you can also trigger an animation when another element is clicked.

Hover: Will be triggered as soon as a hover event takes place. You can decide on which element the event should listen. For example, you can also trigger an animation when another element is hovered.

To: Allows you to define the destination values. Example: Animate an element from the current position 300 pixels to the right (x: 100).

From: This is like a backwards animation where you define where the values should START, and then it animates to the current state which is perfect for animating objects onto the screen because you can set them up the way you want them to look at the end and then animate in from elsewhere. Example: Animate an element from top 300px to the current position.

From To: Lets you define both the starting and ending values for an animation (as opposed to from and to animations which use the current state as either the start or end). This is great for having full control over an animation, especially when it is chained with other animations.

Motion Path: Animate anything (SVG, DOM, canvas, generic objects, whatever) along a motion path in any browser. The element will follow your specified path exactly and the best part is that the path will adapt to your screen resolution! Note: for performance reasons, this is not done on browser resize, but on window loading. Tip: With the toggle “Use Motion Path Helper” you can draw a path yourself graphically and visually and have the coordinates generated, which you can then easily embed.

Transform: Set different values for the transformation here. You can use anything here to create your animations.

Filters: Animate CSS filters with this setting. Important: Some filters are not yet compatible and will not work. Note: animating filters is very performance-heavy. Keep your animations to a minimum here and rather use transformations to get the best performance.

Custom: You can also create a custom animation here by passing a JavaScript Object. An object to animate an element could look like this: { “opacity”: 0, color: “#FFFFFF” }. You can use almost all CSS values here.

Duration (s): The duration of the animation in seconds

Delay (s): The delay of the animation in seconds

This Element:Waits for events on the element to which the animation is applied.

Other Element: Here you can specify a selector that waits for events. For example, when you click on one element, you can animate another.

• Click and drag on the path itself to move the path.
• Click on the points of the line to show their handles.
• Click and drag on the points to move the points.
• Click and drag on handles to edit how the path curves.
• Hold Alt and click on the path to add points.
• Hold Alt and click on a point to toggle it between being “smooth” or a corner.
• Hold Shift and click on a point to toggle a point’s selection.
• Click Delete with an anchor selected to delete it.
• Click the “Copy motion path” button to copy the SVG path data to your clipboard.
• Hold Ctrl and press Z to undo your last action.