How to Link to Different Pages in Squarespace

One of my favorite things about Squarespace is how easy it is to link to different pages!

Whether I'm wanting to link some text to an outside website or I'm wanting to create a button that leads straight to my Contact page, I always know there's somewhere to go!


Linking to an Outside URL Using Text

For one of my websites, I want to link to the website of the "Canton Creative Goods Market."

Screen Shot 2017-12-13 at 9.20.46 AM.png

1. Highlight 'Canton Creative Goods Market' and click the 'Link' icon (looks like a paperclip or two linked ovals).

 Write here...

Write here...

2. Either copy + paste the URL address into the box, or type in the web address manually. Decide if you'd like the link to open in a new window. 

Normally, for outside links to different web pages, I select this option to ensure that my visitors don't immediately navigate away from my page. 

Click 'Apply' to complete the process.

Screen Shot 2017-12-13 at 9.32.56 AM.png

Linking to an Outside URL Using a Button

Now, let's say we wanted to do the same thing as above, but instead of linking to the website using text, we'd like to use a button.

1. Click the '+' sign in the upper right-hand corner to add a Button Block.

Screen Shot 2017-12-13 at 9.40.14 AM.png
Screen Shot 2017-12-13 at 9.38.28 AM.png

2. Drag the Button Block to wherever you'd like to locate the button. I located mine just below the Canton Creative Goods Market Text, and changed the label to 'Get Directions.' 

To change the color/appearance of your button, just head to the Home panel on the left side of your screen and go to Design → Style Editor. From there, click on your button and you will have a host of options to choose from to design your button.

3. To add the URL of the webpage to click through to, click on the black box 'Click to add URL...' and go ahead and enter the URL. Click 'Apply' when finished.

Screen Shot 2017-12-13 at 9.42.54 AM.png
Screen Shot 2017-12-13 at 9.43.07 AM.png

Linking to One of My Website's Pages Using Text

Okay, so now I'd like to link back to one of my own pages on the website. Let's see how this works using linked-text:

1. Again, highlight the text that you'd like to link and click the 'Link item' Icon (looks kind of like a paperclip).

Screen Shot 2017-12-13 at 9.50.40 AM.png

2. This time, instead of entering a URL, we're going to click over on the top section from 'External' to 'Content.'

Screen Shot 2017-12-13 at 9.53.42 AM.png

3. This will then bring up all of the content or pages on your own website. Because I want my visitors to book an appointment when they click 'Visit our Warehouse,' I will select my web page 'Book an Appointment,' and my visitor will be directed there. Click 'Apply.'

Note: Because this person will be staying on my website, I will not choose 'Open in New Window,' as I would if I were linking to an external website.

Screen Shot 2017-12-13 at 9.56.25 AM.png

Linking to One of My Website's Pages Using a Button

1. Click the '+' sign in the upper right-hand corner to add a Button Block, and drag the button block to where you'd like to it to be located. 

Screen Shot 2017-12-13 at 10.00.51 AM.png
Screen Shot 2017-12-13 at 10.03.40 AM.png

2. I changed the Button text to 'Book Appointment.' Now, I'll go ahead and click on the black box 'Click to add URL...'

To change the color/appearance of your button, just head to the Home panel on the left side of your screen and go to Design → Style Editor. From there, click on your button and you will have a host of options to choose from to design your button.

Screen Shot 2017-12-13 at 10.01.06 AM.png

3. Again, I'll select 'Content,' and select the 'Book an Appointment' Page on my own website, and I'll leave the 'Open in New Window' circle blank because we are not navigating away from my website. Click 'Apply.'

Screen Shot 2017-12-13 at 10.08.38 AM.png
 

Tips to Keep in Mind When Linking to Different Pages

  • People will more likely click on buttons rather than linked-text, so I recommend using buttons whenever and wherever possible!

 

  • Be careful when creating pages on your own website, as you may accidentally have more than one "Services" page to link to. Make sure you're linking to the correct page by doing a quick test run before publishing your site!

 

  • You can change the color of your linked-text in the Style Editor section (Home Design Style Editor) by clicking on the linked-text directly in the site (note: you must be in Style Editor mode) and choosing a different Font Color! Make it something that POPS so that people know it's there to be clicked on (and hopefully to take them to somewhere amazing aka your services!)