How to link to a specific part of a Squarespace page
Squarespace is a website hosting platform that uses a drag and drop design system for creating great looking webpages.
Whether you use one of their pre-designed page templates or design a page yourself from scratch, the latest version of Squarespace offers unrivalled versatility.
One useful feature Squarepace offers is the ability to create internal links from a button, piece of text or image to a different page in your site. This has SEO benefits that can improve your Google rank, and also means you can lead visitors quickly to the section of your site that is of most interest to them.
What about if you want to transfer them to a specific place in that other page, or even the current page that they are on? This could be useful for a number of reasons:
To encourage visitors to complete a web form and receive a ‘lead magnet’ or free offering.
To highlight a specific section of information that you want all visitors to read.
With a FAQ page or online course index page, to navigate from the index list to the relevant section.
As we will see in a minute, that is possible, but requires a clever workaround!
Internal links - linking to a page
Linking to a specific page from a button, piece of text or image is pretty simple. For text, simply highlight the text section and click the ‘Link’ button.
To make a button or image a hyperlink, select the button/image block, click the edit ‘pencil’ icon and then click the ‘Link’ settings wheel.
The ‘Link Editor’ will open.
Select the ‘Page’ tab and then click the ‘Search’ bar and type a page name or select it from the drop-down list.
Now click ‘Save’. Lastly, if you were creating a link from a piece of text, remember to click ‘Apply’ to confirm the change…….. Easy!
Linking to a specific point in a page
So, the process for linking to a specific point on a page (whether it is the current page the visitor is on, or even a place on a different page in the site) follows a similar process, but first we have to create a ‘target’ that we are going to navigate to.
Creating our ‘target’
We do this with a bit of HTML code that we add to the target point in the page using a ‘Code’ block. Navigate to the place in the page where you would like to put your target (where you want the link to point to), click the blue ‘+’ block addition button and then select ‘Code’ from the block list.
That opens a new Code block at that point in the page.
Now we are going to add a little HTML code to that code block. We need to think of a name for our target - it can be any word (with no spaces) at all. So for this example I am going to call it ‘mytarget’.
If I wanted to link to multiple places on a page (if for example I was designing an FAQ page) then I would need to add a code block to each target, and use a different target name for each.
To configure this target, I add the following HTML code (obviously substituting ‘mytarget’ for whatever you want to call your target):
<a name = "mytarget"></a>
To add this in the Code block panel, I delete the existing code <p>Hello, World!</p> and then type in my new code.
Now, just click anywhere on your screen away from the code block and it will save and close automatically. You will now see what looks like an empty space on your page where the code block is. Don’t worry - although you can see it in Edit mode visitors won’t be able to see it.
OK, so we have now created a target called ‘mytarget’ at our chosen spot in the page.
Linking to our target
Now that we have a target, we can link to it. Follow the instructions at the very top of this page for how to add a link to a section of text, button or image. This time, in the Link Editor, we are going to do something slightly different than before.
This time, we click the ‘Web Address’ tab.
For linking to a target on the current page, in the ‘Link’ field we add ‘#’ followed by our target name, so for my target I add #mytarget.
If my target is on a different page to where this link is going, we need to work out what the URL ‘slug’ of that page is. Click the Page tab and select the page from the drop-down list. The page’s URL slug will be a series of words, separated by hyphens, with a forward slash (‘/’) at the beginning.
Copy that whole slug, by highlighting it and then right-clicking with your mouse and selecting ‘Copy’ OR hold the Ctrl button on your keyboard and click the ‘C’ button at the same time.
Now, click back to the ‘Web Address’ tab. Add the URL slug to the ‘Link’ field by again right-clicking with your mouse and choosing ‘Paste’ OR hold the ‘Ctrl’ button on your keyboard and click the ‘V’ button at the same time.
Now, after the slug, add ‘#’ and then our target name.
Of course, your URL slug and target name will be different, but you get the idea! Now click ‘Save’ (and then ‘Apply’ if it is a text link).
And there we have it. Open your website and click on the linking text, button or image…………..you browser will automatically be navigated to wherever you placed your target!
Receive this FREE ‘Beginner’s Guide to Creating Online Courses’ today
This FREE email mini-series answers some of the most common questions about building your own eLearning course, and includes:
‘Why teach online?’
‘What is involved in creating an online course?’
‘Your first steps towards becoming an online teacher’
