![]() If you don’t want the links to be highlighted, use this instead:īy adding p, the formatting now applies to links ( a) inside of paragraphs ( p). So you could take the H1 above and change H1 to a:īut in that case, Squarespace will add a lowlight to ALL the links on your site - including your logo and menu: If you don’t want to have to worry about adding the span tags to every link, here’s an easy way to add lowlights to all links by default. Let’s say you want to use lowlights for all the links on your website. ![]() For example, maybe you want a blue AND pink lowlight.īackground: linear-gradient(180deg, rgba(255,255,255,0) 50%, #ffb6c1 50%) That way, you can add extra lowlight colors easily. Rather than using a generic name like “lowlight,” I recommend using more specific names like “lowlight-blue.” Now in Squarespace, add a code block and paste this text:Īnd presto! You have a lowlight behind just the word title. In your CSS, replace H1 with a name like lowlight: Instead of applying your new CSS to the entire H1 title, you can use it in specific instances. Let’s say you want to add a lowlight to just certain titles or words in Squarespace. Now the lowlight will only span the width of the actual H1 title.Īdd a Highlight to Specific Words in Squarespace 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. ,, , Next, edit each page > Additional Info > Add a Code Block > paste the code, Email meif you have need any help (free, of course.).One of my fav additions are low highlights, aka lowlights. ![]() Site design / logo 2023 Stack Exchange Inc user contributions licensed under CC BY-SA. Stand out online with the help of an experienced designer or developer.
0 Comments
Leave a Reply. |