Using Anchors Drupal: Gold, Silver & Bronze

Transcription

1 Using Anchors Drupal: Gold, Silver & Bronze Anchors help to link within a page. They are most often used to link different items in a table of contents to the answer or description relating to that item further down the webpage. Two of the more common examples are a Frequently Asked Questions page with a list of questions at the top of the page and the answers further down within the same page and a Sponsors page with different levels or groups of sponsors categorized at the top of the page and the actual lists of sponsors further down within the same page. With anchors, you can allow the visitor to click any of the questions or sponsor groups and it will take them directly to the answer or group further down the page. This step by step guide will show you how to insert anchors on a webpage and how to link to those anchors within the same page. 1. Login to your website and open the control panel. *Note: your control panel may be a small triangle with a wrench in the upper left hand corner

2 2. Create a new page or open an existing page in which you want to add anchors. 3. Type the content or list of questions. Make several spaces between the end of your list and where the answers or corresponding information begins. (see image) 4. After you enter several spaces at the end of the content or list of questions, type the corresponding answers or content, leaving a space between each answer or sponsor. (see image)

3 5. At the end of each response, on a new line, type Top of Page or Top. This will let the user know that they can easily be directed back to the top of the page. 6. Once the content is complete, you can now begin to set your anchors. Put the cursor where you want the anchor to go. In this case, since itʼs for the Top of the Page anchor link, the cursor is set at the beginning of the text. (see image)

4 7. After the cursor is in place, select the Insert/Edit Anchor button. 8. A small box will pop-up; this is where you will enter the name of your anchor.

5 9. Name the anchor something that corresponds with what you will be linking. *NOTE: Anchor names need to be all lowercase, alphanumeric characters ONLY. No spaces, underscores or special characters. 10. After you have named your anchor, click OK.

6 11. You now have your first anchor set on the page (see image). With the anchor in place, itʼs time to insert the anchors for the answers (or sponsors) that correspond with the questions (or list of content). 12. Click at the beginning of the first answer or list of sponsors. (see image)

7 13. Select the Insert/Edit Anchor button. 14. Just as in Steps 8 and 9, a small box will pop-up; create a name for this anchor. (Remember the note from Step 9 when creating the name)

8 15. Once the name is created, click OK. 16. You now have an anchor in place for the first answer. (see image)

9 17. Repeat Steps for the remaining answers or sponsors. You will need to create different anchor names for each answer. (see image) Now that the Anchors are complete, you can now begin to work on hyperlinking the questions and content to the corresponding anchors.

10 18. Highlight the text that will hyperlink to the anchor. (see image) 19. Once the text is highlighted, select the Insert/Edit Link button.

11 20. A small box will pop-up; from the Link Type drop down menu, select Link to anchor in the text. 21. From the Select an Anchor By Anchor Name drop down menu, select the name of the anchor that you created in Step #9. As you can see, the names of all of the anchors that you created are available in the drop down menu.

12 You have the option to Name the hyperlink when you re setting it up. This option is often used for visually impaired individuals by reading aloud to the visitor whatever the link has been named. Optional Step #22: In the small pop-up window to Insert/Edit Link, click on the Advanced tab. You will see a section that says Advisory Title, this is where you will enter the name of your link. (see image) You can name the link anything; it can be the entire question, the name of the group of sponsors, etc. Once you have named the link, click OK and you re done. Repeat as necessary. 23. Once the name of the anchor is selected, click OK.

13 24. The text is now a hyperlink to the anchor you selected. (see image) 25. Follow Steps to hyperlink each question (or Sponsor Group), making sure that you select the anchor name that corresponds with the question. (see image)

14 26. Scroll down to the bottom of the page and click Save. 27. This is what your anchored page will actually look like to visitors. Note that the questions in this example were bulleted in addition to setting the anchors. The bullet points are not an automatic or required formatting, just an example shown here.

15 28. It s always helpful to test out the links to make sure they re working correctly. In this example, when clicking on one of the questions it brings you down to the corresponding answer.

16 30. Now, test the Top of Page link. 31. It should take you back to the top of the page where you inserted that anchor. If all of the links are working properly, then your work with Anchors is done.