Buttons are an essential element to any Clickfunnels page. Buttons can be set to allow visitors to submit an opt-in form, go to another page, trigger content to show/hide, etc.
What you will need:
Step 1: Add Button Element
- Click on Add New Element from within a row or click on the "+" below an existing element.
- Search or Select the Button Element.
- Click on the Gear icon on the button element orange border to open the settings.
Step 2: Edit Settings
- Click on the Gear icon on the button element orange border to open the settings.
- Edit the element and adjust the Settings as desired.
- Top Margin - Add space above your element.
- Set Action - Choose what you want the button to do.
- Button Text - Choose the text that appears on the button.
- SubText - Choose the subtext that appears on the button.
- Aria-Label - Add descriptive text to your button.
- Font Family - Change the font of the text.
- Font Size - Change the size of the text
- Mobile Size - Change the size of the text on mobile devices.
- SubText Size - Change the subtexts size
- Mobile Sub Size - Change the subtexts size on mobile devices.
- Text Color - Change the text color using the Color Picker.
- BG Color - Change the background color using the Color Picker.
Note: The Aria-Label will allow you to add descriptive text to your button for ADA compliance. Click Here To Learn More About ADA Compliance.
Advanced Style Settings
- Button Width - Choose if the width of the button should be based on the amount of text or the size of the row/column it's in.
- Inline / Block - Adjust the justification for the element.
- Style - Choose from custom or "Line Flat".
- Vertical Space - Adjust the space above/below the element.
- Horizontal Space - Adjust the space to the left/right of the element.
- Corners - Adjust the amount of rounding around the edges of the button.
- Border - Choose the size of the border.
- Box Shadow - Add a shadow around the element.
- Text Shadow - Add a shadow around the text.
- Text Transform - Quickly set all text, to Uppercase, Lowercase, or Capitalized.
- Letter Spacing - Change the space between each character of text.
- Icon Picker - Add an icon to the left of your text.
- Icon Picker (After) - Add an icon to the right of your text.
- Button Effect - Choose a built-in animation option.
- Button Align - Choose the justification for the button.
Advanced Animation
- Timed Delay - fade in or fade in with scale.
- Type - On page load or on page scroll for the delay that you have set.
Button Actions
- Submit Order/Submit Form - capture input field information and move to the next step in the funnel.
- Open the Pop-Up - Opens the pop-up on the page.
- Facebook Opt-In - the ability for customers to opt-in with Facebook.
- Go To Website URL - takes customers to a website URL (be sure to use https://)
- Go To Next Step In Funnel - goes to the next step in the funnel, does not capture information on the page (if you want to capture the input fields be sure to use Submit Order/Submit Form).
- Scroll To Row/Section On-Page - Scroll to the desired section (highlighted in green boxes) or row (highlighted in blue boxes) on the page.
- Show/Hide Action - shows or hides the elements you select.
What you can do now:
If you have any questions about this, please contact our support team by clicking the support icon in the bottom right-hand corner of this page.