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).

Joomla! 1.6 - cocoate.com/node/3608
Joomla! 1.7 - cocoate.com/node/8604Menu type - single article - select article

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! 1.6 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).

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

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.static.flickr.com/1198/8982... (Figure 3)

Hagen FitouHagen 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).

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

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). 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/3608Select 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).

Joomla! 1.6 - cocoate.com/node/3608
Joomla! 1.7 - cocoate.com/node/8604Assign an article to a menu item

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).

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

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/8604About page

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!

Comments

Wonderful tutorial so far, very helpful. I created about us page, put it in the top menu but it is not showing up on the site.HELP???? I folllowed all the steps exactly. I am using the Atomic template and uninstalled the other sample templates. Also I downloaded Joomla through my webhoster not directly on to my pc, is this a problem?

In my template (ja_t3_blank v1.0.3) "Top" menu doesn't work. But "Main menu" works fine. Try it.

"Abbildung 3: Example image"
"Abbildung 4: Insert image"
I think there is some non-english words :)

Hi
Abbildung = Figure is Correct ?
Abbildung 4: Insert image
Abbildung 3: Example image

thank you for change the description

gabriele melzi - gimu88

Thanks, typo fixed, no 'abbildung' anymore, only figures :) thanks

amazing instructons .. worked perfectly thank you . though i would like to knw how to edit the template design although i am just an administrator

Very good tutorial so far - thank you!

For me, including the image with an URL did not work. Could be because I use Joomla 1.7.
Unfortunatelly my "About Me" site also shows all article information like publish date, author... In the article options I set all these attributes to "hide" which still did not help.

Help, anyone?

Thanks!
Florian

The tutorial is very helpful.
Thank you very much!
Edison

Finally I found a guide for linking articles to menus which is working. Thanks a lot.