Buttons play a crucial role in driving landing page visitor actions and conversions. This guide will walk you through every aspect of creating, formatting and setting actions for buttons on your landing pages.
How to Add a Button
Follow the below steps to properly add a button to your landing page.
- Open your landing page in the visual editor.
- When inside the visual editor, click on Elements from the left-side panel of your screen.
- From the list of available elements, drag and drop the Button element to the desired area of your landing page.
How to Delete a Button
If there is a specific button on your landing page that you are not pleased with, deleting it is pretty straightforward. Just select the button that you would like to delete and click the Delete button found on the quick toolbar that appears around the selected element.
Alternatively, you can select the desired element, and press the delete button on your computer keyboard.
How to Change the Button Text
Follow the below steps to properly add a button to your landing page.
- Open your landing page in the visual editor.
- When inside the visual editor, click on the desired button and head to the right-side panel of your screen.
- Go to Button properties and update the button text to the one you like.
How to Format a Button
Enhancing your button’s visual appearance is fairly simple with Landerlab’s visual editor. It allows you to quickly change and format your buttons to your desired outcome in a snap.
Under the button element settings, you will be able to change the following visual properties:
- Button type: No background with borders, Outlined and Filled.
- Optionally you can set the button to full width
- Button text and background color
- Button element horizontal and vertical alignment.
- Button text font, size, text alignment, weight, letter spacing, and letter case.
- Button border width, color and type (solid, dashed, dotted)
- Button corner radius.
- Button spacing (aka. Padding) and margin.
- Button size and opacity.
Let’s go over a practical example.
Example: Let’s make the following changes to the example button. Change the color to a different shade of blue, make the text thicker, make the button padding bigger either vertically and horizontally, and lastly align the button to the left.
Follow the below steps to customize the button following the requirements in the above example:
- Open your landing page in the visual editor.
- When inside the visual editor, select the desired button, and head to the right-side panel of your screen where you can set your button properties.
- Go to the Appearance settings and change the background color to a different color.
- Scroll to the text settings and increase the Font Weight to make the button text thicker.
- Scroll to the spacing settings and change the top, bottom, left and right spacing.
- Scroll to the element positioning settings and set the element alignment to Left.
How to Set Button Action
You have quite a few options when it comes to setting your button actions with Landerlab’s visual editor. While in most cases, button actions route to a specific link, a button action can automatically scroll to a specific element, or open a popup modal.
Button Action Go to URL
Follow the below actions to add a URL to your buttons.
- Open your landing page in the visual editor.
- When inside the visual editor, select the desired button, and head to the right-side panel of your screen where you can set your button properties.
- Under the Click Action select Go to URL from the available options
- Add the destination URL under the Go to URL settings and you’re done.
Alternatively, you can click on Open in New Tab to change the button behavior to open the destination URLs in a new browser tab.
If needed, you can also track button clicks as conversions by enabling “Track clicks as conversion” under your button Click Action settings.
Button Action Go to Element
Follow the below actions to add a shortcut to a specific page element to your buttons.
- Open your landing page in the visual editor.
- When inside the visual editor, select the desired button, and head to the right-side panel of your screen where you can set your button properties.
- Copy the element you want to jump to when the button is clicked.
- Under the Click Action select Go to Element from the available options
- Paste the element id copied in step 3 in the Go to Element field.
If needed, you can also track button clicks as conversions by enabling “Track clicks as conversion” under your button Click Action settings.
Button Action Go to PopUp/Modal
Follow the below actions to add a shortcut to a specific page element to your buttons.
- Open your landing page in the visual editor.
- When inside the visual editor, select the desired button, and head to the right-side panel of your screen where you can set your button properties.
- Make sure your landing page has a PopUp. Click here to learn how to create a PopUp.
- Under the Click Action select Go to PopUp/Modal from the available options
- Select the desired PopUp from the list of available popups and you’re done.
Alternatively, you can create a Popup from the Click Action settings of your button in case you don’t have a popup, or you would like to create another one.
If needed, you can also track button clicks as conversions by enabling “Track clicks as conversion” under your button Click Action settings.