Inserting Anchor Links

Links are used as redirects to send users to content in other areas of websites, the internet, or even other areas of one page. Anchor Links are those links that direct the user to a different element on the page that they are currently on. This can be especially useful for in-page links like an Table of Contents where links at the top of the page take the user directly to the content they are looking for farther down the page.

Small Farm Central's help documents use Anchor Links often. Here is an example of an Anchor Link used within this document: Click here to be taken to the end of this article. To read about Hyperlinks, which will direct the user to other webpages, read the article Creating a Hyperlink.

Anchor Links can be created fairly easily using the Small Farm Central Control Panel, however, it does require you to work within the HTML code of your website for a minute. Note: This is a more advanced technique. If you do not feel comfortable or capable adjusting the code of your website, call Farmer Support at 412-567-3864 or email us at: support@smallfarmcentral.com and we can add in Anchor Links for you.

You can create Anchor Links in many of the pages on your Small Farm Central website. To teach you how to create Anchor Links, we will use the example of a FAQ (Frequently Asked Questions) page, which often uses Anchor Links to redirect users to the answers of the listed questions.

You can follow the steps to create this example, or simply use these instructions as a guide to insert Anchor Links in the content that you are creating.

Creating Your FDP

  1. Log in to your Control Panel and navigate to: *Create Content > Farmer Defined Pages > New FDP
  2. Enter a page title and description. In this case, we are creating a Frequently Asked Questions page.
  3. Create a Table of Contents. For this example, it will be a list of all of your FAQs at the top of the page. See the screenshot below for an example:

anchor1.png

   Figure 1. Table of Contents for a FAQ Page

  1. Create the content for your page. For this page the content will be each question from the Table of Contents with each answer below it. See the screenshot below for an example:

anchor2.png    Figure 2. FAQ Page Content

  1. Click the box next to "When Saved, Return to Continue Editing"
  1. Create the Link. First let us create our link, and then we will identify where that link will take the user. For example, we want our FAQ Table of Contents to direct us to the answers of our questions. Therefore, we will make each question a link to its answer.

    Highlight the text you want to be the link. Click on the Link button (it looks like a few links of a chain). Instead of putting a URL in the URL field, name your link starting with the pound (#) symbol. See the example below:

anchor3.png

   Figure 3. URL Field

Pick a name that identifies what you are linking. We will need to use this name again, so try not to make it a long or complicated name. Use a short word or a word and a number to make things easier. For example, we named our first link: #location because the question asks where the farm is located. Once you have named your link and typed it into the URL field, click the Insert button. You will see that your text has now turned blue and is underlined to indicate that it is a clickable link.

  1. Create the Identifier. The "identifier" tells the browser where on the page you want the link to take the user. In this example, we want the answers of each of our questions to be the identifiers.

    Highlight the text that you want the user to be linked to and click the Source Code or HTML button in the text editor toolbar (the button looks like this "< >".) You will be taken to the HTML code of the page that you created. Find the place in the code where your highlighted text is located. You will see a tag in front of where your text starts that looks like this: <p>. See the screenshot below for an example:

anchor4.png

   Figure 4. Highlighted Text & Corresponding HTML Code

The code for your identifier must include the name of your link so that a connection is made between the two. For this example, our link is named #location, therefore the code for our identifier will be: <p id="location">. To create the identifier, change the code from the code from <p> to: <p id="location"> and then click the Update button.

  1. Save & Test. Finish by clicking the Save Changes button on the bottom of the page. Then visit your public website to see that the Anchor link works. When you click on the link, the page should "jump" to the text that you chose to link it to. The user is taken directly to that part of the page when the "anchor link" is clicked.

    Repeat this process with all of the items in your Table of Contents so that all of your questions are linked to their answers. See below to view the HTML code for the example FAQ page that we created. The blue box shows the linked text and the red boxes show the identifiers.

anchor5.png

  *Figure 5. HTML Code with Anchor Links*


Remember: If you are having trouble creating Anchor Links, call Farmer Support at: 412-567-3864 or email us at: support@smallfarmcentral.com and we can add in Anchor Links for you.

Ready to move on? Click on another article below: