help center

Add a button

Buttons are essential to every website and therefore quite important to implement correctly. This article will take you through all the necessary steps so you can successfully add them to your website and make sure they’re doing what they’re supposed to do.

light-bulb-shine

This article will help you:

  • How to add a button
  • How to style a button

The first step is to create and edit a case in your editor. If you don’t know how to do this, you can follow this article about how to add a case .

  1. Once the editor has loaded you’ll have to click the + button to add an element to your page.
  2. After clicking the + button you’ll get a complete overview of all the elements that can be added to your page. Drag the Button to the part of the page where you want to activate it.

    alert-triangle Please note that you have to click the pop-up you created to access the options on the left.

The next step is to choose what your button needs to redirect your visitors to and the styling of it.

  1. Adding a link to the button enables you to redirect your visitors to another page on your website.

Once you select next step you’ll get to customize the button. The button label is the text that will appear on the button. The link is the link of the page you want to redirect your visitors to.

  1. The email button will redirect your visitors to their mailing program so they can instantly send you an email inquiry. You’ll be able to customize the button in the next step. Enter the text you would like to appear on the button in the button label field. The email field enables you to decide which email address the email should be sent to and in the subject field you can choose what the subject line of their email should be.
  2. The phone button is useful to add to websites with a lot of mobile traffic. This button makes it possible for your visitors to call you right away when they tap it. Just enter the label and the phone number in the next step and you’ll be set up to receive their phone calls.
  1. The next step is styling your call-to-action button. Click the button and select the styling tab in the top right corner.

Every element has 5 key styling options:

  1. Background allows you to choose a specific background color or image to spice up your element.
  2. Typography allows you to change fonts, font sizes, color and so on so you can your text with the rest of your website.
  3. Decorations enables you to add borders to your element and change the radius of it. You can also add a shadow to your element in this part of the editor.
  1. Dimensions gives you the option to change the width and height of your element. Another feature of this part of the styling is the option to customize the padding and margin of your element.
  2. Padding enables you to change the position of for example the text of a certain element within the element itself.

  3. Margin on the other hand enables you to change the position of the complete element.

  4. Position lets you decide the position your element towards other elements. A static position keeps the element in its place while an absolute position moves is to the back and puts the other elements on top of it. We recommend using static positions for elements in a pop-up.

Your button will be ready once you’ve finished styling it. The only thing that’s left for you to do is to add it to a journey .