Adding and Editing Buttons in the Classic Builder

Follow

 Buttons are one of the most versatile tools to engage your page visitors. Page visitors can click buttons to complete the desired conversion action, such as signing up for a campaign, completing a form, and so on.  

This article will explain how to add buttons in the Classic Builder, including:

  1. Setting up Button Click-Actions
  2. Styling & Editing Your Button with the Properties Tab,using the
    1. The Geometry Section
    2. The Click Action Section
    3. The Button Label Panel
    4. The Appearance Section
    5. The Element Metadata Section

For a quick demo, see this video:

Adding Buttons to the Classic Builder

Navigate to your landing page in the Classic Builder. Next,

  1. Navigate to the Widget Panel on the left-hand side.
  2. Drag and drop the Button buttonwidget.png widget to the section of the page where you'd like the button to appear:
    Annotated image of red arrow pointing to the button (B) widget within Widget Panel.
  3. The default button will appear on your page:
    A button with the label 'Button' on the landing page in the Classic Builder.

Setting up Button Click-Actions

A click action - in short - is the action that follows when your page visitor clicks on the button from your published page.

To set up a custom click-action,

  1. Select the button.
  2. Click the Properties tab on the right-hand side of the Classic Builder.
  3. Scroll down to the Click Action section:
    Annotated image of red arrow pointing to Click Action section on the right-hand side of the Classic Builder.

By default, all new buttons by default are set to Go to URL; however, selecting the drop-down menu will reveal other actions:
A drop-down menu featuring the different Click Action options.

Here are the following Click Action options:

Go to URL: The visitor will be redirected to a URL of your choice.

  • Tick the option Pass through URL parameters if there are custom URL parameters or referral sources you wish to pass through with the button-click. 
  • The Target field controls how the page visitor is redirected, e.g., New tab or window will launch the URL in a new tab, whereas Same tab or window will redirect the page visitor from your landing page to the chosen URL.

Here is an example of a button navigating to unbounce.com, with the target set to New tab or window

Click action example of button redirecting to unbounce.com with the target set to 'New tab or window'

Go to URL in a Lightbox: The chosen URL will load in a pop-up window known as a lightbox. See our documentation to learn more: Adding a Lightbox.

Go to URL in a Lightbox: A lightbox will appear when a page visitor clicks the button. Inside the lightbox will be the live webpage of the URL. 

Call A Number: This will initiate a phone call to the selected number.

  • The Call A Number feature will only work if the device the page visitor is using is capable of phone calls, for example, a mobile device or desktop system with a tool like FaceTime.

Send an E-mail: If available, the button will open a supported mail application (e.g., Mozilla Thunderbird, iCloud Mail) with a new e-mail.

Be sure to Save your page while you continue to edit the button. 

Styling & Editing Your Button with the Properties Tab

In addition to setting the button's action, you will want to customize its appearance.

Single-click the button.

The Properties tab contains five sections that allow you to edit your button further: Geometry, Click Action, Button Label, Appearance, and Element Metadata. 

The Geometry Section

The Geometry section gives you control over the size of your button, and its position on the landing page. 

  • Use the Size fields to enter an exact numerical value in pixels for the Width and Height dimensions of your button.
  • Use the Position fields to enter an exact numerical value in pixels to move your button to the Left of the page and the Top of the page.

Alternatively, you can also edit the size of your button by dragging the small squares around the perimeter of your button, or dragging the button across your page to change its placement:

Gif demo of a user dragging the width of the button left and right, and moving the button across the page.

The Click Action Section

As mentioned above, Setting up Button Click-Actions, the Click Action section, is the call-to-action center for your button.

Want to know more about how to use the Click Action panel? Check out these links:

The Button Label Panel

The Button Label section allows you to change all the text values on your button, including text size, font family, and more:

Changing the button label to 'Click here' instead of 'Button'.

More importantly, it allows you to set up Dynamic Text values through your page's URL to increase message match on your PPC campaigns.  

Pro Tip:

You'll always want to change the text on your button label to something customized for your campaign. As mentioned in our blog, avoid using the term 'submit' as the button label.  

Read more about Dynamic Text replacement:

The Appearance Section

The Appearance section allows you to modify the look of your button, such as text color, background color, border, and more.

You can select the Style of your button using the drop-down menu, for example, a Solid Color, Gradient, or Image

You can also update the different button states:

  • Up (normal), 
  • Hover (mouse is above the button), and 
  • Active (mouse is clicking the button) states.

If you edit the look of the button in the Up state, you can select to have Unbounce automatically edit the appearance of your button in Hover and Active states for you, or you can remove the checkmark beside Create appearance based on Up state to change the appearance manually for each of the other two states:

Here is a gif example of updating the button style:

Gif demo of a user updating the background styles of the button.

The Element Metadata Section

The ELEMENT METADATA  section contains important information that's unique to your button. The ID value may be required when you want to apply custom CSS, HTML, or scripts that apply to this specific button:

Button Element Metadata section within the Properties panel.

Knowing details about the element metadata comes in handy if you plan to set up anchor links.

Want to do more with your buttons? Check out the following links: