Build a Joomla Website in 1 Hour! – 2013 (Joomla 3!)

everyone Michael here in this video tutorial I’m going to be showing you how to make this awesome Joomla website step by step with no steps skipped I worked hard to make sure this video is very clear and concise so even if you’re a complete beginner you’re going to have an easy time making an awesome Joomla website if you’re having any problems along the way feel free to email me or leave a comment below and I’ll be happy to help you out in this video we’re going to be learning how I made this homepage with this image slider these modules which we will learn about later I’ll show you how I made this menu page and this is just an image right here I’ll be showing you how I embedded a map into my Joomla website and added these side modules I’ll be showing you how I made this about page with some more modules some social icons an image and some text I’ll be showing you how I made this contact page with a contact formed built right in so your visitors can email you directly from your website oh and this template comes with a bunch of different styling options so you can customize these colors I’ll also be showing you how I added these Facebook and Twitter icons to the bottom of my website but the very best part about this website is that it’s mobile friendly and that means that this template is a responsive template so when someone comes onto your website from a mobile device like an iPad or an iPhone your whole website is going to respond and your website is going to become a mobile website as you can see when I shrink it down the whole website changes so if we look on my iPhone you can see that the website looks great the menu has changed and if we click on the menu we can see it pops out like that it’s really important have a mobile-friendly website these days a new study has shown that 90% of websites are not ready for mobile traffic meaning that they do not have a responsive template like this template and that mobile traffic accounts for over 10% of all Internet traffic so that’s a lot of traffic in a google study it showed that 72% of Internet users say it’s very important to them that the websites they visit are mobile friendly and people are 5 times more likely to abandon the tasks if the website is not mobile friendly almost 80% of people will go to another site if your site isn’t mobile-friendly meaning if you don’t have a mobile-friendly site these days you’re going to be losing business and three out of four people are more likely to revisit a site which is mobile-friendly so the mobile market online is huge and you really have to take that into consideration when you’re making a website so the next really great thing about this website is that it’s going to be built on Joomla Joomla is one of the most popular content management systems with users like Harvard MTV Porsche Mitsubishi Burger King and millions of others a content management system like Joomla makes it super easy to create and edit a website without knowing coding like HTML CSS PHP or JavaScript with a few clicks you can easily add content edit content delete content or completely change the look or functionality of your website Joomla is very powerful but also really easy to use so you’ll be able to create a simple website but also have the power to expand or add power to your website as it grows Joomla is really popular and I think it gets about a million downloads a month so there are a lot of resources out there like extensions there are hundreds of thousands of templates which is just the way your website looks and just there’s a lot of help and you know educational resources out there for Joomla so let’s get started and here’s what we need to do in order to make this website we need to take the website tour which I just did so that’s done we need to get a website name and a website name is your domain name which is like WWE google calm that’s Google’s domain name and you can also get a dotnet or info org and this is how people go to your website when they type it into the URL bar up here after that we need to get hosting and hosting is what is going to store all of the images all of the text and all of the content of your whole website it’s basically a computer that has turned on 24 hours a day that stores all of your files and allows people to access them from their computer so if you just had a website name without hosting you would just have a blank website and after that we need to install Joomla then we need to build our website which is a lot easier than it sounds so let’s get started with getting a website name and getting hosting and these two steps do cost a little money a lot cheaper than getting a professional web developer but they do cost money and getting a website name is about 15 dollars per year and getting hosting is about ten dollars per month so pretty cheap and there’s no real way of getting around these costs it’s kind of just the cost of having a website so to get started everything is going to cost you $25 and I will show you also how to get a little discount on that twenty-five dollars so getting a website name and getting hosting is done in the same step in the same place so let’s kill two birds with one stone and go over to hostgator.com I’ve been using Hostgator for probably about five years and they’re really great they’re one of the largest hosting companies they also own Bluehost and a couple of the other large hosting companies so they’re definitely at the biggest and best hosting and also the cheapest so just head over to web hosting oh and another great thing about Hostgator is their live chat which if you click here you can talk to a live person it takes about ten minutes or something but you can talk to a live person if you’re having any problems 24 hours a day and they’ll help you out so that’s really awesome and so if we go over to Hostgator click on web hosting and you’ll see a few different plans the baby plan hatchling plan or business plan I like to go with the baby plan because they allow unlimited domains which means you can have unlimited web sites so you could have WWE I love web dev comm I love cats comm and I love dogs comm all on the same server so you don’t have to pay extra for another server if you want another website with the hatchling plan it is cheaper but they only allow a single domain so I like to do baby plan and there are a few different payment options you could pay for three years at one time two years at one time one year at one time or six months or monthly which I do you will get a better deal if you just pay upfront for three years or one year or six months but you’re also risking being locked in I still do monthly and that’s just my choice just in case Hostgator changes its policies or starts acting up I like to be able to quit at any time so let’s do monthly and click order now and my internet is a little slow today but here is the important step of choosing your domain or your website name so again that was like Google is Google com I’m going to do cool joomla tutorial calm and down here is where you can enter my coupon code which is hostgator two five one six and when you use this coupon code you will get 25% off of the price and also hostgator will give me a little commission each time someone signs up with that coupon code so that helps me keep doing this these free video so I appreciate everyone who uses the coupon code after that let’s just go and continue to step two oh and one more thing if you have already ordered your domain from something like GoDaddy calm you can just enter it in right here but let’s continue to step two so this is where we fill out our account information so I’ll just spell out my username I’ll make up a security pin I’ll fill out my billing information and if you’re not from the United States you can choose to pay with PayPal and down here you will see some hosting add-ons and you probably don’t need these this one is called domain privacy protection when you have a domain people can look up who owns it and see your contact information if you don’t care one way or another you can just uncheck this and save yourself 995 but if you want to stay private you can leave this checked off the other thing is site lock which makes your website a little more secure honestly you probably won’t see any difference and it won’t make a big difference so you can save yourself another 15 dollars by unchecking this and the mobile website builder obviously we don’t need because we’re building it on Joomla so after that just review your information make sure everything is correct make sure you’re getting the 25% off you’re getting the billing cycle and package that you want and make sure definitely make sure that this is the correct domain that you want to order and after that just go ahead and click on I have read and agreed the terms and click create account so I’m just going to fill out all my information and I will see you on the next page so the next page was just a confirmation and now you should be receiving an email it can take up to two hours sometimes to receive this email and it can also take up to four hours for your whole website to become fully functional so when you receive this email just go out and click it and you will see all of your account information and you’ll see your username your password your domain and some other information which we’re not going to be using on this tutorial so just go ahead and remember your username and copy your password and then go over to your control panel and click the link alternatively you can go to your domain so for me cool Joomla tutorial calm and just go to slash cPanel and that will bring you to the same page so this cPanel is kind of the backend the settings of your whole server just go ahead and enter the username that you created in step 2 and paste in the password that you just copied and here is the backend of your host so this is where you can do a lot of different things which I will not get into in this tutorial but what we want to do is scroll down and find quick install so under software and services we’ll see quick install click it and then you’ll see under CMS software you’ll see Joomla click that and to install Joomla it’s real simple all you have to do is click continue up here select the domain that you want for me it’s going to be cool Joomla tutorial com but if you have multiple domains you can select the domain you want from this list and then if you want your Joomla website to be on a sub directory for example cool Joomla tutorial com /hello you could type in hello right here but I want my Joomla website just on the main cool Joomla tutorial comm so I’m just going to leave this blank you can keep auto upgrades on and then just type in your email and you can make up a username for me I usually just do admin but you can do your name or whatever you want and then type in your website name for me it will just be called sushi make sure to leave sample 10th off we do not want that and then click install now so now our Joomla website is installed so you could actually go to your website and see that there is a new Joomla website right here but what we want to do is log into the backend of our Joomla website this is where we are going to be making all of the administrative changes like adding content or changing anything about our Joomla website so to do that you just click right here where it says admin section but before you do that make sure you copy your password and click on the admin section alternatively you can just go to your website comm slash administrator and you might want to bookmark this because you’re going to be using this page a lot so just type in the username that you just made up paste in the password and click log in so this is where we make all the administrative changes to our Joomla website the first thing we want to do is change that password to something that we will remember so let’s go down here where it says edit profile and where it says password just type in something you will remember and confirm it and click Save so in Joomla when you get a green message up here that means it’s good when you get a red one it means it’s bad so look out for the red ones and be happy when you have the green ones we can close it up by clicking close and the first thing that we want to do is get our template so we have gotten our website name and hosting and we’ve installed Joomla next we want to build our website and the first step is to get the template so what a template is is what’s going to change the look or style of your actual website so Joomla comes stock with a couple of templates and this is one of them but we want to get a new one so let’s head over to ice theme calm i steam is a premium template maker but they were nice enough to offer this template for free so just click on Joomla click browse themes and on the left hand side you will see free themes and then it’ll be this one called IT future you can just click view demo and on the bottom you’ll see download template I’m also just going to add a link to the description to this download page so you just want to download the all-in-one package right here click download and once it’s done downloading you can just throw it on your desktop and unzip it we can close this up Thank You ice themes and let’s go over to extensions extension manager and this is where we can upload and add third-party templates or modules and plugins to our Joomla website so let’s upload our new template by clicking the unzipped folder and finding the fault the folder called TPL ice future zip so this is the template TP l stands for template so you can either click Choose file and find it on your computer or drag it in like this click upload and install and hopefully you’ll get the green message and then we aren’t done yet we have to upload a couple of modules and plugins so we’ll see the ice mega menu let’s unzip it because it says unzip first click the folder and then inside the folder you’ll find a module and a plugin it’ll say mod and plug that zip so let’s upload the mod let’s upload the plug-in and all of this is necessary for this theme to work correctly click upload hopefully you’re getting green messages and then let’s go over to the ice carousel and this is going to be the image slider so let’s double click this unzip it and find the mod just drag it in right there click upload and install and that is it the clone installer is not what we want to upload today so let’s go over to our website and see if it changed and we can see it has not that’s because we need to enable the template that we just uploaded and we also need to enable the modules and plug-in that we just uploaded so let’s first enable the template let’s go to extensions template manager and then we want to set the ice future theme as the default theme so let’s click the little star next to the ice future theme right there now this theme is in use and is enabled so if we go to our website it’ll look a little blank but the look has changed so after that let’s enable the modules and plugins by going to extensions module manager and then you’ll see two disabled modules called ice mega menu and ice carousel click the X next to them to enable them and then let’s go to plugins by going to extension plug-in manager and there are a lot of default plugins so you can just type in ice up here click search and it’ll be this one called ice mega menu plugin alright so the first thing that we want to do is to add a navigation menu to our website so the navigation menu is going to say home about us location contact or whatever else you want it to say and when you click one of those links it brings you to that page but before we start just jumping and adding that main menu let’s first learn a little bit about modules so I’m just going to go to Google and I’m going to type in demo ice theme and click this first one up here and then find the ice future theme demo so this is the demonstration website that the creators ice made for this template so pretty much everything you’ll see on this template is a module this menu is a module the search bar is a module this image slider is a module all these boxes right here are all different modules and this is a module most likely and the only thing that isn’t a module is this main content right here this main content is called an article and we’ll learn more about that later so what if we wanted to add a navigation menu to our website so let’s go to the backend and then let’s go to extensions module manager and 9 times out of 10 when you get a third-party template it’s going to come with its own menu module so it’s not going to be this one called main menu right here it’s going to be in our case ice make a menu so you’ll notice on the side where it says position right here it says none and that’s exactly the reason why our navigational menu is not showing up on our website because we haven’t assigned it to a position yet but we need to know which position to assign it to and to do that pretty much all themes will come with documentation or a demo site which has something called a module map so if we go to the demo site and click on template and click on module positions we can see the module map so the main menu position is just called main menu those little boxes that we saw are called Roma one two three four the slideshow is called ice carousel the side ones that are called left and right but for now let’s just focus on the main menu and what we want to do is to assign the navigation menu to the main menu position on our template so let’s go over to the module manager and click on the ice mega menu module so down here you’ll see position and what you want to do is find the main menu position and select it so let’s go down and find the ice future which is the template that we’re using right now and find main menu you can do that or you can just type in main menu right here and click it and then let’s go to options and select the theme for the main menu and click default and then let’s click on menu assignment and click on all pages so this is going to make it so that our main menu shows up on every page on our website so let’s save and close it and if we check out our website we’ve successfully added the menu to our website so for now our website only has a home page which is the default page that comes with every Joomla website so the next we want to do is to add some more menu items to our navigation menu but before we add menu items we need somewhere to point those menu items so we need to create new pages like an about Us page and a contact page that we can point those menu items to but in Joomla pages are called articles so let’s add articles now let’s go back to our backend let’s go to content article manager add new article and for now we’re just going to add some blank articles so just type in whatever pages you want for me I want a menu page because this website is going to be a sushi restaurant so I need a food menu and we can leave everything else blank but just click Save and new I want an about Us page click Save and new I want a location page which shows the location of our sushi restaurant save and new and finally I want a Contact Us page then we can click Save and close and if we look at our website nothing’s going to be changed yet now we need to add menu items which point to those articles so let’s go over to our backend let’s click on menus and right here where it says main menu click add new menu item and let’s click on the menu item type right here click select and right here it says articles and just click on single article and then it’s going to say select article click select and then you’ll see the articles that we just added so the first one’s going to be menu for me and you can been menu right here and this is this is the title that’s going to show up on the actual navigation menu right here so I’m just going to type in menu I’m going to click Save and new and then just do the same thing so menu item type articles single article and select the article this one will be about us and then I’ll just type in about us and that’s all you need to do then click Save and new menu item type articles single article select your article and this one will be location I’ll type in location for the actual menu title save and new and this one will be the contact page now we can save and close that now if we check out our website we have a full on menu and if you click on any of the menu items you will just get a blank page for now because we haven’t added anything to those articles so the next thing that we should do is add the image slider to the home page right here so let’s go back to the backend and let’s head over to extensions module manager so the slideshow is called ice carousel and we installed it when we installed our template so let’s click that and the first thing we need to do is assign this ice carousel into the slideshow position so if we look at the module map it will say ice carousel right here so the position is called ice carousel and that makes it easy so let’s just type in ice carousel right here and then let’s go over to options select the theme for the ice carousel image slider which will be dark and then let’s set the image width to 11 75 which is the full width of our template and let’s set the height to something like 465 after that let’s set the menu assignment to only on the page is selected and then we want to select none of them by clicking none right here and then we only want the up slideshow to be on the home page so I’m just going to click home right here so this is going to sign I’ll sign it to only the home page then we can save and close that and we’re not done just yet we need to add our images so the way this ice carousel module works is a little different than some of the other sliders that you may have used so what we first need to do is add some images and then we need to add a category for those images to be in and then we need to add new articles for each image and the title will be the caption of the slide and I’ll walk you through that so it’s real simple let’s just go to content media manager and this is a good way to upload multiple images at the same time so you can speed up the process so let’s go to create folder so we’re just going to create a folder for our images for our slideshow so I’ll call it slides and I’ll click create folder then I’ll click on the slides folder and click on upload then just choose the files that you want to add to your slideshow and make sure that the images are at least 11 75 by 465 pixels you can go even bigger and the ice carousel will automatically crop the images so it fits perfectly into the slideshow so to upload multiple images at the same time just click the first one hold shift and then click the last one then let go of shift click open and click start upload so once the images are uploaded let’s go over to content category manager and let’s add a new category and we’ll call this category images and that’s all we need to do let’s save and close that now we need to create articles for each of the images so let’s go to content article manager add new article so the title up here is going to be the caption that shows on the image slider so my first one is going to be called traditional and elegant and I’m just going to add my image by going into the body of the article and clicking the image button right here then I’ll go into the slides folder and I’ll click the first one click insert and then click the category select the category as images click Save and new and this one will be called world-renowned sushi chef and I’ll add my second image click insert and make sure you put the category as images then click Save and new and my third caption will be the best sushi in Los Angeles alright let’s add the image and click insert click the category as images and click Save and close from there what you want to do is just go into extensions module manager and go back to the ice carousel module and then go into options and open up the filtering options and make sure it says source from category and set the category you can click this X right here and set the category to images like that and that is all you need to do so you can save and close that and now if you refresh your website you should have a nice image slider right here and you can see the title of the articles show up down here so I actually found that sometimes the image slider when you go on your phone or resize the page the menu will actually pop up under the image slider but I found a quick workaround and to get the menu to push the image slider down let’s go over to the module manager and click new and then click custom HTML and just call this one blank and set the position to search on the ice future template right there and if we go into the custom output just make a space with the space bar and set the menu assignment to on all pages click Save and close and if we refresh this it won’t look any different but now if we bring out the menu it’ll push the image slider down so then we can read the menu from our cell phones or mobile device so the next thing that I want to do is add a couple of text modules underneath the image slider so I can have like a little description of my sushi restaurant so they will go right here and right here so let’s look at the module map and we can see that underneath the slider we have promo one two three and four now I only want to up text boxes so I’m only going to use promo one and promo two but with this layout if you only use two they will automatically Center and stretch out to meet each other in the middle now I’ll show you what I mean if we go over to the module manager and click on new now in Joomla to do a just a plain text module or just an image you’ll want to go to the custom HTML module and we can name this one traditional and this title is going to show up on our website and I will show the title so I’ll keep it on show and I’ll set the position to promo one and I’ll set the custom output to some text I’ve already written out and I’ll just paste it in like that then make sure you take the menu assignment and put it only on the page is selected and then only select the home page after that we can click Save and new and if we look at our website we now have one little text box which stretches across all the way but now I want another one right in the middle so I’ll just put it in promo too so we’ll call this one elegant set the position to promo too and change the custom output to some text take the module of the menu assignment and only put it on the home page and then we can save and close so now we have two text boxes and you can see how they evenly stretch out to meet each other in the middle the next thing I want to do is add some text right under here and I want to get rid of this little home text so let’s go back to our Joomla back-end and then let’s go on to article manager and then let’s add a new article so this home text is showing up here because by default joomla always has to have a home page and has to have somewhere to point the home page to so we’re just going to point the home page to an article and let’s make a home article and i’m just going to paste it some text and i will just save and close this now if we refresh our page nothing is going to show up just yet we have to point the home page menu item to that article so again Joomla made this home page menu item by default right here but you can see that it’s not pointing to article it’s pointing to featured articles so let’s just select articles single article and select the new home article that we just created like so and then we can save and close this and refresh so now we have this little piece of text but now it looks a little strange because we have this home this home and all of this information let’s learn how to get rid of this home for now let’s go over to the home menu item right here and then under advanced options go and scroll down to page display options and then where it says show page heading click no and let’s save and close that and that should get rid of one of the homes now to get rid of this home text and all of this text let’s go over to content article manager and then you’ll see a little options button right up here click that and then right here on the first one that says articles just hide show titles say linked titles no show intro text hide show category hide pretty much everything just hide it or say no so this will make it so it’s just a plain blank piece of text without all that information so I’m going to hide everything and click Save in close now if we refresh it’s all plain and it’s looking good but now we have this blank area down here so that looks a little awkward and I want to get rid of them so to get rid of that we do have to edit a little CSS but it’s real easy and I will walk you through it so let’s go back to the back end and then let’s go to extensions template manager then you’ll want to hit templates right here on the left side and let’s find our theme which is ice future and click it then we want to find the edit CSS slash template link right here and if you’re on a PC you’ll want to hit ctrl F and if you’re on a Mac you’ll want to hit command F to find the word middle so it’s right here under columns it says hashtag columns hashtag middle – call and it says min height 400px but we want to change this to 0px so make sure you keep everything else else the same and hit save and close now if we refresh our website it’ll be nice and compact down here so the next thing that I want to do is I want to get rid of this ice themed logo and I want to change the ice theme Facebook link to my facebook and I want to change the Twitter to my Twitter account so let’s do that now by going over to our back-end clicking close up here and let’s go to extensions template manager then let’s hit ice future right here and under options we can go right here where it says Facebook and it says yes then you’ll just want to type in your Facebook ID now I actually don’t have a Facebook but I’m just going to type in the word Facebook and the Twitter is right here and you’ll want to show Twitter and then just type in your Twitter ID or your Twitter account name and I don’t have a twitter either but I’m too going to type in my name and then where it says ice team logo you’ll want to hit no so we can save that and refresh now it shows up as Facebook and follow Michael now the next thing that I want to do is to change the colors of the whole template so to do that this theme makes it really easy we’ll just go back to the template manager and hit options and then right here where it says template style you have six different styles to choose from I’ll choose style two and I’ll hit save and now all of the colors on my website will change and you can try out some different styles they’re all really cool options and here we go but I think style to it works best for my website so I’m just going to keep it on style too and hit save and I can close this up refresh this and now the next thing that I want to do is to add a logo now if you don’t already have a logo I’m going to quickly walk you through how you can make a free simple logo for your company so just head over to P IX l our comm lets Pixlr comm and hit the Pixlr editor and click create new image now we have to change the width and the height and for this template I found that the best height is around 48 pixels and you can pretty much do whatever width you want not too big but you’ll just want to be make it wide enough so you can fit your company name so for me that’ll be like a hundred in fifty maybe and then make sure you hit transparent right here click OK and you’ll notice that the canvas will have a checkered background and that means that it’s going to be a transparent background that means that the colors are going to show through the background so we will see the gray in the background on our template so I’ll show you what I mean so let’s just type in your company name for me that I’ll be sushi you can raise the size or change the font and change the color click OK and that will work for me for now obviously you can get a little more creative and then once you’re done just go to file save and make sure you tat you hit PNG for the format and then you’ll just name it logo dot PNG make sure you type in the dot PNG click OK and save it on your desktop or wherever so now we have our logo so now to upload the logo to your template let’s go back to the extensions template manager page and hit ice future and under options you’ll see site logo and you’ll want to click select and scroll down to the bottom of this page and where it says upload file you’ll just choose the logo dot PNG file that we just made click open click start upload and then you’ll want to click the logo that just upload it and click insert so now if we save and close that refresh now have a logo but I actually already made another logo that looks a little better in Photoshop earlier so I’m just going to change it to that one so I’ll hit save and close and now I have my logo and our home page is done so next up let’s add some content to the menu page so for me this is just going to be an image of my food menu so I’m going to go back to the back end and sometimes you will get this error that says you are not permitted to use that link directly and I’m not really sure why you get it but it’s not a big deal so let’s go over to content article manager and let’s go to menu or for me it’s going to be menu and I’m just going to upload an image into the body of this article so I’m going to hit image and I’m going to upload my food menu so it’s going to be menu JPEG I’m going to click open start upload and I’m going to select it and insert it and that is all I need to do for this one so I’m going to save and close that one so there we go we have our food menu next thing I want to do is make an about Us page so the about Us page is going to consist up a couple of modules on the right hand side some text and an image within that text so let’s do that now by going over to the about Us article and I’m just going to paste in some text so copy and paste it in and I can get rid of these spaces and what I want to do is add an image to the left hand side of this article and I wrought want the text to wrap around the image so I’m going to click the cursor to the very beginning of the sentence and I’m going to upload my image and I’m going to click start upload and then I’m going to select it by clicking at once and setting the align to the left and this will make it so the image is forced to the left hand side and the text wraps around the image after that I can just save and close that and we can test it out the next thing I want to do is add some social media icons to a module on the right-hand side and maybe also a testimonial module right under it on the right-hand side as well so let’s get started with the social icon module and let’s head over to google to download a third-party module just type in social icon module and it will be this first one right here but I will also add a link to the description for this page once you get to this page just click download and once that’s done downloading you can throw it on your desktop then head over to the extension manager again that’s extensions extension manager and you can browse for it or throw it in like this and click upload and install from there let’s go over to the module manager and let’s enable it by clicking this little red box let’s click it and let’s give it a new title I’m just going to call it social and I’m going to show that title after that I’m going to check out my module map and see that right is the one that I want it to be on so I’m just going to type in or right and make sure it’s under the ice future click right and under options I’m going to add my Twitter which I don’t have facebook and add a YouTube Pinterest and a LinkedIn so obviously you’d be adding your Twitter username Facebook username LinkedIn username and YouTube username so from here I’m going to assign this module to only the on the page is selected I’m going to click none and I know I want this on my about us and my contact so I’m going to click two of these pages then click Save and close all right let’s check it out now we have social icons on the right-hand side now I just want to add a little plain text box with a big testimonial in it right under here so I’m just going to go over to the module manager click new and select a custom HTML module and then I’m going to type in testimonial for the title but I’m going to hide this title so I want this module to show up right under the social icon module so I’m just going to set it to the same position which is right and that’ll make it so it shows up right below it after that I’ll take the custom output and we’ll paste in some text and then I’m going to go over to the demo site and look at the typography section most templates come with a bunch of different type ography settings so if you look here we can see different tags to make the font change so I can see this one p class equals lead so I’m going to make my text look like this text by going over to my article clicking the HTML and then just tang changing this one to p class equals lead just like that and I’ll click update and then I’m going to add a little sag it so I can save that and let’s whoops I forgot to assign it to only the about and contact so let’s save that and see how it looks that looks pretty good but I want to move this agate over a little bit so to indent text you just want to hit this little indent button right there I’ll hit it a couple more times and I will click Save and there we go so our about Us page is done let’s move on to the location page and what we want on this map on this page is going to be uh three different modules and a big google map so let’s do that now and let’s start adding the modules so let’s close this up and the next thing that I want to add is an hour’s module which displays the hours of my sushi restaurant so that’s just going to be plain text so I’m just going to create a new custom HTML module again this one will be called hours and I will show the title and I will set the position two left I want it right here so I’ll just type in left and then I can go into the custom output and type in my hours and if you want to make a smaller space in between each line you can hold a shift and enter for example if I were just to press ENTER you can type right here but if I were to hold shift and press Enter I could type right here so I’ll just type in my hours and I will make these bold and then I’m going to format this as an address because that’ll make everything a little bit more compact and make the spaces between each line smaller then I’ll set the menu assignment to only on the page is selected and I will select the contact and location page and now I can save in new that and if we refresh looks pretty good so the next thing I want to do is add an address to my sushi restaurant so I’m just going to name this one location I’m going to put it to the left module position and I will set the custom output to my sushi restaurants address so I’ll just paste that in and I will get rid of these spaces and then I will make this bold and again I will format it as an address I’ll set the menu assignment to only on the contact and location page and I will press save and new again so now we have location hours and the next thing that I want is a little thing that says we don’t take reservations so let’s make that now this one will be called reservations I will show the title I will set it to left and then I will set the custom output to my text and I will set the menu assignment to only on the location page so let’s save and close that up refresh it now we have all of our information about our restaurant and actually I want to format the reservations as an address as well so I’ll save that and refresh it so now it’s a little more compact but the next thing I want to do is change the positions of each of these modules because I want the hours to be on top and I want the location to be in the middle so to do that let’s close this and go to the module manager and what you want to do is click right over here where it says position and then click a sort by ordering right there and then you’ll notice these little black bars will light up and you can just drag and drop your modules to whatever position you want them to be so I want ours to be on top of location so I’m just going to drag ours up like that and when we refresh our page ours will now be on top after that let’s add our map by going to maps.google.com and from here you can just type in your address and once you’ve found your address just click this little link right here and then click customize and preview embedded map so from here you can just click custom for map size because we want to have a custom map size and for me I’m going to set the width to 770 and the height to around 550 and you can move this around to wherever you like it I’m going to move it right here and then once you get your position and your map size correct just go ahead and select all of this text by right clicking and clicking select all and then click copy so we can close this up and we can go back to our Joomla back-end and then let’s go to content article manager and let’s go to the location page so you’ll notice if you press HTML and oops let’s resize this and if we were to paste in that HTML that we just copied and click update nothing would happen it would just go into a blank HTML and the Joomla editor will cut out a lot of the text so to fix that close this up go to extensions plug-in manager and type in tiny right up here click search and you’ll come up with editor tiny MCE so we have to do change some options on this tiny MCE editor in order to paste in a map or YouTube videos so just go over to the basic options and scroll down until you see this prohibited elements and then you’ll just want to delete iframe and the comma so we can save and close that now if we go back to content article manager and select our location article let’s open up the HTML editor and paste it in and click update now our map will show up so that is it for the location page let’s save and close that and see how it looks oh and one more thing so if we were on a mobile device this location page might look a little funky because if we were to resize it as you can see the the map kind of makes you scroll to the right so to fix that let’s go over and go back to the location page let’s hit the HTML editor and let’s find height right here where it says height and we’re just going to change the I’m sorry let’s find width and change the width to 100% this will make it so the map fills up 100% of the available space so now if we were to save and close refresh and resize the map will scale down so it fits into a cell phone perfectly notice there’s no horizontal scrolling so after that let’s move on to the Contact Us page now we already have some modules from the about us and location page that we added so what I want to do is add one more module which is a phone and email module and then I want to add a contact form right in the middle of the modules so let’s add the phone and email module first let’s go to extensions module manager new and again this will be custom HTML this one will be called contact and the position will be left and the custom output will be phone number and email so I’m going to just make these bold and I only want this to show up on my contact page so I’m just going to select only my contact page so we can save and close that up and check it out and it looks good so the next thing is to add a contact form in the middle of these modules so let’s head over to Google and let’s type in Fox contact Joomla and I’m going to leave a link to this page in the description so once you get to this page just go ahead and click this download link right here and then scroll down and find the free version and click download once it’s done downloading just throw it on your desktop and head over to the extension manager extensions extension manager and just upload and install it once it’s done uploading head over to extensions module manager and click new and then you’ll have a new module type called Fox contact click that and you can just name it contact form but I’m going to hide the title so with this one the onion in the position I want the contact form to show up in within the contact article which is right here so I have to make up a new position name so I’m just going to make up a name of contact form and oops contact form and I’m going to click enter so now I have I made up a new position and I can set the options to my email address so this email address is where the contact is going to be sent to so let’s set the menu assignment to only on the contact us page and let’s save that for now and you’ll notice that it will not work yet if we refresh what we need to do is insert this module into our contact us article so let’s close this up let’s go to article manager and let’s go to the contact us article and all we have to do is type in a bracket load position a space and then the position name that you just made up so for me it was called contact form I then add another bracket and we’re good to go so if we save and close that refresh this we now have a contact form but what I want to do is get rid of this pink and I want to get rid of some of these little fields I don’t want a phone number field I don’t want how did you hear about us and I want to get rid of this up here so to do that I’m going to go over to extensions module manager and find the contact form module that we just created and I’m going to go over to options then under form fields I’m just going to delete this and I am going to find the phone number and click set the state to disabled and let’s see how that works so I also want to get rid of how did you hear about us so I’m going to find that under the drop-down lists field and I’ll set the state to disabled and then you’ll want to scroll all the way to the bottom and if you want to change this pink to just no color you can go to Advanced Options and set the module style to none right here so let’s save that refresh it and now we have a clean-looking contact page one more thing that I would like to point out we can change the color of these modules the template comes with a couple options so if we were to go to one of these modules for example let’s go to the hours module and let’s go to options Advanced Options and if we were to change the module class suffix to style 1 and click Save the color of our module would change you can also do we can also do style 2 and that will give you another color option but I’m going to leave it to default which is nothing and save and close that so if you would like to go further in editing this website with all the different color options you can actually check out the documentation that this template came with and you can get a lot of different ideas but that is it for me today and thanks for watching and if you have any questions leave a comment below

Burger King

As found on YouTube

Share this article

Leave a comment