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 Links to Buttons
  5. Adding Click-to-Call Buttons
  6. Tracking Conversions Through Buttons

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 appearence of all buttons on your page at once using the Style Guide

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 appearence 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 size of the button. 
  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 refer to the different design states you can edit for your 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 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 button; update the following:
    1. Type or paste in the URL of the web page you wish to hyperlink.
    2. Select Target options, which impacts how visitors will be redirected to the outgoing link: either through the current window or a new window:
      Set-up outgoing link in Smart Builder.
      • Enable Conversion Tracking if you want to capture conversions any time a visitor clicks this button. 
  4. 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 button; a blank field will appear in the pop-up. 
  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.

Tracking Conversions Through Buttons

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. 


Do you agree or disagree with this statement: This article helped me find the information I needed quickly and easily.

Select an option and leave us some feedback in the comments:

Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply