🌐 Websites -WT (How to use Icon Element)

  1. Overview
  2. 🌐 Website Builder & Domains
  3. 🌐 Websites -WT (How to use Icon Element)

ICON ELEMENT 

Icons are graphical symbols or representations that convey meaning or information quickly and visually. These are commonly used in web builders to enhance the visual appeal of a website, improve user experience, and communicate ideas or actions efficiently without relying solely on text. 

 

How to use the Icon Element? 

 
STEP 1: Simply drag and drop the element inside your section/layout. 

 

STEP 2: You may either tap the icon once to bring up the settings or tap it twice to select the icon you want to use. 

 

By tapping it twice, a list of icons will be visible to your screen. You can choose and change your display icon. 
 

 

Tapping it once will show you the Icon Settings Bar. 
 
 

ICON ELEMENT SETTINGS  

 
1. FLEX 

This setting allows you to design and structure the layout of your web content using flexbox properties. These properties include things like flex-direction, justify-content, align-items and more. Flexbox can be a powerful tool for creating responsive and adaptable designs, particularly when dealing with varying screen sizes and orientations. 

 

2. SMILEY ICON 

You can modify or update your icon’s size and background.  

 

3. COLOR 
Color is a powerful design element used in a wide range of contexts. With this option you can alter the color of text, background, and border colors. 

 

4. 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. 

  • Popup - appears on top of the main content of a webpage, creating a focused area of interaction. 

 

5. Toggle Free Form Drag Positioning: 
This enables you to move elements by clicking and dragging them with a mouse cursor. The term "freeform" indicates that users have greater flexibility and control over the positioning of these elements, often without predefined alignment or snapping. 

 

6. Animations  
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. 

 

7. TRANSFORM 

This is often used in conjunction with transitions to create visually appealing interactions. 

 

8. Access the gear icon in this field to configure the size, gap, and padding of your 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. 

 

9. Center Alignment 
This option allows you to align your element 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. 

 

12. Trash Bin Icon: 
Delete a specific element 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. 

 
 
 
Was this article helpful?