Buttons are great for adding functionality and catching your leads' attention. Here's everything you need to make yours stand out. To start, drag the button element into place by selecting it from the elements menu.

Once placed, click the element to open its settings on the right, where you can customise its appearance and functionality to suit your design. The settings are split into three categories.

General Settings

Element Name

The editing toolbar for the selected element appears on the left side of the editor. You can rename the default name or title shown at the top of the screen to make navigation easier as you build your funnel page.

Text Options

  1. Text: This is where you edit the text on your button.
  2. Subtext: If you'd like to add a subtext to your button, type it here.

Typography

Here you can edit the font of the button's content. The available options are:

  1. Type: Choose a new typography font from the drop-down menu.
  2. Text Font Size: Adjust the font size of the text using the size bars.
  3. Sub-Text Font Size: Adjust the font size of the sub-text with this option.
  4. Font Weight: Change the thickness of your button text. Choose from options like light, regular, bold, or extra bold to match the tone and style of your design.

  1. Sub-Text Font Weight: Similar to the main text, you can adjust the thickness of your sub-text. This helps you create a clear hierarchy between the main button text and any additional details.
  2. Letter Spacing: Control how far apart the letters in your button appear.
  3. Text Transform: Change the text to uppercase, lowercase, or capitalise each word.

Button Actions

Choose where you'd like this button to link to. Your options are:

  • Open Popup: A preset popup will be displayed.
  • Website URL: Contacts will be redirected to the configured website. You can also choose whether the URL should open in a new tab.
  • Download File: Upload or select a file from your media library to be downloaded upon clicking.
  • Hide Element: Specify the elements that should be hidden when the image is selected.
  • Show Element: Specify the elements to be displayed when the image is selected.
  • Scroll to Element: Select the element to which the page should scroll when the image is selected.
  • Step: Choose the step the image should display when clicked.
  • Next Step: Redirects to the next step in the funnel or on the website.
  • Call: Initiates a call to the selected number when the image is clicked.
  • SMS: Initiates an SMS message to the configured number.
  • Email Address: Initiates an email to the configured address.
  • Memberships: Redirects your contacts to your client portal, allowing them to join your courses or communities.

Colour Options

  1. Background Colour: Change the background colour of your button.
  2. Colour: Adjust the text colour inside the button, for example the "Click to Sign Up" text.
  3. Sub-Text Colour: When you add a sub-text to your button, use this option to adjust its colour.
  4. Icon Colour: Adjust the colour of the leading and trailing icon here.

Icon

Add an icon to your button by selecting from the available options or using the search bar to find the one you want.

  1. Leading Icon: This places an icon before your text on the button.
  2. Trailing Icon: This places an icon after the text on the button.

Styles

Button Appearance

Use these options to adjust the button's direct appearance.

  1. Full Width: Make the button fill the full width of the element box, or keep it fluid.
  2. BG Styles: Keep the background of your button, or remove it so only the text appears.
  3. Vertical and Horizontal Spaces: Increase or decrease the height and width of the button here.

Spacing Option

There are different spacing options for adjusting your button. Depending on the Edit option you are working on, the settings will only apply to that option.

  • Padding: These four toggle bars move the content left, right, up, or down, depending on which bar you click.
  • Margin Top and Bottom: Adjust the top or bottom margin of your content using its toggle bars.

Border Options

  • Border: Choose the type of border you want. Once you select a border type, the border settings appear.
  • Style: There are three styles for your border: solid, dashed, or dotted.
  • Width: Increasing the border width makes the border thicker.
  • Colour: Click the colour icon to change the border colour.
  • Radius: Adjusting the radius curves the edges of the border; the higher the number, the more curved the edges become.
  • Radius Edge: Choose which corners of the border to curve: all edges, top only, or bottom edge only.

Button Align

This setting lets you align your button text and icons to the left, centre, or right. Adjust it to make sure your button looks well-positioned on both desktop and mobile views.

Shadow

  • Box Shadow: Add a shadow effect to your button to make it stand out.
  • Text Shadow: If you want your text/content to have a shadow, simply choose how strong or light you want it to be.

Visibility

You can control the button's visibility for both the mobile and desktop versions of your pages.

Custom Class

Add a custom class by typing your desired class name into the Custom Class field.

CSS Selector

Click the copy icon on the right side of the reference number you want to copy the CSS Selector.

Animations Settings

Entrance Animation

Choose an animation effect for when the button first appears on the page, such as fade-in, slide-up, and more.

To customise the animation details, click Adjust Animation. This lets you modify the scale, duration, delay, and easing motion of your animation.

Hover Animation

Add an effect that triggers when users hover over the button.

That's it! With these steps, you can add and customise a button that looks great and drives action.