Use a Slide element to create a slide within your slider. The Slide acts as a container for your slide content, which you can populate using Layout and content elements.
Important
Slide elements must be placed within a Slider container. Find more information, see Slider container element.
Slide elements have padding applied based on the inner gutters within the responsive grid settings. If additional padding is required, you would need to add another element such as a Container inside of your slide and apply the required padding to that element.
Locating the slide element
To find the Slide element:
Navigate to a component or a template with the Layout canvas
Click the + button on the Layout canvas
Within the Elements tab, look for the Slide element.
The Slide element includes the following fields:
Link and interaction
Title attribute - Add a title attribute for your link
Type - Select the type of link
Internal page - Link to an internal page
Link to page - Type the name of the internal page you are linking to.
URL - Link to a URL
URL - Enter the full URL of an external web page.
Anchor - Link to a page Anchor
Anchor - Enter an Anchor ID. You do not need to include the #.
Back to top - Add a smooth scroll back to the top of the page
Scroll to - Add a smooth scroll to a jQuery selector
Scroll target - Enter a jQuery selector to target an element to scroll to.
Scroll duration - Enter the time it will take for the scroll to complete in milliseconds.
Offset type
Offset against element - Offset the top of completed scroll position by the height of an element. Target the element using a jQuery selector.
Offset in PX - Offset the top of completed scroll position in pixels.
Trigger ID - Enter the ID of the modal trigger, this is the ID of this element
Adding a trigger ID will allow for the focus will return to the body when the modal closes.
Modal ID - Enter the ID of the modal to open
Target window - Select the target window for the link.
Custom style
Layout style - Apply a Layout custom style to the Slide.
Match heights
Match heights - Match the height of the element using:
None - Removes the match heights at the specific breakpoint
Class - Match the height of the element with another element with the same class name
Children with class - Match the heights of any child elements with the same class name
Child element - Match the heights of all child elements of the same type.
Use a Slide element to create a slide within your slider. The Slide acts as a container for your slide content, which you can populate using Layout and content elements.
Important
Slide elements must be placed within a Slider container. Find more information, see Slider container element.
Slide elements have padding applied based on the inner gutters within the responsive grid settings. If additional padding is required, you would need to add another element such as a Container inside of your slide and apply the required padding to that element.
Locating the slide element
To find the Slide element:
Navigate to a component or a template with the Layout canvas
Click the + button on the Layout canvas
Within the Elements tab, look for the Slide element.
The Slide element includes the following fields:
Link and interaction
Title attribute - Add a title attribute for your link
Type - Select the type of link
Internal page - Link to an internal page
Link to page - Type the name of the internal page you are linking to.
URL - Link to a URL
URL - Enter the full URL of an external web page.
Anchor - Link to a page Anchor
Anchor - Enter an Anchor ID. You do not need to include the #.
Back to top - Add a smooth scroll back to the top of the page
Scroll to - Add a smooth scroll to a jQuery selector
Scroll target - Enter a jQuery selector to target an element to scroll to.
Scroll duration - Enter the time it will take for the scroll to complete in milliseconds.
Offset type
Offset against element - Offset the top of completed scroll position by the height of an element. Target the element using a jQuery selector.
Offset in PX - Offset the top of completed scroll position in pixels.
Trigger ID - Enter the ID of the modal trigger, this is the ID of this element
Adding a trigger ID will allow for the focus will return to the body when the modal closes.
Modal ID - Enter the ID of the modal to open
Target window - Select the target window for the link.
Custom style
Layout style - Apply a Layout custom style to the Slide.
Match heights
Match heights - Match the height of the element using:
None - Removes the match heights at the specific breakpoint
Class - Match the height of the element with another element with the same class name
Children with class - Match the heights of any child elements with the same class name
Child element - Match the heights of all child elements of the same type.
Site Studio