So you if you follow the tutorial, you should get your website up and running within 3 hours or less.<\/p>\n\n\n\n
How to build a Joomla website (table of contents):<\/strong><\/p>\n\n\n\n Total time to create a website using Drupal: ~2-3 hours If you already have a domain name and web hosting, skip to step 2.<\/em><\/p>\n\n\n\n Before you can start building your Joomla site, you\u2019ll need a domain name and web hosting.<\/p>\n\n\n\n If you don\u2019t even know where to start on this topic, read our post on how to register a domain name<\/a>. In case you just need a refresher, choose a website domain that is simple, so it\u2019s easy to remember.<\/p>\n\n\n\n Aside from a domain name, you\u2019ll also need a web hosting service.<\/a><\/p>\n\n\n\n You can get both domain name and web hosting from InterWeb SA<\/a> (we offer a free domain if paying annually).<\/p>\n\n\n\n They have a quick install for Joomla so you don\u2019t need to spend your time downloading, uploading and installing it manually via FTP.<\/p>\n\n\n\n If you decide to use another web host, make sure it meets Joomla system requirements, which you can find here<\/a>.<\/p>\n\n\n\n There are two ways to install and set up Joomla.<\/p>\n\n\n\n \u2022 Read how to Install Joomla <\/a><\/p>\n\n\n\n The next step in learning how to build a website with Joomla is getting your bearings. We will use many of the menus you can see in the control panel further below, however, it helps to have a bird\u2019s eye view to get started.<\/p>\n\n\n\n Obviously, you can get rid of the two blue boxes by opting in or out of Joomla collecting statistical data and then reading (and hiding) your post-installation messages.<\/p>\n\n\n\n On the left, you find shortcuts to frequently used parts of the admin area, such as creating new articles, changing the menu structure or installing extensions. On the right, is important information about the state of your site.<\/p>\n\n\n\n However, the most important part is the taskbar at the top. Here, you find the same options as in the control panel and then some. This is what the different menus contain:<\/p>\n\n\n\n All clear so far? Then let\u2019s move on.<\/p>\n\n\n\n Like other content management systems featured on this site, Joomla offers a way to change your site design without coding. Here, the tools to do so are called Templates<\/em>. Your entire website\u2019s look, function, and feel are entirely dependent on them. So, don\u2019t underestimate the decision when choosing one!<\/p>\n\n\n\n There are free and premium (paid) Joomla templates available. However, finding one can be tricky. Unfortunately, the CMS does not have a central directory for this. Therefore, you need to look around shops to find them. Many of those who sell premium themes also offer free versions you can test drive. Here are a few places to get started:<\/p>\n\n\n\n Of course, there are a few basic characteristics you should pay attention to while selecting a theme. First is obviously your own taste. However, you should also consider the following:<\/p>\n\n\n\n Installing a template in Joomla is quite easy in principle. Once you have made a choice, you usually get it in the form of a zip file. This you can simply upload under Extensions > Install<\/em>.<\/p>\n\n\n\n Either drag and drop it into the field or click the Or <\/em>browse for file<\/em> button to find it on your hard drive. Select it and Joomla should do the rest by itself. Alternatively, you can also install the template via its URL if you know where the package resides.<\/p>\n\n\n\n After that, you still need to activate the template and you do that under Extensions > Template > Styles<\/em>. Here, click the star icon to the right of the template name to make it the default for the entire site.<\/p>\n\n\n\n Note that, when downloading your template, you might get additional files such as quickstart<\/em>, settings, <\/em>and extension<\/em>. The first is a complete version of Joomla including the template. That way, your new design is already ready to go when your site is set up, often including demo content. The latter can make sense to include so everything is set up as in the demo and all you need to do is exchange the content. The other two files to refer to stuff that you might have seen in the template demo site, such as sliders, etc.<\/p>\n\n\n\n When you build a website with Joomla, one of the main goals is to create the design you want. In order to do so, most templates come with at least some customization options and you can access them by clicking on the template name in the list.<\/p>\n\n\n\n Here, you can make adjustments to things like colors, fonts, logos, sizes, and much more. Some templates also come with their own settings page where they let you control a lot more and preview the changes in real-time. In either case, don\u2019t forget to check out what your template has to offer and to save any changes you have made!<\/p>\n\n\n\n Right now, even if it looks better, your site is still pretty empty. Time to change that. From here, we will go over how to create content in Joomla.<\/p>\n\n\n\n Unfortunately, we have to start with one of the more complicated topics, which is modules<\/em>. These are little units of content that can appear in many places of a page. They work like building blocks that you can create different designs from. However, using them takes some getting used to. Let\u2019s try it out on the homepage.<\/p>\n\n\n\n To build a page from scratch, it\u2019s best to start by enabling the preview mode for module positions. This way, you can see on where exactly on your page you can add modules and the names of the positions.<\/p>\n\n\n\n To see something like the above, go to System > Global Configuration > Templates<\/em>.<\/p>\n\n\n\n Here, set Preview Module Positions<\/em> to Enabled<\/em>, save, and close. Then, go back to your list of templates and click the Preview<\/em> button (the eye icon). This will then display all available module positions as shown above.<\/p>\n\n\n\n Quick note: Don\u2019t forget to switch the preview off when you are done assigning modules.<\/p>\n\n\n\n Alright, now that you know where your modules can go, how do you assign them to those positions? All of that happens under Extensions > Modules<\/em>.<\/p>\n\n\n\n Here, you can see all which are currently active on your site plus the positions, pages, users, and languages they are assigned to. However, don\u2019t worry, these aren\u2019t the only options available to you. Under New<\/em> in the upper left corner, you find a whole lot of other blocks you can use on your site.<\/p>\n\n\n\n Let\u2019s say you wanted to include some text about you and your site on the homepage. The first thing you would do is check where on the page it would go. In this case, this is position-2<\/em>. Then, you would go to the modules menu, create a new one and choose Custom<\/em> as the type. This allows you to create your own content block using a WYSIWYG (what you see is what you get) editor.<\/p>\n\n\n\n This is simply an editor for creating and formatting content that lets you view what you are doing. Unfortunately, it would take too long to go over all of the options in this screen. However, if have ever used a word processor, everything should look very familiar. In addition, you can hover over any of the icons to get a description of what it does. This way, you should be able to quickly figure out how to write and format text, insert headings, images and other media and anything else it has to offer.<\/p>\n\n\n\n When you are done, make sure that when you save, Status<\/em> on the right is set to Published<\/em> and that you pick the correct template location under Position<\/em> (pay attention that you select your active theme!). Then, go to Menu Assignment<\/em> (the tab below the title) and use the drop-down menu to choose the pages you want to show this module on. In this case, it\u2019s Only on the pages selected<\/em> and then Home<\/em>.<\/p>\n\n\n\n Save and you should see it on your homepage (and only there).<\/p>\n\n\n\n You can use this same method to insert other things into pages like blog posts (more on that below), banners, menus, images, and iframes. In addition, you can also add new modules via extensions (more on that below as well).<\/p>\n\n\n\n Now for something easier: pages. When you build a site with Joomla, you will likely create several of them. However, once you have mastered the above, this part should be much easier.<\/p>\n\n\n\n The first thing to learn about pages in Joomla is that you create them in one place and make them appear in another. This is a general thing to keep in mind that anything you create in Joomla won\u2019t automatically show up on your site.<\/p>\n\n\n\n In Joomla, pages are simply called articles<\/em>. This can be a little confusing at first when coming from a blogging background but don\u2019t let that hold you up. You can create articles via Content > Articles > Add New Article<\/em>. Alternatively, use the shortcut on the control panel. Both will get you to a very similar editing screen that you used before.<\/p>\n\n\n\n Create and format content the same way as earlier. When you are done, under Alias<\/em> you are able to determine a permalink (meaning page URL). It often makes sense to put a keyword here instead of using the same title as the article. Under Status<\/em> make sure that it is set to Publish<\/em> before saving.<\/p>\n\n\n\n To allow visitors to access your new page, it\u2019s time to assign it to a menu. You can do so the following way: Under Menus<\/em>, find the one with the house icon assigned to it. That is your currently active one.<\/p>\n\n\n\n To assign a new link to it, hover over it and pick Add New Menu Item<\/em>. Doing so will take you to the screen below.<\/p>\n\n\n\n Under Menu Item Type<\/em>, select Article ><\/em> Single Article<\/em>. Then, under Select Article,<\/em> you can choose existing content on your site via Select<\/em> and then clicking on the title of the one you want to assign.<\/p>\n\n\n\n Now you only need to input a Menu Title<\/em> at the top (which is the text that will appear in the menu) and make sure the menu to assign it to is selected on right. When you now save and close, you can use the icon on the left to drag menu items around and change their order.<\/p>\n\n\n\n When you are satisfied and go back to your site, the new item should now appear.<\/p>\n\n\n\n However, you can not only create pages, it is also possible to publish blog posts in Joomla. It basically works the same way only that you will assign your blog posts to a category. To do so, you have to create it first.<\/p>\n\n\n\n You can do this under Content > Categories > Add New Category<\/em>. It takes you to the same editor as before. In this case, you only have to input a name at the top (e.g. Blog<\/em>) then save and close.<\/p>\n\n\n\n After that, you can assign the category to your menu the same way you did with the page before. Only this time, under Menu Item Type<\/em>, choose Articles > Category Blog<\/em>.<\/p>\n\n\n\n After you have done so, make sure to select your Blog<\/em> category under Choose a Category<\/em>. Then, be sure to check that it\u2019s assigned to the right menu and give it a menu title that makes sense. Save and close to get it on your site. From now on, any article that you assign to your Blog<\/em> category will show up in the form of a blog post under that menu item.<\/p>\n\n\n\n
<\/strong>Skill level: Beginner\/Intermediate<\/strong><\/p>\n\n\n\n1. Register a domain name and find web hosting service<\/strong><\/h3>\n\n\n\n
![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/05\/How-to-host-1024x387.png\")
<\/a><\/figure><\/div>\n\n\n\n2. Install and set up Joomla<\/h3>\n\n\n\n
3. Get familiar with Joomla basics<\/strong><\/h3>\n\n\n\n
![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/first-time-on-joomla-control-panel-1024x644.jpg\")
<\/figure><\/div>\n\n\n\n4. Select a template for your site<\/strong><\/h3>\n\n\n\n
5. Install your Joomla template<\/h3>\n\n\n\n
![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/upload-joomla-extensions-1024x351.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/set-joomla-template-as-default-1024x198.jpg\")
<\/figure><\/div>\n\n\n\n6. Customize the design<\/h3>\n\n\n\n
![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/joomla-templae-customization-options.jpg\")
<\/figure><\/div>\n\n\n\n7. Use Joomla modules<\/h3>\n\n\n\n
![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/joomla-module-position-preview-1024x533.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/enable-joomla-module-position-preview.jpg\")
<\/figure><\/div>\n\n\n\n8. Assign modules to positions<\/h3>\n\n\n\n
![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/joomla-modules-list-1024x195.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/joomla-additional-modules.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/create-custom-joomla-module-1024x589.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/joomla-custom-module-with-content-1024x586.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/joomla-module-menu-assignment-1024x258.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/build-website-with-joomla-custom-module-on-homepage-887x1024-1.jpg\")
<\/figure><\/div>\n\n\n\n9. Create new pages<\/h3>\n\n\n\n
![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/joomla-create-new-article-1024x536.jpg\")
<\/figure><\/div>\n\n\n\n10. Assign pages to the Joomla navigation menu<\/h3>\n\n\n\n
![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/joomla-menu-menu.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/joomla-create-new-menu-item-1024x444.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/assign-joomla-page-to-menu.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/joomla-change-menu-item-order.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/new-menu-item-on-page.jpg\")
<\/figure><\/div>\n\n\n\n11. Add a blog section<\/h3>\n\n\n\n
![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/create-joomla-category-blog-1024x538.jpg\")
<\/figure><\/div>\n\n\n\n12. Install extensions<\/h3>\n\n\n\n
![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/joomla-extension-directory-1024x794.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/install-joomla-extension-from-back-end-1024x521.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"https:\/\/interwebsa.com\/blog\/wp-content\/uploads\/2020\/07\/manage-joomla-extensions-1024x542.jpg\")
<\/figure><\/div>\n\n\n\n