Before attempting to build your own Joomla website, it is a good idea to take a look at how the finished project will actually work. Because the real benefits of a Joomla website happens behind the scenes in what is called the Administrator Control Panel, we will take a tour of a Joomla website which allows you access to a sample control panel. During the tour, you will get a chance to see how Joomla content is created and managed.

Begin by going online to demo.joomla.org.  

On the right side, click on the link to see the back end of Joomla 1.5 

 This will take you to a Joomla Administrator Log In page: 

 

Type in the word demo for the User Name and the word demo for the Password.

 This will take you to the Joomla Administrator Control Panel – also called the Joomla Back End.  

 Tour of the Joomla Administrator Control Panel

There are ten icons on the Administrator Control Panel Page. Above the Icons are 7 Menu tabs. Some of the Icons and Tabs are the same. We will begin with the Tab on the Upper Right called HELP.

 

HELP

There are two kinds of Help. System info shows System Information screens. The actual functions have been disabled because they do not want you destroying or un-publishing the DEMO site.  

 The other HELP, Joomla Help is a big red circle. This is the Primary HELP section. If you prefer reading it, you can copy it as a Word Document and download it to create a Manual. That way you can look at your website and at the HELP notes at the same time.

 HELP notes that we are using Joomla 1.5.

 Look at all the sections listed in the Alphabetical Index. These show you how to write Articles and Create Menus.

Next go back to the Top Menu and Click on TOOLS:

There are 6 options related primarily to writing emails. We will use a better component to serve this function.

 

Next go back to the Top Menu and Click on EXTENSIONS: 

The Extension Tab has five options on the Drop Down Menu:

• Install/uninstall
• Module Manager
• Plug In Manager
• Template Manager
• Language Manager

 In future articles, we will cover how to install extensions and templates using the INSTALL screen. We will also discuss how to modify and create Modules using the Modular Manager screen. And we will show you how to change and edit templates using the Template Manager screen.  For now, we will just look at the Template Manager.

 

 The Basic Program (as shown on the Demo and included with every Joomla Download) includes 3 Basic Templates. The default Template is Milkyway which has a Gold Star next to it.

Select the Milkway button and then Click on the Preview Button in the upper left to see the Home Page using Milky Way.

 

Next exit the pop up window and select the Beez Template and click on the Gold Default Star to make Beez the default template. Then click on Preview to view what the HOME page looks like using the Beez template:  

Note that the content did not change. Only the appearance of the DEMO website changed. This is one of the biggest advantages of Joomla websites – that the appearance and content are separate thus allowing you to change the appearance without changing the content. 

Exit again and select the template Purity to make it the default template, then click Preview to view the third option.  

 While there are thousands of templates available for Joomla, currently only one allows you to easily change the appearance of your website without even changing templates. This is the Cloudbase 2 template from Cloud Access. In a later article, we will show you how to add this template to your website.

Next in the Top Menu, go to Extensions, Install:  

This is the Extension Manager. How you add new templates and other extensions is by going to a website which offers Joomla templates (such as cloudaccess.com) and downloading a free template to your home computer. Most extensions, including templates, come as ZIPPED files. You generally should NOT unzip the file. You next upload the template from your home computer into your Joomla website by first clicking on Choose File to find the file. Then click on Upload File to upload the file.

You would then go to the Template Manager to select the Template you just loaded. You can then EDIT the template by clicking on Template – EDIT.

With the DEMO site, they do not allow you to add extra templates.

Next, in the Top Menu, click on Extensions, MODULE MANAGER:

 Modules are simply boxes used to hold content such as text and images. The Module Manager above shows 20 different Modules. Many of these control various menu options. The default Template is laid out into lots of modules. Many of these modules will likely not be used and should therefore be disabled when you start working on your own website. This can be done by selecting the module by checking the boxes on the left of the module and then clicking on disable at the top. You can also permanently delete anything you do not want.

 Most important, you can and will add new modules to create new sections for your site.  

Next, in the Top Menu, click on Extensions, PLUG IN MANAGER: 

 Plug Ins are very small programs that typically plug sections of code in to Joomla articles. The main plug in we will as is a better text editor because the one that comes with Joomla is not very good at screening out the bad code that results from copying and pasting WORD documents into your Joomla articles.

 Next, in the Top Menu, click on COMPONENTS:

 

There are 6 options listed for components. The only component we are likely to use is Web Links. Components are different from Modules or Plug Ins in that they are complete programs which often include their own modules and/or plug ins. Think of them as miniature versions of Joomla. In later articles, we will show you how to add and use components such as file managers, slide show managers, newsletter managers and a bunch of other programs which extend the functionality of Joomla.

 Next, in the Top Menu, click on the CONTENT Tab.

 The Content Tab has 5 options. These are:

Article Manager

Article Trash

Category Manager

Section Manager

Front Page Manager

 Let’s look at the Front Page Manager Tab first.

Note that there are several articles on the Front Page. If you are new to Joomla, you might want to read all the articles. But eventually, you will just delete them by selecting them and clicking remove. This will send them to the Article Trash bin from where they can be permanently deleted. You can also simply unpublish articles and leave them in place for future reading.

Note that the articles are numbered to appear on the page in a certain order. This order can be changed at any time with the green up and down arrows (see red circled area).

Note also that Articles are assigned to certain “categories” which are in turn assigned to certain “sections.” Once of the first things you need to do when designing your website is to organize all of you articles into categories and sections. It is okay to have only one category per section, but each page (article) must be assigned to a category and section, even if the article only appears on the front page. To edit an article (page), simply click on it.

To write a new article, the first thing you need to do is pick a category and a section. So next let’s look at the CONTENT, SECTION MANAGER tab.

Note that there are three sections (News, About Joomla and FAQs). If you click the Preview button, you will see that the sections do not align with the Sections on the Main menus (these are Main Menu, Resources and Key Concepts).

This is poor organization of articles. Sadly, the Demo Site does not do a very good job of illustrating how the sections and categories in the Content tab should match the Menu Items in the Main Menu. A better organization would be to align the Article Sections with the Menu Sections by having each of the different Menus have their own Section in the Section Manager.

Exit the Front page and go back to Section Manager. Then click on Extensions > Module Manager. Note that the three different menus, Main Menu, Key Concepts and Resources, are all listed as Modules. To align these modules with article sections, you should either change names of modules (such as changing Resources to About Joomla) or change the name of the section to match the module (such as changing the name of FAQs to Key Concepts). Either way, changing names is simply a matter of clicking on the Module or Section you want to change and then changing the name on the screen that comes up.

While we are on Modules, the Joomla Default Template comes in a Three Column format. It can easily be changed to a more modern two column format simply by Disabling the four Modules shown with “right” positioning (or clicking on them and manually changing them to left positioning. For example, click on “Whose on line” module. This will take you to the Module (Edit) screen. Here you can either disable it, rename it, or change its position from right to left. Then you can either click SAVE which applies and closes the screen. Or click APPLY to save, but not close the screen (for example if you want o preview the changes before closing the screen). Or you can click close if you are done with APPLY or do not want to make any changes. For now, click Close to go back to the Module Manager Screen.

Next go to the Content > Category Manager Screen.

There are 9 categories. (3 in the About Joomla section, 4 in the FAQs section and 2 in the NEWS section. You can change the sections categories are in by clicking on the category. For example, click on “The Project.”

The Category (Edit) Screen appears. Note that “The Project” category is published and in the About Joomla Section.

Clicking on the Drop down menu allows you to change sections. Since we are not going to make changes, click CLOSE.

Back at the Category Screen, notice that you can add new categories or delete existing categories simply by clicking on the top buttons. Also note that each category contains several articles. You cannot delete a category as long as it still has articles. And you cannot delete a Section as long as it still has Categories. Later on, we will delete much of the default content, But the order of deletion will be to first delete un-needed articles, then delete un-needed categories and last delete un-needed sections.

We will next look at some of the Articles.

Click on Content > Article Manager.

This displays the first 20 articles. Scroll down to the bottom of the screen and you will see that there are three pages of articles (about 60 in all). Thus, this apparently simple JOOMLA DEMO site is in fact extremely complex as we will shortly see.

Note that only one of the first 20 articles shown on this screen is published on the Front page. You can add other articles to the Front Page or delete this article from the Front page simply by selecting the article and clicking on the appropriate button at the top of the page.

Note that this page also lists the number of hits for each article. The most popular article is Joomla Overview. This article is not on the Front Page, but it should probably be moved to the Front Page.

You can also edit articles by clicking on them – or create new articles (new web pages) simply by clicking on the green NEW button at the top of the page. First, let’s click on one of the first articles listed “What’s New in 1.5?” to bring up the Article – EDIT screen for this article:

 

This is a very short article with a READ MORE (red line) in the middle of it. Click on the preview button to see this article under the Popular Menu Module of the Front Page. It is also listed in the Latest News menu module on the Front Page. Click on either of these to see the webpage for the actual article. You will note that neither of these has the READ MORE icon. However, if the article appeared on the Front Page in addition to its own page, the READ MORE icon would appear and the text below the READ MORE icon would NOT appear on the Front Page.

Exit out of the Preview mode to get back to the Article (Edit) Screen. Note that you can change what section and category each article is assigned to. You can also choose whether to Publish it or put it on the Front Page.

If you click on PARAMETERS (Advanced) on the right, there are a dozen other ways you can modify the document. Metadata is a way of tagging the article for search engines.

The Article Editor also includes a text editor, table editor and image modifier. However, I rarely use any of these. Instead, I will build my web pages as Word documents and then copy and paste them into my web pages. It only takes a couple of minutes. However, if you try to transfer too much information at once, it may not transfer. With big complex pages, I add a little at a time by clicking the APPLY button after half the article is in and then adding more and clicking the apply button again. This is especially true with adding images and tables.  Click on CLOSE to go back to the Article Manager.

Creating New Web Pages takes only a couple of minutes

To create a new web page, from the Article Manager page, click on the Green NEW button. 

This brings up the Article: New Screen:

 

Then type in the boxes. Each page needs a title, a selected section and category and whether or not you want it to appear on the Front Page. It also needs some text. Then click APPLY to stay on the Article EDIT screen.

To add images to your article, first position the cursor where you want the image to go.

Then click on the IMAGES icon at the bottom of the text editor screen. 

 This brings up the images/stories folder for this website:

 Select the image you want to insert by clicking on it. Then click INSERT.

 This will take you back to the Article EDIT screen where you should now see the image you selected inserted into the article.

 Click on APPLY to insert the image and stay on the Article Edit screen.
For now, click on CANCEL to exit the Article Edit screen.

 Next go to the Top Menu and Click on Menus.

 

There are 8 options listed here. Click on the first option, the Menu Manager.

 

Here you see the six active Menu items. Each of these is also a module. This means that each menu is a module and has a corresponding module in the module manager. Six menus are way too many menus. The Demo site only shows this many menus as an example of what is possible with Joomla. You should try to limit your website to a single horizontal Main Menu and at most a single side menu.

 

Next go to Menus, Main Menu

 

This takes you to the Menu Item Manager for the Main Menu. This is where you can edit existing men items and add new menu items. You can see there are 8 articles associated with the main menu and one sub-article. Note that you can control the order in which the menu items appear in the main menu by clicking on the green arrows.

Click on the Preview button and you will see these 8 options listed on the Main Menu.

 

Note that while 8 Men Items appear in the Main Menu, one of them (What’s New in 1.5?) is missing. Click on the Menu Item Joomla Overview to see the What’s New Menu Item:

 What’s New was hidden from view because it is a Child of the Parent Menu Item Joomla Overview. To see how a Menu Item Child relationship is created, exit the Preview screen and go back to Menu Item Manager for the Main Menu and double click on the What’s New Menu Item.

This brings up the Menu Item EDIT screen for the What’s New Menu Item:

 

Notice that in the Parent Item section, Joomla Overview has been selected as the Parent Item for What’s New. If you want to put the What’s New Menu Item so it always appears at the top of the Main Menu, you would need to make TOP the Parent Item. For now, click close to return to the Menu Item Manager.

We will not add a new menu item because we have not written a new article to connect it to. Before adding a new menu item, you first need to write an article to point the menu item at. And before you write an article, you need to create the section and category that the article will be put in. This is why the first step in creating content for your website is organizing and posting your sections and categories with the Section Manager and Category Manager. 

Next go to the Top Menu and Click on Site, Media Manager.

To add images to articles, they must first be added to the STORIES folder. So click on the stories folder.

 

At the bottom of this folder, you will see a Choose File Button.

When you have your own site, you can click on the Choose File button to add any images from you personal files. The Media Manager can only add images one at a time. In a later article, we will review another much faster way to upload images seven at a time using a free File Manager Extension called Extplorer. I often have up to 30 pictures per web page and up to 100 web pages per website. So using a File Manager is a good way to efficiently load and organize 3,000 images to the website. 

Next click on SITE > User Manager.

When you get your new website, one of the first things you should do is go to the User Manager and click on the Administrator to change the name to your name.

Double click on the Administrator to open the User EDIT screen:

This is the screen where you can change the name of the Super Administrator and set the Editor to use when creating articles. After we get a better text editor installed, we will come back to this screen and make the better editor the default editor. For now, click Close.

Next click on SITE > Global Configuration.

 

This shows that the Website is not offline (in other words, it is an active site). It also shows the offline message (you can put in any message you want). You can also choose the site name, and a couple of different editors and the list length. The most important things are putting in good meta tags for search engines.

Click on the Global Configurations, System Tab

Another essential change is to increase the SESSION time up to 99 minutes from the default 15 minutes. Note also the essential path to the correct images folder is images/stories. Also only a couple of times of images are acceptable. I usually use either .jpg or .png.

This concludes our tour of the Joomla Administrator Control Panel. In the next article, we will assume your Joomla application has been installed on your website and we will review how to modify some of the Site Global Configurations.