Anchors are link tools that help your visitors jump to specific spots on a page. For example, you could create a list of content items at the top of a page and then have a visitor click one of these links to jump directly to the content farther down on the page. This helps eliminate scrolling on very long Web pages, which is convenient and time-saving.

To do this, go to the page you want to edit and then click "Edit."
 
Edit_copy_2.jpg
 
You will be directed to this page and then see the WYSISWG editor, or the "What You See is What You Get" text editor.
 
WYSIWYG_copy.jpg
 
Enter the text that will be clicked on and linked to a section further down on the page. In this example, I typed in the month of "January" and listed a couple of other months as well. I also listed the months below with the information that would correspond to each anchor link to demonstrate.
 
Sample_Anchor_Text_copy.jpg
 
Next, click on the HTML button. This button will show the code for the page. Don't worry, it can be a little intimidating at first, but the next set of steps will give you the information you need to make sure your anchor links work!
 
HTML_button_copy.jpg
 
 
After clicking the button, you will be directed to a window that looks like this:
 
HTML_Source_Editor-_1_copy.jpg 
 
Let's say I would like to link the February information first. I am going to be working on editing the HTML box to add the anchor links.
 
First find where February is listed at the top of your list. We now have to tell this text that it will be linked to "something." This being the information below. After the <p> which indicates a paragraph, we will need to type in "<a href="#February</a>. "A href" basically specifies where and what it will link to and the pound sign, or hash tag, signifies an anchor link.
 
A_href_February_copy.jpg
 
Now, we need to identify the information that it will link to by giving it an "id." On the section for February, let's add the following code: Open up the paragraph tag and add a space, "id="February">. It will look like this:
 
HTML_Source_Editor_Example.png
 
Press "Insert."
 
Insert_copy.jpg
 
You will that "February" is now in blue text and has become a link. Save or preview your changes and now click on "February." Ta-da! The page will jump to the section!
 
 

Contact us to upgrade to Tendenci

The open source solution chosen by associations around the world.

Want to talk? (281) 497-6567

Sign up for Tendenci - The Open Source AMS

No per user pricing. Unlimited admins.

Demo Now

Have Questions?

Contact us!

Site Search



I agree

Our site saves small pieces of text information (cookies) on your device in order to deliver better experience and for statistical purposes. You can disable the usage of cookies by changing the settings of your browser. By browsing our website without changing the browser settings you grant us permission to store that information on your device. See our Privacy Policy