Button options

Last Updated: 30.09.2019

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

You can choose one of the following actions after clicking the button:

  • redirection to any URL address;
  • redirection to another landing page;
  • scroll to the selected section;
  • displaying a lightbox;
  • file download.

In this manual, you will learn how to add a button to your landing page, edit it and set the action after its click.

I. Adding button

Drag and drop the button widget form the left side of the editor to the chosen position in the working area of your landing page.

button_widget_EN

After adding the button you can edit its appearance.

II. Editing button

Click on the button to select it. Its handle menu will be displayed and you will see the side panel with editing options on the right side of the editor.

Button_EN1

By clicking on points on the frame, you can change the button size as you like. Other icons will allow you to change its position, enter the button settings, copy the button, move it to the top/bottom and remove the button. In the side panel on the right, you will find additional options for editing the button.

Sidebar button’s options

In the button’s options, you can adjust its size and position (1), change the label (2), copy the button ID (you can use it for custom scripts) or add a class (3). You can choose whether to hide the button on any view (4) – by default, after adding, the button is visible in both desktop and mobile views.

button_options_EN

A. Typography Tab

In this tab you can change the font, its size or color, adjust the height of the text line, select styles and aligning.

button_typography_EN

B. Background Tab

You can switch on or off the button background or choose the background style: solid color, gradient or image.

button_background_EN

C. Border Tab

You can switch on or off the button border and then adjust its parameters, such as thickness, line style, and color.

button_border_EN

D. Rounded corners Tab

You can switch on or off the rounded corners and set its value.

button_roundedcorners_EN

E. Text shadow Tab

You can switch on or off the text shadow and sets its parameters.

button_textshadow_EN

F. Shadow Tab

You can switch on or off the button shadow and sets its parameters.

button_shadow

III. Button settings

To enter the button settings, select it and click on Settings in its handle menu.

1. Type Tab

In the Type tab, you will find actions to choose from after clicking the button.

A. Redirect

In the field Target URL insert the URL address where your users are supposed to be redirected after clicking on the button.

Optionally, you can select checkboxes (2):

  • Track click as landing page conversion – thanks to this, clicks on the button will be visible in the statistics panel and counted as a conversion on a given LP.
  • Open in the new tab – opens the redirect page in a new browser tab.
button_redirect_EN

B. Redirect to landing page

Select the target landing page from the drop-down menu (1). Optionally, you can mark checkboxes Track click as conversion (2), Transfer lead data (3) and Open in new tab (4).

button_redirectLP_EN

C. Download a file

To share a file to the user after clicking on the button, type the URL where the file is stored (1), or upload a file from the computer (2) (up to 16 Mb).

button_file_EN

D. Section link

It allows you to create a smooth scroll to the target section. To use this action, you must have at least two sections on a given landing page.

button_section_EN

E. Show lightbox

Clicking on the button will display a lightbox – you can choose a previously created lightbox from the drop-down list (1), or make a new one by clicking the + button (2).

button_lightbox_EN

2. Templates Tab

You will find here ready to use button templates; to activate a given template, click on it and save the changes.

button_templates_EN

3. Settings Tab

You can change here the label displayed on the button (1) and add Javascript code that will activate the onClick event (2) after clicking the button.

button_settings_onclick_EN

IV. FAQ

How to crate click-to-call button?

To create a button that when clicked automatically calls out the default email app, go to the buttons settings and select Type > Redirect tab. Enter your email address in the Target URL field, in the following format ‘mailto:myemail@mydomain.com’ and click Save and close.

How to create button with ‘mailto’ link?

To create a button that when clicked automatically calls out the default call app, go to the buttons settings and select Type > Redirect tab. Enter your phone number in the following format: ‘tel:606600600’ and click Save and close.

How can I add two lines of text in the button? 

To add two lines of text in the button, separate the text lines with tag
in the Label field.

button_label_EN

Note that the final effect won’t be visible in the editor – two separate lines will show on the published landing page.

Was this article helpful?

Can’t find what you need?

Let us help you!
Send us a message
We are using cookies for analytical purpose. Learn more.