How to Build a Joomla Website, Step-by-Step Tutorial


Mangesh Supe

by Mangesh Supe · Updated August 11 2021

How to Build a Joomla Website, Step-by-Step Tutorial

If you're thinking about creating a website with Joomla, then you've come to the right place. In this article, we'll cover all the things you need to know to get started.

This step-by-step tutorial will show you how to install the software on your server and explain some basic features. In the end, we hope you will be able to explore independently and launch a dream Joomla site on your own.

Although not as clean and easy to use as WordPress, Joomla is more suitable for beginners than Drupal (see a detailed comparison of the three here). So, if you follow this tutorial, you should be able to have your site up and running in 3 hours (or less) right away.

1. Register a domain name and choose a web host

2. Installing and setting up Joomla

3. Familiar with Joomla foundation

4. Choose a great template

5. Install Joomla template

6. Customized design

7. Using Joomla modules

8. Assigning locations to modules

9. Create new page

10. Assigning pages to the navigation menu

11. Add blog section

12. Install extensions

  1. Register a domain name and choose a web host

If you already have a domain name and web hosting, please skip directly to the next step.

Before you can start building a Joomla website, you need a domain name and web hosting. If you don't have a clue about this, read our article on how to pick a domain name. In addition to a domain name, you will also need web hosting services.

We recommend that you get your domain name and web hosting from BlueHost, the world's most popular web hosting company, and which also offers a free domain name for one year.

View Details

With BlueHost you can quickly launch a Joomla site without having to spend time downloading, uploading and installing software. Of course, you can also use other web hosting providers (click here for more recommendations), just make sure they meet Joomla's system requirements.

  1. install and set up Joomla

First, open the official Joomla website and go to the download page to download the latest version of the zip file to your local computer:.

Joomla download page

Open the Bluehost login page, enter your account number, password, and then click the login button at.

BlueHost login page

In the BlueHost dashboard, click on the Advanced menu on the left, then click on the File Manager icon in the middle of the screen at.

To upload the previously downloaded Joomla installation package to the server.

The specific steps are as follows.

  1. Check if the current location is in the /public_html directory.
  2. Click on the Upload button and on the upload page, select the installation package (.zip format) downloaded from Joomla.org.
  3. return to File Manager and select the uploaded Joomla package.
  4. Click the Extract button to unzip the package.
  5. Return to the BlueHost dashboard, click on the Advanced menu on the left, then click on the MySQL Databases icon in the middle of the screen to manage the database:.
  6. To create a MySQL database and user in a newly opened page.
  7. The specific steps are as follows.
  8. Create New Database: enter 3 to 8 characters to create a database, in the above example we entered joomla, then click on the Create Database button to complete the creation.
  9. Add New User: Enter 3~8 characters to create a database user, in the above example we entered 10besty, then enter the password twice (you can also click the Password Generator button to automatically generate a password), and then click the Create User button to complete the creation.
  10. After creating the database and users, to assign database privileges to the users, you can do so in the Add User To Database area.
  11. Just click the Add button, then check all permissions on the next page and click the Make Changes button to make it effective. Returning to the BlueHost dashboard, you will be able to see the database correspondence with the user.
  12. Now, let's start the Joomla site by typing http://YOURDOMAIN.com/installation/ into the address bar of your browser.
  13. Tip: If you register your domain with Bluehost, they will automatically create an SSL certificate for you, so it's okay to enter the following link.
  14. https://YOURDOMAIN.com/installation/
  15. Site Settings Database Settings Configuration Overview
  16. Enter the name of the website, for example, our website name is Top Ten Reviews
  17. Enter the site description, you can leave it blank
  18. Enter super user email
  19. Enter the superuser username and password
  20. Click Next
  21. Database type: MySQLi
  22. Database host name: localhost
  23. Database username: the database username previously created through the BlueHost dashboard
  24. Database password: the database password previously created through the BlueHost dashboard
  25. Database name: the name of the database previously created through the BlueHost dashboard
  26. Data table prefixes: just leave the default unless you know what you're doing
  27. Click Next
  28. If all your database settings are correct, you can see the Joomla pre-installation overview information at this time, and we check Install Blog Demonstration Data. After confirming that there are no errors, just click the Install button.
  29. BlueHost is an excellent web hosting provider and the entire installation process is quick, usually taking less than 1 minute to complete.
  30. Due to Joomla's security settings, you must delete the installation directory after the site is installed, until then, you cannot proceed to the next step. So, let's click on the orange Delete "installation" directory button and look at your new website:.
  31. Familiar with Joomla foundation

The next step in learning to build a website with Joomla is to get the directions. Open https://YOURDOMAIN.com/administrator/页面 in your browser, enter the correct username and password and enter the backend management system, we will see many menus in the control panel. But first, you can switch the language to Simplified Chinese by clicking on the CONFIGURATION → Language(s) menu on the left side of the screen at.

This will take you to the language management page where you will see the languages that are currently installed on the site, click on the Install Languages button in the upper left corner to add a new language.

Find the line where Chinese Simplified is located, click the corresponding Install button, wait for a moment, Joomla will automatically install the Simplified Chinese language pack:.

Click on Extensions → Language(s) → Installed menu at the top of the site, you will see that the site now has two language packs, find the line where Chinese Simplified is located and click on the corresponding icon to set the default language to Simplified Chinese:.

Note that this only sets the frontend of the site to Chinese. Next, we select the value in the drop-down box where the Site is located as Administrator, and again click on the icon in the line where Chinese Simplified is located to set the backend of the site to Chinese as well.

The Joomla website has been successfully displayed in Chinese, click System administration → Control panel menu at the top of the website to go to the backend home page, first familiarize yourself with each menu item:.

On the left side you can find the usual shortcuts, such as adding articles, menu management, installing extensions, etc. On the right side you can find important information about the status of the site. However, the most important is the System menu at the top, where you can find the same options as in the Control Panel:.

  1. System administration: access to control panel, global configuration, pending or locked content items, clear cache, system information
  2. Member Management: Manage members, member groups and access levels, add notes about members with privacy-related requests, view operation logs, and send emails to everyone
  3. Menu management: as the name suggests, this contains all options regarding menu creation and management
  4. Content management: add articles and categories, set up Featured Content, and manage multimedia files for the site.
  5. Component settings: create and manage site ads, news feeds, tags, private messages, multilingual associations, contact information and other options, also provides access to installation alerts, set redirects, view site search terms, use smart search
  6. Extension Management: allows you to install, update, manage, configure, and find extensions, as well as display database status and update sites
  7. Help: Direct access to important help topics in the official documentation
  8. Select the excellent template

Like other content management systems (such as WordPress), Joomla offers a way to change the design of your website without coding, and the tool to perform this operation is called a template (or theme). The entire look, function and feel of your website depends entirely on them, so don't be hasty when choosing a template!

The Internet features a large number of free and paid templates, but finding an option that meets your needs can be tricky, and unfortunately, Joomla does not have a central directory equivalent. Many developers who sell premium templates offer free versions that you can download and test, and here are some places to start.

  1. ThemeForest
  2. JoomDev
  3. JoomlArt
  4. Of course, when choosing a theme, you need to pay attention to some basic parameters, in addition to your own personal preferences, and consider the following.
  5. Support: including technical support is of course good, the developer can solve any problem for you
  6. Update: Joomla is constantly evolving, make sure your theme developer also keeps up to date with the latest version
  7. Documentation: Sometimes you need to check out some features to understand how they work, and the documentation helps save you time
  8. Responsive design and cross-browser compatibility: this means your site looks good on all devices and browsers
  9. Customizability: check which features can be customized, e.g., look for templates with a large number of regions (more on this later)
  10. install Joomla template

Installing a template in Joomla is very easy and after making a choice, it is usually available as a zip file. In this post, we download a free theme from JoomShaper (Helix Ultimate) and then simply upload it under Extensions Manager → Extensions Install → Extensions Install.

Alternatively, if you know the network address where the package is located, you can install it remotely via URL. Once it's done, you need to activate it to use it. Go to Extension Management → Template Management → Style Management and click the icon on the line where the template is located to make it the default setting for the whole site.

Some templates change the look and feel of the admin backend by simply selecting the value in the dropdown box where the frontend of the site is located to be the admin backend and then clicking the icon in the row where the template is located to apply the new template. However, this is not necessary in this example, because Helix Ultimate only changes the display style of the frontend of the website.

Please note that when you download the template, you may get other files such as quickstart, settings and extension. the first one is the full version of Joomla (including the template), when you set up the site, the new design is ready and usually includes the demo content, everything is set up according to the steps in the demo, all you need to do is replace the site content . The other two files may contain the multimedia content you see in the demo site, such as sliders, slideshows, portfolios, etc.

  1. Customized design

When building a website with Joomla, one of the main goals is to create the desired design. For this purpose, most templates come with some customization options, go to Extension Management → Template Management → Style Management and click on the name of the template in the list to access it.

Here you can make adjustments to parameters such as colors, fonts, logos, layouts, etc. Some templates come with their own settings page, allowing you to control more content and preview changes in real time.

  1. Using Joomla modules

Now that your site is still empty even though it looks great, it's time to make a change. Here, we describe how to create content in Joomla. Unfortunately, one must first start with more complex themes - modules, these are smaller units of content that can appear in many places in the page and using them takes some time to get used to.

To build the page from scratch, it's a good idea to enable the Preview Module Locations option so that you will see the information on the page where you can add the module and location name. Go to System administration → Global configuration → Template management in the site dashboard and don't forget to click the Save button after enabling it.

Go to Extension Management → Template Management → Template Management and click on the Preview Template link in the row where the template is located and you will see all available module locations:.

  1. Assigning locations to modules

You already know where modules can be placed, so how do you assign them to specific locations? All this is done under Extension Management → Module Management.

Here you can view all the modules that are running on the site, as well as the location, page, level and language they are assigned to. But don't worry, these are not the only options available. By clicking on the New button in the upper left corner, you can find many other modules that are available.

Suppose you wish to add some images and text to the home page, the first thing you need to do is to check where it should be placed on the page. Then go to the New Module page and click on the Custom Module link to create.

This allows you to create custom content blocks using the WYSIWYG editor:.

This is just an editor for creating and formatting content that allows you to see what actions are being performed, and unfortunately, you may spend a lot of time navigating through all the options on the screen. However, if you have ever used a word processor, all the content should look very familiar. In addition to that, you can hover over the icons to get a description of the function.

Custom modules with content

When you're done with all the content, make sure the status on the right side is Published and that you've selected the correct module location (if you're not sure, in this case we chose Shaper_helixultimate/Content Top [content-top]), publish start time and end time. Then, go to the Menu Assignment tab and use the drop-down menu to select the page where you want to display this module, which we set to display only on the front page at.

Click the Save button in the upper left corner of the screen and you should see the contents of the custom module you just created on the home page of your website at

You can use the same method to insert other content into the page, such as articles, banners, menus, images, etc. In addition, you can add new modules via extensions (more on this below).

  1. Create new page

When building a website with Joomla, you may create several specific pages. The first thing to understand is that it is common for you to create pages in one place and then display them in another, and that any content you create in Joomla will not automatically be displayed on the site.

In Joomla, pages are a type of article, and you can create pages by going to Content Management → Article Management → Add New Article, or you can just use the shortcut on the control panel, both of which will take you to a similar editor at

Create and format the content in the same way as before, and when you're done, you can enter the permalink (i.e. page URL) in the Alias box, make sure the Status drop-down box has a value of Published, and click the Save button in the upper left corner.

  1. assigning pages to the navigation menu

In order to enable visitors to access the new page you just created, you need to assign it to a menu. You can do this in the following way: In the menu manager, find the menu item with the icon, which indicates the currently active item.

To assign a new link, hover over the menu item and select Add Menu Item, which will take you to a new screen.

Under Menu Item Type, select Article Management/Single Article, and under Select Article, select the existing content on the site and click on the title of the content you want to assign. Next, enter the name of the menu item at the top and make sure that the menu you want to assign to it is selected on the right side. After confirming that everything is accurate, click the Save button in the upper left corner at.

When you return to the site foreground, the new item should appear.

  1. add blog section

In addition to pages, you can also publish blog posts in Joomla, basically, the way it works is simply by assigning the article to a specific category, for which you have to create it first. Just go to Content Management → Article Category Management → Add New Category, enter the name at the top (e.g. Blog), then save and close it.

After that, you can assign the new category to the menu in the same way as the page, under the menu item type, select Article Management/Article Category List at

Once you have done this, select the blog category you just created under the highest level category, then, make sure to assign it to the correct menu and assign a meaningful menu item title, and finally click the Save and Close button to display it on the site.

From now on, for all posts that you assign to a blog category, they will be displayed under this menu item.

  1. Installation of extensions

Extensions can bring new features to your website, and the official extensions directory has a number of options available.

Simply enter the relevant search term, click on the category list, or use the advanced search to find the feature you are looking for. Installing extensions is very easy, go to Extensions Manager → Extensions Installation → Extensions Installation and on the first visit, a button will appear at the top of the page to add the "Install from extensions directory" tab, after clicking it, you will be able to access all the content in the Joomla extensions directory directly from the backend.

Accessing the Joomla extensions directory from the backend

Select one of the extensions and click the Install button and your site will automatically load the new functionality. If for some reason this doesn't work for you, simply download the extension or copy the URL where the extension is located and add it using the Upload Installer file or the Remote Install from URL tab.

Please note that you may still have to activate some parts of the extension in the Extensions Manager → Extensions Installation → Extensions Administration panel.

Here you can also deactivate and uninstall extensions that are no longer needed.

Share