Get a Better Website

Full Name (*)

Please enter your name Email (*)

Please enter a valid email address Phone

The phone number you entered is invalid. Please re-enter it. Comment/Question (*)

please add a coment Please enter the code
Please enter the code

Invalid Input

Newsletter Signup

First Name

Invalid Input Last Name

Invalid Input Email(*)

Please enter a valid email address please enter the code displayed
please enter the code displayed
Refresh
Invalid Input



Join our newsletter and receive tips, advice, and other resources to help your organization effectively use web technologies.

USM


Ads on: Special HTML
Article Manager Lesson

Lesson Plan

This lesson will teach you the basic skills you need to use the Joomla Article Manager effectively.  The Article Manager is where Joomla stores the vast majority of content on your site.  In this lesson, we will concentration how creating articles; formatting them; and organizing them into Sections and Categories

The Article Manager in Joomla contains two important parts.  The first is a list of list of articles that exist on your website.  This is what you see when you click on Content->Article Manager from the Administrator Menu.  The second part of the Article Manager is the Article Editor.  When you select to Edit an article or Add an article you are taken to the Article Editor. The Article Editor contains many features for formatting and managing your articles. 

Objectives

In this lesson we will focus on the most essential features.  You will learn to:

  • Add a new Article.
  • Change the Section and Category that an article belongs to.
  • Set how much of article to show in preview mode. (Articles previews are shown on blog like pages)
  • Add images to articles and format image appearance.
  • Create links in an article to internal and external web pages.
  • Place an article on the front page of your site.
  • Publish and un-publish articles.

To learn to use more advanced features, like adding meta-data and setting access levels, please see our upcoming Intermediate or Advanced Article Manager Lessons.

Getting Started

You can get access to our Joomla training website by logging into this site.  Please see the instructions on the upper right-hand side of this page.  When you make changes to the training website you can see the result on the front end.

Click the titles below to continue this lesson.

1. Add New Article

A) Once you login to the Joomla Administrator, you should see the Control Panel.  If you don't have a login, review the 'Training Website Access' instructions on the right.

B) Click the Article Manager icon in the Control Panel OR select Content->Article Manager from the pull down menus.  You should now be in the Article Manager.

C) Click the New Button  Icon for creating new articles in Joomla Article ManagerThis will bring up the editor screen.

D) Give the article a Title and an Alias and select the 'FAQ' Section and 'General' Category.

E) Now Preview the results on the front end.

F) Click on 'FAQ' link on the left menu.  Click on the 'General' link in the main section. You should now see your new article in the list.

This list includes links to all the published articles in the General Category of the 'FAQs' Section.

2. Change Category

A) Go to the Article Manager (Select Content->Article Manager from the menus)

B) In the drop down boxes, select 'FAQs' in the for the Section and 'General' for the Category.  This will filter the list of Articles. 

Shows where the filter controls are in the article manager
Click to enlarge

C) You should now be see the article you just created.  Click the Title.  This will open the Article Editor.

D)  Change the Section and Category of your article to 'News' 'Latest News'.


Click to enlarge

E) On the front end click on 'The News'. You should now see your article listed in preview mode on this page.  'The News' displays previews of all articles in the 'Latest News' Category.

3. Set Article Teaser

A) If your article is not open for editing, select it again from the Article Manager.

B) Add several paragraphs of text to your article.  Make sure your article is in Section 'News' and Category 'Latest News'. Click Apply in the Article Editor toolbar.

C) Preview your article on the front end by clicking 'The News' link on the left navigation links. Notice that not all the text is displayed.  You must click on the title, or the 'read more' link to view the full article.

D) Change the amount of text that is shown in the article preview.  In the Article Editor place the cursor where you would like the intro text to end.  Now click the 'Read more...' button below the editor, as shown in the following image.


Click to enlarge

E) Click the Apply button in the toolbar.  You should now be able to see your changes reflected on the front end.

4. Working with Images

A) Open you article for editing.  We are going to add an image.

B) Click the 'image' button below the editor.  This will bring up an image manager.


Click to enlarge

C) Select an image from the manager and click the insert button.

D) To add a new image click the 'Browse' button (below the image browser) and select an image from your hard drive.  Now click the 'Start Upload' button.  You should now be able to select for insertion.  Click the 'Insert' button above the image browser. The image below highlights these buttons.


Click to enlarge

E) You can now drag your image and place it in another area of the article.

F) To change the appearence settings click on your image and click the edit icon in the editor toolbar. As shown below.

Shows icon that brings up article editor image setting window
Click to enlarge

G) You can change the width and height of the image as well as the way the image is aligned.  Make a few changes and preview the results on the front end.

 

5. Adding Links

A) Open your article for editing. 

B) Use your mouse to select the text you want to turn into a link.

C) Click the chain icon in the Article Editor toolbar. The Chain and Broken Chain icons are highlighted on the image below.

Shows link and unlink buttons on the article WYSISYG editor
Click to enlarge

D) You will now see a popup window like the one below.  Add the URL of the link to in the Link URL field.  If you are linking to an external website be sure to place 'http://' in front of the URL.  Otherwise your link will not work properly. 

Article Manager Link Details Popup Window

F) Click Apply in the Joomla Toolbar.  If your article is still in the ‘News’ Section and ‘Latest’ Category you should be able to view your Article here. Click the ‘read more’ link to view your article in its entirety.

G) Now we will create an internal link to an existing article.  First you need to find the id of an article you would like to link to.  To do so do the following:

  1. Click Save or Close on the Article Editor.  (Close will not save any unsaved changes). You should now see the Article Manager list of articles for the website.
  2. Note the value in the ID column.  This is the article ID.  You will need it to create a link to this specific article.

 

H) Now that you have the id for that article you want to link to.  Edit the article you want to link from.

I) As in the previous steps select the text you want to turn into a link and click the Chain icon.  In the URL Field enter: /index.php?option=com_content&view=article&id=44 (Be sure to include the leading /)

J) Replace 44 with the id of the article you want to link to.  Click Apply and preview your results on the front end.

K) Now lets remove a link.  Highlight the linked text and ONLY the linked text.  You will notice that the Chain and Broken Chain icons are now enabled.  When no text or images are selected these icons are usually disabled.  Click the Broken Chain icon.  This will remove the link from your text.

6. Placing Articles on the Front Page

A) In Joomla the front page aggregates content that may also exist elsewhere on the site.  Your websites home page can, therefore, be used to give more exposure to content that you want to promote on your site.  There are a number of ways to place content on the front page.  This lesson covers one of these methods: placing articles on the front page.

B) There are two ways to place articles on the front page:  through the Article Editor and through the Article Manager List

C) Open your article for editing, if it is not already opened.  In the Article Editor, select ‘Yes’ from the ‘Front Page’ radio button above the WYSIWYG Editor, as shown below.  Then click Save.  Now look at the training website front page and you should see your article.

Article Manager Editor Front Page Settings
Click to enlarge

D) If you clicked Save in the step above, you should now be viewing the Article Manager List.  All the articles with a Green Check in the Front Page column are candidates for being placed on the front page.  Those with the Red Circle-X are not.  Clicking the Green Check or Red Circle, changes this setting. Try clicking the Green Check next to your article to remove it from the front page.

Article Manager List Front Page Column
Click to enlarge

7. Publishing and Un-Publishing Articles

A) Publishing and un-publishing articles can be done through the Article Editor and the Article Manager List, just like with promoting articles to the front page.  However, you can also schedule the dates on which articles should start publishing and the date it should stop publishing.  This can be useful.  It allows you to write group of articles at one time, and have your website publish them automatically over a prolonged period.  Your website will continually provide fresh content without your constant management.

C) Open your article for editing, if it is not already opened.  In the Article Editor, select ‘No’ from the ‘Published’ radio button above the WYSIWYG Editor, as shown below.  Then click Apply.  Now look at the training website front end.  Notice your article is no longer displayed.

D) Now set the article to published and click Save 

E) If you clicked Save in the step above, you should now be viewing the Article Manager List.  All the articles with a Green Check in the ‘Published’ column are published; those with the Red Circle-X are not.  Clicking the Green Check or Red Circle, changes the publish status of the associated article. Try clicking the Green Check next to your article. Publish and un-publish it.

F) The preceding is similar to how articles are added and removed from the front page.  Now lets schedule the publication date of your article.

G) Click the title of your article to open it in the Article Editor. Change the start publishing date as shown in the image below.  You can either type in the date in the text field.  Or click the calendar icon besides the text field.  This will open a calendar control for selecting a date.

 Article Editor Publish Start and End Date Settings
Click to enlarge

H) You can also change the 'Finish Publishing' date if you would like your article to be automatically unpublished.

 

Lesson Feedback - Please Help Us Impove this Lesson

This length of this lesson was

Invalid Input
The level of the lesson was

Invalid Input
Being able to complete each step on a test site helped me learn better.

Invalid Input
I learned something useful from this lesson

Invalid Input
The lesson instructions were clear.

Invalid Input
It was easy to get access to the training admin area.

Invalid Input
It was easy to make changes in the admin.

Invalid Input
It was easy to view changes on the frontend.

Invalid Input
I would recommend this lesson to a friend

Invalid Input
Briefly describe most effective aspects of this lesson

Invalid Input
Briefly describe the least effective aspects of this lesson

Invalid Input
Suggestions for improvement

Invalid Input
Suggestons for new Learning Center Lessons

Invalid Input
Did the lesson meet the objectives of the lesson plan?

Invalid Input
Please enter the code displayed
Please enter the code displayed

Invalid Input
Submit


Trackback(0)
feed0 Comments

Write comment
 
 
quote
bold
italicize
underline
strike
url
image
quote
quote
smile
wink
laugh
grin
angry
sad
shocked
cool
tongue
kiss
cry
smaller | bigger
 

security image
Write the displayed characters


busy