Image Widget

The Image Widget allows you to add images to your website. Watch the video below for a quick overview of how to use the Image Widget, and read below for more detailed instructions and information on settings.

In this article, you will learn how...

• To add an Image Widget to your website
• To configure the Design settings for an Image Widget

To add an Image Widget to your website:

1. Click on the WIDGETS button in the Website Editor Toolbar.
2. Browse the Widgets tab to locate the Image Widget you want in the MEDIA section.
   
3. Click and drag the Image Widget onto your website page.

   Allowable areas an Image Widget can be inserted into include:

   • Within rows
   • Within columns
   • Above or below existing widgets
   • Between existing widgets

   The Select Image popup will be displayed.

   

   You can choose an image from one of 4 sources:

   • Your Images: your own uploaded images.
   • Theme Images: images provided with your selected theme.
   • Stock Images: DecoNetwork stock images.
   • Search Free Image Libraries: search for royalty-free images (covered by a creative commons license for both commercial and personal projects) from image providers, Unsplash, and Flickr. The images are curated from online communities of contributing photographers.
4. Select an image and click OK.

   The Image Settings popup will be displayed with the Content tab selected.

   

   If you add the Image Widget to a custom dropdown menu, the Show as Link(s) in Mobile Menu option will be available. When enabled, this option will generate matching links for the content placed in the custom dropdown menu using Alt text that will be rendered as a simple list of links on the site's mobile menu.

   

5. Configure the Properties for the Image Widget.
   • Image Name: shows you the file name of the image.
   • Original Image Size: lets you choose a size option for rescaling the original size of the image.
   • Use Higher Resolution on Retina Displays: when ticked, will double the pixel density of the images to increase the clarity of the image for retina displays.

     Retina displays have 4 times more pixels than standard screens. So, if you have a 600 x 600 pixel image, you would need a 1200 x 1200 pixel image to render smoothly on a high-density retina display. This setting will do this for you.

   • Image Link: lets you specify a link that will open when the image is clicked.

     Click on "Add Link" to specify a link. The link options popup will be displayed.

     
     • No link: select this option if you do not want to set a link for the image.
     • Existing Page: lets you select a link to an existing page on your website.

       If you select "Decorated Products" or "Products", a dropdown field will be displayed allowing you to select a product category to link to.

       
     • Website URL: lets you specify a URL to link to an external website.
     • Email Address: lets you specify an email address to create a mailto link. This will activate the default mail client on the computer for sending an email to the specified address.
   • Alt Tag: lets you specify a text alternative for an image. This is useful for describing an image to those who cannot see and can positively impact your store's search engine rankings.

   You can replace the image at any time by clicking on the Replace Image button.

6. Configure the Design settings for the Image Widget. Click here for instructions.
7. Click OK to apply the changes.
8. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To configure the Design settings for the Image Widget:

1. Mouse over the widget.

   The widget's controls will be displayed.

2. Click on the down arrow beside the Image Widget icon.
3. Choose the Image Settings item from the drop-down menu.
   

   The Image Settings popup will be displayed.

4. Click on the Design tab.
   
5. Select from one of the pre-configured Image Layout options.
6. Configure the rest of the design options for the Image Widget.
   • Image Fitting: lets you choose the size option that specifies how the image should be resized to fit its container (determined by the Aspect Ratio setting):
     • Use Image Size (can shrink to fit): the image will be scaled so that the entire image fits within the container while maintaining its aspect ratio. If necessary, it will shrink to fit inside the container.
     • Use Image Size (stretch or shrink to fit): the image will fill the entire container and ignore its own aspect ratio. If necessary, it will stretch or shrink to fill the container.
     • Crop to Aspect Ratio: the image will fill the height and width of its box, maintaining its aspect ratio. If necessary, the image will be cropped in the process.
   • Aspect Ratio: lets you choose an option for the ratio of the width to the height of the image container.
   • Image Effects: lets you apply filter and transform effects to the image.

     Click here for instructions on how to add image effects.

   • Image Title Display: lets you choose an option for the display and placement of the image's title.
     • Don't Show: no title is displayed.
     • Show on Image: displays the title and subtitle on the image.
     • Show on Image on Rollover: displays the title and subtitle on the image when the mouse pointer hovers over the image.

     If one of the options to show the image title is selected, the title fields will be displayed:

     • Image Title: lets you specify a title for the image.
     • Image Subtitle: lets you specify a subtitle or description for the image.
7. Click OK, once you have finished configuring the settings.
8. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.