Create quick jumps or anchor points in Squarespace

There's a very simple way to make those long pages filled with your awesome content easier to read.

And if you're already providing a "table of contents" of sorts, so your audience knows which points you'll be touching in your blog post or info page, you're halfway done!

Today's bite-sized code trick is all about how to create quick jumps (aka anchor links or anchor points)inside long pieces of content – and between pages in your site – with just two lines of code!

To create an anchor point you need two parts:

The landing place of the jump (the anchor).

The link that will get you there.

Depending on the type of page you're using, the first one can be done with either a code block or by using the URL slug of your section.

Using a code block

You can either create an empty div and place the block right before the title where you want to land, like so:

Or create your heading inside the code block instead:

In any case, you need to give the div or heading inside the code block a specific ID. That id is what we'll use as a link later on to create the jump.

If you want to go with the first option, the empty div, your HTML would look like this:

<div id="unique-id-here"></div>

And if you want to go the second route and turn the actual heading into an anchor, then this would be your HTML (I'm assuming you're using a Heading 3, but you can use any tag you want, even paragraph):

<h3 id="unique-id-here"> This would be your content section title </h3>

Using an index page

If you want to jump to a particular section inside an index page, you don't need the code block from before! The URL of your section is already the ID you need to use in your link.

So if your URL slug for the place you want to land is /this-one then the ID will be #this-one

Note: if you're using the Pacific template, when setting your link you need to use the word -section as suffix, so if your section's URL slug is /this-one, your ID would be #this-one-section

Creating the quick jump

Now all that's left to do is create a regular link wherever on your page where you want people to click, and use the ID selector as the URL: #unique-id-here or #this-one for indexes or #this-one-section for indexes in the Pacific template

Easy peasy!

How to create a quick jump to a section on another page

Now, what if you want to have someone click a link and send them to a specific part of another page?

Simple, you just need to adjust the URL you're giving your link!

Let's say you want people to click a button that takes them to your contact form on another page, depending on the type of page you're using to contain that form you can use one of the following approaches:

If you're using a regular page (no index page) then simply add one of the HTML blocks from before wherever you want people to land. Remember you can use either the empty div or the code block with the heading, just make sure to give it a unique ID.

If the page is an index page, then again you don't need to add the HTML at all, it's even quicker! Just like before, you can use the URL slug of your index section.

Next, we also need the URL slug of your whole index page, the one you click to see the entire page.

So if for example your contact form is inside your Start Here page, your URL slug is probably /start-here

Putting it all together, the link you'll need to use will be /start-here#id

Note: if you're using an HTML block to create your anchor, then #id will be replaced with whichever name you set as the ID for the block (e.g. #unique-id-here). If you're using an index page section as the anchor, then #id will be replaced by its URL slug, in this example it would be #this-one or #this-one-section if using the Pacific template.

And there you go! Now you can add quick jumps, anchor links or anchor points to any part of your Squarespace site with just two lines of code!

Until next time,

B.

LIKED THIS POST?

I'd love it if you shared!

More Squarespace tips & tricks this way

When I talked about changing the size of mobile fonts in Squarespace at the very end of the post I gave you a quick tip on how to turn off automatic hyphenation. However, I wanted to do a separate post about it since there are some things you should consider when deciding to do it.

If you're using Squarespace's commenting system on your blog, you'll notice you can't change the color of the "Post Comment" black button through your style editor. However, today I want to show you a super easy code trick that you can use to do that and have the button match the rest of your site!

So, you want to create a custom landing page in Squarespace for an opt-in, product, tripwire or even for Instagram and you want to eliminate all distractions from the page so all your visitors have no escape, right? (insert evil laugh here). In that case you probably want to remove the header and footer from your page – otherwise why would you be reading this – so let's dive into how you can do that in your template.

Want to add some CSS to just one page on your site, that's NOT an index section? Don't want to add the code to your page's settings? Then you're going to want to find your page's unique ID to make all the changes you like on just one page of your Squarespace site. But don't worry, it's pretty easy to find. And if you're wondering, yes, this applies to any non-index page of any template!

I know I'm not the only one still running around making sure everything on my site is ready for the GDPR deadline, and since that includes setting the EU cookie banner I wanted to share a quick snippet that my lovely friend Yana Dirkx from Bliss & Gold came up with to make the awful Squarespace cookie banner look much much nicer!

Not feeling happy with how Squarespace is resizing your fonts in mobile? Then let's do something about it shall we? In today's quick tutorial I'm going to show you how you can easily change the size of your fonts in mobile view. Let's go!