How can we help you?
If you like watching video tutorials, check out our latest one:
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.
Table of Contents:
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.
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.
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.
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.
B. Background Tab
You can switch on or off the button background or choose the background style: solid color, gradient or image.
C. Border Tab
You can switch on or off the button border and then adjust its parameters, such as thickness, line style, and color.
D. Rounded corners Tab
You can switch on or off the rounded corners and set its value.
E. Text shadow Tab
You can switch on or off the text shadow and sets its parameters.
F. Shadow Tab
You can switch on or off the button shadow and sets its parameters.
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.
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.
NOTE: You cannot use the ‘callto’ and ‘mailto’ links at the same time with Track click as landing page conversion option – the link will not work properly.
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).
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).
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.
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).
2. Templates Tab
You will find here ready to use button templates; to activate a given template, click on it and save the changes.
3. Settings Tab
How to create button with ‘mailto’ link?
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:email@example.com’ and click Save and close.
How to crate click-to-call button?
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.
Note that the final effect won’t be visible in the editor – two separate lines will show on the published landing page.