🌐 Websites -WT (How to use List Element)

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

LIST ELEMENT 

List elements are commonly used for a variety of content presentation purposes: 

  • Creating navigation menus. 

  • Displaying product features or benefits. 

  • Presenting steps in a tutorial or guide. 

  • Listing items in a portfolio. 

  • Showing options in a form (radio buttons or checkboxes). 

  • Displaying testimonials or customer reviews. 

 

How to use the List Element? 

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

 

STEP 2: Click on the list element this will make the settings box automatically appear. 
 
 GALLERY POP-UP SETTINGS  

 
1. FONT 

This setting allows you to control the appearance of text on your web pages. These settings give you the ability to customize the typeface, size, style and other aspects of the text to create a visually appealing and consistent design. 

 

2. SMILEY ICON 

This is a built-in feature that allows you to easily incorporate icons alongside the list. You can change icon style and size using this feature. 

 
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 and icons. The hover option’s color can also be altered. 

 

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

 

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

 

6. TRANSFORM 

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

 

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

 

8. Center Alignment 
This option allows you to align your element to the left, right, center, or justify it. 
 

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

 

10. MOVE 

Utilize the icon resembling a cross with an arrowhead to relocate an element to your preferred location within the section of your layout. 

 

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?