Upgrade Your Website with Easy Code

It’s easy to upgrade your website with just a few snippets of code. If this is your first time seeing or hearing of ‘code’, hop over to this blog post where I’ll give you a brief overview of what CSS is and how to read it. If you’re already a pro, carry on!

---

Jump to the custom code you’re looking for:

Use a Code Block to add custom text

Turn last navigation item into a button

Create an anchor link

— Use a Code Block to add custom text

Sometimes, you just need to add a little something to a bit of text — a different colour, size or style. That’s where you can use a simple bit of HTML code to customise it.

As you may have already noticed, Squarespace comes with 3 levels of heading tags (H1, H2, H3) and Normal, the paragraph text styling. Your designer will have already set the styling of these in the Site Styles panel.

Take note of the tag (h1, h2 etc.) of the font you want your text to be in. That’s how you will set the font of the text you’re going to style.

Source: https://www.w3schools.com/css/css_syntax.asp

These are 7 common properties to alter the text styling:

• font-size: Set font size with Em

  • 1em is equal to the current font size.

• font-style:

  • normal: Sets the text to the normal font (turns existing italics off.)

  • italic: Sets the text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.

  • oblique: Sets the text to use a simulated version of an italic font, created by slanting the normal version.

• font-weight: Sets how bold the text is.

  • normal, bold: Normal and bold font weight

  • lighter, bolder: Sets the current element's boldness to be one step lighter or heavier than its parent element's boldness.

  • 100–900: Numeric boldness values that provide finer grained control than the above keywords, if needed. 

• text-transform

  • none: Prevents any transformation.

  • uppercase

  • lowercase

  • capitalize: All words to Have The First Letter Capitalized.

• color (not ‘colour’)

  • a color name - like "red”

  • a HEX value - like "#ff0000"

  • an RGB value - like "rgb(255,0,0)“

• text-align: Sets the horizontal alignment of the text

  • center

  • left

  • right

  • justified

• text-decoration: Sets/unsets text decorations on fonts.

  • none: Unsets any text decorations already present.

  • underline: Underlines the text.

  • line-through: Puts a strikethrough over the text.

Here’s an example using all the properties:

<h3 style="
  font-size: 1.5em;
  font-style: italic;
  font-weight: 500;
  text-transform: uppercase;
  color: #ff0000; 
  text-align: center; 
  letter-spacing: 3px; 
  text-decoration: underline;">
  Your text goes here
</h3>

And here’s how to use it:

1. Copy and paste the above code into your Code block (or you can type it out yourself)

2. Replace the selector (eg. h1, h2, h3, p)

3. Delete the properties (eg. font-size, color) you don’t need

4. Replace the values (eg. italic, uppercase) with the ones you want to use.

5. Insert your text in place of ‘Your text goes here’

⬆︎ BACK TO MENU

---

— Turn last navigation item into a button

If you have a call-to-action in your navigation bar, this code will turn into a button.

1. Copy and paste the code below into the Custom CSS Editor box.

2. Replace both of the background and color values with the colors of your choice.

3. Feel free to adjust the padding and border radius to your liking.

/* Nav Colored Button */
.Header-nav.Header-nav--primary a:last-child {
    background: #00CBBA; /* button color */
    color: #FFFFFF; /* text color */
    padding: 15px;
    border-radius: 30px;
}
.Header-nav.Header-nav--primary a:last-child:hover {
  background-color: black;
  color: white !important;
}

If your nav item has a drop-down menu, use this instead:

/* Nav Colored Button */
.Header-nav.Header-nav--primary .Header-nav-item--folder:last-of-type {
  background-color: red; /* button color */
  color: white; /* text color */
  padding: 15px 25px;
  border-radius: 30px;
}
.Header-nav.Header-nav--primary .Header-nav-item--folder:last-of-type:hover {
  background-color: black;
  color: white!important;
}

⬆︎ BACK TO MENU

---

— Create an anchor link

An anchor link (or "page jump") is a special URL that takes you to a specific place on a page.

There are 2 ways to add anchor links in Squarespace.

Method 1: Adding Anchor Links on an Index Page

1. In the Pages panel, hover over the Index section you want to link to. Click  to open page settings for that section.

   Copy the slug from the URL Slug field. You'll use this slug to create an anchor link.

2. Continue to create the link that visitors will click below.

Method 2: Adding an Anchor Link Anywhere You Want

First, you’ll create the place you want your link to jump to.

1. In the page editor, scroll to the section you want the link to take visitors to and add a Code Block.

2. Replace the words Hello, World! with

   <div id="anchor-name"></div>

3. Swap out “anchor-name” for a unique ID of your choice to identify that particular anchor. Remember what it is because you will need it when you create the link in the next step.

   • The text for your ID can be anything you want, but can't include spaces. Separate words with a dash instead.

   • IDs are case-sensitive and can only be used once per page. See our best practice tips for more help.

4. Click Apply.

Now you’ll create the link that visitors will click. It can be a text link, a button or a navigation menu item.

1. Go to the place on your page that you want to link to your anchor.

2. In the link field of your text, button, navigation etc., add:

⇩

If your anchor is on a different page from the link (eg. navigation menu item):

https://yoursiteurl.com/pageslug/#anchor-name

⇩

If your anchor is on the same page as the link:

#anchor-name

Click Apply and you’re done!

⬆︎ BACK TO MENU

Check back as I will be updating this post regularly with new custom code!

---

Need help with that?

---