Want a vertical label beside an image or a section?
The Text Direction settings of the Advanced Typography widget from The Plus Addons for Elementor turn text vertical and can rotate it with CSS transforms.
To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — The Advanced Typography widget needs The Plus Addons for Elementor Pro. In the free plugin it shows in the Elementor panel with a lock icon.
- Widget to enable: Advanced Typography, switched on under The Plus Addons > Widgets.
Steps
- Add the Advanced Typography widget, keep Select Option on Normal and type your text.
- Open Content > Text Direction.
- Set Vertical Text to Left to Right or Right to Left.
- Optional: turn on Vertical Letters to stack the letters upright instead of turning them.
- Optional: use Transform Normal, Transform Hover and Transform Origin for extra rotation.
Settings
| Setting | What it does | Default |
|---|---|---|
| Vertical Text | Normal keeps the text horizontal. Left to Right and Right to Left turn it vertical | Normal |
| Vertical Letters | Keeps each letter upright, one under the other. Shown only when Vertical Text is not Normal | Off |
| Vertical Direction | Initial, LTR or RTL (icon buttons). RTL shows the characters in reverse order, which also works on horizontal text | Initial |
| Transform Normal / Transform Hover | A CSS transform, for example rotate(-90deg), normally and on hover | Empty |
| Transform Origin | The point the transform turns around. It also sets the rotation point of the Continuous Animation | Center |
How It Behaves
- Vertical Text uses the CSS
writing-modeproperty. - Multiple mode has no Text Direction section. Use the Transform Normal field of each item instead, for example
rotate(-90deg).
