Anchor links (also referred to as page jumps) can help your website visitors easily navigate long pages of content, quickly. They’re useful for any type of information that needs to be displayed quickly on a webpage and come in a variety of different shapes and forms.
Today we will investigate two techniques to add anchor links in Squarespace: page sections and basic code.
Header Navigation
Squarespace makes it easy to create jump-to links – links that lead directly to certain parts of a page and can be added easily via header navigation, on-page content or table of contents – which are perfect for quickly navigating large pages of content or calling attention to particular areas on a page. Jump-to links can also help users navigate large sites more efficiently or highlight certain parts of it more prominently.
To create a jump-to anchor link, first select the area of your page you would like to link to and insert a text or image content block therein. Enter text that serves as your jump-to anchor into this content block, adding unique IDs (for instance “Back to Top”, “Contact us”, or even keywords related to the area being linked too) which should correspond with it – for instance “Back to Top”, “Contact us”, etc.
Finally, copy and paste your unique ID into the “link” field of your content block. Now when you hover over text or images that were linked with their IDs using this unique link, a small icon will appear; clicking this icon will take you directly to where you were heading.
This trick works exceptionally well in the header of your website, particularly for single-page sites with many sections and content pieces to browse, making the user experience smoother when browsing long pieces of information. Additionally, this strategy works great on sales pages to quickly take users directly to pricing and purchase details.
Jump-to anchor links can also be utilized within call-to-action buttons on your page, animating it to encourage conversions and draw users in. There are seven different animations to choose from – classic underline, elegant gradient or even festive snowflake! Test out one on your site to see how many conversions result!
Blog Posts
If you want to enhance the user experience on your long-form blog posts, adding anchor links may be just what is necessary. Anchor links (also referred to as jump links or in-page links) allow users to be taken directly to a certain section of your page when clicked upon. When people first visit your website they might click a link from your navigation menu or within content; once on that section they may scroll down further and find what they need!
To create an anchor link, first identify the part of your page where you would like to place a jump link – such as within a paragraph p> tag, image tag (img>), or other HTML element. Next, give this anchor element its own ID by prepending “#” before typing out what text needs linking.
Once you’ve designated an anchor, add a regular URL in your code block to make it work. This allows you to share any section of your site that needs viewing on social media or email with just one link – adding Squarekicker might make this faster but isn’t mandatory.
Anchor links can be particularly effective on pages with multiple sections, providing quick links to FAQ answers or the pricing page on services pages – or even further down, to contact forms or forms further down.
Anchor link creation on Squarespace is relatively straightforward, yet lacks the same creative control as WordPress or Wix website builders do. This is because Squarespace uses Fluid Engine’s editing system which limits your ability to move elements around on-screen. There are ways around this restriction however; today I will show three methods. Let’s get going!
Pages
Anchor links (sometimes known as jump-to or in-page links ) allow you to quickly link visitors to specific sections of your website page, making it useful on longer pages where there may be key pricing or call to action information that needs to be visible as customers scroll. Anchor links should also help create the illusion that customers have arrived quickly on that specific section when scrolling.
To add anchor links in a page, first you need to create the anchor itself. When writing or editing posts or pages, position your cursor where you would like the link and select the hyperlink icon – this will bring up the Insert Link window where the Anchor menu item is available and asks you for its unique ID – this should be something short, easy to remember and lowercase so as not to get confused with other elements on the page.
Click the OK button, and insert a hyperlink to your anchor point. Your anchor will now be added to your page, where visitors can click it to access more content. Multiple anchors may be created on a single page – be sure to give each unique names so they do not interfere with each other or cause visitors to become confused!
Anchor links are ideal for creating easy navigation systems on one-page websites or larger pages of content, as they allow visitors to easily switch between sections without clicking back and forth between various sections of the page. They’re also useful on landing pages and contact forms as they direct customers directly to what they need without them having to scroll all the way back up!
The first technique requires only using the Squarespace Classic editor; it won’t work with Squarespace 7.1’s Fluid Engine. You will create a code block above your header or heading and insert this code: “div id=”text”>/div>; later on your page highlight whatever text or image is needed as an anchor point and insert # followed by it in quotation marks into your URL field.
Contact
Anchor links (also called page jumps or jump links) can help improve user experience on websites by providing users with direct access to the content they’re seeking without scrolling or having to click or open new tabs. They enable website visitors to skip scrolling by providing direct access.
To create an anchor link in a page, first add the text or button you would like to use as a link, followed by adding a code block above them that gives them their unique ID for recognition on the page – make sure it identifies where users will be going after clicking your link! Ensure the unique ID gives enough details about its target content so as to avoid confusion for visitors who might follow.
If you want users to see immediately what pricing for each service item is, create a link using a unique ID like #pricing-selection in the code and replace “#pricing-selection” with its respective service item name – voila – you have yourself an anchor link!
Add CSS code to make anchor links look more professional and consistent, creating a seamless transition from anchor link to page section it points towards, creating an appealing user experience.
Your Squarespace dashboard gives you the power to modify how links open by changing their setting. By default, all links on your website will open in a new browser tab; however, this can easily be changed for links opening in either an identical tab or popup window.
