Register

What is a Button and how can I use it to design my landing page?

Their usage is far from necessary, but they usually provide an efficient and striking way for your visitors to interact with your landing page and engage in the exact way and place that you want them to.

After you start defining your landing page's structure you should also begin adding elements to it. One of the available element types that you can use in your landing pages is the Button.

Let's see how you can add one to your structure: 

 

A. Adding a button

1. Click on the Elements button, located on the left side of your Landing Page Designer page.
What_is_a_Button_1.png

2. Drag-n'-drop the Button element, from the Elements list to a container inside the Designer page.
What_is_a_Button_2.png

3. Click on the Button that you just added inside the container.
What_is_a_Button_3.png
Its Settings instantly become available on the left side of the Designer page.
 
B. Adding detail to a button

1. Click on the Background Color option, to choose a color for the area behind your button, out of a palette.
What_is_a_Button_4.png
Keep in mind that the background of buttons is usually left transparent, but the option to change this is here in case you ever need it.

2. Click on the Button Color option, to pick the color for the main body of your button out of a palette.
What_is_a_Button_5.png

3. Click on the Label Color option, to pick the color for the button text out of a palette.
What_is_a_Button_6.png

4. Click on the Border Color option, to pick the color of the button's border out of a palette.
What_is_a_Button_7.png

5. In the designated Button Link area, fill in the web address to which this particular button will lead.
What_is_a_Button_8.png

Bear in mind that you choose whether the link will open in the same window, or in a new one, by checking or un-checking the Open in new window box.
What_is_a_Button_20.png

6. In the designated Label area, type in a label for your button.
What_is_a_Button_9.png
Make sure that the result is enticing and click-worthy!

C. Working with button fonts

1. Click on the Font Family drop-down menu to pick a different font for your button label.
What_is_a_Button_10.png

2. Click on the up/down arrows on the Font Size option, to change the size of the font on your button label.
What_is_a_Button_11.png
Alternatively, you can type the desired font size number directly into the area located next to the arrows.

3. Toggle the different
 Decorations buttons to change the styling of your button label.

What_is_a_Button_12.png
Your options vary between any combination of Italic, Bold and Underlined text. A blue option indicates a styling already engaged, whereas gray button means the styling is not currently applied to the text.

D. Rearranging a button

1. Click on the Alignment drop-down menu to change the alignment of your button inside the container.
What_is_a_Button_13.png


2. Click on the Button Width drop-down menu to choose the width that the button will take up inside the container.
What_is_a_Button_14.pngAlternatively, you can fill in the desired width number directly in the area located next to the arrows.


3. Click on the up/down arrows on the Label Padding option to change the height that the button will take up inside the container.
What_is_a_Button_15.pngAlternatively, you can fill in the desired height number directly in the area located next to the arrows.


4. Clicking on the lock icon next to the Label Padding reveals additional Padding options: PaddingTop, Padding Bottom, Padding Left and Padding Right. As before, use the  up/down arrows (or the typing option) to specify the amount of padding at the Top, Bottom, Left and Right of your Button.
What_is_a_Button_16.png

5. Click on the up/down arrows on the Margin option to change the distance between the container and button boarders.
What_is_a_Button_17.png
You can also type the desired margin number directly into the area located next to the arrows. Keep in mind that the margin is calculated based on the current Alignment of the button.

6. Click on the up/down arrows on the Border Width option to change the width of the button's border.
What_is_a_Button_18.png
Alternatively, you can fill in the width number directly in the area located next to the arrows.

7. Click on the up/down arrows on the
 Corner Radius option to morph the shape of your button between a rectangle and a square.

What_is_a_Button_19.png
You can also type the desired radius number directly in the area located next to the arrows.