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.
Button element
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.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
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