extension joomla, template joomla,banner extension joomla,jomla slider,slider joomla

If you've followed my tutorials on installing Joomla locally or on a web host, then you're probably wondering, "What do I do now?" This tutorial will help you set up your Joomla website from scratch. I'll walk you through 4 easy-to-follow steps:

  • Step 1: Create a website structure.
  • Step2:  Add content and articles
  • Step 3: Create a main menu
  • Step 4: Add modules to your Joomla website.

A Joomla website only needs 4 main pieces to operate succesfully: Articles, Menus, Modules and Templates. There could be a 5th piece here, Extensons. But, extensions are by no means required to run a successful Joomla website. I'll cover extensions in a future tutorial.

For the sake of this tutorial, we'll be looking at a completely vanilla Joomla installation. Don't worry, you'll be able to follow along just fine if you've already installed the sample data.

Step 1: Site Structure

If you haven't yet planned out the organization of your site, then stop here, get a pen and paper, and sketch up a rough outline like the example below. Focus on the main menu for the top tier, with each box being a menu link representing different sections of the site. If you've already done that, then way to go! You just knocked out one of the 4 steps without even knowing it!

website outline

Now that you have a general idea of your site's flow, let's head back into the Joomla administration panel.

Step 2: Adding content via Articles

All of your site's content will be stored in what Joomla calls "articles". First, we need to create article categories. Go to Content > Category Manager.  You should see a default category named "Uncategorized". You can use that for static pages like About Us, Our Services etc.. Named categories are useful when you have lots and lost of articles, like a blog site or news site would. Don't worry about category descriptions, you'll almost never see them on the front end of your site.  Let's create a category called Latest News, which will be appear like a blog in the front-end.

Joomla Category Manager

Once you have a your categories in place, we can create articles. Press the Articles tab or go to Content > Article Manager & press the New button. All you need to do here is 1) add an article title, 2) select a category, then 3) add your article text. I usually create a "Welcome" article to serve as the home page, and an "About Us" article, both uncategorized. I'll also create a few articles to place in the Latest  News category. When you're done, press Save and close the article. Congratulations, we're half way through! Only 2 steps to go.

Joomla Article Manager

Step 3: Create a Main Menu

Now that our content is in place, we need to build a navigation menu. Go to Menus > Menu Manager. There should already be a Main Menu installed by default, containing a link to your Home page. This is called the "Default menu item."

Joomla Menu Manager

Select the Menu Items tab. If left alone, this Home menu item will display your featured articles in a blog layout. You can easily change that if you wish to display a single article as your home page. Simply click on Home then press Select next to the Menu Item Type field. In the popup window, select Articles > Single Article. Next, on the right under Required Settings, press the Select/Change button. In the popup window, choose the full article you wish to display as your home page.

Menu Item Type

Let's create some more menu items. This is a good time to refer back to your organization chart from step 1. Let's create a link to our "About Us" article. Select New and follow the same steps as we did for the Home page, choosing the Article layout and selecting an article. We'll create one more item to house our Latest News category. For this we'll choose the menu type under Article > Category Blog.

Step 4: Position the Menu on the site

The last step is to place the menu on the site. Joomla templates use modules to place content in various positions on the page. Go to Extensions > Module Manager. Press New and select Menu from the Module Type popup window. Give it a title like Main Menu, and press the Hide Title button.

Joomla Module Manager

Next, select a module position for the menu. It's important to know that each Joomla template has a unique system for naming it's module positions. Some templates make it obvious, like "top" while others can be more discreet in their naming conventions, like "position-1." Refer to your template's module positions guide for the exact name. If you don't have a guide handy, use this little trick I included at the bottom of this article.

I'm using the "Beez2" template for this tutorial, which tends to be on the discreet side of module naming conventions.  Let's place the menu in the Top, named "position-1" . Set the Status to Published, and select the Main Menu name under the Basic Options. Then press Save & Close.

Let's add one more module. Go back to the Module Manager main screen and press New. This time, select Latest News. This module will display the titles of the most recent articles from a category. Give it a name, and select a position. I want this module to appear on the right side of the home page: position-7 in the Beez2 template. Under Basic Options, I'll choose my Latest News category. (FYI: hovering over the labels usually shows a tooltip about each item). Lastly, I only want this module to appear on the Home Page only. So, on the Menu Assignment section, select the option "Only on the pages selected". Under the Main Menu tab, uncheck everything except the Home Page then press Save.

Module Assignment

Congratulations, the basic setup is complete!

The front end of your Joomla site should look something like this (using the Beez2 theme).

Basic Joomla Home Page

We can see our main menu up top, and our welcome article and latest news module on the home page. Unless you're company is named Joomla!, you probably want to add your own logo to the header. If you're using the Beez2 template, changing the logo is done in the template parameters under Extensions > Template Manager > Beez2. In Beez2 Advanced Options you can do things like upload a new logo, or press Clear to use the Site Title & Description text instead. You can also change the template's look & color scheme by selecting Personal or Nature.

Beginning building your first Joomla website