How to Create an 'About Us' Page

To give you a first real challenge, let's create a first page on your new website. It will be an about us page on which you can write about your company, your project, or yourself. Most of the time, a page like this contains a title, text and perhaps a few images. 

Static vs. dynamic content

An "about us" page is usually created once, is accessible via a menu link, and in the future all you will have to do is change it as you go. It has a static character. A press release or blog entry, however, has a dynamic character.

  • For static pages, in contrast to dynamic pages, the creation date and author do not really matter.
  • Static pages are usually accessible via a menu link whereas dynamic pages can be accessed through lists.

The plan

The 'about us' page should consist of the following components:

  • a title,
  • a text,
  • an image.
  • The page should not appear on the front page.
  • We want a link to the page in the top horizontal menu (top).

This may sound simple at first :-). Go ahead and log into the administration interface!

Step 1 - Create content

Go to the Article Manager (Content -> Article Manager). There you might still see your unpublished sample data (Figure 1).

cocoate.com/node/10301

Figure 1: Article manager

Click the icon to get to the appropriate form and then add the title and text. In the upper pane, below the title, select "uncategorized" as a category. This category was created by installing the example data. The field Featured indicates whether the content should be displayed in the featured blog layout, which is mostly used as the front page. This still works in Joomla! 2.5 but the terms can easily be misunderstood. Select No. In the editor window, you may now enter your text. Joomla! comes with the default editor TinyMCE (Figure 2).

cocoate.com/node/10301

Figure 2: Article edit form

Inserting an image from a URL

As a first example we are going to use an already existing image on the web.
For example, this one: http://farm2.staticflickr.com/1198/89825... (Figure 3)

Hagen Fitou

Figure 3: Example image

Move the cursor to the position in the text at which you would like to insert the image. Click on the image icon in the editor toolbar and paste the URL of the image to the pop-up window. Configure the image with a left alignment and use 10 pixels vertical and horizontal space (Figure 4).

cocoate.com/node/10301

Figure 4: Insert image

The image will appear in your editor window. Click Save and your item is stored. There are several ways to save it:

  • Save - Item is saved. Form is not closed. Used for saving when you still want to continue working.
  • Save & Close - Item is saved and form will be closed.
  • Save & New - Item is saved, form will be closed and a new empty article form is called.

Exit the form.

Step 2 - Creating a Menu Link

The post has been created but is not appearing on the website. For it to appear, we need a link!

Click the New icon in the Menu manager in the top menu (Menu → Top).

Hint: Top is the name of the position in the default template. If you are not using the default template and the example data the Top menu doesn't exist or may have another name.

Click the 'Select' button next to the field Menu item type. A window with various links will pop up. Click on the link single article (Figure 5).

cocoate.com/node/10301

Figure 5: Select a menu item type

Now you need to choose the desired article. Click the button Select / Change in the right pane (Select Article) to select it. You will see a search box with all articles. In case you can't find your article on the page right away, you can filter the list by typing a part of the article's title in the search box and then clicking on the title of the correct article in the result list (Figure 6).

cocoate.com/node/10301

Figure 6: Menu type - single article - select article

Enter a title for the link "About us" and make sure that top is selected in the menu location. We can leave the remaining options with their settings for now.

Step 3 - 'About us' on the website

If you now load the frontend website, you will discover the new link in the top menu. Click it and you will see the about us content - congratulations on having created your first page (Figure 7).

cocoate.com/node/10301

Figure 7: About us page

Step 4 - Image Upload

If your image is not already available on the Internet, you will need to upload it from your PC. Let's go through the example together. Go to the Article Manager (Content Article manager). If you can't find your article, locate it easily by using the search box. Select the article's title and the edit form will open. Delete the linked image from the text.

Below the editor window you will find the Image button. This button launches a dialog box to upload an image. You can choose between existing images or upload new ones (Figure 8).

Joomla! 1.6 - cocoate.com/node/3608
Joomla! 1.7 - cocoate.com/node/8604

Figure 8: Image upload

Once the image has been inserted into the text, the formatting can be changed by using the image icon in the editor's toolbar. This separation of functions in Joomla! was purposely chosen because you have the possibility to use different editors. The Joomla! Image button will always remain the same but the image formatting in the editor might differ.

Attention: Joomla! uses the images as they are. The images will not be resized!

To solve this issue, have a look at Brian Teemans blog entry: Making Joomla Idiot Proof - May be FBoxBot is available for Joomla! 2.5 too when you read these lines.

Comments

I'm brand new to Joomla and have only moderate competence with web site technology, so I may be missing something here. I've worked some with Dot Net Nuke in the past, but am now putting up a site in Joomla 2.5. Joomla 2.5 was installed on my site by 3Essentials.com, my hosting service. In Figure 5 above there is a New Menu screen that does not appear in my installation of Joomla. When I click on New Menu, all I get is a small form that has three text fields: Title, Menu Type, and Description. The first two are required. All are simple text fields, there is no pop-up to select a Menu Type. I'm not sure if this is an error in the book or a peculiarity of my installation of Joomla 2.5, but I thought I'd point it out.

You may have restricted access, 1 and 1 have there version of Joomla Wordpress etc that install direct but they are not the full version you need to do an independat install probably

Hi there!

I am following your tutoriel in order to learn Joomla! but I'm having a problem with this step :
Enter a title for the link "About us" and make sure that top is selected in the menu location. We can leave the remaining options with their settings for now.

I don't have any top. Instead I have Main Menu.

I may tell you that I have installed it on my computer (OS X Lion) and that I'm using the template Beez20 with the style Beez2.
Everything is by default and I don't have any imported data (even demo datas).
I have installed Joomla! 2.5.4

Could you help me with this ?

Best regards,
arnaud

Hi Arnaud
please have a look to this screencast
http://cocoate.com/screencast/en0021
best regards
Hagen

Well it appears I have only the main menu and not the top one. I will try to reinstall it with the demo data, it may be of some help.

Anyway, thanks for your response.

arnaud

you have save a soul.thank you