Super Simple Elementor Vertical Text

Super Simple Elementor Vertical Text

Table of Contents

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

selector .elementor-heading-title {
writing-mode: vertical-lr;
text-orientation: upright;
}

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:

selector .elementor-heading-title {
writing-mode: vertical-lr;
text-orientation: sideways-right;
}

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:

selector .elementor-heading-title {
writing-mode: vertical-lr;
text-orientation: sideways-right;
transform: rotate(180deg);
}

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!

Looking for something else? Search across 2369 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

2 Responses

  1. You should include text orientation on example 2 and 3 -
    As it is now, you are not rotating signs like ©

    In example 2, you need text-orientation: sideways-right; to rotate signs like that, and it doesn't hurt any other text.
    Webkit browsers need the prefix, so -webkit-text-orientation: sideways; /* for Webkit */ will help firefox etc.

    1. Thank you for this. I didn't know about that bug for signs like ©.

      I updated the code with text-orientation: sideways;

      Verified working fine even without the prefix, so I will keep it that way. Viewers reading this: if you want maximal backward compatibility, run the CSS you will get here (and from any other article) through the autoprefixer: https://autoprefixer.github.io/

      Cheers!

Leave a Reply