Image

Next to text, the image element is probably the second most important element that you're going to use, and you're going to use it quite often on your web pages. This gallery is actually created with separate instances of the image element. If I click on one of them, you will see it's only highlighted this image, and you have the options toolbar. If you want a structure like that, you can go ahead and use columns or, alternatively, the gallery element. Let's look then at how you work with this single image element. Click on Add elements, and under Media, you go for the image, click, hold, and drag, and drop it. It displays a placeholder, as you will have to upload the image that you will want to use in this event. To give us a little bit more real estate, I will bring in columns, and then I'll click, Hold, and drag this image into the column so we can work with it. Select it to give us the options toolbar, and all the way to the left, you have the image functions. And the first thing we will do is to upload an image. Select it, and from your folder, select the image that you would like to use.

Let's talk first about resizing of the image. Click again on the image, and you will see that we have these handlebars that you can click, hold, and drag to resize the image. This one at the left and right and top and bottom essentially crops the image. The corners will resize the entire image. This is really handy when you can just judge by eye exactly to the shape and size that you want the image to appear. In the event where you want more control over it, go to the settings and you will see we have the width and the height here. Let's put both at 100% so you can understand what 100% means. 100% width means the width of the container. That means as I stretch the container, in this case, which is the column, the image will stretch to 100% of that container always. 100% height will put the image in the aspect ratio you brought it in, so it will make sure that the full image is displayed. 100% width, 100% height gives you the image as it is displayed to the size that you have reduced it. For more control, you can switch over to pixels, and this will override anything that you've said in terms of the size, but it will never go beyond the column.

Just remember, now when I drag the column, the image will not automatically upsize because you have locked in those pixels at 540 pixels. If you do that, you will need to drag it again and make sure that it fits properly. The same goes for the height. You can put it on pixels. I'll put it back to percentage for both of them, and we'll type in 100 there in the value field so we can work with it as we had brought it in. Let's reduce the column a little bit again. Select the image. Let's go to the settings on the left. You have control whether the image is displayed as custom or original. Once you put it on original, you lose the zoom function. Zoom allows you to zoom in on the image, make it bigger. And combined with that, you have the focal selector here, this blue dot. This is really handy when you have responsive design or like when I zoom here and I want a little bit more of her face in the middle, I'll hold the focal selector and I drag it onto her face. This will make sure that whenever this page loads on whichever device, this part of the image will always be the focus.

And then we have the option to open it in a light box. You can apply filters as well as hover filters, and then you have a cool mask feature. This is most excellent for graphic design, and you can select from many of these. Let's work with a simple shape like this, which is around circle. In most cases, you're going to put your size to fit, and this will make sure that the shape fits perfectly into that container. To see how this works, again, grab the handle bar of the column and drag it, and you will see it remains a circle all the time. Let's go back to the mask and look at the other options. You have to position on where you can center the circle within the container, and then you also have the function to repeat it. Play around with this as there are so many that you can go through. As well, you can bring in a PNG or SVG image of your own and create your own shape. Let's have a look at the rest of the features of the image. I'll put it back on none. Let's go to Colors.

You can add an overlay, which is very common, and we will reduce the Opacity, give it a nice little transparency. And you can also put it on a gradient. If you're looking for something a little bit different and you have an artistic flair that you would like to add here. Remember, you have between linear and radial display of that. And then you can also set the radius of how this gradient will reflect on the page. These are very great if you want to have a hover effect. So here over the hover, I will select none. And when people hover over the image, the gradient is removed. Apart from the overlay, you have the option for a border in case you want to add something like frame. Next to size in the field box, you can put in a higher value to ensure you have a nice little frame. You can also do this on a side-by-side basis by deselecting the sides, and then you can add different sizes to different sides. The image is also a great feature to be used as a clickable element. Under the link you have for a normal URL, you can link it to a block, popups, or even a file download.

If you have reduced the size of the image from the options toolbar, you can align it right, left, and to the center. And then back to the settings, you have your normal styling effects as well as duplicate and delete. It's important that you also go and have a look at your tablet and mobile displays to make sure that you optimize it for these devices. Everything you see here that you can change will only be affected on that specific device. Do the same for mobile. Now, each of these devices have locked in the display settings we set for them to be truly responsive.