Super Simple Elementor Vertical Text

Two(2) lines of CSS codes are all you need to create vertical text in Elementor. No extra plugin, no additional bloat to your WordPress site. All you need is to include these two lines of CSS codes in the widget's CSS editor or your theme's customizer and off you go.

This will not be a long tutorial with screenshots to guide you on how to successfully create this text layout in your project. So, let's dive into creating vertical text in Elementor.

Unlike, other page builders that come with the feature to click a button and you will create a vertical text, in  Elementor, you will need to either have a plugin like Ooohboi Steroid on Elementor installed on your WP site or you manually code it.

Because speed is a concern for everyone building their websites or building websites for clients, manually adding some lines of CSS will really help you reduce the bloat that comes with installing plugins on your WP website.

You can take a look at what we will be trying to achieve in Elementor:

Add these codes to get Vertical Text in Elementor

This code to replicate example 1

<script> 
/* Please login to get the code 
 * The code will be for the Super Simple Elementor Vertical Text tutorial 
 * Found at this URL https://element.how/elementor-vertical-text/ 
 */ 
</script>

Elementor Free Users: learn how to add CSS to Elementor free and how to deal with the 'selector' keyword.

What the above code means:

The CSS property "writing-mode" is used to layout your text horizontally or vertically. In our code, I used one of the five values(vertical-lr) to tell the script to be laid out vertically and should read from top to bottom. If you wish to try other values that belong to writing mode, look at this Mozilla doc for more info.

Text orientation property only affects texts in vertical mode. I used the upright value to rotate the characters 90° to their natural position.

Elementor Vertical Text without upright orientation (example 2)

Without the text-orientation line in the CSS code, your text with go from left to right and top to bottom as seen in example 2 in the live demo. For limited characters, vertical-lr and vertical-rl (another value for the writing-mode CSS property) have the same layout. The difference is seen if you are dealing with a long number of characters like paragraph(s).

The code to replicate example 2 is:

<script> 
/* Please login to get the code 
 * The code will be for the Super Simple Elementor Vertical Text tutorial 
 * Found at this URL https://element.how/elementor-vertical-text/ 
 */ 
</script>

Replicating example 3 vertical text

The third example makes use of the transform CSS property. The text was rotated by 180°. This gives you an opposite layout to what you have in example 2.

Code for this example is:

<script> 
/* Please login to get the code 
 * The code will be for the Super Simple Elementor Vertical Text tutorial 
 * Found at this URL https://element.how/elementor-vertical-text/ 
 */ 
</script>

I hope you found this tutorial helpful in your web design project. If you have any question you'd want me to help you with, please leave a comment and I will respond ASAP. Follow us on Youtube and turn on the notification to get new design tutorials about Elementor!