Joomla is a great system to use for those who want to build a website without programming skills. Although learning the basics of HTML, PHP and CSS may be beneficial in the long run, they are not necessary to get started creating something amazing today.
With a good web hosting foundation, anyone can build a website with Joomla to serve virtually any purpose. Whether it’s a blog, eCommerce site or simply putting up business information to drive local traffic, it can all be done from Joomla.
In this Joomla website building tutorial, I’m going over some of the basics of the system. These tips will get you started by showing you a few of the elements you can alter to begin developing immediately. From the moment you finish the install process for Joomla, you can begin attracting visitors to your site.
Creating a Basic Article in Joomla
Content is how websites drive traffic. If you have no text on your site, search engines cannot rank you. Creating articles in Joomla is how you add that content to your website.
Let’s begin with going over how to add a basic article in Joomla.
How to Create an Article
Click on the Content tool in the top admin panel and select, “Articles.” I know, you probably see the “Add New Article” option available, but we’re going to ignore that for now. I want to show you the article screen itself.
This screen will show you all of the content you’ve ever developed in Joomla. From here, you have a variety of options at your disposal for customizing the content. Click on the “New” button on the top left.
From the next screen, you can enter in a title for the piece and fill in any text you wish. Joomla comes with a fine visual editor that has a lot of the same features as many editing systems. Bold, italicize, underline, formatting and other tools are at your convenience to create content that brings in the traffic.
Once you are done creating the piece, click the “Save” button at the top of the screen.
NOTE: There are three primary ways you can save articles in Joomla:
- Save
Will save your content and keep you on the same editor screen. - Save and Close
Saves the article and takes you back to the articles area. - Save and New
Saves the current article and opens a blank editor for the next piece you want to create.
By default, Joomla will immediately publish articles you create. This means they will be live as soon as you click the button to save. However, you can change the status of the article to save it as Unpublished, Archive or Trash. If you suspect that the piece you’re working on is more of a draft, change the status to “Unpublished.”
How to Put the Article into a Menu
What if you create an article that you want to see placed as a menu item? Although creating pages is the better use for menu items, articles can be placed here as well. From the editor screen, click the “Save and Close” button to return to Articles.
Click on the “Menus” link from the top tool bar, go to Main Menu and click “Add New Menu Item.”
Click the “Select” button from the Menu Item Type field.
From the new window, select Articles and then click on “Single Article” at the bottom of the list.
From the New Menu Item screen, click the “Select” button next to the Select Article field.
Choose which article you want to place as a menu item. In this tutorial, the option is pretty obvious because there is only one piece of content created.
Give the Menu Title a name. This will be the link that is displayed on your website in the menu list. I would suggest something related to the article that you are using in this instance. Since I am using “This is My First Post” as the item, my title is going to be “My First Post.”
Click the “Save & Close” button on the top.
Now, you have an article as an item in your Joomla menu. I would suggest reserving the menu to important pages if possible. Filling up a menu with a variety of content is distracting for many visitors and can play poorly in a mobile environment.
Setting Up Categories
Categories are a great way to separate content. It’s a method that can keep all of your posts and other materials organized. Not only does it help boost visitor engagement while giving those people a way to find your materials easily, but it also helps you keep track of your creations.
For example, let’s say that you have a website centered around home electronics. Instead of lumping all articles together and making it seem like one giant block of information, you can break up the categories such as TVs, game consoles and mobile devices. Now, people who are only interested in game consoles can browse all of the articles focused on that niche.
There are several ways categories can be used in Joomla. You can manage articles, organize components and list them on your website for all to view.
How to Use Article Categories
Click on the Content tool in the top admin panel and click, “Categories.”
This section will show you all of the categories you currently have for your articles. By default, Joomla will have one available labeled, “Uncategorised.” This is what all of your content will be classified unless changed when you’re creating it.
Click the “New” button in the top left of the screen.
In this next screen, give your category a new title. This is the link that everyone, including yourself, will use to associate content into that one group. In this example, I am building a renewable energy site. So, I am going to name the first category, “Solar Power.”
Then, you can give the category a description. This is optional, but it may be beneficial to help yourself as well as your guests understand the content that is classified in this section. You can also set up parent categories, accessibility options, languages and even tags if you want to use them in your site.
Once you’ve created the category, click the “Save & Close” button at the top.
NOTE: Tags can be entered by typing in the word and hitting the enter button. This will automatically add them to Joomla’s list of tags for your site.
Now, you can go back into past articles and change their categories or create a new article and select your category from the list.
How to Use Component Categories
Categories just don’t work for articles and those who visit your website. In fact, your components can be arranged by categories as well. These keep all of the elements of your site connected and easy to manage as time goes on.
In this example, I’m going to show you how to put categories for banners. This is helpful should you decide to sell ad space on your website or display banners for various causes.
Click on the Components tool, hover over banners and click categories.
Like the content categories area, this will show you all of the titles you’ve made for banners.
Click the “New” button in the top left.
Just like the content category, you can give this one a title and description. In fact, this screen will be similar in all categories that you create whether they are for components or content.
Once you’re done, click the “Save & Close” button to go back to the category list.
How to List the Categories on a Page
If you have a list of categories for your content, you want visitors to see it. This also helps in search engine optimization as it gives bots a method to crawl that content.
In this Joomla website building tutorial, I’m going to create a menu item that links to a category page.
Click on Menus, hover over Main Menu and click “Add New Menu Item.”
Click the “Select” button next to the Menu Item Type field.
Select the Articles type and click “List All Categories.”
You can make other adjustments to this menu item such as opening in a new tab, different template styles and altering the layouts. For now, we’re just going to give the menu item a name and click the “Save & Close” button.
When you click on the categories from the Main Menu, it will show a list of all article categories currently on the site. Your descriptions will also be available for each on this new page.
Using Featured Articles
Featured Articles are those pieces of content you want to show before all else. These are often used to deliver content of the utmost importance to visitors. While Joomla has a variety of ways to display content, such as newest posts first, the Featured Article is something that you want all of your visitors to be aware of immediately.
There is a lot that can be done with Featured Articles. They can be used on the home page much like a blog or stored in their own page much like the category list I demonstrated earlier.
Here are a few ways you would handle this function in Joomla.
Marking Articles as Featured
Setting articles to be featured can be done two different ways.
1) From the Articles section, you can click the star icon to make the post featured.
2) Click the “Yes” button under the Featured option within the article itself.
Creating a Featured Article Menu Item
A Featured Article menu item is created in much the same way as the category list. Except in this instance, you would choose the option for “Featured Articles” under the Article section.
Name the item something like “Featured Articles” and click the “Save & Close” button.
Changing the Layout of the Feature Article Section
When you start building up quite a list of Featured Articles, you may want to arrange how they are displayed on the home page. This will help give the site a sense of symmetry while delivering your content.
Go to Menus, but this time click on the “Main Menu” option.
Click the link for the “Home” item.
Next, click on the “Layout” tab along the top.
In this next section, you can change a variety of elements for the home page. The number of leading articles, intro articles, number of columns to use, ordering and more options are available. This lets you fine-tune the appearance of the page in many ways.
Once you are done making adjustments, click the “Save & Close” button at the top.
Using the Read More Function
When you’re setting up articles to be featured on a single page, it’s helpful to use the “Read More” link. This allows you to condense the snippet to a single paragraph while letting visitors click a button to see the rest of the content.
The Read More button makes the website look clean and easy to follow for guests and is a good practice to get into.
From an article, position the cursor where you want to put the tag and click the “Read More” insert tool.
This will add the Read More button to the end of the text up to where you’re cursor was resting. Once your done, save your article.
Setting Up Drop-down Menus
Drop-down menus, or submenu items, are a great way to keep your navigation bars clean and organized. Instead of displaying every single element in the nav bar, you can use a hierarchy for showing content.
Submenu items can be used to link internal content or show external links. For instance, you can link directly to another website entirely from the drop-down list. This can be helpful if you want to share tools or valuable websites you think your guests absolutely need to visit.
There are many ways to create drop-down menus for just about any purpose. Today, I am just going to focus on something quick and easy.
These submenu items are created by giving them a parent item to be under. In this example, I am going to show specific categories under the “Categories” menu item.
Add a new Menu Item and click the “Select” button.
Give the menu item a title. Click on the “Category Blog” option from the Articles section.
Click the drop-down list for “Choose a Category” and select one. In this example, I am selecting “Solar Power.”
Click on the Parent Item drop-down and choose what the menu item will appear under. In my case, I am placing this one under “Categories.”
Once you’re done, click “Save & Close” to return to the list of menu items.
Adding a Contact Us Page
A “Contact Us” page is an important aspect of any business website. It gives visitors a way to get in touch with you and plays into how consumers trust the brand. Simply not having this page can actually cause people to leave the website, even if they do not use it.
Joomla comes with its own contact form builder. This makes it easy to quickly set up a method to allow others to send messages.
Creating the Contact Form
First, click on the Components tool along the top and click “Contacts.”
Click the “New” button near the top left of the page.
Input the contact person you want to use for the form. You will need to give this contact a Name and email address. In this example, I am just going to name it “Contacts.” However, you might want to use “Contact Us” or something similar. The email address you provide will be the destination of any form submissions from guests.
You can link Joomla users to the contact information if you have any.
Once you’ve entered in the information, click to save and close.
Adding the Form to the Main Menu
Now, you will need to add the form to the main menu to be accessible by your visitors.
Add a new Menu Item as stated above. Except this time, click the Contacts option and select “Single Contact.”
Name this menu item, “Contact Us.”
Click the “Select” button next to Select Contact and choose the account you made above.
After you’ve selected the account, save and close the form and it will be added to the main menu.
Using Joomla to Build a Complex Component Page
One of the things that makes Joomla such a great platform for building a website is the ability to add components. Instead of coding certain elements yourself, the system has automated processes that make delivering certain objects easier. For example, the contact form we just built above is a component that is built into Joomla.
Not all components have the capacity to be used as a stunning webpage, however. Some are simple tools that improve the efficiency of a website. In this example, though, I’m going to go over setting up a complex component page using the News Feed.
In this example, I already have a news feed set up in Joomla. Now, we just need a page to go along with it.
Add a new menu item as in the instructions above. This time, click on the News Feeds section and select “Single News Feed.”
Next, click on the “Select” button next to the Feed field.
Choose your news feed by clicking on its name in the list.
Give the menu item a title and click the button to save and close.
When a visitor clicks on the link for the feed, they are presented with its own page. This is considered a complex component post because all of the data contained on the page is pulled from a third party and is displayed on your own website. Anytime the source updates material, it is reflected on this webpage.
Be Creative and Build
It’s not overly difficult to build a website with Joomla. A lot of the functionality is automated and is less convoluted than some other systems. Because it is customizable, you can create anything you need from with the platform. From eCommerce to blogging, it’s a flexible system that is easily adaptable. The only thing you may be limited by is the imagination.