Editor : Button Element Overview

This article will cover information on the Button element. The Button element is one of the Form-type elements in the page editor.

This element can be found in the Elements menu by mousing over a current element on the page and clicking on the orange Add Element button. You can scroll through the menu to locate it, click on the Form Element Group, or type “Button” in the Search Elements field.

You can click and hold the element to drag it into position.

---

Button Element Menu

Move

Clicking and holding the move icon will allow you to drag the element to a new location on the page.

Element Name

This is the name of the currently selected element. The name given will be the default name of the element. You can change the name in the CSS info of the Coding menu.

Settings

Clicking on this gear icon will open the individual settings of the element. Each element has specific settings based on its functions. Please check the Settings section below for further information.

Clone

The clone icon will duplicate the currently selected element and place it below the current element.

Code

Custom CSS can help you extend the design of each section on your page to meet your needs both visually and functionally. As the code requires, you can add coding to one of three areas: CSS, Header, or Footer.

The CSS Info for the element is on the right of the CSS window. The title of the element can be changed in the title field to allow for easier identification.

Due to the many different styles and uses of custom coding, ClickFunnels' Support Agents will not troubleshoot specific codes. Instead, you can submit a request for help in the Coding section of our Community, or reach out to the code provider for support.

Delete

Clicking on the trash icon will delete the element from the editor.

 

---

Button Element Settings

Layout Path

This section of the settings will tell you where the current element is located within the page's layout.

Element title

The current element's title is located at the top left of the settings. The element's title can be changed via the coding button.

Coding button

The Coding button will open the page coding menu. Opening the coding menu will allow you to add codes to your pages and change the element's title for easier searching.

---

Settings Menu

Top margin

The top margin slider is used to set the spacing between the top of the current element and the bottom of the element above it. Entering a negative number in the field will cause the lower element to overlap the top element.

---

Button Config

Button Text

Text added to this field will replace the current text on the button.

Sub Text

Text added to this field will appear on the button below the Button text.

Aria-Label

Elements can be given this attribute to provide an accessible name for situations when there is no visible label due to a chosen design approach or layout but the context and visual appearance of the control make its purpose clear.

Align

Select the alignment of the text within the element box, left margin, centred or right margin alignment.

---

Button Action

Setting the button's OnClick action to link the button to one of the following actions:

On click

Select the action for the button in the drop down menu.

Nothing happens….

When this action is selected, nothing will occur when the button is clicked or pressed.

Go to…

When this action and “Custom URL” is selected, the button will take customers to a specific URL that you have entered in. Check the “Open in new window” box if you’d like the page to be displayed in a new window.

When this action and “Custom Action Link” is selected, the button will take customers to a specific shortcode that you have entered in. Check the “Open in new window” box if you’d like the page to be displayed in a new window.

 

Submit Order / Submit Form

When this action is selected, information in the input fields are captured and the customer moves to the next page in the funnel.

 

Scroll to…

When this action is selected, you can select a section, row, or element that the page will scroll to when you click the button.

 

Show or Hide

When this action is selected, clicking the button will either show elements that were hidden or hide elements that were already visible, depending on the elements you have selected to be shown or hidden.

 

Open the pop-up

When this action is selected, the button will open the pop-up on the page once clicked.

 

Close the Pop Up

When this action is selected, the button will close the pop-up on the page when clicked.

 

Mark Complete

This action is used on buttons located within lessons. When the button is set to “Mark Complete” and a customer clicks on it, then it will show the lesson they are currently on as complete. This will allow you to see your customers’ progress through your courses.

---

Size

Choose the width and height of the button.

---

Padding

Top

The top padding slider is used to set the space from the top of the element box to the materials displayed in the element box.

 

Bottom

The bottom padding slider is used to set the space from the bottom of the element box to the materials displayed in the element box.

 

Left Right

The side padding slider is used to set the space from the left and right sides of the element box to the materials displayed in the element box.

 

Button Style

Set the style for the button element with the preset sizes or the custom choice by selecting the three dots.

 

Edit Style

Clicking this button will open the style guide page for the page. Please save your work before clicking this button.

 

Override

The override button will open the custom settings that will be different from the style guide.

 

Bg Color

Select the background color of the button element.

 

Text Color

Select the color of the text visible within the button element.

 

---

Button Typography

Button Font

Clicking on the Button font will allow you to set the font of the text within the button element. This will override the general typography setting of the page.

 

Weight

The weight of the font lines can be set from this drop menu from: thin, regular, or semi-bold.

 

Font Size and Font Size Mobile

Set the font size within the button for both desktop and mobile viewing here. If you wish the mobile font size to be different from the desktop font size, click the link icon to separate the two settings. Unlinking the text will allow you to set font sizes independent of the other view.

 

Border

Toggling the Border menu will open the following settings:

Choose which sides of the element show the border.

 

Border Style

Choose a border style (straight line, dashes, or dots).

 

Color

Choose the color of your border.

 

Stroke size

Adjust the thickness of your border.

 

Corners

Toggling the Corners menus will open the following settings to set the corner roundness.

 

Border Corners Radius

Use this border radius to set the amount of curve for the corners.

 

Separate Edges

Enabling will allow you to set a different radius for each corner.

---

Shadow

Toggling the Shadow setting will apply a shadow to the button element.

 

Style

Toggling the three dots will open the following settings below:

 

Offset-X

Set the shadow from directly beneath the text and move to the right. You can enter negative numbers in the field to have the shadow move to the left.

 

Offset-Y

Set the shadow from directly beneath the text and move it below. You can enter negative numbers in the field to have the shadow move above the text.

 

Blur

The sharpness of the shadow can be set sharp to blurred using this slider.

 

Color

Shadow color can be assigned using this field.

---

Button Text Shadow

Offset-X

Set the shadow of the button text from directly beneath the text and move to the right. You can enter negative numbers in the field to have the shadow move to the left.

 

Offset-Y

Set the shadow of the button text from directly beneath the text and move it below. You can enter negative numbers in the field to have the shadow move above the text.

 

Blur

The sharpness of the shadow of the button text can be set sharp to blurred using this slider.

 

Color

The button text’s shadow color can be assigned using this field.

 

---

Icon Before and After

Toggling either of the Icon menus will open the following settings:

 

Icon Picker

This field is used to pick the icon before or after your text.

 

Icon Size and Icon Size Mobile

Set the icon size for both desktop and mobile viewing with these sliders. If you wish the mobile icon size to be different than the desktop icon size, click the link icon to separate the two settings.

---

Templates Settings

 

Select a Template

You can select a preset template for your button which will override some of style type settings on the Settings tab.

 

---

Advanced Settings

Animation

The animation section of the settings will allow you to add dynamic movement to your page.

 

Style

You can select the style of animation to be applied to your element from the dropdown list.

 

Trigger

Select the trigger type that will start the animation.

 

Duration

Duration is the amount of time it will take for the animation from start to completion in milliseconds.

 

Delay

Delay is how long it will take for the animation to start after the trigger is set.

 

Animate Once

This check box will stop the animation from being triggered multiple times.

 

Preview Animation

Clicking on the “Preview animation” button will allow you to see the animation in the editor.

---

Dynamically populated

Dynamically populated allows the use of variables in double curly brackets like {{blog.url}} or {{course.url}}.

---

Render Conditions

Adding conditions to a section, row, or element will allow for custom page renderings based on the conditions set.

---

Custom Attributes

This setting will allow for creating custom attributes or to be able to add data-title attributes for sections, rows, and elements. The use of a data title is a reliable way to make reusable custom code for both CSS and JS to affect the page.

 

---

Views and Trash

The All icon sets the element to be visible on both Desktop and Mobile versions of the page.

The Desktop icon will set the element to only be visible on the desktop version of the page.

The Mobile icon will set the element to only be visible on the mobile version of the page.

The Eye with a Line icon will hide the element on all views. You can use the Layout Menu in the editor to locate hidden elements.

The Trash icon will delete an element from the page.

 

If you have any questions about this, please contact our Support Team by clicking the Submit a Request button at the top right-hand corner of this page and then the Help button at the bottom left of the ClickFunnels Page.