Button Element in Funnel and Website Builder
There are many different options when using the button element within the FG Funnels Funnel and Website builder. Buttons can be styled in a variety of ways and can have a number of different actions that happen on button click.
In This Article:
To add a Button element, click on the plus sign in the upper left hand corner and select elements from the left side of the panel that opens. Find the Form section, select the Button element and drag it to the desired location on the page.
All button customizations are achieved from the Options panel on the right side of the builder after selecting the button.
General Options
- Rename: You can rename the element under Element Name for easier identification in the layers panel and other areas with element names.
- Background Colors: You can set your background color. Select the color square and you will be able to choose from Brand Colors, Default Colors and the Custom Colors. You can access Custom Colors by clicking on the arrow next to Default Colors and selecting Custom Colors.
- Adjusting Font Styles: You can adjust the letter spacing, font size for both the main button text and any sub-text (sub-text shows up underneath the main button text), font weight, and font.
- Icons: You can choose an icon to be shown right before the main button text and/or an icon to be used right after the main button text.
- Button Alignment: You can set the button alignment within the row.
- Text Colors: You can set the color for the main button text and the button sub-text.
- Spacing: There is a setting to manage the margin and padding for spacing adjustments. Margin will add spacing outside of the element, so outside of the orange outline, whereas padding adds space inside the element or inside the orange outline.
- Button Text: The text options box is where you will set the text in the button and add any sub-text if you want.
Button Actions
Button actions set what happens when a visitor clicks the button. There are a number of options for button actions:
- Open popup: When button is clicked, the popup for the page will open.
- Website URL: This option allows you to add a URL of a page that the user will be sent to when the button is clicked.
- Hide Elements: This option allows you to select elements on the page that are visible but should be hidden when the button is clicked.
- Show Elements: This option allows you to select elements on the page that are hidden but should become visible when the button is clicked.
- Scroll to Element: This option allows you to select an element on the page that will be scrolled to when the button is clicked. For example, if someone clicks a button, it might scroll them right to the offer stack.
- Step: This option allows you to select a step in the funnel that the visitor will be directed to when clicking the button.
Next step: This option will take the visitor to the step directly underneath the current step in the funnel overview tab. You can quickly check that step by clicking on the name of the page in the middle of the middle row in the top toolbar, this will bring up the pages menu. The page listed right under the current page is the "Next Step".
- One click up/down sell product: This option will only work if the visitor has just purchased on an earlier step in the funnel. This is how you would set up an OTO, but requires an order to have just been placed with credit card information filled out. After selecting this option, you will select the product and the redirect after the product is purchased.
- Call: This option allows you to enter a phone number that will be called via the device upon button press (this is very useful for mobile devices but may not work on computers).
- SMS: This option allows you to enter a phone number that will be texted via the device's default messaging service upon button press (this is very useful for mobile devices but may not work on computers).
- Email address: This option allows you to enter an email address that will be filled in a new blank email through the device's email client.
- Membership: This option will link the button to your membership area/client portal.
Animations Options
Selecting the animation tab will allow you to preview entrance animations and select an animation that will be applied to the button when the page is opened.
Buttons also have a hover animation option which allows you to set an animation to occur when someone hovers over the button with their mouse.
Advanced Options
Additional button styles are available under the advanced tab. You can:
- Transform text to uppercase or lowercase.
- Set the button to be full width or based on the size of the text and spacing.
- Set vertical and horizontal space around the text.
- Turn on or off visibility on mobile or desktop. Blue icons means that it is visible on that device, whereas gray icons means that it is hidden on that device.
- Custom class and CSS selector allow you to make CSS adjustments that target this element.
- Set a border and rounded corners on your buttons. For more, see the article How to Make Corners of Buttons Round
- You can set a box or text shadow for more depth and visual effect on the button.