Can I add the CSS code "writing-mode: vertical-rl" to create a vertical heading in Webflow without having to rotate it 90 degrees?

You want to create a vertical heading in Webflow using the CSS property writing-mode: vertical-rl without rotating the element. Here's how you can do it:

​

1. Navigate to Your Webflow Project

• Open your Webflow Dashboard and select the project where you want to add the vertical text.

​

2. Select the Element

• Go to the Designer and select the text element you want to display vertically.
• Ensure it's the correct element by checking its name and position on the canvas.

​

3. Add a Custom Class

• Create a new class for the element if it doesn't have one. You can do this by typing a unique class name in the Selector box and hitting Enter.

​

4. Open Custom Code

• Go to the Page Settings or the Project Settings if you want this globally applied.
• Open the Custom Code tab where you can add custom CSS styles.

​

5. Insert the Writing Mode CSS

• Add the CSS property by including: .your-class-name { writing-mode: vertical-rl; }
• Replace your-class-name with the actual class name you applied to the element.

​

6. Save and Publish

• Save the changes you made in the Custom Code section.
• Publish the website to see the changes reflected.

​

Summary

You can display text vertically in Webflow by applying the CSS property writing-mode: vertical-rl to a specific class, without needing to rotate the text manually. This helps achieve a cleaner and more semantic approach to vertical text layout.