If you want to add multiple images to your site, there are two easy ways to do that, with our Gallery and Slideshow elements. Choosing which one depends on how you want it to look. For reference:
- Gallery: Displays photos in a grid, clicking on an image opens it in a large “lightbox” display. Manual control for scrolling through photos.
- Slideshow: Displays one large photo at a time within the page, with sequential thumbnails. Autoplay or manual control for scrolling through photos.
Gallery
Our gallery element enables you to display as many images as you’d like, in a click-to-see-a-larger-version (lightbox) grid format that you control.
Drag the Gallery element to a page to get started.
Then click the Upload Images button that appears in the element.
And either drag images into the box or click the big green Upload Photos button.
This will let you select images from your computer to upload. You can select multiple images by holding the CTRL key on a PC or the Command key on a Mac. If you have trouble uploading images, we'd recommend limiting the number you upload to no more than 50 or so at a time. You can always add more later.
Give the photos a few minutes to upload and then you'll see your gallery on the page.
Each image in the gallery automatically links to a larger version of the image. You can also link an image elsewhere (another site or page) if you like or add a caption that will appear on the enlarged version of an image. Click on the gallery to see these options.
Click on thumbnails and drag them around to rearrange images within the gallery.
The gallery's toolbox enables you to make additional changes.
- Add Images: There's no limit, but we recommend uploading no more than 200 images to any one gallery so as to not overwhelm your visitors.
- Determine the number of Columns you want. The default is 3, but you can use from 2 to 6.
- Select the amount of Spacing to place between each image.
- Adjust Caption settings and placement.
- And with Advanced, choose if you want a border around each thumbnail or not. And select if you want to crop the thumbnails to either squares or rectangles. This cropping has no impact on the enlarged images, it only changes the look of the thumbnails to make the gallery look more uniform.
Slideshow
To add a slideshow of images, drag the element to a page on your site.
This will open the "Choose a Slideshow Style" dialog box where you can select which style of slideshow you want. This can always be changed later, so don't spend too much time worrying about which one you want.
You'll now be prompted to upload photos. Hit the big Upload Photos button or just drag some photos into the box to get started.
Then select the photos you want to upload. You're to both delete unwanted photos and and more photos to the slideshow at any time, so you don't have to be too selective at this point.
Depending on how many photos you've chosen, it may take them a few minutes to upload. Once they're done uploading you'll see them all on the photo management screen.
You can drag photos to re-order them, click the "x" next to each to delete them and click the "bubble" icon to add a caption that'll appear along with the photo in the slideshow.
When you're ready to move on, click Save and you'll see the slideshow as part of the page.
Click on the slideshow to open its toolbox and make changes (scroll to view more options within the toolbox).
- Use the Add / Edit Photos button to bring up the Manage Photos dialog box we saw earlier.
- Use Transition Style to switch between five different photo transitions.
- Use Navigation to select whether you want to use Thumbnails, Numbers or no navigation at all.
- Use Speed to determine how fast the slideshow should play.
- Use Spacing the tweak the amount of space around the image.
- Use Caption to determine if any text captions should appear at the top or bottom of each image.
- And with the Advanced option, set Autoplay to On or Off (it's on by default) and determine if you want the slideshow to always play in order or start from a random point every time the show is loaded.
Note that the slideshow will automatically expand to the width of the page or column in which you've placed it. So if you want to shrink a slideshow, you simply need to place it in a column by dragging a Spacer element too either side of it.