Image Widget
The Image widget allows you to add an image to the section grid or as a child element to a parent widget container such as a Carousel, Grid or Flex.
Acceptable file formats are .jpg, .png, .gif, and .webp.
To insert an image, double-click into the Image widget you just inserted to bring up your Image Resource Folder modal within the Site Builder tool (Fig 1).
Fig 1
Images are divded up into three different types:
- My Images
- Shared Images
- Pexel Images
My Images is the default Image type which shows any images you have uploaded into the Site Builder tool. If you click the Click to Upload button, you can add a new image to the My Images section.
Shared Image only pertains to Enterprise customers who have a Shared Image folder (Fig 2).
Fig 2
Pexels Images will bring up a gallery of default Pexel images. You can also enter a search word in the input field (Fig 3).
Fig 3
The General menu for the Image widget contains three sections (Fig 4):
- General
- Style
- Hover
Fig 4
- Image Editor brings up an image editor that allows you to do basic image editing (Fig 5).
Fig 5
- Alt Text allows you to enter a text description of the image.
- Show In Lightbox determines whether the image will be shown in the lightbox in the browser if the viewer clicks on the image (Fig 6) .
Fig 6
- Link Action lets you turn an image into a link when clicked.
Style menu
The Style menu for the Image widget is similar to other Style menus with the additional features:
- Crop Image fills the image so it takes up the container regardless of whether it's in a different aspect ratio than the image itself (Fig 7). This can skew the image.
Fig 7
- Scale allows you to scale the image relative to its container so it doesn't skew itself using a scaling factor from ".5" to "1.5" (Fig 18).
Fig 8
Hover menu
The image Hover menu is similar to other Style menus, allowing you to create a different look for the image when a page visitor moves their cursor over image in their browser.