Insert/Edit Anchor Link

Insert/Edit Anchor Link

An anchor link is a web link that allows users to leapfrog to a specific point on a web page. It saves them the need to scroll and skim – and makes navigation easier. You can add anchor links to your MyLO pages for users to jump to a specified anchor point on the same page or even link to a separate page! Anchor links can be added from your toolbar while your text editor is set to WYSIWYG. To implement anchor links through HTML (disabled rich-text), follow this link to documentation for Adding Anchor Links (HTML).

An anchor link has two parts: the link, and the destination of the link. For an example, take a look at the About page on the MyLO Democity site. On that page, use the links at the top of the page to be taken to different spots on the About page. That's how anchor links work!

Follow these steps as your guide to create anchor link menus on your MyLO pages. First, we create the anchor (destination of the link).

  1. Begin on the page you'd like to add anchor links to; start a New Draft (or Edit Draft) of that page.
  2. Place your cursor inside the Body text box. Place the cursor exactly where you'd like to drop in an anchor. In the image below, you'll see that my cursor placement is highlighted within the yellow rectangle.
    • For example, take a look at the MyLO Democity About page's section headings:
      • *What Is the League of Women Voters' Mission?
      • *What Does the League Do Now?
      • *Why Should I Support the League of Women Voters?
      • *What is the History of the League of Women Voters?
    • When adding the anchor to each section, I placed my cursor to the left of each section heading (where you'll find the *). 
  3. Click the Insert/Edit Anchor icon in the formatting toolbar (atop Body text box). Screenshot of placing cursor and inserting anchor link
    • This will pop up a new small window to name your anchor. Based on the screenshot below, our sample anchor will be: mission. Be sure to use hyphens or underscores instead of spaces, as spaces are not allowed in the URL.
  4. Add an anchor name and click Insert.Screenshot of clicking anchor icon and adding anchor name
  5. You've successfully added an anchor to that spot on the page. Refer to the screenshot below to see what the anchor looks like once in your body text box (highlighted yellow box).
 

Now let's create the list of links that will correspond to the anchor you just created.

  1. At the top of the page, you will create the link that will lead users to mission. Type in the text that will become this link. In the screenshot below, my sample link text is: Our Mission.
  2. With your cursor, highlight the link text (entire phrase) you just typed in (Our Mission). 
  3. Click the Insert/Edit Link icon in the formatting toolbar (atop Body text box). Screenshot of adding & highlighting text that will become the link to anchor
  4. The Insert/Edit Link window will appear. For the Link URL, type: #mission. The link URL must include the pound sign/hashtag (#) before the anchor name, otherwise the link will take users to "Page Not Found."
  5. Click Insert.Screenshot of adding #anchorname and inserting anchor link
    • The text, Our Mission, will become a link to that anchor! You can separate each anchor link with a vertical line for formatting purposes.Screenshot of completed set of anchor and link
  6. When you've added all of your desired anchors and links, set the "Styles" of the list of links to Notice to give the links a boxed look. You can do this by highlighting the entire text of the list of links, and choose Notice.

BONUS: Add Buttons To Jump Back to Top of Page

If your page is long, include a few "back to top" buttons for easier navigation through the page. As you add these buttons, you may need to reorganize their placement once you see the public side of the page. To create this button:

  1. Drop your cursor at the end of a section's paragraph, press Enter to start on a new line. (e.g. I placed my cursor at the end of the final sentence in the first section, What Does the League Do Now? and pressed Enter.) placing your cursor
  2. Type the words Back to top (or any other fitting phrase). typing in "back to top"
  3. Copy the URL at the top of your browser. The URL will begin with "https://" and is followed by "my.lwv.org/node/####/edit" with the pound signs being unique to each page on MyLO. Keep this URL handy, you will need it for step 5. copy page URL
  4. Highlight the entirety of the phrase with your cursor, and click the Insert/Edit Link button. inserting link
  5. With the Insert/Edit Link window now open, paste in your URL into the Link URL field. Be sure to remove the word edit, otherwise the link will not take visitors to the top of that page.
  6. Click Insert to activate link. paste in URL & insert link
  7. Highlight the link text, open Styles dropdown menu, and choose Button. enable button style
  8. Highlight the link text, open Styles dropdown menu, and choose Right justify. Style - Right justify
  9. Publishing Options: 
    • MODERATION STATE: If you are happy with your changes, set this state to Published. 
  10. Click Save.

Here is an example of the finished product:

NOTE: This League site is set to the purple & gold theme.

Screenshot of Back to top button & anchor link menu on LWV Demo City site

MyLO FAQ Category: