Add vertical text to your Squarespace website

Vertical Text, this eye-catching design element can be used for headers, call-to-actions, or even entire sections, instantly grabbing 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.expand_more Use it sparingly and for short bursts of text.exclamation

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

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

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

KEY TOPICS

1.ACCESS THE CUSTOM CSS PANEL

2.TARGET YOUR TEXT ELEMENT

3.APPLY THE CSS CODE