Manual

The fundamentals of using Slider Revolution.

[wd_asp elements=’search’ ratio=’100%’ id=2]

Add and Configure Link Actions

Learn to add and configure links to other pages and scroll positions

Link Actions provide a way to add interactivity to any layer, allowing a visitor to initiate events that link to other pages, scroll positions or code actions.

Link actions can be used to either:

  • Load another page.
  • Scroll or jump to another point on the same page.
  • Trigger code based events such as calling a JavaScript function or requesting iOS permissions.

To add a Link Action select any layer, go to the Layer Options tab, and click the Actions sub-section button:

The Actions dialogue box will open:

On the right side of the dialogue box you will see the Link Actions section, containing the six different available link actions:

Click one of those actions to apply it to the layer. The applied action will then appear in the list of actions on the left side of the box, while the options for that action will appear on the right side:

To delete an action, click the small trash can icon to the right of the action’s name:

The six available link action types are:

The behavior of each of these link action types can be customized by configuring its options. Let’s now step through the available options for each action type, and learn how to use them.

Note: Changes to action configuration are immediately auto-saved. Manual saving is not required.

Common Action Options

There are a number of options you will find common to multiple link action types, and that perform the same function in each case. Rather than go over these options multiple times, we’ll cover all of them at once as we look at each action type.

Interaction

The Interaction option is available for all six Link Action types. 

Use the Interaction option to specify how the user will need to interact with the layer in order to trigger the action:

There are three possible settings. 

Click triggers when the layer is left clicked with the mouse, or tapped on a touch screen.

Mouse Enter triggers when the mouse first hovers over the layer. 

Mouse Leave triggers when the mouse stops hovering over the layer. 

Action Type

The Action Type option is available for all six Link Action types. 

The Action Type option shows the currently selected action type:

This option also acts as a shortcut to switch action types. Click the option and you’ll be taken to the list of actions, from where you can choose a different type.

Protocol

The Protocol option is available for the following Link Action types: Simple Link and Menu Link & Scroll.

If you need to manipulate whether a URL is opened using the http or https protocol you can do so with this option:

Target

The Target option is available for the following Link Action types: Simple Link and Menu Link & Scroll.

Use this option to specify whether a link should open in the Same Window or a New Window, i.e. a new tab:

Follow

The Follow option is available for the following Link Action types: Simple Link and Menu Link & Scroll.

If you wish to add rel="nofollow" to a link, set this option to No Follow instead of Follow:

Animation Ease

The Animation Ease option is available for the following Link Action types: Menu Link & Scroll, Scroll to ID, and Scroll Below Slider.

Easing is a functionality that helps to smooth out animations by influencing their starting and ending speeds.

If the action being used incorporates animation, you can use the Animation Ease option to select your preferred easing preset:

Animation Duration

The Animation Duration option is available for the following Link Action types: Menu Link & Scroll, Scroll to ID, and Scroll Below Slider.

If the action being used incorporates animation, use the Animation Duration option to set how long the animation should last, in milliseconds(ms):

Action Delay

The Action Delay option is available for all six Link Action types.

With Action Delay you can optionally add a delay, in milliseconds(ms), between when the action is triggered and when it takes effect:

Note: If using the Simple Link action, its Type option needs to be set to jQuery Triggered in order for the Action Delay option to apply.

Trigger Repeat Delay

The Trigger Repeat Delay option is available for all six Link Action types.

With Trigger Repeat Delay you can optionally add a period of time, in milliseconds(ms), that must elapse before an action can be triggered again:

Individual Action Options

Now that we’ve covered the configuration options common to multiple Link Action types, let’s move on to the functionality and options specific to individual action types.

We’ll begin with the Simple Link action type, which opens a provided URL. 

Action Specific Options

This option allows you to specify the URL to be opened when the action is triggered:

Type

If the Type option is set to Tag Link, the latter will use an <a> element to facilitate the link action.

If it is instead set to jQuery Triggered, JavaScript will be used to facilitate the link action. You will need to use this setting if you also want to use the Action Delay option.

Common Action Options

Scroll To ID

The Scroll to ID action smoothly scrolls to an anchor on the same page.

Action Specific Options
Scroll to ID

Set the anchor ID you want to scroll to in the Scroll to ID option:

Note: The anchor ID should not include a # symbol. 

Scroll Offset 

Optionally use the Scroll Offset option to set a distance, in pixels(px), by which you’d like to offset the position scrolled to:

You can enter a positive or negative value. A positive value will scroll to a point lower than the target ID, while a negative value will scroll to a point higher.

Common Action Options

The Menu Link & Scroll action type is effectively a combination of the Simple Link and Scroll to ID actions, in that you can use it to create either type of functionality. You can also use this action type to jump to an ID on another page.

Action Specific Options

If you wish to link to another page, set its URL in the Link to URL option:

If you wish to scroll to an ID on the same page, leave the Link to URL option blank. 

Anchor #id at URL

If the Link to URL option is left blank, the Anchor #id at URL option can be used to scroll to an ID on the same page.

If the Link to URL option is set to go to another page, the Anchor #id at URL option can be used to jump to an ID on that page.

Scroll Offset

If you are using this action to scroll to an ID on the same page, the Scroll Offset option will work in the same way it does with the Scroll to ID action type.

If you are linking to another page, the Scroll Offset option will have no effect. 

Common Action Options

Scroll Below Slider

The Scroll Below Slider option smoothly scrolls the page to a position below the module.

Action Specific Options
Scroll Offset

If the Scroll Offset option is set to 0, the page will scroll down until the bottom edge of the module is aligned with the top of the page. Any change in the setting of Scroll Offset will be relative to this default position.

Setting a positive value, in pixels(px), will scroll to a position further below the default, while a negative value will scroll to a position above the default. 

Common Action Options

Call Back

The Call Back action type calls a JavaScript function when the action is triggered. 

Action Specific Options
Function

Use the Function option to provide the name of a function to call:

Note: The function name must include parentheses, and only globally scoped functions can be called.

Common Action Options

iOS Gyroscopic Permission

Use the iOS Gyroscopic Permission action type if you need to request permission to access gyroscopes on iOS devices.

Note: If you select this action type, the layer it is applied to will only be active on iOS devices.

Common Action Options
Add and Configure Link Actions

Newsletter

Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.