How to Add an Anchor to Joomla 3.0 Articles

by Elaine on January 16, 2013

Joomla 3.0 Tutorial – How to Add An Anchor to Articles in Joomla

If you have a really long article, you can “bookmark” sections and create links to jump to those sections in your article.  These “bookmarks” are called Anchors.  You can create as many anchors as you want in an article.  Below are steps to easily create an anchor in your article in Joomla 3.0.

Overview of Steps:

  1. Go to Article Manager
  2. Edit Article & Highlight Your First Anchor
  3. Insert Anchor in Article
  4. Highlight Link
  5. Insert Link to Anchor
  6. See Anchor Link Map

Steps:

1.  Go to Article Manager

Joomla 3.0 Article Manager is where you create your articles.  You can edit, delete, unpublish, unpublish articles, in the content manager you can also create and manage categories.

joomla 3 article manager How to Add an Anchor to Joomla 3.0 Articles Joomla 3.0 Article Manager
  • Login to your Joomla 3.0 Administrator Backend
  • Click on ‘Content’, ‘Article Manager

2.  Edit Article & Highlight Your First Anchor

Where do you want the first bookmark to be? It can be half way down the page or wherever you want.   The Anchor should be in the content of the article.  In my example – Section 1 is my Anchor.

joomla 3 add anchor to article 1 How to Add an Anchor to Joomla 3.0 Articles Joomla 3.0 Add Anchor to Article – Highlight where you want anchor placed
  • Edit / Create an Article
  • Highlight where you want your anchor created

3.  Insert Anchor in Article

Click on the little ‘anchor’ icon to insert an anchor in your page.  Later you will create a link to jump to this location.

joomla 3 add anchor to article 2 How to Add an Anchor to Joomla 3.0 Articles Joomla 3.0 – Add anchor to article – Insert/edit anchor
  • Click on the little anchor icon
  • In the ‘Insert/Edit Anchor’ window, enter the following information (there can be no spaces in the anchor name)
    • Anchor Name: Section1
    • Click  ‘Insert

4.  Highlight Link

Here you will create the link that will jump to the anchor location.

joomla 3 add anchor to article 3 How to Add an Anchor to Joomla 3.0 Articles Joomla 3.0 – Create an anchor in article – highlight link to anchor
  • I created a table of contents (TOC) at the top of my article . I will link my ‘Section 1’ in the TOC to the ‘Section 1’ below
  • Highlight the ‘Section 1’ in the TOC

5.  Insert Link to Anchor

Now you will create a link to the anchor you created in step 2.  This is the same as creating a link to an external article or internal location on your website.  Except when creating a link to an anchor you must use the ‘#’ symbol in front to indicate it is an anchor – to link somewhere inside the current page.

joomla 3 add anchor to article 4 How to Add an Anchor to Joomla 3.0 Articles Joomla 3.0 – Create Anchor in Article – insert link to anchor with #
  • Click  on the link icon
  • In the ‘Insert / Edit Link ‘ window, enter the following information:
    • Link URL = #Section1
    • Click on ‘Insert
  • Click on ‘Save & Close’

6.  See Anchor Link Map

You can repeat all the steps above to create as many anchor and links to anchors as you want.  I’ve created a little anchor link map.  My TOC Section 1 and Section 2 link to anchors I created in the text below.

joomla 3 add anchor to article 5 How to Add an Anchor to Joomla 3.0 Articles Joomla 3.0 – Create Anchors in Articles – Anchor map
  • In the TOC – Section 1 will link to Section 1 below
  • TOC – Section 2 will link to Section 2 below

You can save your page and view your article in your Joomla 3.0 website.  You will see the anchors and links to anchors created.

Hope that helps you.  Please leave a comment if you have any questions.

Thanks,

Elaine

 How to Add an Anchor to Joomla 3.0 Articles

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and Wordpress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: