Most of the time we create links or URLs that go to a specific webpage, and they load the webpage at the very top of it.

But sometimes we want links that load a section of a page, or even a section of the same page the link is on (e.g. "Return to top").

This is accomplished using anchor links.

There are two parts to anchor links:

[ 1 ]  The link

[ 2 ]  The anchor, which is the designation of where on the page the link will go

First, make the anchor.

An anchor is a snippet of HTML that gives a section of code a "name" or identification tag.

Because it is HTML, you need to create your anchor inside a Code Block on Squarespace or using the plain-text editor on WordPress.

In the Squarespace WYSIWYG editor, add a code block to wherever you want the link to go. Where the code block is, is what will be at the top of the browser upon clicking the link.

anchor-link-squarespace-code-block
 

I find that it helps to have the anchor be in a bit of blank space so that there's breathing room at the top of the page. To do that, add this to your code block:

<p id="anchor-example-name"> </p>

Change the text between the "" marks (don't delete these marks) to be whatever you want to appear in the actual URL that links to this anchor..

As with image-naming rules, I say all-lower-case-and-no-spaces-connect-everything-with-hyphens. Numerical digits are fine, but that's it. alpha-num3r1c and hyphens only.

If you're linking to a part of a page with a header, then the major word from that header is probably what you'll use.

Example: on a page with a long list of books, you might have a section called non-fiction. So make your anchor "non-fiction".

Two important considerations:

[ 1 ]  People will see your anchor title in their browser window, so choose something you're OK with everyone noticing.

[ 2 ]  Use an anchor name only once per page, and for no chance of error, you might even use an anchor name once on your entire website.

After naming your anchor, click:

[ APPLY ]

and add another block (if needed) below that code block for where this content will begin.

In WordPress, flip to the plain-text editor and add the same code to the section of the page that you want to appear at the top.

An alternate code option is:

<a name="anchor-example-name"> </a>
 

Second, link to the anchor.

Now, any text or images that you want to link to this anchor, create a link following your usual method and then append your URL with:

#anchor-example-name

For example, if I had created an anchor called "publications" on a page whose URL was /speaker, the anchor link would look like this:

www.crystaleebeck.com/speaker#publications

That's it!

 

For more, check out Creating anchor links by Squarespace Help.


 

Helpful?

Tap the

Still got Qs?

Leave a comment.

 

Comment