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: https://dcreato.com/go/elementor. 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

STEP-1 PLACE THE HEADING WIDGET

 

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.

STEP-2 FIRST VERTICAL TEXT

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.

STEP-3 SECOND VERTICAL TEXT

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:

  selector{      word-break: break-all;  }

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.

BOTTOM LINE

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: https://youtu.be/B5fg3aePgDY

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!