How To Rotate Anything In Elementor Pro With CSS
hi guys in this video I’m going to show you how you can rotate anything in Elementor from images to text to spaces and icons you can rotate it all in Elementor so sit back relax hit that like And subscribe button and let’s get into the video
Okay guys to get things started the first thing we’re going to rotate is our heading and I’m going to drag that onto the page and type in rotate on the left hand side. I’m also going to make this a H1 heading this is only to make it easier for you to see on the screen. I’m now going to give this element its CSS class name and you can do that by clicking on the advanced tab on the top left hand side and selecting CSS classes under layout. In this box I’m going to type in text a you can name it can be anything you like.
I just want to use this for an example. Now you’re going to have to scroll to the bottom of the advanced Tab and click on custom CSS. This is only available for Elemental Pro users so if you haven’t got Elementor Pro and if you’re looking to sign up then please do use the link in the top of the description below. Now we need to paste in our custom CSS code that you can find in the below.
To rotate our text all we need to do is add our CSS class name. In the first line of our code it says dot image C and we’re going to change this to text A. Now I’m going to go back into layout and change our position to Absolute. This allows us to move our header anywhere on the page.
If we want to add more text or headings with different rotations, all we need to do is add another section and drag in another heading widget. This time I’m going to type in anything in our title box. Again I’m going to make this a H1 heading and I’m going to go into our Advanced Tab and change our CSS class name to text B.
Like before we’re going to go back into custom CSS in the advanced tab. Like before we’re going to paste in our code and this time where it says image C. We’re going to type in text B. I also want our text to rotate the opposite way so I’m going to remove the minus in our second line of the code. Also like before I’m going to change the layout and it’s positioned to Absolute again.
I’m going to drag it to the opposite side of our page. You can use this same bit of code to on buttons, images, icon boxes, and icons. Even spaces and Page divides. If you can add CSS to the widget and a CSS class, you can rotate anything within Elementor. Now I know this page doesn’t look well designed but it does lend itself and give you ideas on what you can do on your own website.
If you’re having a 50% sale on your website why not rotate that sticker along with the neon text code. If you want to see how to use this rotation in a unique Gallery then check out the Tutorial on my page.
Now remember you do need Elementor Pro to be able to use the CSS function. If you haven’t got Elementor Pro then please do use the link in the 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 do have any questions please do use the comments box below.
Thanks for watching and see you in the next video.
Rotate Anything In Elementor
