🌐 Websites -WT (How to use Image Element)

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

IMAGE ELEMENT 

Images are a fundamental component of web design, and they can be used to enhance the visual appeal of your content, convey information, and create a more engaging user experience. 

 How to use the Image element? 

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

 

STEP 2: Adjust the image size by using the blue points around the image wrapper. 

 

STEP 3: You can click the maximize button found at the upper right corner of your image element to contain your image so that it perfectly fits within the image wrapper. 

 

STEP 4: Click the line element to make the settings box automatically popup.  
 
 

IMAGE POP-UP SETTINGS  

 
1. IMAGE ICON 

This setting allows you to have the option to upload images from your computer or choose from a library of pre-existing images. 
 
2. COLOR 
Color is a powerful design element used in a wide range of contexts. This is where you can add a border or a shadow to create an illusion of depth to your image elements as well as to add emphasis and enhance the overall design. 

 

3. LINK 

A. Page – using this option you can link any page inside your web builder 

B. Web Address – you can link web address’s such as Facebook, YouTube, or any of your social media accounts for instance. 

C. Anchor – this option allows you to link to a specific section of that same page. 

D. TOP/BOTTOM OF THE PAGE – enables you to link the header or footer of a certain page. 

E. Email/Phone/SMS - enter your contact details so visitors can reach you by clicking the button.  

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

 

3. Access the gear icon in this field to configure the border and gap of your image element: 
Border: It is the visible edge around an image, creating a boundary between the content and its surroundings. 

Gap: Define the spacing between rows and columns in grid or flex layouts. 
 
4. 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.  

 

5. Image Editor (Pencil Icon) 
This enables you to change your image by applying a filter, cropping, or adding any additional designs. Once you click this icon, you be able to edit your image.  

 

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

 

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

 

8. Clone 
Easily duplicate or copy your element. 

 

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