Button options

Last updated: September 3, 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.

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).

Context menu

You can change the size of the button by clicking on the dots on the frame (1). The remaining icons let you change its position (2), enter the button settings (2), duplicate it (4), move it to the top/bottom (5), and delete the button (6).

Widget toolbar

In the widget toolbar, you can go to the settings or select the style of the button, turn on/off mobile or desktop view (by default, the button is visible in both views), change the button size, and edit the text displayed on the button (label).

Underneath, you will find tabs with some additional options. You can turn them on or off using the slider located in the right-hand corner of each tab (except Typography and Other tabs).

  • Typography – change the font and its size and color, adjust the text line’s height, select styles, and alignment. You can also add Google fonts or your own ones.
  • Background – choose the style of the background: full color, gradient, or image.
  • Border – adjust the parameters of the frame: thickness, line style, and color.
  • Rounded corners – set specific values to round corners (the value can be the same for all corners or different for each).
  • Text shadow – control the text shadow settings.
  • Shadow – set values for the shadow of the button.
  • Other – adjust button position, copy the button ID or add a class.

Button settings

You can enter the button settings from the context menu (1) or the toolbar (2).

There are two tabs:

  • Type
  • Settings

Type

  • Redirect – enter the URL to which the user will be redirected after clicking on the button. Remember that the redirection URL should start with the https:// prefix. 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.
  • Redirect to landing page – select a target landing page to which the user will be redirected after clicking the button.
  • Download file – insert a link to your file or upload a file to share a file with a user.
  • Section link – select a section to which your landing page will be scrolled smoothly after clicking on the button.
  • Show lightbox – choose a lightbox to be displayed after clicking on the button.

In the end, remember to save and close.

Settings

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.

In the end, remember to save and close.

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 Label field. You can do this either in the widget toolbar or in the Settings.

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

To learn more about effective Call to Action for your buttons, read our What Is Call To Action, Actually? article.

share

Was this manual helpful?