Button options

Last updated: May 17, 2021 Written by: Avatar Justyna
share
Table of contents
share
Table of contents

You can add a button to your landing page in the Landingi platform and specify what will happen when you click on it.

You can pick one of the following actions:

  • redirect to any URL;
  • redirect to another landing page;
  • scroll to the selected section of the landing page;
  • show pop-up or lightbox;
  • download a file.

In this guide, you will learn how to add a button to your landing page, edit and configure it.

Watch our video tutorial:

Add button

On the left side of the editor, find the Button widget, then drag and drop it into the active area of your landing page.

Edit button

Click on the button to start editing. You will see its context menu (1) and toolbar on the right side of the editor (2).

You can change the size of the button by clicking on the dots on the frame. The remaining icons let you change its position, enter the button settings, copy it, move it to the top/bottom, and delete the button. You can find more editing options in the widget toolbar on the right.

Widget toolbar

In the widget toolbar, you can change the size and position of the button (1), go to the settings or select the style of the button (2), edit the text displayed on the button (3), copy the button ID (may be useful for some additional scripts) or add a class (4) and choose whether to hide the button in one of the views (5). By default, the button is visible in the desktop and mobile view.

In the next part of the pane, you will find tabs with some additional options. You can turn each of them on or off using the slider located in the top right-hand corner of each tab – except for the Text tab.

A. Typography Tab

Here you can change the font and its size and color, adjust the text line’s height, select styles, and alignment.

B. Background Tab

Choose the style of the background — full color, gradient, or image.

C. Border Tab

Adjust the parameters of the frame — thickness, line style, and color.

D. Rounded corners Tab

Set specific values to round corners. The value can be the same for all corners or different for each.

E. Text shadow Tab

Here you control the text shadow settings.

F. Shadow Tab

Set values for the shadow of the button.

Button settings

You can access the button action settings using one of two steps.

Click on the button and enter the settings from the widget toolbar or the context menu that will appear directly above the button. Each time you enter the same settings pane.

1. Type Tab

Here you can select the type of action that will be activated when you click on the button. Remember: save your settings after each change.

A. Redirect

In the Target URL (1) field, enter the URL to which the user will be redirected after clicking on the button. Remember that the redirection URL should start with https:// prefix.

You can select two additional options (2):

  • Track click as landing page conversion – the clicks will be visible in the statistics panel and counted as conversions in the given landing page.
  • Open in a new tab – the redirect page will open in a new browser tab.

After clicking on Additional options (3), you can add UTM parameters to your URL. You can find out more about the UTM parameters here.

NOTE: You can't create a callto or mailto link simultaneously and check the option Track click as conversion – the link will not work correctly. You can read more about the click to call option here. See here how to create a link to send an email here.

B. Redirect to a landing page

Select the target landing page from the drop-down menu (1). You can also select Track click as conversion (2)*, Transfer lead data (3)*, and Open in a new tab (4).

*(2) and (3) available on the Automate plan and higher.

C. Download a file

To share a file with a user, insert a link to your file (1) or upload a file directly from your computer (2) (file up to 16 Mb).

D. Section link

You need to create a landing page with at least two sections. Choose section. Now, when you click on the button, your landing page will be scrolled smoothly to the section you have chosen.

E. Show lightbox

When you click on the button, a lightbox is displayed – you can choose a lightbox you have already created from the drop-down list or create a new one by clicking on the + button.

2. Settings Tab

You can change the text displayed on the button and add a Javascript code to activate the onClick event when you click on the button.

How do you create two lines of text on a button?

You can add another line of text by dividing one line from the other with the <br> tag in the Content field. You can do this either in the widget toolbar or by clicking Settings in the context menu.

 

Remember! The final result will not be visible in the editor – two lines will appear on the button after the landing page is published.

share

Was this manual helpful?