How To Make Vertical Text On WordPress Website Using Elementor Pro

You are currently viewing How To Make Vertical Text On WordPress Website Using Elementor Pro

In this blog, we will learn how to make the vertical text on a wordpress website using elementor pro. Here I am using the CUSTOM CSS feature of elementor pro, so it’s mandatory that you have elementor pro. If you do have not elementor pro so you can download it from here: So, we will learn the full process with a few steps so let’s begin:

  • Place the heading widget
  • First vertical text
  • Second vertical text
  • Bottom line


Place the heading

At first drag and drop the heading from the elements. Then customize it and add your wish, here I am changing text color, font style, font size, letter spacing, etc.


first css 1

After customizing the text, now go to the advanced tab, Scroll down open the customs CSS and paste the CSS which is given below after you put the CSS you will see the text is vertically aligned. So, here is used transform rotate element to make vertical. You can change the deg as your wish, I keep it as it is.

selector .elementor-widget-container{
    transform: rotate(-90deg)

After putting the CSS and making it vertical, now you have to make the width as inline auto and position make it to absolute. After doing that you can drag this by pressing the position icon and placing it anywhere you wish. After making any changes don’t forget to click on the green update button.


Second CSS

Now we’re gonna explain how to make vertical letters no if you can see that on the images I have made one more progress bar text and changed the color to blue color and gave some padding, keep it as like before after that put the CSS on the custom CSS so if you want to do like theme then you can follow my steps. Here’s the second CSS is given below:

    word-break: break-all;
custom widht

Now go to the advanced tab and make the width add a custom width, here I have selected 26px width, you have to choose your size as your requirements. Also before putting the CSS I have changed the line height and the letter spacing.


After doing all of this you will see still the text it’s not alignment perfectly it is mixing up with each other, so to separately give align them we have to use br tag. you can follow above the image.


Now you have successfully created a vertical text. So, here’s the blog that how you can create vertical text using elementor pro.


So, in this blog, you have learned how to make vertically aligned using elementor pro. Elementor is the most popular and powerful page builder that can create amazing creations with your creativity. The most important thing is that WE MADE A VIDEO ON HOW TO MAKE VERTICAL TEXT ON WORDPRESS WEBSITE USING ELEMENTOR PRO, here’s the link, you can watch this you will better understand:

That’s all there is to it! We hope that you’ve learned something new today and that you’ll be able to apply it to your own designs.

If you like it then share this post and if you have any questions or feedback on this blog, please leave them in the comments, we will reply to you shortly!

Leave a Reply