Use the Button element to add a button <button> to your layout.
Locating the button element
To find the Button 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 Button element.
The Button element includes the following fields:
Interaction
Button text - Add text to show on the Button
Title attribute - Add a title attribute
Type - Select the type of button
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.
Modifier and/or jQuery animation - Toggle, add or remove a modifier class on an element using on-click. For more information, see Add on-click interactivity to elements
Open modal - Link to open a modal
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
Custom style
Button style - Apply a Button custom style. For more information, see Creating custom styles.
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 the Button element to add a button <button> to your layout.
Locating the button element
To find the Button 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 Button element.
The Button element includes the following fields:
Interaction
Button text - Add text to show on the Button
Title attribute - Add a title attribute
Type - Select the type of button
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.
Modifier and/or jQuery animation - Toggle, add or remove a modifier class on an element using on-click. For more information, see Add on-click interactivity to elements
Open modal - Link to open a modal
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
Custom style
Button style - Apply a Button custom style. For more information, see Creating custom styles.
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