Can I add the CSS code "writing-mode: vertical-rl" to create a vertical heading in Webflow without having to rotate it 90 degrees?
TL;DR
- Access your Webflow project, select the text element, and add a class like "vertical-text."
- Use the Style Panel to input
writing-mode: vertical-rl;and adjust alignment, padding, and margins as needed.
To create a vertical heading in Webflow using the writing-mode: vertical-rl property, follow these steps:
1. Open the Design Panel
- Access your Webflow project and navigate to the page where you want to add the vertical heading.
- Select the element (like a heading or text block) that you wish to apply the CSS to.
2. Add a Custom CSS Class
- Go to the Selector field and add a class to the selected element. For example, name it “vertical-text.”
3. Customize the CSS Code
- Scroll to the bottom of the Style Panel and click on the "Plus" icon to add a custom CSS style.
- In the Custom Code Editor panel, input the following:
writing-mode: vertical-rl;
4. Apply Additional Style Adjustments
- If necessary, adjust text alignment, padding, and margins to perfect the appearance of the text in its new orientation.
Summary
To make a heading vertical in Webflow using writing-mode: vertical-rl, you need to assign a custom class and add the CSS property through the Design Panel. Adjust other styling settings to ensure it fits well with the design.
