Rotate Text 90 Degrees [Elementor Tutorial]

Video Transcript

Hi there! This is Barbara from Wicky Design. Today, I’m going to show you how to rotate text on its side using some CSS and the Elementor Page Builder.

This is part of a page that I designed for a client awhile back and I wanted a way to group together his customers on the page without just stacking a bunch of text on top of each other. So in order to do that, I put the text on its side so that it grouped everything, got the point across as to what these clients were, but it didn’t just stack on top of each other and it still had a nice, clean layout. So I’m going to show you how to do this in Elementor.

This will require an Elementor Pro account. I’m going to be using the custom CSS options in Elementor in order to do this. If you don’t have Elementor Pro, you can still achieve this effect, but you’d have to put the line of code in your custom CSS file and it’s just a little bit more work. So if you don’t have Elementor Pro, I do recommend getting it, but you can still achieve this effect without it.

So I have a 3 column layout with some images and some text underneath similar to what I showed you in my example. The first thing that I’m going to do is drag over a text editor widget. I’m going to change this text to say “Our Staff”. Then I’m going to go to the advanced tab and give this a class. I’m going to call the class “rotate”.

Now I’m going to go to the positioning tab. I’m going to change the position from default to absolute and you can see that puts the text over this image.

Now I’m going to go down to the bottom to custom CSS. I will paste the code in the description box for this video down below, but it’s just one line of code that we need to add. And that is:

.rotate {transform: rotate(-90deg);}

-90 will the text on its side. You can put in whatever degrees you want in this box, but if you want to get it to look like I had it in the example, that’s what you’ll use.

So now we have the text rotated onto its side, but obviously we want it off of the person’s face, so we need to adjust the positioning again. So we’ll go to positioning and we’ll just change the offset for both the vertical and horizontal axis so that it’s bumped up on the side instead of over this guys face.

And that’s all you have to do to achieve this effect. You’ll want to play around with things, adjust things accordingly and make sure that it does look good on tablet and mobile. So click that responsive mode, change the settings in here. As you can see on tablet and mobile and it kind of goes away, so we’ll need to adjust those settings accordingly. Maybe even just take it off of tablet and mobile altogether. This is generally more of like a desktop effect.

But that’s how you do it. And like I said, I will put the line of code in the video description. Play around with it and get some cool effects on your site. If you liked this video, give it a thumbs up, make sure to subscribe to the channel for more videos like this and we’ll see you next time. Bye!