> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bosscart.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Image widget

> Images enhance visual appeal and improve engagement on your site. To add an image:

Images enhance **visual appeal** and improve engagement on your site. To add an image:

* **Go to Widgets** – Open the **Widgets panel** in your editor.
* **Select "Image"** – Locate the **Image widget** and add it to your page.

Once added, you can **resize, adjust positioning, and apply styling** to match your website’s design effortlessly!.

<img src="https://mintcdn.com/alavon365/FzeaQ9w7x4DDlcd4/images/builder/4f7dac043c55701f.png?fit=max&auto=format&n=FzeaQ9w7x4DDlcd4&q=85&s=ca6dedb383fe49ebed1d0fc84d8fb5ef" alt="" width="1666" height="871" data-path="images/builder/4f7dac043c55701f.png" />

If you are wondering how to add images to your file manager, tap the link below

[File Manager](/builder/platform/builder/settings/file-manager)

### **Image Editing**

Once you have selected your image and placed it on the page, head to the image settings tab. Here you can add image descriptions 'great for SEO', Shadowing, image captions and call to actions.

<img src="https://mintcdn.com/alavon365/a4e0aobXvzetCcVN/images/builder/de5b6324a8f57c2a.png?fit=max&auto=format&n=a4e0aobXvzetCcVN&q=85&s=89aa1dcad493176bfc7c8d00332e1660" alt="" width="1202" height="799" data-path="images/builder/de5b6324a8f57c2a.png" />

### **Image Captions**

Adding captions enable you to do many things from, displaying text boxes and adding a call to action link. Great if you want to explain more about the image or service.

<img src="https://mintcdn.com/alavon365/jdtI0XQKlmiI8Ux4/images/builder/08baec0bd8cde787.png?fit=max&auto=format&n=jdtI0XQKlmiI8Ux4&q=85&s=fbe54ee348ba1a6d6c822e2abe66c873" alt="" width="1201" height="931" data-path="images/builder/08baec0bd8cde787.png" />

### **Corner Rounding**

Add some softness to your images by adding rounded corners, you can sync all corners to be the same radius, or individually round specific corners of your image.

<img src="https://mintcdn.com/alavon365/zazDpBR889DAW7oG/images/builder/29af2bedc825bf2b.png?fit=max&auto=format&n=zazDpBR889DAW7oG&q=85&s=fa756dcd3da715862a93c969f442c99e" alt="" width="1651" height="864" data-path="images/builder/29af2bedc825bf2b.png" />

### **Enable Mask**

Adding image mask gives you lots of indivudual design masks to display your image.

<img src="https://mintcdn.com/alavon365/a4e0aobXvzetCcVN/images/builder/dd0524c10b0e4eae.png?fit=max&auto=format&n=a4e0aobXvzetCcVN&q=85&s=6d963bbf6625d48e7b130d0b24f898f4" alt="" width="1417" height="866" data-path="images/builder/dd0524c10b0e4eae.png" />

### **Adding links**

Adding a **link** or **lightbox** to your image allows you to direct your website visitors wherever you want, whether it's another page, an ecommerce product, or any step in a funnel.

The **lightbox** option is a visual effect. When a visitor hovers over or click on the image, it will pop out.

<img src="https://mintcdn.com/alavon365/m47yzIyDG9neC9jn/images/builder/ae128bfe186e07da.png?fit=max&auto=format&n=m47yzIyDG9neC9jn&q=85&s=7990a3ad0b555788512250ede73f507c" alt="" width="1528" height="935" data-path="images/builder/ae128bfe186e07da.png" />

***

### <i class="fa-burst-new">:burst-new:</i> **The Image Editor**

Within your file manager you can edit the raw image, to do so hover over the image you want to edit and click the pencil icon:

<img src="https://mintcdn.com/alavon365/zazDpBR889DAW7oG/images/builder/32fe625a9079cfbe.png?fit=max&auto=format&n=zazDpBR889DAW7oG&q=85&s=796db0fadd366b0f657aac33059ee437" alt="" width="391" height="242" data-path="images/builder/32fe625a9079cfbe.png" />

Once you have selected which image you want to edit, a new pop up will display, which is the image editing canvas. Here you can:

#### **Adjust**

* Brightness
* Contrast
* Saturation

#### **Filter**

Add a image filter from Black and white, vivid to soft

#### **Output Size**

Here you can adjust the output size of the original image, which helps you get the pixel perfect size for the image when displaying on your pages.

<img src="https://mintcdn.com/alavon365/FzeaQ9w7x4DDlcd4/images/builder/5db3c942b90ccfb4.png?fit=max&auto=format&n=FzeaQ9w7x4DDlcd4&q=85&s=2b18fe47feb0839e4c59955cec94174b" alt="" width="1160" height="819" data-path="images/builder/5db3c942b90ccfb4.png" />

To the bottom of the image editor canvas you can:

* Rotate
* Flip
* Crop

Once happy with your edit, click save as copy.

<Note>
  **Note:** You can click the reset all text to revert any chnages you have made.
</Note>
