Buttons make it easy for your visitors to engage with your page. Set up conversion tracking, embed outgoing links, and create an engaging call-to-action experience with your page visitors.
This article will explain how to add and edit buttons in Smart Builder, including:
- Adding Buttons to Smart Builder
- Editing Button Styles & Designs
- Updating Button States
- Adding Web Links to Buttons
- Adding Click-to-Call Buttons
- Send Emails via Button-Click
- Anchor Links in Smart Builder
- Tracking Button Clicks as Conversions
Adding Buttons to Smart Builder
Buttons exist in different section templates within Smart Builder.
The placement of buttons on the page depends on the layout and style of the section template (Hero section, Form section, etc.).
Here is an example of a Hero section, with a button on the left:
To add a button,
- Navigate to your landing page in the Smart Builder.
- Hover your cursor over an existing section (or near where you'd like to add your new section).
- Locate the plus
icon that appears beneath the existing section.
- Select a section that includes a button:
Changing an Existing Element to a Button
In Smart Builder, you can swap any existing elements on your page for other elements instead.
For example, you can replace an image with a button instead.
See our documentation to learn more about changing elements on your Smart Builder page, or, follow these instructions:
- Single-click on the element you want to change with a button.
- Click the Change Element
icon.
- A drop-down menu will appear with different element options to swap the existing one with.
- Under the CTA & Links section, select Button:
- The button will appear on the landing page:
Editing Button Styles & Designs
You can adjust the button's font style, font size, and colors, or add borders and padding to the button.
Either edit a single button on your page or edit the appearance of all buttons on your page at once using the Style Guide.
To link to other elements/sections on the page, see setting up anchor links.
Edit a Single Button on your Page
- Click the button in Smart Builder to toggle additional formatting settings.
- Click the pen icon
to launch the Design Settings.
- A window will appear where you can update the appearance of the button as-is:
You can update the following:- Font styles for the button,
- Background color,
- Text color, and
- Borders and padding.
- Borders: Add a border to your button, and adjust the color, style, and width of the border.
- Padding: Add space around the text within the button; by default, this will increase the size of the button.
- Click the
button at the top of the Design Settings pop-up to finalize these changes.
- Be sure to Save the changes when you're happy with the appearance of your button.
See the next section of this documentation to learn more about the Hover or Active states.
Update all Buttons using the Style Guide
- Navigate to the Style Guide
within the left-hand side menu of Smart Builder.
- Scroll down the Button section.
- You can update the following:
- Font styles for the button,
- Background color,
- Text color, and
- Borders and padding.
- Borders: Add a border to your button, and adjust the color, style, and width of the border.
- Padding: Add space around the text within the button; by default, this will increase the button's size.
- Be sure to Save the changes when you're happy with the appearance of your button.
See the next section of this documentation to learn more about the Hover or Active states.
Updating Button States
Button states are the different design states that let your visitor know how they've interacted with the button.
From the Style Guide , or the Design Settings
, locate the different tabs for the Hover or Active states for the button.
Here are the different button states available in Smart Builder:
- Regular: how the button appears on the landing page as-is. This is how the button appears without clicking or hovering over it.
- Hover: how the button appears when you place your mouse over the button.
- Active: how the button appears if a visitor clicks the button.
- Choose a button state at the top of the Design Settings pop-up.
- Update text color, background color, padding, or border depending on the button state:
To test the Hover state, move your mouse over the button while in Smart Builder. To test the Active state, click the button.
Be sure to Save your page when you're happy with these changes.
Adding Web Links to Buttons
- Click the button in Smart Builder to toggle additional formatting settings.
- Select the link
icon, and the Link Settings pop-up will appear.
- Select the Web Address option.
- Enter the URL of the web address.
- Update the Target to either Open in current window or Open in new window:
-
- Enable Conversion Tracking if you want to capture conversions whenever a visitor clicks this button.
-
- Click the close
icon to update the button with this link.
Be sure to Save your page to finalize the changes.
Adding Click-to-Call Buttons
- Click the button in Smart Builder to toggle additional formatting settings.
- Select the link
icon, and the Link Settings pop-up will appear.
- Select the Phone option.
- Starting with the country calling code, type in the phone number you wish page visitors to call:
- Enable Conversion Tracking if you'd like to capture conversions any time a visitor clicks this button and makes a phone call.
- Click the close
icon to update the button with this phone number.
Be sure to Save your page to finalize the changes.
Note:
The click-to-call feature only works on devices that can place a phone call.
Send Emails via Button-Click
- Click the button in Smart Builder to toggle additional formatting settings.
- Select the link
icon, and the Link Settings pop-up will appear.
- Select the Email option.
- Enter your email address in the Mail To: field:
- Enable Conversion Tracking if you'd like to capture conversions any time a visitor clicks this button and makes a phone call.
Be sure to Save your page to finalize the changes.
Anchor Links in Smart Builder
You can set up a button in Smart Builder so it links to different sections on your page; this is known as an anchor link.
See the complete documentation to learn more about Setting up Anchor Links in Smart Builder.
Tracking Button Clicks as Conversions
Toggle the slider button to enable conversion tracking on a link nested within a button:
This will automatically track the button click action as a conversion.
To track the number of conversions on your landing page, navigate to the Page Overview. For form submission entries, navigate to the Leads table.