When autocomplete options are available, use up and down arrows to review and enter to select.
Web Content Blog
» Main Page
» Archives

Thursday, April 12, 2007 How (and when!) to use anchors

You've probably noticed the button in Web Manager 2's WYSIWYG editor that looks like a blue flag – that is the anchor tool. The anchor tool, plus the linking tool, allows you to place anchors in your pages and create links to them. Anchors are used when you want to link to a specific section in a page, and usually within one page.

Here's an example: On the A-Z Index, the letters at the top of the page are linked to that section in the page. When you click on "O-R", the page jumps down to the beginning of the O-R section. This is convenient because it means you don't have to scroll all the way down the page yourself. You'll also notice that after each section is a link to "top" that takes you back to the top of the page, again avoiding scrolling up.

How it works: "O-R" at the top is linked to an invisible anchor that's in front of the O-R section. Likewise, "top" is linked to another invisible anchor at the top of the page.

When to use anchors: Anchors are useful in situations like the A-Z Index, when you - of necessity - have a page that's really long. Anchors make using the page easier on the user. You put a list of links at the top of your page that refer to the (anchors in the) sections of content further down the page that people want to access. Alphabetical lists, FAQ lists, and table of contents are instances when using links within a page are appropriate.

When not to use anchors: Don't make long pages that use anchors when you can easily break up the content into separate pages. Putting information about several unrelated topics on one page and using anchors to jump among them is confusing to the user. Users generally expect links to go to a new page.

How to do it: Input all your content into one WYSIWYG block. Then add your anchors (the spots where the links will jump to) by placing your cursor where you want the anchor to be and clicking on the anchor button. You will have to give your anchor a short name.

The anchor properties window

When you click OK, you'll see that a yellow symbol has appeared in the WYSIWYG box. This symbol is only visible in edit mode; not on the live site.

The inserted anchor is visible in edit mode

Then you create a link from the text at the top of your page to your anchor. At the top of my page I highlight "Creating Navigation Sets" and click on the Add/Insert Link button to add the link. In the drop-down where "URL" appears, change it to "Link to anchor in the text." Then you'll use the drop-down to choose which anchor you are linking to.

The link properties window

NOTE: You may link to an anchor in a different WYSIWYG or on a different page by using the regular linking function (with "URL" chosen as link type in the link properties box) and manually entering the address in this format: www.liberty.edu/index.cfm?PID=1111#anchor, where "1111" is the PID of the page and "anchor" is the name of the anchor.

Posted at 4:29 PM | Comments (0)
Chat Live
Request Info
Apply Now
Visit Liberty