Adding and Editing Buttons in Smart Builder

Follow

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: 

  1. Adding Buttons to Smart Builder
  2. Editing Button Styles & Designs
  3. Updating Button States
  4. Adding Web Links to Buttons
  5. Adding Click-to-Call Buttons
  6. Send Emails via Button-Click
  7. Anchor Links in Smart Builder
  8. 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:

A red arrow pointing to a button within a Hero section.

To add a button,

  1. Navigate to your landing page in the Smart Builder.
  2. Hover your cursor over an existing section (or near where you'd like to add your new section).
  3. Locate the plus icon that appears beneath the existing section.
  4. Select a section that includes a button:
    Gif demo of a user adding a section template that contains a blue 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:

  1. Single-click on the element you want to change with a button. 
  2. Click the Change Element  icon.
  3. A drop-down menu will appear with different element options to swap the existing one with.
  4. Under the CTA & Links section, select Button:
    Red arrow pointing to 'Button' from the list of Change Element suggestions
  5. The button will appear on the landing page:
    Gif demo of user changing the text element on the page to a button.

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

  1. Click the button in Smart Builder to toggle additional formatting settings. 
  2. Click the pen icon to launch the Design Settings
  3. A window will appear where you can update the appearance of the button as-is:
    Button Design Settings window in Smart Builder.
    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. 
        Gif demo of user updating the style (font style and padding) to a button.
  4. Click the button at the top of the Design Settings pop-up to finalize these changes. 
  5. 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

  1. Navigate to the Style Guide style-guide-icon within the left-hand side menu of Smart Builder.
  2. Scroll down the Button section.
    Design Settings for a button within the Smart Builder Style Guide.
  3. 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. 
  4. 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 style-guide-icon, 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. 
  1. Choose a button state at the top of the Design Settings pop-up.
  2. Update text color, background color, padding, or border depending on the button state: 
    Gif demo of user updating the Hover state design for a button, then hovering over the button to test.

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

  1. Click the button in Smart Builder to toggle additional formatting settings. 
  2. Select the link  icon, and the Link Settings pop-up will appear.
  3. Select the Web Address option.
  4. Enter the URL of the web address.
  5. Update the Target to either Open in current window or Open in new window:
    Set-up outgoing link in Smart Builder.
      • Enable Conversion Tracking if you want to capture conversions whenever a visitor clicks this button. 
  6. 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

  1. Click the button in Smart Builder to toggle additional formatting settings.
  2. Select the link link-icon.png icon, and the Link Settings pop-up will appear.
  3. Select the Phone option.
  4. Starting with the country calling code, type in the phone number you wish page visitors to call:
    Click to call button in Smart Builder.
    • Enable Conversion Tracking if you'd like to capture conversions any time a visitor clicks this button and makes a phone call. 
  5. 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

  1. Click the button in Smart Builder to toggle additional formatting settings.
  2. Select the link link-icon.png icon, and the Link Settings pop-up will appear.
  3. Select the Email option.
  4. Enter your email address in the Mail To: field: 
    Mail-to button in Smart Builder.
    • 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:Slider button highlighted in blye for conversion tracking.

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.