![]() I was especially excited to see her give a quick little 101 on why certain lines of CSS were included in this little code snippet, not just a quick “here’s your code and where to stick it”!Ĭopy and paste tutorials are no doubt super duper handy, and a legit gift from the internet gods when you don’t have time to go out and learn code (which is basically like learning a new language). This brilliant and ridiculously simple video tutorialcomes to us courtesy of Becca over at Inside The Square (another lady absolutely killing it in the CSS/coding space!) How to create vertical text in Squarespace using CSS Method of CSS injection used: Universal Here’s a quick peek at what a “low” or off-center highlight effect looks like, so ya know!ĩ. How to add a low highlight to links using CSS On the mobile version, we’ll switch that up to horizontal lines. On the desktop version of the site, these blocks of text will be separated with vertical lines. How to add a low highlight to your entire heading using CSS In this tutorial we are going to separate a few blocks of text with a small border. She also covers a few other handy but related tricks in this tutorial, including: This tutorial allows you to add a partial, or off-center highlight to your text, whether it’s just one word you want to stand out, or a whole sentence or title! This little gem comes to us courtesy of the talented lady behind Thirty Eight Visuals (who, btw is an absolute killer resource for all things custom CSS!) This allows you to select a specific element on a page: Click the text block you’d like to add the background color to, then look right above the highlighted area for the ID that starts with block-yui and copy it down. ![]() At the top of the page, click the mouse icon. How to add a low highlight to text in Squarespace using CSS Method of CSS injection used: Universal & inline In Google Chrome, right click on your Squarespace page and click Inspect. So while I don’t recommend going too too crazy with code (I share why in Squarespace CSS: what you need to know before you get started) it can be pretty fun to push those Squarespace design boundaries from time to time! Top CSS tips for customizing Fonts & text in Squarespace 1. Now, if you’ve joined me in my Square Secretscourse you know I’m all about learning to master Squarespace and customize your site without having to learn to code, but I also totally get that sometimes we’re just really dying for a small tweak here or there that requires CSS. ![]() I’m doing a round-up of the handiest CSS tutorials out there for styling your fonts & text blocks, as well as which method of CSS code injection they use! It’s time to put all that new-found CSS nerdery to good use! Okie dokes, so remember in Squarespace CSS: what you need to know before you get started, we chatted about the 3 specific ways that custom CSS could be added to your Squarespace site?Īnd how each one served a slightlyyy different but important purpose than the other? Suggested reading: Squarespace CSS: what you need to know before you get started, annnnd Squarespace CSS: how to target specific pages, sections, or blocks on your site. Just joining us for the Intro to Squarespace CSS series? Welcome! I’ve done a couple other posts on the topic, so it may be worth circling back around to those as well before diving into this one! You can use HTML to format your text.įinally, click the “Publish” button on the top.Pre-S. Next, enter the text that you want to scroll in the text block. To do this, click the “+” icon in the top left corner of the page and then select “Text” from the menu that appears. How to add scrolling text in Squarespace?įirst, you’ll need to add a new text block to your page. This is a great way to add attention to your Call to action or text you feel is important that you want to draw your visitor’s eye to. Essentially it’s a text that moves from one side to the other on your website. To help stay on trend Squarespace finally released how you can add scrolling text on any page on your website without using any code! If you’re not sure how to add scrolling text in Squarespace, don’t worry! This post will show you how to use the new scrolling text block feature in Squarespace.įirstly, you find be wondering What is a scrolling text?Ī scrolling text is text that is scrollable. ![]() You might have noticed that adding scrolling text to a website has been trending in your website design world. One of the best ways to keep your content fresh is to add scrolling text to your Squarespace site. When designing your website, you’ll come across many “blank” spaces that need to be filled. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |