Gallery

The Gallery element is a serious, powerful image display element, and I'm going to show you how to create this very simple gallery in just a few steps, and then we'll look at all the other options as well. In a new block, I'll bring in the Gallery element, and you'll find it under Media. Click Hold, track, and drop it. It gives you two images, and you're going to upload the images by clicking on the image and then select the image. We'll do this for the second one as well. And then to add more images, simply click on Duplicate, and you will see a new image is dropped within the container. Now we will swap out the images and bring in the others. And I will duplicate and do the same for this one. A few simple steps. And now to achieve the effect that I had shown you earlier, select the image and with the handle bar at the bottom, drag, select this one, and I'll drag it so that it can match the height of these. A great gallery built in absolutely no time. But there's much more to this gallery element, so let's have a look at that.

First, let's go and have a look at what happens with the settings of the gallery element in general. From the settings, you'll have the padding and margin as well as your effects. And then the gallery setting itself, you can add tags if your image contains tags. I'll deselect it for now because I don't have tags, but the option is always there if you want to filter through them. Choose between one column or all the way up to six. Let's go to three and then add two more images here. I'll select any of these images, duplicate it, and I'll duplicate it a second time, and then simply, as we did before, go ahead and bring in more images. Next, I will drag it a little bit to bring it into the format that I'm interested in. And I'm done. In the event where I realize I actually want this image to be over here, I can select the image and from the options toolbar at the top, use the arrows to move it left or right until you get it into the position you want it to be. This can be a bit tricky at times, so move left or right until you find the right spot and then just make those adjustments again.

Working with images, it's important to understand that you still have full image control here. Select the image, go to the image sitting, and you can see you can drag the focal point around to make sure that the part you want focused is always there. In case you need to zoom, you have that option as well. You can add filters as well as a mask. Same for overlay colors. You can apply nice effects here within your gallery, giving it a unique feel to your page and the color scheme that you have. And then remember, you have the link function as well, so each image itself can as a link. Two final settings to take note of within the gallery element, and that is that you can add spacing between the images to give it a little bit more of separation or bring it all close to each other. And activate the open in light box option if you want people to have a light box view when they go to the front-end. Let's save this page and let's test it here on the front to see how the light box will work. I'll scroll down to my gallery element, select it, and there we go.

I can cycle through the images. As always, you need to go into responsive view to see how this will display on those devices. You have, again, extreme control here. You go to the settings, you can choose how many columns. If you want three, again, put it to three. But let's say in this case, you want it on two, reduce a little bit of the spacing. And then what we can do, let's decrease this one, and we increase this one. And like before, the focal point for specific parts of this responsive display, you can do it. Going into mobile, good advice for mobile is always to go stacked, and by default, it will be stacked.