Adding and Editing Buttons

Follow

 The button is one of the most important parts of your landing page. This is the moment where you land that all important conversion as your customer clicks that button to sign up for your campaign. Read on below on how to add a button to your page and how to edit your button to stand out.

 

Adding a Button to Your Landing Page

For a click-through page, drag and drop the Button buttonwidget.png widget to the area of the page where you’d like to add your button. The button will appear on your page with options to further edit.

adding_button_button_with_image_align.png


You can edit the size of your button by clicking and dragging on the small squares around the perimeter of your button.

The buttons that run along the top allow you to shift the alignment of your button in relation to the page section where you’ve placed it.

You can use multiple buttons on a single landing page and move them on the page as you’d like.

 

Editing Your Button with the Properties Tab

Click on your button to populate the Properties tab on the right side of the builder.

button-properties-location.png

The Properties tab has 5 sections that allow you to further edit your button.

adding_button_properties.png

The Geometry Section

  • 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 in relation to the Left of the page and the Top of the page.

 

The Click Action Section

adding_button_click_action.png

The CLICK ACTION section is the call to action center for your button.

The Action drop-down menu gives you the options for your click action. Select the option you’d like to use for an outside URL, or else set up your button to send an email to the address of your choice, or call a phone number of your choice.

adding_button_click_action_target_ddmenu.png

The URL form field and Target drop-down menu determine the link where you’d like to send your characters, and where you want the new page to appear for the customer.

click-action-composite.png

These two fields will change depending on what option you’ve selected in the Action menu.  

adding_button_click_action_send_email.png

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

 

The Button Label Panel

adding_button_button_label.png

The BUTTON LABEL section allows you to change all the text values on your button, including the size, font family, and message written. 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. Never use submit.  

Read more about Dynamic Text replacement:

 

The Appearance Section

The APPEARANCE section allows you to modify the look of your button in Up (normal), Hover (mouse is above the button), and Active (mouse is clicking the button) states.

adding_button_appearance.png


If you edit the look of the button in the Up state, you can elect to have Unbounce automatically edit the appearance of your button in Hover and Active states for you, or you can remove the check mark beside Create appearance based on “Up” state to change the appearance manually for each of the other 2 states.

adding_button_appearance_hover.png


The Element Metadata Section

adding_button_element_metadata.png

The ELEMENT METADATA  section contains important information that’s unique to your button. The ID value is often required when you want to apply custom css, html, or scripts that apply to this specific button.


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

Was this article helpful?
19 out of 47 found this helpful