Link Actions

• Link Actions
  • Menu Link & Scroll Panel
  • Simple Link Panel
  • Call Back Function Panel
  • iOS Gyroscope Permission Panel

Link Actions

Links actions are accessed by going to the Module Editor, then in the Right Sidebar clicking the Action icon to enter Action Mode, clicking Add New Action, and in the Action Settings Panel setting Type to Menu Link & Scroll, Simple Link, Call Back Function or iOS Gyroscope Permission.

The four Links actions allow you to link from layers in a module to the rest of the page, site, or external sites. Simple Link opens a URL, and Menu Link & Scroll combines a link with a smooth scroll to an in-page target, which is useful for tasks such as creating a navigation menu for a one-page site. Call Back Function runs custom JavaScript, and iOS Gyroscope Permission requests access to the gyroscope on iOS devices.

Menu Link & Scroll Panel

The Menu Link & Scroll panel configures an internal link, such as an entry in a navigation menu, that can also smoothly scroll the page to a chosen in-page target.

Type (Dropdown)

Sets which action is performed when the trigger fires. Choosing Menu Link & Scroll is what brings up the Link, Advanced Link Settings and Scroll sections below.

Event (Tab Select)

Sets which visitor interaction with the trigger layers fires the link.

Options:

• _Click: Fires the link when a trigger layer is clicked or tapped.
• _Enter: Fires the link when the pointer moves over a trigger layer.
• _Leave: Fires the link when the pointer moves off a trigger layer.

Trigger (Multi-select)

Selects the layer or layers that fire the link. The list is searchable, and any number of the current slide's layers can be selected.

Link Section (Expander)

In the Link section enter the address the link points at, either by typing it into the URL field or by inserting a placeholder from the Meta list.

Meta (Action Menu)

Opens a searchable list of WordPress meta placeholders. Choosing one inserts its tag into the URL field, and the tag is replaced with its real value on the published page.

Options:

• _{Link to current page {{current_page_link}}}: Inserts a tag that resolves to the URL of the page the module is on.
• _{Link to WP Home Page {{home_url}}}: Inserts a tag that resolves to the URL of the site's home page.
• _{Any custom meta tag {{meta:somemetatag}}}: Inserts a template for reading a custom meta field, with somemetatag replaced by the name of the field to read.
• _{The link to the post {{link}}}: Inserts a tag that resolves to the URL of the current post.
• _{Author Avatar URL(size in px) {{author_avatar:80px}}}: Inserts a tag that resolves to the URL of the post author's avatar image, at the pixel size given after the colon.
• _{Author Website {{author_website}}}: Inserts a tag that resolves to the post author's website URL.
• _{Author Posts Page {{author_posts}}}: Inserts a tag that resolves to the URL of the post author's posts archive.

URL (Text)

The web address the link opens. It can be typed directly, or filled with a placeholder from the Meta list.

Advanced Link Settings Section (Expander)

In the Advanced Link Settings section refine how the link's URL is built and where the link opens. The section is collapsed by default.

Anchor #ID at URL (Text)

An anchor ID appended to the link's URL, entered with a leading #.

Protocol (Dropdown)

Sets the protocol used for the link's URL.

Options:

• _http://: Applies the http:// protocol to the URL.
• _https://: Applies the https:// protocol to the URL.
• _Auto: Chooses the protocol automatically.
• _Keep: Keeps the protocol the URL was entered with.

Target (Dropdown)

Sets which browser window or frame the link opens in.

Options:

• _{Same Window}: Opens the link in the current window.
• _{New Window}: Opens the link in a new tab or window.
• _{Parent Window}: Opens the link in the parent of the frame the module sits in.
• _{Top Window}: Opens the link in the topmost window, replacing any frames.

Rel Attribute (Dropdown)

Sets the link's rel attribute, which tells search engines how to treat the link.

Options:

• _Follow: Lets search engines follow the link.
• _{No Follow}: Marks the link nofollow, asking search engines not to follow it.

Scroll Section (Expander)

In the Scroll section configure the smooth scroll that carries the page to the link's in-page target.

ID of Layer (Text)

The ID of the layer or page element the page scrolls to.

Offset (Number)

Offsets the scroll's end position from the target, so the page can stop short of it or travel past it.

Duration (Number)

Sets how long the scroll takes to complete.

Easing (Dropdown)

Sets the easing curve applied to the scroll, which controls how it accelerates and decelerates over its duration.

Options:

• _Back.easeIn
• _Back.easeOut
• _{Back.easeInOut}
• _{Bounce.easeIn}
• _{Bounce.easeOut}
• _{Bounce.easeInOut}
• _Circ.easeIn
• _Circ.easeOut
• _{Circ.easeInOut}
• _Cubic.easeIn
• _{Cubic.easeOut}
• _{Cubic.easeInOut}
• _{Elastic.easeIn}
• _{Elastic.easeOut}
• _{Elastic.easeInOut}
• _Expo.easeIn
• _Expo.easeOut
• _{Expo.easeInOut}
• _Linear
• _{Power0.easeIn}
• _{Power0.easeOut}
• _{Power0.easeInOut}
• _{Power1.easeIn}
• _{Power1.easeOut}
• _{Power1.easeInOut}
• _{Power2.easeIn}
• _{Power2.easeOut}
• _{Power2.easeInOut}
• _{Power3.easeIn}
• _{Power3.easeOut}
• _{Power3.easeInOut}
• _{Power4.easeIn}
• _{Power4.easeOut}
• _{Power4.easeInOut}
• _{QIcons.easeIn}
• _{QIcons.easeOut}
• _{QIcons.easeInOut}
• _Quad.easeIn
• _Quad.easeOut
• _{Quad.easeInOut}
• _Quart.easeIn
• _{Quart.easeOut}
• _{Quart.easeInOut}
• _Quint.easeIn
• _{Quint.easeOut}
• _{Quint.easeInOut}
• _Sine.easeIn
• _Sine.easeOut
• _{Sine.easeInOut}
• _{Strong.easeIn}
• _{Strong.easeOut}
• _{Strong.easeInOut}
• _Late
• _Late2
• _Late3

Timing Section (Expander)

In the Timing section set the pauses that surround the action, so that a sequence of actions can be staggered rather than all firing at once.

Delay (Number, milliseconds)

Sets how long to wait after the event fires before the link is followed. A value of 0 follows it immediately.

Next Delay (Number, milliseconds)

Sets a pause measured from this action, before the next action on the same trigger runs.

Simple Link Panel

The Simple Link panel configures a link that opens a chosen URL when the trigger fires.

Type (Dropdown)

Sets which action is performed when the trigger fires. Choosing Simple Link is what brings up the Link and Advanced Link Settings sections below.

Event (Tab Select)

Sets which visitor interaction with the trigger layers opens the link.

Options:

• _Click: Opens the link when a trigger layer is clicked or tapped.
• _Enter: Opens the link when the pointer moves over a trigger layer.
• _Leave: Opens the link when the pointer moves off a trigger layer.

Trigger (Multi-select)

Selects the layer or layers that open the link. The list is searchable, and any number of the current slide's layers can be selected.

Link Section (Expander)

In the Link section enter the address the link opens, either by typing it into the URL field or by inserting a placeholder from the Meta list.

Meta (Action Menu)

Opens a searchable list of WordPress meta placeholders. Choosing one inserts its tag into the URL field, and the tag is replaced with its real value on the published page.

Options:

• _{Link to current page {{current_page_link}}}: Inserts a tag that resolves to the URL of the page the module is on.
• _{Link to WP Home Page {{home_url}}}: Inserts a tag that resolves to the URL of the site's home page.
• _{Any custom meta tag {{meta:somemetatag}}}: Inserts a template for reading a custom meta field, with somemetatag replaced by the name of the field to read.
• _{The link to the post {{link}}}: Inserts a tag that resolves to the URL of the current post.
• _{Author Avatar URL(size in px) {{author_avatar:80px}}}: Inserts a tag that resolves to the URL of the post author's avatar image, at the pixel size given after the colon.
• _{Author Website {{author_website}}}: Inserts a tag that resolves to the post author's website URL.
• _{Author Posts Page {{author_posts}}}: Inserts a tag that resolves to the URL of the post author's posts archive.

URL (Text)

The web address the link opens. It can be typed directly, or filled with a placeholder from the Meta list.

Advanced Link Settings Section (Expander)

In the Advanced Link Settings section refine how the link is applied, how its URL is built and where it opens. The section is collapsed by default.

Link Type (Tab Select)

Sets how the link is attached to the trigger layers.

Options:

• _{JavaScript Listener}: Follows the link from a JavaScript event listener added to the trigger layers.
• _{HTML <a> Link}: Uses a real HTML anchor element for the link.

Protocol (Dropdown)

Sets the protocol used for the link's URL.

Options:

• _http://: Applies the http:// protocol to the URL.
• _https://: Applies the https:// protocol to the URL.
• _Auto: Chooses the protocol automatically.
• _Keep: Keeps the protocol the URL was entered with.

Target (Dropdown)

Sets which browser window or frame the link opens in.

Options:

• _{Same Window}: Opens the link in the current window.
• _{New Window}: Opens the link in a new tab or window.
• _{Parent Window}: Opens the link in the parent of the frame the module sits in.
• _{Top Window}: Opens the link in the topmost window, replacing any frames.

Rel Attribute (Dropdown)

Sets the link's rel attribute, which tells search engines how to treat the link.

Options:

• _Follow: Lets search engines follow the link.
• _{No Follow}: Marks the link nofollow, asking search engines not to follow it.

Timing Section (Expander)

In the Timing section set the pauses that surround the action, so that a sequence of actions can be staggered rather than all firing at once.

Delay (Number, milliseconds)

Sets how long to wait after the event fires before the link opens. A value of 0 opens it immediately.

Next Delay (Number, milliseconds)

Sets a pause measured from this action, before the next action on the same trigger runs.

Call Back Function Panel

The Call Back Function panel holds the JavaScript that runs when the trigger fires.

Type (Dropdown)

Sets which action is performed when the trigger fires. Choosing Call Back Function is what brings up the CallBack section below.

Event (Tab Select)

Sets which visitor interaction with the trigger layers runs the JavaScript.

Options:

• _Click: Runs the JavaScript when a trigger layer is clicked or tapped.
• _Enter: Runs the JavaScript when the pointer moves over a trigger layer.
• _Leave: Runs the JavaScript when the pointer moves off a trigger layer.

Trigger (Multi-select)

Selects the layer or layers that run the JavaScript. The list is searchable, and any number of the current slide's layers can be selected.

CallBack Section (Expander)

In the CallBack section use the JavaScript Commands field to enter the code that runs when the action fires.

JavaScript Commands (Text Area)

The JavaScript that runs when the action fires, entered as one or more commands.

Timing Section (Expander)

In the Timing section set the pauses that surround the action, so that a sequence of actions can be staggered rather than all firing at once.

Delay (Number, milliseconds)

Sets how long to wait after the event fires before the JavaScript runs. A value of 0 runs it immediately.

Next Delay (Number, milliseconds)

Sets a pause measured from this action, before the next action on the same trigger runs.

iOS Gyroscope Permission Panel

The iOS Gyroscope Permission panel requests permission to access the gyroscope on iOS devices, which motion-driven effects need before they can read the device's orientation. The panel carries only the Type and Event controls, with no Trigger picker and no Timing section.

Type (Dropdown)

Sets which action is performed. Choosing iOS Gyroscope Permission reduces the panel to the Type and Event controls alone.

Event (Tab Select)

Sets which visitor interaction requests the permission.

Options:

• _Click: Requests the permission on a click or tap.
• _Enter: Requests the permission when the pointer moves over the target.
• _Leave: Requests the permission when the pointer moves off the target.