How To Use Z-Index And Rotate Images In CSS
Hi guys in this video I’m going to show you how to use Z index I’m also going to show you how you can rotate images and spaces with custom CSS code to do that you will need Elementor Pro and in this video I am going to show you how to install Elementor Pro there’s lots to get through in this video so sit back relax hit that like And subscribe button and let’s get into the video
hi guys the first thing you’re going to need to do is go over to the Elementor website which you can find at the top of the description and choose your price plan if you haven’t already got one once you have selected which price plan best suits your needs click on the buy now button you’re then going to be asked to fill out your name and your payment details once you have paid you’ll be sent a verification code to your email address if you have already got an Elementor Pro license then all you need to do is go back onto the main home page and click on the login button on the top row.
Then you’ll have to enter your email address password and click on the sign in button now that you’re logged into your Elementor dashboard click on the download button on the top row and select Elementor Pro expert this will download the Elementor Pro plugin in a zip file once it’s finished downloading head over to your WordPress dashboard from here you’re going to want to click on plugins on the left hand side.
Once the page is loaded we’re going to click on add new on the top row then we’re going to select upload plugin click on choose file and select the Elementor zip file and click open now you’re going to have to click on the install now button WordPress will then install the zip file and all you need to do is click on activate plugin you’ll be then taken back to your list of WordPress plugins as you can see Elementor pro has been added to that list all we need to do now is click on connect and activate once the page is loaded.
All we need to do is connect and activate our license and we do that by clicking on the activate button and that’s it you’re now free to design amazing websites with Elementor Pro now if we go back to a page that we’ve been working on we can see that the padlocks have been taken off of the Elementor Pro widgets and we’re free to use them as we please with Elementor Pro
Now installed we can start customizing our images with CSS so on a new page the first thing I’m going to do is add a new section and I’m going to choose the one with four columns.
In this second section I’m going to drag in the spacer and I’m going to change the spacer height to 233 and the reason I’ve chose this height is because I know the size of the image that I’m going to be using later on this may not be the height that you need but I’ll explain more later in the video for this spacer I’m going to go into the advanced Tab and go down to border and add a box Shadow next to our spacer.
I’m going to drag in an image widget on the left hand side I’m going to click on choose image and I’m going to select this picture of a jellyfish with our picture added we’re going to now change the image size and we can do this by clicking on the drop down menu on the left hand side because I want my image to match the size of my spacer I’m going to click on custom.
I also want to add a shadow to this image and I can do that by clicking on the advanced Tab and scrolling down to border all I need to do now is click on box shadow in the pop-up menu you can change the colour of your Shadow you can also change its position blur and spread I’m going to leave this how I found it but I do need to add a CSS class.
If you’re following along with this all you need to do is click on layout in the top left hand side next to where it says CSS classes I’m going to type in the word image and above this I’m going to change its position to Absolute for those who don’t know this just means I can move the image wherever I like on the page all I need to do is click on the image and I can start moving it around I now want to create a few multi-coloured tiles that are going to sit behind our image.
To do this I’m going to right click on our spacer widget and I’m going to click duplicate and I’m going to do this four times once that’s done you’re going to have to go into the advanced tab of each individual tile and you’re going to have to change its position from default to Absolute before I do this for the rest of the tiles I am going to give this one a background colour if we scroll down on the advanced tab we can see we’ve got background as an option click on this and where it says classic click on the Colour Picker.
Once in the color palette choose which color you want your tile to be once we’ve chosed the color for our tile we’re going to go back into layout and add a CSS class to this tile and we’re going to give it a z index of two if you’ve never heard of or use Z index before it allows you to stack elements on top of each other like layers so a z-index of two will sit on top of one three will sit on top of two and one and I’ll show you why this is relevant later in the video.
We now need to add a CSS class and I’m going to call this one space a to not repeat myself I am going to speed this section of the video up I’m going to give each towel a different colour
I’m also going to give them a different Z index number and their own unique CSS class name once all that’s done we can start moving our tiles around the page all you need to do is click and hold and drag them into position as you can see by using the Z index our tiles overlap I did miss out one of the tiles so I am going to go back in change the color change its position and change it said index.
We’re now going to move the image onto our tiles as you can see our image does fall under some of our tiles so we are going to change the Z index to make sure this sits at the very top we’re going to change this to five if you had 20 tiles sitting underneath
You would have to change this to 21. so that’s how we can use the Z index on our page to make this look even better we can change the angle of our image and our tiles the best bit if you’ve been following along is the hard work is already done to change the angle of our image we need to go into the advanced Tab and scroll to the bottom to custom CSS now if you go into the description you will be able to find the CSS code copy this and paste it into the CSS box as you can see this isn’t a complicated code we already have our angle set as minus 15.
To make this code take effect all we need to do is add our CSS class name just behind the full stop and the class name for this one is image and once typed in it will change just like that to change the angle of the tiles underneath we’re going to have to go into the custom CSS and paste in our code like before we’re going to select our tile go into advanced scroll down to the bottom to custom CSS and paste in our code the only difference being instead of typing in image we’re going to type in space a and just like before the angle will change.
You can also use this short bit of code to change angles of other elements such as text widgets and headers
Now all we have to do is go into each tile add our custom code and our CSS class names I will fast forward through this because I don’t want to bore you and I want to show you the end results remember if you have found this video useful so far please do hit that like And subscribe button and notifications Bell for future videos with all our CSS code added we’re going to preview our page and we can do that by clicking on the preview button next to the publish button once the page loads you’ll be able to see what the end result will look like if at any time we want
To change the angles of our image or our tiles all we need to do is go back into Elementor go into the advanced tab of our tile or our image then we’re going to have to go back into our custom CSS at the bottom of the list on the left hand side once there all we need to do is change the 15 degrees so if we type in 30 instead of 15 you’ll see a big difference in the angle you could.
Then go back into each tile and change their CSS angles as well as you can see with a short bit of CSS code you can make your website look really cool it’s really easy to do and you can make some stunning looking websites
Remember if you want to use custom CSS in Elementor you will need Elementor Pro if you’re not already signed up there is a link at the top of the description 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 sign up.
If you want to see other cool stuff you can do with CSS code then check out the videos in the playlist on the screen don’t forget to hit that like And subscribe button and notification Bell for future videos
Thanks for watching and I’ll see you in the next one
