![]() Just add display: inline to your CSS like so: I assume you don’t want a massive lowlight that spans the whole title area. It’s not limited to the width of the actual title text. Once you save that text in the Custom CSS section of your Squarespace site, you can see a lowlight appear behind all H1 titles.īut the lowlight is covering the entire width title area. #8ca5af = the bottom color, in this case blueĥ0% = for the bottom fifty percent of the area Rgba(255,255,255,0) = the top color, in this case transparentĥ0% = for the first fifty percent of the area Make the title background white for the top fifty percent and blue for the bottom fifty percent.ġ80deg = 180 degrees, aka making the lowlight horizontal If you were reading the CSS as a human, the instructions would say… Let’s start with a straightforward option - adding a lowlight behind all your H1 titles in Squarespace.Īdd this code to your Custom CSS section:īackground: linear-gradient(180deg, rgba(255,255,255,0) 50%, #8cb8ba 50%) Once you are comfortable editing CSS, you’ll have a ton more freedom to edit and style your site.Īnd with that, let’s dive into it! Add a Highlight to Titles in Squarespace Playing around with styles is a great way to get comfortable with CSS. You definitely do not need to know how to build the whole house.īut if the lights go off, it’s helpful to know how to reset the circuit breaker. You can copy-and-paste these examples directly into your Squarespace site to get started.īut I also encourage you to play around with the options and get familiar with the styles! Even if you’re not a designer, it’s helpful to have some familiarity with your website style. Today, I’ll give you examples to add lowlights to a few different pieces of your content: To add lowlights in Squarespace, you’ll add custom CSS to your site. So basically, your CSS sets the style of your HTML content. ![]() HTML is the content of the site - the text, images, links, etc.ĬSS is the style of the site - the fonts, colors, and layout. Here’s an easy way to think about your Squarespace website’s two parts… If you’ve never encountered CSS before, never fear. To add highlights to your website, you’ll add custom CSS style code to your Squarespace site. (Psst…wondering how to pick the right colors for your website?Ĭheck out the colors section in How to Create Easy & Elegant Website Brand Guidelines.) How to Highlight Text in Squarespace Plus, you can use colors that tie into your overall site branding - so your site looks super sleek and cohesive. ![]() Lowlights are a great way to draw attention to titles and text on your website. One of my fav additions are low highlights, aka lowlights.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |