Adding Anchor Tags Within Content Blocks

Adding Anchor Tags Within Content Blocks

What is an Anchor Tag?


Anchor tags will allow you to link to specific sections of a page either from within the page or outside the page. 

When the link to an anchor tag is clicked within a page, the visitor will jump to that anchor. 

If the link is clicked from outside of the page, the user will be taken to that page, directly to that specific section of the page.

Any element on a page can be used as an anchor - you just have to give it an ID. 

Examples of common HTML elements are:

Headings: <h1>, <h2>, <h3>, <h4> and so on
Paragraph: <p>
Image: <img>
Div (division): <div>
Span: <span>

Creating the Anchor

Before you can link to an element, you will need to add an ID to it.

Using a heading that has the Heading 2 style applied and the  text "Section 1,"  adding it the ID of "section1," looks like this in HTML:

<h2 id="anchor1">Section 1</h2>

You would now be able to link directly to the specific part of the page where that heading exists - we'll get to that part later.

1. To add an ID to an element in the editor, you'll need to look at the HTML, so click the HTML button: 





2. Find the heading you want to work with: 





3. Add the ID: 




You could also abbreviate the ID and call it "s1" for short.




  
4. After the ID is added, click Save.   

The heading now has an ID.

Now that the heading has an ID, we can link to it. 



The link to an anchor tag looks like this in HTML: 

<a href="#s1">Section 1</a>

It is set up link a regular link, but instead of linking to a page or URL, it links to the ID, which is represented by the hash (#) and then ID name. 


Linking to Anchors Within the Same Content Block

If your anchors are all within the same content block, you'll be able to create links to the anchors just like you would any other link.

1. Click the Insert hyperlnk button:




2. Click the Anchor radio button:




3. You will now see the Anchor dropdown menu that contains the anchors you have added to the elements within the content block you are working with. 





You will only see the IDs of elements you can link to within the content block you are working in.  If you have IDs on elements in other content blocks, there is another procedure to follow.

4. Select your anchor, and enter the Text to Display:



Your link will be inserted



When clicked, the "Section 1" link will cause the user to jump to the Section 1 heading.


Linking to Anchors in Other Content Blocks

If you want to link to elements within different content blocks, the procedure is relatively the same.  The only difference is that you will not see the anchors outside of the content block you're working in, so you will have to manually create those links.  If you already have at least one anchor in the content block you're working in, there is a shortcut to save some steps.

Let's say we have a link to a Section 2 in a different content block with the ID "s2," and we have a Section 1 anchor in the content block where we want the link.

To link to Section 2, first insert a link to Section 1, but in the Link text  field, type Section 2.  Save the hyperlink to insert it.



Next, click the HTML button, and within the link to the Section 1 anchor, change #s1 to #s2 .




Now you can go back to the editor and Save.  


If you do  not   have an anchor within the content block you can use for this shortcut, you will need to either create the link manually, or use the Web address option with some modifications.

To save some typing, insert a link, and use the Web Address option.  The system will not allow the link to be inserted without an "http://" and domain extension (.com, .org, .net, etc.) present, so for the web address, leave the "http://" in place, then type your ID, and then ".com"  

Text to display can be whatever you want the link to say.





Insert the link, then click the HTML button, and change "http://" to "#" and remove the ".com" - everything else will already be set up for you. 

Original link:  <a href=" http://s2.com/ ">Section 2</a>

Changed to anchor link: <a href="#s2">Section 2</a>

You can also just copy and paste the link as a template and enter in your ID and link text.

Video


    • Related Articles

    • Content block widget

      This is the widget you will probably use the most.   With this widget, you can enter content using the text editor and its features. You can type and format text, insert images, documents, symbols, and paste in pre-formatted text and tables from ...

    • Adding Content Using Content Widgets

      Content widgets are the main tools of the Sitefinity CMS. They are what control the content shown on a page.   After you create a page and go into editing mode, you will be in the Content view by default.   You will see a single large area to the ...

    • Document link widget

      Use this widget to display a link to a single document on your page. You can choose a document from a document library or upload a new document.   After you drag a Document link widget onto your page, you must configure it to display a link to a ...

    • LinkList

      The LinkList will display a small image next to a link title with a description. You can also add a short text overlay to the image.  You can also give the list a title or heading.   This widget can be used singularly, or use multiple LinkList ...

    • Skinny Hero

      A Skinny Hero is a great way to dress up a page using a photo that spans the entire width of the page with a text overlay. This element should only be placed directly under the navigation.   This is an example of the Skinny Hero with its default ...