Anchor Tags

What is an Anchor Tag?

Anchor tags are a way to take a website visitor to a specific part of a page on your website. Often, you have different sections on your pages that are important, but do not need their own stand alone page. That's where anchor tags come in! They allow you to drop an "anchor" right above a section, & then have dropdown item or link that takes a user directly to that section of the page. This makes longer pages easier to navigate, especially on desktop.

Download the PDF Version

Want to save this information in your files? Not a problem! Download the PDF by clicking the button below.
 

Adding An Anchor Tag 

1: At the top of the page, press the hamburger button and select, “add new widget”



2: In the Widget directory—find “ATLAS-Anchor”, click on it, and then press the green select button in the lower right of the window.



3: In the window that appears, you will need to type in the Anchor ID, this is a code name for the section. For example, if you are dropping in an anchor to take a user to the Agronomy Team section, use “agronomy-team” as your anchor ID.

***Anchor IDs cannot include any Capital letters, special characters, or spaces. Use hyphens (-) instead of spaces.***


4: After saving, the page will refresh and your anchor tag will appear at the bottom of the webpage. Scroll down to it, then grab it using the arrows icons and drag it ABOVE the section that you want to drop the user to.



5: Highlight the URL in the Black bar and copy it.


 

Now you will create the page your dropdown Navigation bar and link the anchor tag to it!

6: In the content tree, click on the page that you are wanting to put the new page under. After clicking on it, go to the top of the content tree and click on the “+” plus sign to add a new page.

Add “ATLAS-Content” page type and then click the green continue button on the next page:








7: You will now name your page. What you name the page is what will show up in the Nav Bar. Put the same thing you put in the Name field in the Title field. Then Press Save.



8: After saving, click on the Properties tab across the top, then select “navigation” from the dropdown.



9: Lastly, click on the radial button next to “URL Redirection” then paste your anchor tag that you copied earlier in the field. And press save.