The Image Gallery Widget allows you to add a gallery of image thumbnails to your website. Watch the video below for a quick overview of how to use the Image Gallery Widget, and read below for more detailed instructions and for information on settings.
In this article, you will learn how...
- To add an Image Gallery Widget to your website
- To configure the Design settings for an Image Gallery Widget
To add an Image Gallery Widget to your website:
- Click on the WIDGETS button in the Website Editor Toolbar.
- Browse the Widgets tab to locate the Image Gallery Widget you want in the MEDIA section.
- Click and drag the Image Gallery Widget onto your website page.
Allowable areas an Image Gallery Widget can be inserted into include:
- Within rows
- Within columns
- Above or below existing widgets
- Between existing widgets
The Image Gallery settings popup will be displayed.
- Click on the Add Image button.
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 The Web: search for free images (covered by a creative commons license) from image suppliers, Unsplash, and Flickr.
- Select an image and click OK.
- Continue adding as many images as you like by clicking on the Add Image button.
- Configure the Design settings for the Image Gallery Widget. Click here for instructions.
- Click OK to apply the changes.
- 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 Gallery Widget:
- Mouse over the widget.
The widget's controls will be displayed.
- Click on the down arrow beside the Image Gallery Widget icon.
- Choose the Image Gallery Settings item from the drop-down menu.
The Image Gallery Settings popup will be displayed.
- Click on the Design tab.
- Select from one of the pre-configured Image Gallery Layout options.
- Configure the rest of the design options for the Image Gallery Widget.
- Panel Title: lets you specify the title that will appear in the header area for the image gallery panel.
- Thumbnail size: lets you set the dimensions of the image thumbnails. You can choose a preset size or choose Custom Size to specify a custom size.
The following fields will be displayed when you select Custom Size:
- Thumbnail Width: lets you specify the width of the image thumbnail in pixels.
- Thumbnail Height: lets you specify the width of the image thumbnail in pixels.
- Crop Thumbnail: crops the product image thumbnail to square when "Yes" is selected. Leaves the image in its original shape when"No" is selected.
- Use Higher Resolution on Retina Displays: when checked, will double the pixel density of the images to increase the clarity of the image for retina displays.
- Image Effects: lets you apply filter and transform effects to the thumbnail images.
- Hover Image Effects: lets you apply filter effects, transform effects, and hover animation to the thumbnail images for the hover state.
Click here for instructions on how to add image effects.
- Grid Alignment: lets you set the alignment of images within the grid area when the Grid or Masonry layouts are selected.
- Left: aligns the images to the left of the grid area.
- Center: aligns the images to the center of the grid area.
- Right: aligns the image to the right of the grid area.
- Spaced Around: distributes an equal amount of space between each grid area with half the space between the outer edges of the grid and its container.
- Spaced Evenly: distributes an equal amount of space between each grid area with equal space between the outer edges of the grid and its container.
- Thumbnail Title: lets you choose an option for the display and placement of the thumbnail image's title.
- Don't Show: no title is displayed.
- Show on Image: displays the title on the image.
- Show on Image on Rollover: displays the title on the image when the mouse pointer hovers over the image.
- Show Above: displays the title above the image.
- Show Above on Rollover: displays the title above the image when the mouse pointer hovers over the image.
- Show Below: displays the title below the image.
- Show Below on Rollover: displays the title below the image when the mouse pointer hovers over the image.
- Click OK, once you have finished configuring the settings.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
Comments
0 comments
Please sign in to leave a comment.