Add vertical text to your Squarespace website

KEY TOPICS

1.ACCESS THE CUSTOM CSS PANEL

2.TARGET YOUR TEXT ELEMENT

3.APPLY THE CSS CODE

Vertical text, an eye-catching design element, can be used for headers, call-to-actions, or even entire sections to instantly grab your visitors' attention. But how do you incorporate this into your Squarespace site? Don't worry, we've got you covered.

Leverage CSS for Fine-Grained Control:

1. ACCESS THE CUSTOM CSS PANEL

   Head to WEBSITE > WEBSITE TOOLS > CUSTOM CSS within your Squarespace backend

2. TARGET YOUR TEXT ELEMENT

   Use the element selector to identify the specific text block you want to transform. This could be a heading, paragraph, or any other text element.

3. APPLY THE CSS CODE

   Paste the following code, replacing #block-YOURBLOCKID with your actual block ID and adjusting the writing-mode and transform values as needed:

// VERTICAL TEXT //
#block-YOURBLOCKID {
  writing-mode: vertical-rl;
  transform: rotate(90deg);
  /* Optional: Adjust margin and alignment */
  margin: 0 auto;
  text-align: center;
}

Tips and Tricks for Vertical Text Success:

• Consider Readability: Remember, vertical text can be harder to read. Use it sparingly and for short bursts of text

• Ensure Mobile Responsiveness: Test your website on different devices to ensure the vertical text doesn't break the layout

• Align with Your Brand: Choose a style and placement that complements your overall website design

• Start Small and Experiment: Don't go overboard! Introduce vertical text gradually and experiment to find what works best for your audience.