EverWeb Logo


The Image Gallery Widget

Video Transcript:

To add an image gallery to your website, simply drag and drop the Image Gallery widget onto your page.

You can add images to the gallery by clicking on the Choose button and selecting your images, or you can drag and drop the images from your computer onto the image gallery, or into the Assets List area for the image gallery.

You can drag the widget so that it is larger or smaller. You will notice that the image thumbnails will change as you increase or decrease the size of the widget.

You can move the widget anywhere you want on your page by dragging it around. If you are having trouble dragging the widget, make sure to click on the Plus button located in the top right corner of the widget. You can also deselect the widget, and then click on it and begin dragging right away.

If you want to re-arrange the images in your gallery, you can select and drag the images in the Assets List, or you can click on the actual image in the gallery and drag it to where you want it to be placed.

If you ever want to delete an image, you can select it and then hit the delete key on your keyboard. You could do the same by selecting the image in the Assets List and then hitting the delete key. If you want to delete multiple images at a time, hold down the Shift key while selecting the images and then hit the delete key.

For each image, you can choose to include a caption by selecting the image in the Assets List and then typing in a caption in the Image Caption field. If you are not able to see the caption at the moment, as we continue to go through the features in this widget, I will show you how to increase the spacing so you see the full caption.

You can select how many columns you would like to have in your image gallery.  You will be able to choose between 1 and 6 columns.

You can also choose the spacing between images in the gallery. 10 is the lowest value and will have the images close to each other, and 50 is the highest value and will have the images further away from each other.

You can also choose how many images you would like to have per page. So let’s say you only want 6 of your images displayed at a time, you can select 6, and EverWeb will automatically create links to other pages in the gallery. These links are located in the top left corner and you will notice that as I click on them, we see the different images in the gallery. If you ever want to change the font for these links, just open up the Fonts menu and make your changes. If you want to change the color of the links, just use the Hyperlink Formatting section on the Hyperlinks tab.

The orientation feature will allow you to choose between Landscape, Portrait, or Fit.

If you are using the default or Landscape orientation, you can also specify the vertical alignment for your images. Top will have the images aligned at the top, middle will align the images in the middle, and bottom will align the images at the bottom.

Caption Spacing will allow you to specify how much space is given to the caption area. This is especially helpful when you have a long caption that requires more space.

We’re now into the slide show options section. The first feature is the image size. This feature allows you to specify if you want your images to be small for a much faster download, medium, or large for a slower download. You can also choose original size if you’d like. Since majority of users like to see fast loading websites, selecting Small is a good idea if you want your gallery to load faster in the browser.

Slide Show Time is the time in seconds that each photo will be displayed, unless of course the user manually goes to the next or previous photo.

Autoplay Slide Show will automatically play the slideshow when the user clicks on an image in the gallery. If this option is not selected, the user will either need to click play themselves, or manually click to see the next photo.

Show Social Share Buttons in SlideShow will enable the Tweet and Facebook Like buttons during the slideshow. If you do not want these buttons to appear, you can just disable this option.

And that is how you use the Image Gallery widget in EverWeb.