How to use buttons with the funnel builder

1. Click "Marketing"

2. Click "funnels"

3. Select "Button" then Drag

Then Drop

4. Click "Orange border" to access settings

5. Input "Element Name/Title"

Here, you can observe the default title/name of the Edit option you are operating on. You can keep it as it is or rename it.

6.Select "Background Color"

If you want to modify the background color of your button, click on the content you want to adjust its background.

7. Select "Letter spacing"

You can pick how far apart you want the letters to be in your button by clicking on this option.

8. Select "Text Shadow"

If you prefer your text/content to have a shadow, simply select how intense or light you want the shadow to be.

9. Click here to customize "Mobile or Desktop font size"

You can regulate the mobile and desktop font sizes of the text/content merely by adjusting the size bars.

10. Click here to customize "Sub Text Mobile or Desktop font size"

You can regulate the mobile and desktop font sizes of the sub-text/content simply by adjusting the size bars.

11. Select "Typography Type"

Here, you can modify the font of the button text/content.

12. Select "Icon Picker"

Here, you can add icons to your buttons. When you add an icon, it will be placed before the text in the button.

13. Select "Icon Picker" (After)

Here, you can add icons to your buttons. When you add an icon, it will be placed after the text in the button.

14. Select "Button Align"

15. Select "Text Color"

Here, you can only adjust the text color in the button, for instance, the "Click to Signup" text.

16. Select "Sub Text Color"

When you add sub-text to your button, you can only adjust the color in the button here.

17. Click here to Adjust "Padding"

There are different spacing choices available to adjust your button. The settings will only be applicable to that option based on the Edit option you are operating on.

Click here to adjust "Padding Left, Right, Top, and Bottom"

These four (4) different toggle bars move the content to the left, right, top, or bottom depending on the toggle bar you click on. 

18. Click here to Adjust "Margin"

You can adjust the top or bottom margin of your content by toggling its bars.

19. Input "Text"

This is where you can add/edit the text in your button.

20. Input "Sub Text"

To add a subtext to your button, simply input it in the designated field. 

21. Select "Button Actions - link to"

You also have the option to choose where you want to link the button to under "Button Actions Link To"

22. Click "Themes"

23. Select "Themes"

Additionally, you can select a theme under "Theme Settings"

24. Select "Advanced"

25. Select "Text Transform"

26. Select "Full width"

change the text's case or make the button full width

27. Select "Button Effects"

 "Button Effect" allows you to add an effect to the button

28. Select "Shadow"

 "Button Shadow" lets you adjust its shadow

29. Select "BG styles"

Under "BG Styles", you can choose to keep or remove the background. 

30. Select "Vertical space"

"Vertical and Horizontal Spaces" enable you to adjust the button's height and width.

31. Select "Horizontal space"

"Vertical and Horizontal Spaces" enable you to adjust the button's height and width.

32. Select "Visibility"

You can also select its visibility for desktop and mobile separately.

33. Input "Custom Class"

To add a class, press enter or space

34. Border options

Under "Border Options", you can choose the type, style, width, color, radius, and radius edge of the button's border.

Select "Border"

Select "Border style"

Select "Border width"

Select "Border color"

Select "Border Radius"

Select "Radius Edge"

35. Click here to copy "CSS Selector"

you can copy a CSS Selector by clicking the "copy" icon.