How to Create Pill-Shaped Text in Squarespace

Transforming your Squarespace text into a pill-shaped style can greatly enhance the visual appeal of your website, making it more engaging and user-friendly. In this step-by-step tutorial, I'll guide you through the process of customizing text blocks into a pill shape using simple CSS tweaks. This easy technique is perfect for adding a modern touch to your site's design.

Watch the Video

Check out the YouTube video below 👇

How to Create Pill-Shaped Text in Squarespace: A Step-by-Step Guide

1. Add Your Text Block and Italize it: Start by adding a text block to your Squarespace page. You can do this by navigating to the area of the page where you want the text and selecting the option to add a new block. Choose 'Text' from the available options. *Make sure you italicize the text for the css to work*

2. Access Custom CSS: To customize the shape of your text block, you'll need to access the Custom CSS section of your Squarespace site. This is typically found under Design > Custom CSS.

3. Apply CSS for Pill Shape: In the Custom CSS section, paste the following code to transform your text block into a pill shape:

em {

font-size: 12px;

padding: 10px 16px !important;

color: white;

border-radius: 10px;

background: purple;

font-style: normal !important;

}

4. Customize Further: Feel free to tweak the color, padding, font size, border radius, and background color in the CSS code to match your site’s design and branding. The flexibility of CSS allows you to create a unique and attractive text presentation.

By following these steps, you can easily add stylish, pill-shaped text to your Squarespace website, enhancing readability and aesthetic appeal. This simple yet effective customization can make your content stand out and give your site a modern, professional look.

Your Designer

I’m Wesley, a Squarespace website designer. I’ve created amazing websites for multiple clients across different industries from Education sites to Wellness brands to Accounting Firms. If you’re looking for a website and want to discuss a potential project, email me at wesley@websleydesign.com. You can also schedule a free 15-minute consultation call