How can we help?

Use Anchor Links to Make Long Pages More Accessible

If you've ever viewed a long web page and wished you could just jump straight to the section you need, this article is for you. You might have a big long page full of interesting content, but some of your visitors might have a negative experience if they scroll down through such a page and can't quickly get to what they like. Learn how to easily make Anchor Links that will allow your visitors to jump straight to the areas in which they are interested. This will make your content more accessible and useful for your visitors.

 

How to Set Up Anchor Links

To begin creating your Anchor Links, the first step is to go to the Edit view of your website. You can go there by hovering over Website and clicking Website Editor.

Navigate to the page you want to work with and make sure you see the gray Module Toolbars in the upper left of each module on the page, so you know you are in the Edit Page view. If you don't see the Module Toolbars, you need to log into your site, or if you were logged in before, hit your back button until you see system elements, such as the blue Admin Toolbar across the edge of the page.

 

Step One: Create Your Anchors

There is no limit to how many Anchors you create on a page. Before we get started, let's just clarify what we're working with here:

• Anchors - These are points on down your web page to which your Anchor Links will jump.
• Anchor Links - These can be either text links or image links that will jump straight to Anchors you've created at different locations on the page.

Your first step is to set your Anchors on your page. Here is how to create an Anchor:

1. On the web page where you want the anchors, make sure you are in the Edit view (you'll see system elements like the gray Module Toolbars pictured below) and click the pencil button on the Module Toolbar to edit the module for the first Anchor you want to set.

2. In the Content Editor, click anywhere in the content to get your cursor flashing (the upper left corner is always good, it doesn't really matter where you click as long as it is at the top of the content). Find the bookmark-shaped button in the top row of buttons and click it to open the Anchor window (see below).

3. Enter your Anchor name with no spaces or special characters. It must be one word. Click Ok when you're done.

4. Your Anchor will appear as a small icon as pictured above. This icon will NOT display on the web page. Click Save.

You now have your first anchor point. They don't need to be numbered, they just need to each have a unique single-word name. So for this step, you will want to repeat the instructions above for each of the Anchor areas you will want your Anchor Links to jump to.

It is highly recommended that you keep a cheat-sheet of the Anchor names you create as you go along. The names may seem intuitive, but when you make your Anchor Links in the next step, you will need to use the exact spelling you used when you created the Anchors, so keeping a list handy will help you make sure they all work correctly.

 

Top of Page Anchor

It's a good idea to also set up a Top of Page Anchor, and then you can link at various points down your page so your visitors can jump to the top whenever they need to get back to the main list of Anchor Links. It's recommended to add these to especially long pages to save your visitors a lot of work in getting around on the page. The longer the page is, the more your Anchor Links will be appreciated, and that includes Top of Page links. A good anchor name when you set that Anchor point is just 'top.'

When you make this Anchor, you can either do it at the top of your header (1, below), or at the top of the page content area, which is just below the Navigation menu (2), whichever you feel is best. If you set the Anchor in the second area, the visitor will not see the header or the Navigation menu after they click the link to go to the top of the page.

 

Step Two: Create Your Anchor Links

After you have created all of your Anchor points, you can begin creating the links that will jump to them. Here is how to create an Anchor Link:

1. Open or create the module where you want to create the links. Your links can be images and/or text.
2. Either click the image you want or highlight the text you want to make into a link.
3. Right-click on the selection and in the pop-up menu, click Insert Link (or click the Insert/Edit Link button in the area above; it looks like a chain).

4. In the Insert Link box, in the URL field, start with a pound sign / hashtag and follow it immediately with the appropriate Anchor name, as in the example above. Do not set a Target.
5. Click Ok. Make other links in the same module, as needed, then click Save.
6. Test your new links to make sure they take you to the proper part of the page.

That's it! This is one of the quickest kinds of links you can make in the system.

If you are also wanting to make Top of Page links, be sure to go to the appropriate modules, add a Top of Page image or type what you want out as text at the bottom of the module, usually in the lower right, and repeat the steps above. Your Anchor Link will look like #top. Here is an example of such a link at the bottom of the page, just above the footer:

 

How to Create Anchor Links to Other Pages

Need to create a link on your Home page that will take a visitor to a specific part of another page on your site? These links are much easier to make if you already know what the Anchor Name is (see below). Here is how:

1. First, if you need to look up the Anchor Name, go to the module on the page that is the ultimate destination of your link and click the Edit button in the gray Module Toolbar to open the module.

2. Find the Source Code button and look for your Anchor name, in the code it will look like this: id="solartent". It will be at or near the top of the code. Write down the Anchor Name; the part you need is inside the double-quotes.

3. Go to the page you want to make the link and click to Edit the module where you are creating the link.
4. Your link can be text and/or an image: highlight what you want to become the link.

5. Right-click on your selection and in the popup list, click Insert Link (or click on the Insert Link button up above) to open the Insert Link window.

6. Click the Browse Server button on the right of the URL field.
7. Find the page in your list of Pages that the link will be going to and click on it. You'll see the partial URL for the link load into the URL field.

8. At the end of the URL, start with a pound-sign / hashtag and enter the Anchor Name you want, as shown below with no spaces.

9. If your link is to a page and Anchor point that is not on your website, set the Target to New Window, but if it is on your site, leave the Target at None. Click Ok, make any further changes you need to the content, then Save the module and test your link. That's it!