Learn How To Make A Website, No Skills Required. CLICK HERE

How to Make a Joomla Website

Joomla is a great framework to choose to make a website. Whether you just want a simple Web presence or something far more ambitious, Joomla makes it easy to build something that looks good and works well, and the platform makes it easy to develop and adapt your site over time.

Joomla is a Content Management System (CMS) in the same vein as WordPress and Drupal. Some would argue that it’s not quite as easy to get to grips with as WordPress, but once you’ve learned the key concepts and become familiar with the administration interface, it soon becomes second nature.

In this article, we are going to guide you right through the process of setting up your first Joomla website. For the purposes of the tutorial, we’re going to build a fairly basic business site, but the sky truly is the limit in terms of functionality. We aim to give you enough confidence with Joomla to go forward and add all the bells and whistles you need to make the site your own.

Joomla

Why Joomla?

Before we proceed to the nuts and bolts of our tutorial, let’s discuss why Joomla might be the perfect choice for your new website:

1. Joomla is a trusted platform

To quote Joomla’s own website: “Joomla is trusted by millions.” It’s estimated that around 28 million websites use Joomla as their foundation, and these websites include those operated by big names such as Barnes and Noble and Ikea.

2. There are extensions for everything

Joomla has a huge library of third-party extensions available, many of them free, which add extra functionality to your site. Anything you can imagine that you’d want to do with your site, you can be pretty sure that someone will have thought of it before, AND developed an extension for it. (If you are already familiar with WordPress, “extensions” are the same as what would usually be called “plugins” in a WordPress environment).

3. Joomla has a wide user community

With millions of active users, Joomla boasts a great support community. You’ll find lots of documentation, forums with thousands of posts, user groups and other resources. You’ll never feel alone using Joomla, with such a strong and active open-source community behind you.

4. Thousands of templates

In common with WordPress, Joomla is built around themes, only Joomla calls them “templates.” You’ll find literally thousands of both free and commercial options to make your site look stylish and professional. So if design isn’t your strong point, you can still have an attractive site.

How we will help you

Here at Make A Website, our team have built dozens of websites for various purposes, and Joomla has been our chosen platform for many – this puts us in a great position to show you how to make the most of it.

While there are limitations to what we can show you in a tutorial article, it’s fairly easy to get started with Joomla, and we’re going to take you right from the beginning. Don’t even worry if you don’t yet have a domain name or hosting, because we’re going to show you how to do all of that too.

What You’ll Need

Here is a list of all the things you’re going to need to build your Joomla site. Don’t worry about any of the items on the list – our aim is to take you through everything step-by-step.

  • A credit card or PayPal account to pay for domain registration and hosting
  • A Web hosting account with your own domain
  • A Web browser of your choice (we prefer Google Chrome or Firefox)
  • Some content with which to populate your site – both text and images
  • A little patience while you learn the basic Joomla concepts

Getting a domain and hosting

Before you can do anything, you need an address for your website (a domain), and a place to host your website (Web hosting service). We recommend HostGator as your Web host.

We have produced a very detailed step by step guide to registering your domain and setting up your hosting. You should visit the page now via this link. (The links will open in a new window or tab, so you can easily return to this guide at any time – see you shortly!)

HostGator - Home

Installing Joomla

Now you have your domain ready to go, it’s time to get the Joomla framework installed. Don’t worry, it’s all fairly straightforward.

1. Login to your cPanel account using the login credentials provided by your hosting company. HostGator and most other hosting firms send this information to your email account when you sign up.

Main panel

Even though the wealth of cPanel options can seem initially daunting to novices, it is actually very easy to use. Stay tuned on Make a Website for a comprehensive tutorial on cPanel that will follow soon.

2. Locate the “Software/Services” group of icons on the right. You will have to scroll down a fair way to find it.

3. Look for QuickInstall and Fantastico De Luxe, both of which are excellent automated installers for Web applications. Joomla is available via both installers (at HostGator at least), but we are going to use QuickInstall for the purposes of this tutorial. When we completed this article, QuickInstall offered a more up to date version of Joomla.

If your host only offers Fantastico, the process is practically the same, so you should still be OK to follow this tutorial.

Fantastico

4. Click the “QuickInstall” icon, and then locate Joomla – you will find it in the “CMS Software” section on the left. Select it, and then click “continue.”

QuickInstall - Joomla Main

5. If you have set up your domain properly, you will see it in the drop down list. The blank field afterwards lets you specify a subdirectory in which to install Joomla (i.e. www.yourdomain.com/joomla).

We will assume for the purposes of this guide that you want to place your Joomla site in the root directory, so it appears as soon as people visit your Web address. For this reason, we will leave this field blank. It’s unlikely you would want to use an alternative configuration for a Joomla website.

QuickInstall - Install Joomla2

6. Leave the “Enable Auto Upgrades” box checked, and then fill in the rest of the information, ensuring you use a valid email address. Once you are done, click “Install Now.”

7. The Joomla install will probably take several minutes. When the installation is complete, you will be given a login URL to administer your Joomla site, along with confirmation of your admin username and password. You should keep a note of these. You should also receive an email containing the details.

QuickInstall - Install Joomla 3

If you’ve installed Joomla very shortly after arranging your registration and hosting, and receive a “page not found” error when you try to access the site, don’t be alarmed. Your domain registration needs time to propagate across all the global DNS servers. The process can take anything from few hours to 48 hours. If you want to learn more about this, click on this link.

8. Once access is available, a login screen will welcome you when you visit the admin URL. There, just key in your admin username and password, and you can start building and managing your Joomla website.

Joomla Login

Getting Started on your Site

First, log into the Joomla admin interface (also known as the “control panel”), using the logon screen shown above. You should have your username and password from when you completed the quick install process. Once logged in, you should see a screen like the one below:

Control Panel

You will notice the name of your site in the top left. In our case, we called the site “Demo Joomla Site.” If you click on the site name, you are taken to the “front end” of the Joomla site – this is what people will see when they visit your site.

If you click on it now, you will see a very basic site, just like the one below, but with whatever site name you chose on installation.

Demo site

Usefully, Joomla automatically opens your live site in a new tab. This helps you to see the changes that you make as you go along.

Before we look at the design of the site and start to add content, here are a couple of things you should do first.

1. Update Joomla

Have a look back at the control panel, towards the bottom of the right hand side. The chances are there will be an update ready for installation, as shown in the screenshot below. Click the “update now” link, and then the “install the update” button on the next screen. The process will take a minute or two.

Update

2. Fill in the “meta data”

Meta data helps search engines know what your site is about. At the top of the Control Panel, click the “System” menu, and go to “Global Configuration.”

You will see an intimidating mass of options! Don’t worry about them all, just scroll down until you see the Metadata Settings shown in the screenshot below. Here, you should enter a brief description of your site and some keywords, separated by commas. If, for example, your site was about holiday rental properties in France, you could use “holiday rentals france,” “france holiday properties,” and “holidays in france” as your keywords.

Once you’re done, scroll back to the top of the page and click the “save and close” button.

Metadata

About Joomla Templates

Joomla uses templates to control the general appearance of the site. Just Google “Joomla templates” and you will find literally thousands – just make sure you choose a template that’s compatible with your version of Joomla.

When you originally install Joomla, it uses the “Protostar” template for the front-end of the site, and the “Isis” template for the Control Panel. Yes, it’s possible to change the appearance of the admin back-end as well as the site itself.

For the purposes of this tutorial, we’re going to stick with the default templates, but we will now show you how to change the templates so you can switch to one of your choice whenever you like.

1. From the Control Panel, click on “Extensions” and then “Template Manager.”

2. You will see a menu like the one shown below. This shows all the templates currently installed. You will see in this example that there are two alternative themes preinstalled, called “Beez3″ and “Hathor.”

Template Manager

“Beez3″ is a site theme, whereas “Hathor” is an administration theme. All you need to do to switch to them is click the small star icon in the “default” column. Feel free to try this now. If you switch to “Hathor” and then refresh the view of your live site, you will notice the appearance is rather different.

For the purposes of the tutorial, flick back to “Protostar” and “Isis” before continuing.

3. If you have a template of your own you wish to install, click on “Extensions” and then “Extension Manager.”

Usually, templates are supplied to you as archived ZIP files. Simply click on the “choose file” button, then point to the file on your computer. Once your new template is uploaded, it will appear as a new option back on the “Template Manager” menu.

Adding Content

Now, the time has come to add some content.

The basic concept of Joomla is that content is placed in articles. These in turn are placed in categories, and the content is organised with menus. However, for simple sites without many pages, you can skip the “categories” step, and leave all of your articles (pages) as “uncategorized.”

With this in mind, let’s start off by creating a few articles for our demo site, each of which will be one of our key pages. We will take you though creating one of them step-by-step, and then you can do the remainder yourself!

We’re going to just enter dummy content for the purposes of our demo. You can, of course, put in genuine content of your own as you start to build your site. We are going to create three dummy articles: an “about us” article, a “services” article, and a “references” article. You are obviously free to create as many as you like for your own site.

1. Click on “Content” then “Article Manager,” and then “Add New Article,” as shown below.

Article

2. The article editing page will now appear. Although there are plenty of options on the page, hopefully you will be reassured by the fact that the bulk of the page looks like a very standard word processor style interface!

Add article

3. Now we will add some content – starting with a title and then some body text.

Once we’ve done that we will also add an image. To do so, click the “Image” button at the bottom of the post content window. Scroll to the bottom of the window that appears until you find the “upload file” option.

Upload file

Click “Choose files,” and then find a suitable image file on your computer. Select it, and then click “Start upload.” Note that files uploaded to Joomla in this way cannot contain spaces in their filenames.

4. Once your image is uploaded, it will appear in the image gallery, alongside the few default Joomla images that are already there. Click on it, then click the “Insert” button to close the window. Before you do so, you may wish to add an image title and / or change the alignment of the image.

Here is our completed first post, shown in the editing screen complete with the uploaded image:

About us

5. You can now click the “Save” button at the top of the editing window. In our case, we’re going to click “save and new” and add a couple more posts, as described above. We suggest you do the same.

Configuring Menus

If, having added a few articles, you now click back to your live site, you will perhaps feel a little perturbed that your site doesn’t appear to have changed at all. That’s because we must first change the menu and point to the content!

1. Click “Close” to close the Article Manager and return to the main Control Panel. Make sure all the articles you’ve completed are saved first!

2. Click “Menus,” then “Main Menu,” then “Add New Menu Item.”

Menus3.  Fill in the “Menu title” field in the screen that appears. Usually, you will want this to match the article title, though this isn’t essential.

For the purposes of this demo, we’re going to call our first menu item “About Us” to match our first demo post.

Next, click the bold blue “Select” button, to the right of “Menu Item type.”

Item type

4. In the menu that appears (and is shown above) click on “Articles,” and then choose “Single Article.”

You will be taken back to the previous screen, where there will now be a new “select” button. Click this, and choose the article from the list that appears:

Art list

5. You can now click “Save” to complete your new menu item. As before, we are going to go for the “save and new” option, so we can also create menu items for our other two articles. You will want to do the same, for as many items as you created whilst working through the previous section.

6. If you now refresh your live site, you will see that all your new content is now shown on the main menu. In the screenshot below, we have visited the demo site and clicked into our new “About Us” page. Note the presence of the content we added earlier in the tutorial, and our other pages all available via the menu.

Site demo

Congratulations! You now have a basic, live, Joomla-based website.

Hopefully, you also now have the confidence to play around a little more with the Joomla settings. We’ve only scratched the very surface of what Joomla can do so far. Typical printed books about Joomla run to around 800 pages!

Suggested Next Steps

What exactly you do with your Joomla site next depends on your individual objectives. However, we present the following as a handy “to do list:”

1. Switch to a more attractive template

We discussed templates earlier in this article. You’ll probably want to switch to something a little more attractive than Joomla’s default “Protostar” theme before the official launch of your site.

You will find alternative Joomla themes all over the Web. You will even find custom theme design software if you really want to make a distinctive mark on your site.

2. Add a contact page

All websites should provide a way for readers to get in touch with the company or webmaster. Although Joomla includes contact functionality, most people opt to use a contact form extension for extra functionality, such as spam protection or map integration. Joomla’s own list of contact form extensions is a good place to start.

3. Think about backup

Sooner or later, all successful websites become the target of hackers. As such, it makes good sense to back up your Joomla site regularly so you can restore it if something goes wrong.

Joomla backup is another thing best left to a good extension. Akeeba Backup is particularly well-respected, and available in both free and commercial versions.

A Final Word

As we said at the start, Joomla has a user community of millions, so you should never worry too much if you’re struggling to achieve something specific – you’ll probably find a solution online in a matter of minutes.

The best place to start is on Joomla’s official website. Best of luck.

 

 

 

Previous post:

Next post:

Author Picture Written by Pete Zaborszky
Pete runs Make a website and wants to get detailed information to the readers. He is dedicated to being the best and providing the highest quality at anything he does. You can also find him on Twitter or Google+