The Image widget allows you to add, modify, and display images on your website. The widget provides a simple solution for your website product visuals.
Adding an Image Widget
To add an Image widget to your website:
- Go to the Visual Editor from Channels on the Dashboard Left Panel.
- Navigate to the Widgets list on the Visual Editor Left Panel.
- Type the widget name in the search bar, or find it in the Essentials/Media grouping.
Drag and drop the Image widget from the list onto the desired crafting area of the Layout Canvas.
Note: Supported file types are: JPEG, PNG, GIF, SVG, WebP, and TIFF.
Configuring the Image Widget
Once you have added the Image widget, you can modify the widget properties from the Property Panel according to your preferences. The Property Panel includes Styles, Content, and Settings. You can edit and customize the Content not only from the Property Panel but also from Design System > UI Elements.
Modify the Image widget from the Property Panel.
- Go to Styles to modify the widget styling features:
- States - Normal and Hover.
- Global Styles - Make the necessary configuration of principal styling features from the Property Panel (see Global Styles). Global Styles are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.
2. Go to Content to modify the image content, specifically:
- Adding and changing images (from your PC, Free Stock > Unsplash, or import from a URL). \ It also contains an Object Fit property with its available values in case you set an image size that does not match the container:
- Cover - the value preserves the original aspect ratio, but the image occupies all the available space resulting in the image appearing cropped.
- Contain - the image keeps its aspect ratio (not exceeding the bounds of the available space) but is resized to fit your given size resulting in the image not filling all the available space.
- Fill - the image is resized to fill your given size, however, resulting in stretching or squishing the image to fit.
In addition to the Object Fit, a pointer or cursor allows you to specify which part of an image is displayed/highlighted. The properties are used to control the image replacement and position, supporting cases where, especially, the aspect ratio differs from the container aspect ratio.
You can keep a consistent and appropriate interface across your website, and change the image size and layout, along with the Object Fit and pointer.
- Adding a Link to the widget. Click the Add Link, and add clickable phone numbers and email addresses or navigate your customers to your website Main or System pages, products, collections, or collection items. You can redirect your users to external and internal websites, allowing your customers to navigate to specific destinations, either in a new tab or by replacing the current tab.
3. Go to Settings to modify the widget visibility on your website. Specifically, select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).
Once you are done with the Styles, Content, and Settings, you can edit the following properties:
- Access the Design System at the upper-right corner of the Property Panel to easily create a UI Element.
- Reset Styles - refers to discarding the changes made to the widget and restoring its default style.
- Override Styles - refers to changing specific aspects in order to change its default style, such as specifying a specific font, size, and other formatting properties.
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.