Can anyone assist with creating vertical text in Webflow?

Published on
September 22, 2023

How to Create Vertical Text in Webflow

If you're looking to create vertical text in Webflow, there are a couple of approaches you can take. Here's a step-by-step guide on how to achieve this:

1. Using CSS Transform

One way to create vertical text in Webflow is by using CSS transform property. Here's how you can do it:

  1. Select the element where you want to apply vertical text.
  2. Go to the Style panel on the right-hand side.
  3. Click on the "+ Add New Style" button to add a new class to the element.
  4. Give the class a name, for example, "vertical-text".
  5. Scroll down to the "Transform" section and click on the "+ Add New Transform" button.
  6. In the dropdown menu, select "rotate" and enter "90deg" for the rotation value. This will rotate the text by 90 degrees.
  7. Adjust the size and position of the element as needed.

2. Using Custom Code Embed

Another way to create vertical text in Webflow is by using custom code embed. Here's how you can do it:

  1. Select the element where you want to apply vertical text.
  2. Go to the "Settings" tab on the right-hand side.
  3. Scroll down and click on "Custom Code" in the left sidebar.
  4. Choose either the "Head Code" or "Footer Code" option, depending on where you want to add the custom code.
  5. In the code editor, paste the following CSS code:
.vertical-text {  writing-mode: vertical-rl;  text-orientation: upright;}
  1. Save the changes and publish your site.

Now the selected element will display the text vertically.

Keep in mind that these methods will affect the entire element, not just the text within it. If you only want to rotate the text without rotating the entire element, you can wrap the text in a <span> or <div> element and apply the vertical styles to that nested element instead.

I hope this helps you create vertical text in Webflow. Let me know if you have any further questions!

Additional Questions

  1. How can I make text rotate vertically in Webflow?
  2. Is it possible to create vertical text in Webflow without using custom code?
  3. Can I control the size and position of vertical text in Webflow?