Adding & Editing the Navigation Links

April 5th, 2012
The main navigation links on the right side of the site is critical to proper navigation of the site, so it is important you know how to edit the links and the rules that apply. By adding subpages, you can populate the navigation links, but there may be custom link that does not require a subpage, or the page should exist in another area of the site.
The section navigation allows you to create and edit custom links for the right nav. Alphabetization is very integral to the sva.edu website and in most instances it is implemented automatically in the site. In certain cases though, you might need to manually arrange the navigation links to make sure they are in alphabetical order.

Step-By-Step Instructions »

 

1.

First, login to the site.

2.

Click View Site

3.

Navigate to the page you would like to edit. In this tutorial, we are going to edit the After SVA page. Click Edit Section Navigation

4.

 

You will see a graphical tree of the navigation link structure that is color coded to show the parent to child relationship. Blue dots are the top level parent links. Yellow dots represent the second level of links. Green dots represent third level links. Violet dots represent the fourth level of links.

Look at the section navigation compared to the public view to get a better understanding.

5.

The link order can be shuffled by dragging and dropping. You can see there are some links that are not in alphabetical order. In order to comply with the site rules, we need to shuffle them to their correct order.

Note: Keep in mind, while you can shuffle the order of any link in each level, you cannot move a link from one level to another. For instance, you cannot take Alumni Affairs and shuffle it between Events and FAQ. Thes elinks are on a completely different level. You can only shufle links with the same color. Changing the link level has to be done in the Edit Content section.

6.

 

Now that we know how to shuffle the links that are already created, let’s dive into how to create a new custom link. This will create a textual link in the section navigation to another page on the site. You will need to have this page created already, as you will need the url to add the link.

You notice there is a + Custom Link icon at the top of the tree and also when you hover every line item. This controls where you add the custom link. (This can be a bit confusing, but do not fear. If you add it in the wrong place, you can easily remove it and try again.)

I am going to add two custom links in different level to illustrate how it works. First, add a link in the top level of links. You can do that by clicking the Add Custom Link button at the top of the tree

7.

A modal window pops up, prompting for a title, url and Target. The title is the text you will see in the navigation. The url is the page location where the link is directing. The target controls if the browser will open the page in the existing or a new window/tab when clicked.

8.

I want this link to direct to the Continuing Education page so I entered this into the fields

Title: Continuing Education
url: /continuing-education
Target: Same Window

click Apply Changes

Always remember, if you are linking to another page on sva.edu, then you are creating a relative link. This means you do not begin with http://www.sva.edu. In this instance, I wanted to go to http://www.sva.edu/ continuing-education, but because it is a relative link, I just entered /continuing-education.

If I wanted to go to animation course in CE, the actual url is http://beta.sva.edu/ continuing-education/ animation/courses, what do you think the correct url would be?

Did you answer /continuing-education/ animation/courses? That is correct.

Note: Another site rule is using the target correctly. If you are using a relative link, your target should be set to “Same Window”. If you are linking to a page that is not part of sva.edu, you should set your target to “New Window”

 

9.

I now have a new link on the Ater SVA Landing page.

10.

Now I want a link inside Alumni Society. Hover over Alumni Society and click Add Custom Link that pops up inline.

11.

Same instructions apply as before. Add a title, url and target. I want this link to go to the Continuing Education blog, so I added this to the window fields.

Title: CE Blog
url: http://ceblog.sva.edu
target: New Window

Click Apply Changes 

12.

Now I have a CE Blog link inside the parent Alumni Society.

13.

Last, if would like to remove a custom link, all you have to do is click Remove Custom Link on the link you want to get rid of. This is permanent, so be positive this is what you wold like to do. No takebacks.

You are…the Navigator