BUTTON ELEMENT
Buttons are interactive elements that users can click or tap on to perform specific actions.
How to use the button element?
STEP 1: Simply drag and drop the element inside your section.
STEP 2: Click the element to display the settings for button.
This will automatically show you the pop-up settings bar of your element.
COUNTER ELEMENT SETTINGS
1. FONT
Allows you to control the appearance of text on your button element.
2. Button Settings
-
Button – this option allows you to change the button’s size and style.
-
Icon – Inside your button, you can alter the size and appearance of the icon.
3. Access the gear icon in this field to configure the size, gap, padding and border of your button element:
Size: Modify the dimensions (width and height) of individual elements on your webpage.
Gap: Define the spacing between rows and columns in grid or flex layouts.
Padding: Set the space between an element's content and its border.
Border: The visible edge around your button, creating a boundary between the content and its surroundings.
4. COLOR
Color is a powerful design element used in a wide range of contexts. With this option you color various design elements, including text, buttons, links, backgrounds and more.
5. LINK
-
Page – link to any page you build inside your web builder.
-
Web address – link web address like Facebook, YouTube or any of your social media accounts for instance.
-
Anchor – this option allows you to link to a specific section of that same page.
-
Top/Bottom of the Page – enables you to link the Header or Footer of a certain page.
-
Email/Phone/SMS – enter your contact details so visitors can reach you by clicking the button.
6. FUNNEL ICON FILTER
Interactive element that allows users to sort, refine, or manipulate displayed content based on specific criteria.
7. ANIMATION
Employ this feature to infuse dynamic and visually engaging moments or changes into elements on your webpage. It captures user attention, enhances the user experience, and makes your website more interactive and attractive.
8. TRANSFORM
The transformations property can be used alongside transitions to create visually appealing interactions.
9. Center
This option allows you to align your text to the left, right, center, or justify it.
10. Select Parent Element
Use the "Arrow Up" button to select the parent element, targeting the container or enclosing element that holds a specific HTML element within the webpage's document structure.
11. Clone
Easily duplicate or copy your element/layout.
12. Trash Bin Icon:
Delete a specific element/layout when it's no longer needed.
These comprehensive instructions and explanations should empower you to effectively utilize and customize forms within the Web Builder for your project.