Anchor Widget

About



The anchor widget helps your site visitors quickly navigate through your site for pertinent information without endless scrolling. Users will be able to click on an anchor item and the page will take them exactly where they want to be.

Using the menu for the anchor widget is optional. You can have individual anchor items without showing them in the menu.

How to


1. Separate the content in individual widgets according to anchor points. 

2. Drag the anchor from the content tab on the right hand side of the page and drop it above the associate content.

3. Click "Edit" and provide an AnchorID that is unique to the page and menu title. 

4. Here you will also selected how the anchor will appear in the menu.

5. Click "Save" and repeat this process until all of your content has an anchor. 

Video tutorial

The video below will walk you through how to use the anchor widget: 

Anchor Widget Demo

Additional information


Navigation

If you choose to use the anchor menu on a page, be sure not to use layout template "two" on your page. This layout automatically adds two separate menus on the left and can create confusion for your site visitors. You can change the template under the "Layout" option on the right hand side of your page when editing. If you need both menus, consider the layout option below.

Adding an anchor navigation menu to the right column of a page

The following instructions will allow site builders to achieve having an anchor navigation menu in the right-hand column of the page while keeping the main side navigation menu in the left-hand column of the page.

  1. First, ensure that you are using the proper page layout:
    1. When creating a new page, select page template option four, enter all other properties and click create and add content to this page.
    2. For an existing page, start in the editing interface and click layout in the top right-hand corner and change the entire template to option four.
  2. Once you are in the correct template, you will use a grid widget to complete the layout:
    1. For new pages, click layout in the top right-hand corner of the page. If you were editing an existing page, you are already in the appropriate area.
    2. Find “grid-4+8” and drag and drop it into the wide column content area.
  3. Your page layout should look like this:

Page layout for the anchor navigation on the right in the Layout tab

 

4. On the top right hand side of your page, click the content tab to get back to your content widget list. Your page should now look like this: 

Page layout for the anchor navigation on the right in the content tab

 

5. Drag the side navigation widget over to the Column 1 content area. PLEASE NOTE: the navigation Items here are managed in the "Title and properties" of the page, not in the navigation widget itself. 

Dragging the side navigation widget to column 1

 

6. From here, you will setup you anchor navigation as normal. If you choose create a anchor navigation menu, it will automatically populate in the narrow column on the right. 

Linking to an anchor widget on another page

There are various reasons to link to an anchor on another page. You could have a glossary page that you would like your audience to be able to reference when a word is presented on a page. There could be a blurb of information nestled on a page that is relevant to a topic of discussion on another page. Regardless of the reason, it's easy for this to be done. Now that you now how to create an anchor, you will now learn how to link directly to an anchor from another page. 

Anchor Menu Option

The first option is for a site builder chose to create an anchor menu; you'll need to start on that page. Be sure to be in "View" mode from the dashboard so the link is accurate. 

  1. Click the anchor menu item that you would like to link to. 
  2. You will know the anchor is working appropriately if your page scrolls to the right portion of the page.
  3. This adds a # and the anchor ID to the end of the website address at the top of your browser. This is the direct link to the anchor item on the page. 
  4. Copy the link and go to the page you want to display the link on. 
  5. You can now use this link on your page as a hyper link in the content block, a call to action button, or with any widget that allows you to direct your audience to another page using a URL. 

No Anchor Menu Option

The second option is for a site builder that chose not to have an anchor menu. The steps are very similar but the link is not provided. Again, you'll need to start on the page with the anchors and instead of view mode, you'll want to be in the edit interface on this page.

  1. Find the anchor menu item that you would like to link to. Note the Anchor ID. 
  2. Now go back to pages and view that same page and find the URL.
  3. Add a # and the anchor ID to the end of the URL at the top of your browser. You have now created the direct link to the anchor on the page. 
  4. Copy the new link and go to the page you want to display the link on. 
  5. You can now use this link on your page as a hyper link in the content block, a call to action button, or for any widget that allows you to direct your audience to another page using a URL.