Button
Element Overview
The Button Element allows you to link to both external and internal content. In addition to containing options to link the Button internally or externally, this element also offers the option to use it as a trigger for a Collapsed Row or Modal window.
Element Options
Type
Choose the Button type using this dropdown. “Standard” is selected by default, and will generally be the only Type available. However, it is possible for developers to add in more Types, so depending on which website you are editing, there could be more with options that are different in style or in terms of options than the Standard Type.
Button
Use this section to set and configure the link for the Button. Click “Add Button” (or “Edit Button” if the link has already been added) to find options for the Type of link (External, Internal, Collapse, or Modal), Link, Label, and Target.
Type
1. Use “External” for linking to content that exists on another website.
2. Use “Internal” for linking to content that exists within the website you are editing. When this option is selected, a “Link to Content” dropdown field will become available. Click on the dropdown to browse or search through the list of content that currently exists on the website. Choose which one you would like to link to.
3. Use “Collapse” to trigger a collapsed Row on the page, or a collapsed Component. To trigger a collapsed Row, ensure that in the Advanced options for the Row, an ID has been set for and that the Function has been set to “Collapse”. Within the Button Element, input the ID into the Collapse ID field so that he Button can identify and trigger the targeted Row to be revealed.
To trigger a collapsed Component, ensure that the Component has been loaded to the page using the Component Element and that the Advanced option “Collapse Component” has been checked.
Learn More About Choosing, Adding, and Editing Components
Input the button label text for when the collapsible element is hidden and shown (clicking will show/hide) in the “Show Label” and “Hide Label” fields.
4. Use “Modal” to trigger a Component in a modal window. Unlike the “Collapse” Button Type, the Component does not need to be added to the page itself. Input the text for the Button using the “Label” field.
Learn More About Choosing, Adding, and Editing Components
Style
The Button Element offers styling options based on Bootstrap’s predefined custom button styles. Eight styles are available: Default, Button – Default, Primary, Success, Info, Warning, Danger, and Link. Each of these can be customized via CSS.
Full Width Button
This option will make the button responsively span the full width of the Column it is contained within.
Element Style Options
Every Element has a standard set of style options available to it that allow for margins, padding, background color, CSS classes, and more to be set.