Navigation using Links and Anchors

build a websiteThe Navigation of your website is what determines how easily your visitors can find their way around and ultimately find what they are looking for. When you build a website, which has pages with lots of text information, it’s best to create a mini index menu of the information at the top of these pages with links to the respective pieces of information. This will help your visitors find what they need without having to scroll through the whole lot. This is done using links and anchors (Click to view tutorial).  But what if you need to link to a specific section of a page from a different page on your website?

It is of course very simple to link one page to another by using your Yellow Insert Link Icon in your editor icon bar. Simply highlight the text or image you want to attach the link to and click: Yellow Insert Link > Webpage > Internal Webpage > then choose the page from the drop down menu. This link will now transport visitors to the new page within seconds of them clicking your link. But in this tutorial we’re going to look at something a little more advanced.

Linking to a specific section on a webpage from another webpage.

build a websiteThe first thing you need to do is create an anchor next to the specific section of the webpage to which you want visitors to jump.

TIP:  It is best to set your anchor in a line (P) of its own above the relevant section and heading. If you set the anchor on the same line or beneath the heading, the heading will be right at the top of the page or even out of sight when viewers click through to it rather than having a neat amount of space between the top of the page and the start of your section! Click to place your cursor directly in front of the first word or heading of the section of text and press return on your keyboard to move it down to a new line. Then click to place your cursor back up in the clear line you have just created above. Now - click the Insert / Edit Anchor Link button on your editor icon bar. Click “Create an Anchor” and in the box provided type a name for your anchor.

NOTE! Choose a name, which is relevant, easy to remember, consisting of just one word if possible and make sure there are no gaps in your anchor name. (If you do use two words you’ll need to remove the space build a websitebetween the two words i.e. “anchorname”. Don’t forget to make a note of your anchor name or you could even copy it when you create it as you’ll be pasting it into your new link in just a few minutes.

Now let’s link to those anchors.

This link is done in two stages. You first need to create a link to the correct page, and then you’ll add the link to the anchor.

1st - Open the page where the link will appear in your editor and highlight the link text or image.
Click the Yellow Insert Link Icon > Webpage > Internal Webpage > Choose the correct page and “Add to Website”.
build a website2nd - Now with the Link text still highlighted, click the Yellow Insert Link Icon again but this time choose Webpage > External Webpage. A window will open up showing the external link address, as you see in the picture here. Click to place your cursor right at the end of the code that you see and then without any gaps add a # sign and then the anchor name so that the address will now look like similar to this: info2.cfm?info_id=65929#anchorname. Leave the Open in new window option and click add to website.

Now save the page and try your link out. 


build a website 

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
This blog is running version
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','','ga'); ga('create', 'UA-2227312-2', 'auto'); ga('send', 'pageview');