Super Simple Elementor Vertical Text
Add these codes to get Vertical Text in Elementor
This code replicates Example 1
selector .elementor-heading-title {
writing-mode: vertical-lr;
text-orientation: upright;
}
Understanding the Above Code:
The CSS property “writing-mode” determines whether your text is laid out horizontally or vertically. In this code, I used one of the five values—vertical-lr—to specify a vertical layout that reads from top to bottom. If you want to explore other values related to writing mode, check out this Mozilla documentation for more details.
The text orientation property applies only in vertical mode. I used the “upright” value to rotate the characters 90° from their natural position.
selector .elementor-heading-title {
writing-mode: vertical-lr;
text-orientation: sideways-right;
}
Replicating example 3 vertical text
The third example utilizes the transform CSS property to rotate the text by 180°. This creates a layout that is the opposite of what is shown in Example 2.
The code for this example is:
selector .elementor-heading-title {
writing-mode: vertical-lr;
text-orientation: sideways-right;
transform: rotate(180deg);
}