Design Your Own Image Gallery With HTML, CSS In Elementor
Hi guys in this Tutorial, I’m going to show you how to add a picture gallery to your website like no other. I’m going to show you how you can use a tiny bit of HTML and CSS code to make great stunning effect for your images. So sit back relax hit that like And subscribe button and let’s get into the Tutorial.
Okay guys to get things started we’re going to change the colour of our background. To do that we click in the bottom left hand side and click on Style in the top left. I’m going to click on the Colour Picker and select a grey that makes our images stand out more. I’m also going to remove the header and footer if you click on settings in the top left. Click on the drop down next to page layout and select Elementor canvas.
Your page will now reload and once it has the header and the footer will be removed. The first thing I’m going to do is add a section with a spacer in. The only reason why I’m doing this is to make it easier to see and work with once the spacer has been added I’m just going to give it a bit of distance between the top and the middle of the page. Once that’s done I’m going to add another section to our page and this time I’m going to select one with two columns.
I’m now going to add a HTML widget and I’m going to click in the search box and just type in HTML. Once I’ve found it I’m going to drag it into the left hand side of our columns on the left hand side. I’m going to paste in our HTML code which you can find in the description of this Tutorial. As you can see there’s already an image added and this is because it’s reading it from my HTML code.
Don’t worry I’ll be showing you how to add your images to your code later in the Tutorial. The first thing we’re going to do is change our block width and we can find that in the top of our HTML code on the left hand side. The second line down it says width 90 and we’re going to change this to 99. The next thing we’re going to do is remove our padding and we can do this on the full flying down going to pad in where it says 17 pixels.
We’re going to leave these blank the main reasons why I want to remove the padding is. Because I don’t want it to interfere with our end result will look like. Plus I want Elementor to do a lot more of the work. The next thing we’re going to do is change the size of our image. If we look down for our code towards the middle we’re going to see IMG style. On the line below that it’s says width 225 PX and this is where we change the width of our image.
I’m going to highlight it and change it to 5225. Next to that it says height and underneath it has 100. I’m also going to highlight this and change it to 280. To make sure there’s no gaps around that image when we start using Elementor to add the padding. We’re going to add a background colour towards the top of our code. We’ve got a hash and it’s followed by a load of zeros we’re going to change this to White.
This is about as much of the HTML code as we need to change for the moment.
We will return later on to change our images. What we’re going to do now is click on the advanced tab on the top left hand side and we’re going to start adding padding. We do need to be able to change our padding individually. To do this we need to unlink our values and click on the grey box next to padding. The first bit of padding we’re going to add is to the bottom of our image. So in the box there it says bottom we’re going to type in 80 in our other three boxes we’re going to add a value of 20.
So that’s 20 on the top 20 on the right and 20 on the left. I do actually think it would look better if it had a bit more padding at the bottom. So I am going to go back and change it to 90. the next thing I’m going to do is change the colour of our background. I’m going to click on background on the left hand side and select our Colour Picker. Because I want my image to look like a Polaroid I’m going to select a white background I also want to give them a 3d effect.
So I’m going to click on border and box Shadow. I’m also going to change the amount of blur on the shadow so I’m going to change this to 20. This just makes the image look like it’s sitting off the page. More so check that out image looks how we want it to look on our final page. We’re going to click on the preview button next to the publish button on the bottom row. When our page loads you’ll see our image looks how we want it to.
If I was going to add this to a client’s website I would actually make the height of the Box slightly bigger. We’re gonna now move on to adding more images to our page. Because all the hard work’s done all we need to do is copy this image. We can do this by hovering over our image and right clicking in the pop-up menu select duplicate. For this Tutorial. I am going to duplicate it four times. You can do this as many times as you like as I’m going to be rotating the images later in the Tutorial. I am going to go into the advanced Tab and give each image a class name.
For this one’s class name I am going to call it imagea. The next one will be imageb. The third one will have a class name of imagec and the final will be imaged. Once they’ve all been added we’re going to go back into our HTML code and we’re going to change our images. By clicking on content in the top left hand side we’ll go back to our code. The first web address we can see in our code is our Target website. This means if you wanted to divert people to Google or any other website.
Right you would type their web address in here because we’re using it to open an image from our image gallery. All we need to do is type in that images URL. To do that we need to go into our media library in WordPress. Once there we’re going to select our image that we want to use and then we’re going to click on the copy URL button. Head back to Elementor and on the left hand side we’re going to have to paste in our URLs. To make sure we’re changing the right one we need to give it a click and then we’re going to click on content in the top left hand side.
Just above our cursor is our Target URL we’re going to highlight this and paste in our new image URL. This is where it’s going to open every time someone clicks on our image. Now we’re going to change what’s displayed on our page. If we look to the bottom of our code you can see the second URL. We’re going to highlight this and paste in our new link and as you can see it changes as soon as you add the URL.
Every image but what I will say is you will need to go into your media library and copy and paste your URL into those spots in the code. Once all that’s done we’re going to start changing the positions of our images on the page. We’re going to scroll up to the top of our page and give our image a quick click to make sure we’re working on the right one.
The first thing we need to do is go down to Z index and give it a value of 1. Now we’re going to change our position from default to Absolute. Once that’s done we’re going to drag it into the position we want it on our page. We’re going to have to repeat this process for all the images. Each one will need a higher Z index number from the last and to be set to Absolute. So the next one will be two which will make it sit on top of one. Three will sit on top of two and one and four will sit on three two and one.
Once all that’s done we can start finalizing our positions on our page. As they’re set to Absolute we can move them to pretty much wherever we like on the page. Once we have got them into position we can check how they’ll look on our page by clicking on the preview button on the bottom left hand side. I’m happy with the way these look so the next thing we’re going to do is add the rotation to the images. You will need Elementor Pro to add CSS to these images.
If you haven’t got Elementor Pro you can find a link in the description below and if you’re finding this Tutorial useful please do hit that like and subscribe button.
I have left the code for you to find below. We’re now going to head back over to Elementor and in our image. We’re going to scroll down to the bottom of the advanced Tab and go into custom CSS. You’re going to have to copy and paste the code that’s in the description into this box. Now we need to go into layout and check our CSS class. This one is imagec so we’re going to go back to custom CSS. Where the full stop is at the beginning we’re going to type in imagec. Once entered it will automatically rotate.
To change how much it rotates highlight the 50 degrees and I’m going to enter in 10. I am going to repeat this process for all our images. I’m also going to check each one’s class name go into custom CSS and paste in our. Once I’ve done that I’m going to add their CSS name to the front of our code. I’m also going to change the rotation for each image and the effect. I’m going for is that they’ve been scattered onto the page. Once our CSS code has been added to all our images and we’ve changed their rotation.
All that’s left to do is reposition them on the page. To make sure they sit where we want them to. I’m happy where everything is on our page at the moment so I’m going to preview it. I’m going to do that by clicking on the preview button next to the publish button on the bottom left hand side. This is what our page looked like before we added the rotations and this is what it looks like after each of the images can be clicked from here.
So we can check that everything works once you’ve checked all your room images are opening properly. Then you can go and publish that page. Obviously you will have to add your own headers and text to your page. I hope this does give you a good start in making something a little bit different.
Remember you do need Elementor Pro to add custom CSS. If you do want to sign up for Elementor Pro there is a link below. It is an affiliate link it doesn’t cost you any more to use but it does give me a very small percentage of Elementor’s profits if you choose to use it. Don’t forget to hit that like And subscribe button and check out the Tutorial that’s on the screen now.
Thanks for watching and I’ll see you in the next Tutorial.
