Play Video

Create a Joomla Website! – Easy! – 2012

Learn how to make a complete Joomla website. Step by step, no steps skipped. From getting hosting/domain name to adding a custom logo to getting a template all the way to adding your content. By the end of this tutorial you will have a complete, professional Joomla website. Hope this helps you, if you need any help, feel free to ask me a question in the comment section.

hello and welcome to my how to make a professional Joomla website tutorial in this tutorial I’m going to be showing you step-by-step from A to Z how to make a beautiful and professional website in Joomla for absolute beginners you don’t need any knowledge of programming or computers just basic very basic knowledge I will be showing you everything like how to get a domain name like WWE your business name com – how to get hosting which I will
explain in a bit – how to get beautiful professional templates for Joomla – adding content adding images adding videos everything so this is a full tutorial should run over an hour but by the end of it you should have a beautiful professional website that a web designer would properly charge you about twenty-five hundred bucks to get so if you don’t already know Joomla is a content management system which means just that it will manage all your
content your pictures your videos your text content everything it will make it real neat and nice to work with so you can add or delete content easily Joomla is used by lots and lots and lots of people big sites like Porsche and MTV Kellogg’s eBay and many others Joomla is great because it has lots of downloads each month about a million downloads so that means there’s lots of support lots of plugins lots of templates and lots of other resources
for Joomla Joomla is very powerful but it’s also very easy to use so you’ll be able to do a simple site but as your business or site grows you’ll be able to add more functionality so here’s the site that we’re gonna create today this site took me about an hour to create it was very easy and as you can see it’s a nice simple professional clean layout but there’s lots of layouts to choose from and you can still follow along no matter what layout
you choose so on this site I have a cool image slider lots of little of what are called modules these little text boxes another menu another module some social icons a services page with a pricing table so if you have any packages that you can compare you can put them in and have your clients buy them a nice clean photo gallery so you can show off maybe a portfolio or your work or whatever a nice accordion FAQ which is nice and clean if you need
to tell your clients anything about your business a contact page with a nice contact form built right into the page so your clients can email you directly from your site a map if you need to show what your business is some where contact info and the nice clean about page which could be a picture or video or whatever but with this basic information you can create your site however you like it I’ll also be showing you how to make a custom logo
using free software so you don’t have to buy Photoshop or anything so let’s get started and see the things that we need to do in order to make a website but more importantly let’s see how much this what would be a twenty five hundred dollar website will cost us by doing it ourselves the first step we need to take in order to make a website is get hosting hosting is basically a computer that’s on 24 hours a day that all of your files get uploaded
to all of your Joomla files all of your pictures everything your whole website so the whole world can access it from the internet so the hosting will be about 10 bucks a month the next thing we need to do is get our domain and this is usually in the same step as get-getting hosting so this is $12 per year then we need to get and install Joomla but Jim less free and installing it is one-click so that’s pretty easy then we need to get and install a
theme a theme is what will make your website look the way it does there’s lots of different looks and there’s lots of different themes to choose from there are premium themes which costs anywhere from $10 to $50 and then there’s free themes but I definitely recommend just getting a premium theme because they look a lot better they have a lot more features and the people who make the theme will give you support if you need any sort of help so this
will cost 0 to 50 the see my god cost 40 I think and I’ll show you where to get either free or premium then we need to add our content then we need to create a logo so in order to create a beautiful professional $2,500 website it’s gonna cost us anywhere between 22 bucks to about 70 bucks depending on which theme we get and I’ll also show you a coupon code which will get you 25% off this hosting fee so let’s get started with hosting and getting a
domain let’s open up our web browser and head over to Hostgator is the hosting service that I’ve been using for about five years and it’s great that never been any problem to me I’ve had no downtime on my website the free live support chat support is fantastic and it’s just a really well-known top rated hosting service so let’s head over to view hosting plans and there’s lots of plans to choose from but my favorite is the baby plan
because it gives you unlimited domains which means you could have your company calm or I love cats calm and I love dogs calm all on the same server with the hatchling plan you can only have one domain so let’s do baby plan and I like to do monthly because I don’t want to be locked in to anything herder now this is the important step of choosing your domain name the name of your site like Hostgator is Hostgator calm you have to choose your calm so
there’s lots of domains that are not available just as a warning so don’t be discouraged when you find out that the one you want isn’t available so I’m gonna try cool joomla tutorial dot-com you can also try dotnet org and hostgator will always have a 20% off coupon code but to get 25% off you can enter host gator 25:12 and that’ll give you an extra 5% off and also if you already have a domain name you can just enter it in here and then transfer
it from GoDaddy or something like that so continue to step 2 oh and also if you enter a domain name on step one that’s already taken you will have to re-enter the coupon code so hostgator two five one two so step two is just making sure you have the package you want with the billing cycle and the twenty five percent off another thing to know is if you’re not from the US you can click PayPal and sign up that way so I’m gonna fill out all this
information and I will see you on the next page so step three was just a confirmation and you should be receiving an email now so just click your email and then we’re gonna login to our control panel for our domain and hosting so remember the username you made in step two and they automatically create a password for you so just click so just copy this password click on your control panel type in your username that you made on step 2 and then
paste in the password you copied from your email and now we’re in the control panel for our domain and hosting this is where you can give live chat support you can see the stats for your server how much space you have how much bandwidth but this is also where we can install a Joomla so to install Joomla just scroll down until you find quick install under software slash services click it and then under CMS software you will see Joomla now we’re
going to install the actual Joomla system so press Continue and if you want it on the root of your site like cool Joomla tutorial comm just leave this blank but if you want like cool Joomla tutorial calm slash Joomla slight site you could type in Joomla site but I’m gonna leave mine blank keept auto upgrades on enter in your email address entering a username it can be any username I’ll choose admin but you can choose any name you want this is for
your new Joomla site then type in your site name which can be your company name or something and leave sample content off don’t check this so click install now and it congratulate cyou and tells you your password so remember your username and here’s your password and then you can see the front end or the home page of your site by clicking here so this is a clean Joomla install nothing on it or we can click here and go to our administration
control panel for Joomla so it’s gonna be your site comm slash administrator to see the backend of Joomla where you can add content and make all the changes that we’re about to make so type in your username and then paste in the password that they just created for you click login and this is where it all happens for Joomla this is where you can add content this is where you can add new plugins this is where you can add new templates this is
everything for making changes on your Joomla site again just go to your site comm slash administrator and you’ll be in the backend of your Joomla website now if you want to go back to the home page of your site from the control panel you can just go up to the top right and click view site and this will bring you to the home page or you can just go to the new domain you registered so mine’s cool Joomla tutorial and this home page can be now viewed
from any computer on the internet so this is public and broadcast to the whole world so let’s go back to our administration control panel and first thing to do is change the password so it’s something we can remember so I will type in a password I’ll remember just so I can login and not have to copy a password every time so since we’ve got our Joomla installed now we can scratch that off the list and the next thing to do is get and install a new
theme so there are websites which just specialize in selling or giving away free themes and you can find them by going to Google and typing in joomla templates and you’ll see shape fives good rocket themes good but I got my template from theme force calm and you can go to theme forest and then go to CMS and and click Joomla and see all their themes that are for sale all of the ones I’m showing you right now our premium paid themes so you can sort
by sales rating price and just check out any of these themes click a live preview to see if you like it test it out and just keep looking till you find one but the one I got is called WS none so you can search for that and click it and the cool thing about this theme in particular is that it’s a what’s called a responsive theme so that means if we go and load this site up on like an iPad or an iPhone it will resize so it looks perfect on any
mobile device so I’ve already bought this theme but if you want to buy this theme or any theme like it just go to any of the sites I’ve mentioned click purchase and then after you purchased it just download it to your computer that’ll find some free themes or free templates you can just also google that just go free joomla templates and you’ll see lots of sites but you’ll also see that most of the templates don’t look as good as the premium ones
so you have to decide for yourself either way you can still follow along with this tutorial but you can check these out or any of the listed sites on google and just download the zip file to your computer and we’ll start to install the theme so I’ve downloaded my theme here and now I’m at my administration control panel so to install it we go to extensions since a template or a theme is an extension so as a module so as a plugin just go to
extension manager and I have two real aughh in then just find your theme that you just download unzip it on your computer and there will be lots of different files and we want to find the template file so template for joomla 2.5 and it’s gonna be a zip file you always upload zip files to the extension manager no matter if it’s a template no matter if it’s a plug-in or module it’s always going to be a zip file so we can just drag that zip file
over to the choose file and upload and install okay so it says installing template was successful but we’re not done installing the whole template because most templates come with other extensions like components modules and plugins and we’ll go over the difference between these as we go along but for now let’s just install everything that this template came with so I’ll go to the components file find the zip or zips drag it in and upload back
modules we we have to do one by one drag it and upload and the next one you and also some of them might be in folders so we have to open up the folders find the zip because some of these images are just kind of like directions or help files so just find the zip and upload it go back go to plugins if your template came with plugins find the zip and upload it you okay now it says all of them were successfully uploaded so let’s see the changes on
our homepage and as we can see nothing has changed why because we have only uploaded the files we haven’t enabled or made our new template default template so to do that let’s go back to our administration control panel go to extensions go to template manager and these are most of them are the default templates that come with Joomla and this this one is our new template so WS nun is the template that I just downloaded so let’s click the default
star next @ws nun and that’ll make our template default template on our home page and as you can see there’s another star here and this is for the template of our control panel so we don’t need to change that it just changes the look of the control panel so now let’s go to our site and as we can see it has changed but it doesn’t look anything like a complete website and that’s because we haven’t added content and we haven’t added modules and we
haven’t enabled the plugins so let’s enable some plugins right now so exit out of the home go back to the control panel go to extensions plugins and find your extensions folder and go to the plugins and you’ll see some folders or zip files that say GK typo or short code or C so we just want to type in GK search for it and set to the status to enabled just click the little red button then just do this for every plugin so shortcode I’m just going
to search for shortcode set the status to enabled now this one sees and this all depends on which template you got every template will come with different plugins and different modules so now let’s go enable some modules so go to extensions module manager and there won’t be that many to choose from so we can just I it out and we’ll see Maude highlighter Maude news Maude accordion Maude responsive menu and WS orbit so that’s all these right here I
can see that and just enable each one you so now to enable the components we’ll just go to components and it’s called X map so all components are also enabled under the plug-in manager so we’ll go extensions plug-in manager and just search for X map and then we can just check them all off with this box up here and enable them all by press it by pressing enable so let’s see how that made our site look as we can see it did not do anything so all
we’ve done so far is uploaded the modules and components and templates and we have enabled them but we have not added them to the template so we finished uploading and installing our template so let’s scratch that off the list and instead of giving you a boring overview of all the different little elements in Joomla let’s just jump in and start learning them as we go along so let’s open up our control panel and first thing to know about our menus
by default Joomla has one main menu and one item in the main menu which is the home because you need somewhere to go when you first enter the site so that is this page this is the menu item home so in order to get something to show up on our homepage we would either have to create what’s called a module which we’ll go into later or an article which will explain now what an article is is the primary content on your Joomla site so it’s basically a
page so you can have an about article or about page or a contact article which would just be our your contact info so let’s create an article just go content article add a new article we’ll call it the home article and we’ll write hello world then that’s all we need to do and just press save and close and we won’t see our article just yet on our home page we need to send our menu to get that article so let’s go to the main menu let’s go to the
default home page let’s go to menu item type and press select and then you’ll see articles so we can point this menu item to many different things a newsfeed users external URL so if you wanted to send your people to somewhere else on the internet but we’re gonna do and a single article because that’s what I just created so single article then it will show me if I press select / change my options and I made this home article so that’s going to be
the one so that’s it just press save and close and we’ll see our article on our home page see says hello world so let’s go to the article manager and delete that for now and now let’s learn about modules and for this I’m gonna show you the demo site which I bought the module my template from so I’m just gonna go to the theme forest say where I bought my template from click the live preview and what you’re seeing Paige is basically a bunch of
different modules see this image slider is a module this logo is a module these text boxes are all modules all of these little different sections of the site are all modules as a matter of fact all menus on Joomla are actually modules and you might be wondering how these modules get their positions or how do you know these positions every template you get will come with something that’s called a module map where they will show each for each
position of each module so I just go to features module positions and you can see that this is the slideshow module we can see that this module is called top one this one’s called top two top three top four top five all right sidebar and you could put anything in a module you could put a video in a module you could put a picture in a module you could put a contact form like we have over here this is a module but this is a module within an article
and this is another module side by module so let’s look at these module positions and let’s add one to the homepage so let’s add top one to our homepage so I’m going to go back to the administration control panel go to extensions module manager and then create a new module and for now I just want to do text so to do that we just press this one right here custom HTML and let’s name it only admit a new module then right here is where we select the
position so we look at our module map you see okay top one position that’s what I want go back here select position select our template here so it’s not cluttered by all the other templates and scroll down till you find top-1 click it you then we can add some text hello and then another important step is the menu assignment this is where you assign on what page or menu item the module will show up on so I wanted it to show up on our only option
which is home so only on selected pages and I would check off home so let’s see if that works save and close if you say and oh I forgot to not send the menu item to an article which doesn’t exist now because we deleted it so I’m gonna send it back to where it was featured articles save and close and now we can see our macho that we just created so again to create a module you have to go to extensions new module make a name for it then assign it
to a position that’s on your module map and then add something to the module anything and then assign it to a menu item so it has to be assigned to a menu item it can be assigned to multiple menu items or know what menu items or just on one menu item and you can also have your articles on the same page as your modules so you can have bunch of modules and an article all on the same page but we’ll go over that later in this tutorial so with what we
know now we can actually start building our site so I’m going to close these tabs up and go back to our administration control panel and we can delete the module that we just created it’s called new module and then let’s uh put in a logo so if you don’t have Photoshop or don’t know how to use it you can create a simple logo at a site called Pixlr p IX LR it’s like a Photoshop software that runs on your browser so just go to and then
click Pixlr editor and just go to file new image and I’ll do a width of 200 it could be longer if your business name was longer or shorter or I’ll do 150 and a height of 80 this is how big the picture of our logo is gonna be so press okay and that looks like a fine size for me I’ll make the background black then simply just take this text tool just click the a button and click and type in logo or your business name or whatever it is I’ll select
wait for the color and maybe make it a little larger and that’s not creative but you get the point so another important step to do is to go to the background layer under the layers window and double-click the lock and just click the layer and then click the trash button now it looks weird but this little checkered boxing will make it so we will have a transparent background on our logo which will make the background color which is black in my
case come through and just the logo will stand out but if I were to change the background to blue it would be blue in the background on my website so let’s just go to file save and then select my computer name it logo and this is an important step put it to PNG transparent press okay and I’m going to save mine to my desktop now let’s go back control panel since the logo is a module we’ll go to extensions module manager create a new module go and
find the custom HTML which will allow us to put an image in we can tile it title it logo but we don’t want it to show the title logo so we will hide it then we’ll select the position and in most cases on most templates the logo position will just be called logo here it is oh and when you’re selecting your position make sure it’s under the template so mines ws none that you have set as the default template because if you select something else like
if I were to select something on the bees template it wouldn’t show up because I don’t have that template enabled so ws9 for me and logo next up I have to upload this image so I’ll just go to this custom input this is where you can put text this is called a what-you-see-is-what-you-get editor so does just that it’s if you were to type in this you would see that on the web page so I’ll just click this image button down here then press choose file
to my desktop and find logo dot PNG open up press Start upload and that’s not it we have to select it so it’s right there logo with that PNG and then press insert so click it after it’s uploaded press insert and it doesn’t look like anything because it’s white text with a transparent background but we’ll see it when we publish this to our site so on the logo case let’s make sure the menu assignment is on all pages so every page that’s created
after this the logo will show up on let’s go to the top a save and close let’s view our site now we have a logo I’m actually going to change the logo to something I have created earlier because it’s a little bit better so I’ll go back to the logo module and delete this select a new image and find my logo upload it select it and insert it save and close and view the same so next up let’s go ahead and put in the image slider that we can see on the
demo site from where I bought the template from let’s put this slider in with our own custom images so I’ll go back to my administration control panel go to extensions module manager this time we’re not going to create a new me in a new module because I had already uploaded and enabled the image slider that the template came with so that’s the orbit slider so if you’re following along with another template you can get the orbit slider by going to
Google and typing in Joomla extensions by the way plugins and templates and modules or all types of extensions search for Orbitz slider and then this is the one then you would just download it you right here you and then upload this zip file to extensions extension manager and click upload but I already have it uploaded so I’m just gonna go – oops I’m just gonna go – I guess they added a new one trash it and I will go to my orbit slider select
the position and we know with the position because if we go to the module positions we can see that it’s called slideshow it’s fine slide show right here and let’s not show the title so press ID and I only want to show this on the home page so only on page is selected home next we’ll add our slides but before we do that we have to get our slides and edit them so they’re the correct size for the layout so do that we’ll go up to our demo site we’ll
go home to where the slider is so just click home and you’ll see the images here just simply click and drag any of the images up to the URL bar like this and let go then you’ll see just the image on the page and you’ll see the dimensions up at the tab bar or the title bar of your browser and this works on all browsers so it’s nine eighty by four sixty nine so now that we know that we can go back to the home page and I’m just gonna find an image
so I’ll just go to Google images hmm and I’ll search for space and I’ll do a large image and this one will do view full-size and I’ll just drag this on to my desktop okay we can close that now let’s go back to Pixlr to free editing software and let’s open an image and we’ll click on the image we just put on our desktop you so we’ll just go up to image canvas size with 980 height 469 and I’ll click the center box press okay so I’ll put that at
100% so that’s the correct size now all I have to do is save this file save and I’ll do a JPEG that’s okay and save it to my desktop all right I can delete the other one the I will go back to the administration control panel on the slider module just click on add your slides under picture press select under upload files press choose file and then click the file that we just made so Dex cop and in my case thumb JPEG start upload click the image
then click insert and then we can add some text like hello this is a slide alright let’s see what that does press save and close and let’s pure say all right now it’s actually starting to look like a real sight so I actually have some better slides already prepared so I’m gonna add those in and I will just speed this up so you don’t have to sit through it you all right here are the new slides that I just added as you can see that having a black
background on the left side really makes it a lot better-looking and you can do this in Pixlr by taking the paintbrush with a soft brush like so go to the paintbrush and clicking a big soft brush picking the diameter big making the hardness very low and then just painting over the left side or the right side so it blends in with the layout that’s what I did here you now if we go back to the demo site where we bought the template from and view the
live preview we can see that they are these little buttons in this bigger text up here let’s learn how to do that now so let’s go to the administration control panel over to the orbit slider press add your slides and then press typography now you might get this air which happens often and Joomla and to fix this let’s close this go over to just press close right here then go to extensions plug-in manager find typography click it and then all you
have to do is press save and close and this usually fixed the problem so back over to the module manager and over to the orbit slider and if you’re not seeing a typography button right here it means your template did not come with one or you don’t have it enabled and the typography plugin is not available for download on the extensions site but most premium templates do come with the typography plugin so if you bought one there is a
good chance that you will have this button so this is only for people who have this button so let’s click the typography button and make a blue button like we saw on the demo site so click the typography button and find the buttons button and you’ll see all this little code this code is called short code basically if you type or copy and paste this code into any of the text editors in Joomla like an article or a module you will be telling Joomla
to make a button from the typography plugin that you installed so let’s copy and paste the bottom 3d button example shortcode so coppy close this up and press Enter and before we paste it let’s type a left pointing angled bracket and then BR then a space then as a forward slash and a right pointing bracket and let’s do that one more time be our space forward slash right angle bracket what this will do is make two spaces under the text so our
button isn’t on the side of our text or too close to it it’s under it this is some basic HTML code then the sperits enter again or return on Mac and paste in that shortcode so this is the shortcut it’s telling it 3d button size medium it could be small medium or large it could be all different types of colors we can see the choices if we go to the typography buttons it can be blue white black red or green so I’ll keep it to blue this will be the
HTML title so when you go over the button with your mouse it’ll show a little message like on the typography button right there the little yellow message and this is the link so we can link it to for example and this is what the button will say so I wanted to say click here and I’ll keep these little arrows all right let’s see what that did saving clothes and let’s view our site so refresh it and that button is a little too big for me
so I’ll just go back into the orbit slider module and change medium to small see what that did that looks about right to me so in order for this to look even better let’s put some bigger text as a title above this small text so I’ll close it open up the orbit slider again and click add your slot and I want this hello to be big and above this is a slide so what I’ll do is put my cursor right there and press Enter then I’ll type another one of
those left pointing angle brackets type in h2 and a right one and this is more basic HTML code and then I’ll just close that code so it only makes the hello big so I want to close that code off and to do that we type in another angled bracket a forward slash and then h2 so only this is going to be big so just hello comma just the stuff in between here all right let’s see what that does okay that looks about right to me and you can see the title
right there so it says this is a button and if you wanted to edit that you could go back to the orbit slider and highlight this and type whatever you want save and close and you can see that it all show up if you hover over it all right let’s start adding some modules to the homepage so let’s go back to the demo say and view the module map once again to see some possibilities you so this is the live preview from where I pop template and I will
just click module positions and we can see every position possible so I want to add three tops but I also want to make them colored this like gray and white and a black let’s learn how to do that so let’s make a new top one module click new custom HTML since we want it to just be some text and on this title we wanted to be what you wanted to say up here at the title of this module so this one would be named top one top two top three but we can
name but we can put any text up here so I actually have some text already prepared that I am gonna put in so let’s make a new module from the module manager and then press custom HTML and my title is going to be help I’m going to show the title selector position and I can just search for top up here top-1 and I’ll paste in my already prepared text and we want to put the menu assignment two only on the page is selected and select only home and
before we save it we want to go back to the module positions website the live demo and we’ll see something called a module class suffix this will give our modules unique characteristics from one another so this is how we’ll make each module a different color and the colors are predetermined by the person who designed this template so it says how to add this grave module style simply add the module class suffix BG gray please don’t forget the
white space in front of the phrase so they want us to copy this BG gray plus the space right here copy madjoe click advanced and then your module class suffix just paste it in making sure we have that space all right let’s see how that looks and it looks good we just need the other ones to fill in the space so the top one module doesn’t go all the way across the page so let’s add the other two again new custom HTML type the title you want to see
on top of the module for me it’s called a tip one make sure we’re showing the title select the top two position we know that because it’s called the top two and I will type or paste in my text and select only on page is selected on the menu assignment then for the suffix we will just copy the border and the space and Advanced Options module class suffix paste you by the way these suffixes are only going to work on this template for every
different template there’s different suffixes with different characteristics so one more time new custom HTML tip two is going to be the title for me position top three and I’ll paste in my text select my MA assignment is only home and then we’ll put the Advanced Options on and copy space BG black for our module class suffix save and close viewer say and it’s looking pretty good so far so one thing to remember for these modules on the top is to
make them all about the same amount of text so one isn’t bigger or longer than another so as you can see I have the same amount of lines of text on each one they’re all four lines of text so let’s add some more text modules to the homepage to fill it in a bit so I’m going to go to new again it’s just going to be text so custom HTML and I already have some text prepared again so I will put in my text here’s my title I will show at this time and
position is gonna be let’s see think top four will work for me search for it select top four paste in my text only show it on the homepage I’m not going to do any module class suffixes this time so I’ll just save and close that test it out all right now add another one custom HTML here’s my title which I will show position let’s see top five should work for me copy and paste in my text to the body only on home let’s let’s test that out all right
that looks good now let’s add one more to the main homepage body new custom HTML title is going to be body and I won’t show the title this time see what position I want will do bottom one search for bottom and I’ll just paste in this dummy text only on homepage save and close let’s test it out alright that’s looking pretty good but the only thing that’s bothering me is this little home title right here let’s learn how to get rid of that so let’s
go back to the administration control panel and that title is under some of the menu options so let’s go to menus main menu click on home fine page display options over here on the right-hand side click it and under show page heading let’s press no saving clothes and that should get rid of the little home title there we go it’s nice and clean and it’s actually starting to look like a real website but we’re missing one major part of the website
which is a navigation menu so let’s go ahead and add that back to the administration control panel and before we create new menu items let’s create some articles first so let’s go to content article manager add new article and here we’re gonna create our pages so on my website I know I want a an about s page a services page a photo gallery page a contact page and we already have the home page so let’s put in an about Us page I’ll just type in the
title about us and I will just put in some dummy text for now and then just go save and close now let’s create another page this one will be photo gallery and save and close click new again at another service this page and the reason we’re creating pages before we are creating the menu items is because that is kind of the order of operation in Joomla because when you create a menu you have to have somewhere to point it to so we’re creating the
place where the menu is going to be directed to so it’s add that services and we don’t need to fill out any of these other options for now save and close at a say even close and that’s all I need so now if we were to go look at our site we wouldn’t have anything yet so we need to create new menu items that point to each of these pages and then select our module position for our menu since a menu is a module so to do that let’s go to the top and
click menu main menu add new menu item menu item type will select it and will put single article because all those little pages that we just made we’re single articles then it’s gonna prompt us to select which article we want so I’ll do the about Us page and name the menu title about us this will be the title that you see on the website now we don’t need to put any other options in so save and close again new select menu item type as single
article select the article and type in the correct menu name for the article save and close new again select a single article change and will do services saving clothes whoops gotta put in services save and close new select single article select the contact page and name it contact save and close now if we go and see the site still we won’t see any menu up here so to do that we have to add in the menu module so let’s close this and let’s go to
our extensions module manager and there’s gonna be two menu items for me to choose from there’s gonna be the WS responsive menu which I installed with the template and there’s gonna be the default main menu module for me I’m gonna do the responsive menu because usually when a template comes with the menu that’s gonna be the main menu that they want you to put in so let’s just select that responsive menu that’s high the title because we don’t want
to see any title in the menu selector position and most likely it’s going to be named menu so WS none menu click that and we want to show it on all pages just like that save and close now if we view the site we have a menu now it’s actually looking like a real site and if we were to click any of these menu items it will bring us to that article that we had just created so it says about us hello if we go to the photo gallery it’ll be the happy
face services etc alright now before we start adding content to each of our pages let’s add a footer with a submenu some social icons and maybe some information or an address of our business so to do that we’ll head over to the module manager so extensions module manager and create a new module and this one will be custom HTML again so we’ll create a submenu which will link us to other places on the internet or somewhere within our website so
this will be called submenu and the position will be bottom-4 select position search for bottom bottom-4 and now on this menu instead of creating a new menu over here at the menus menu we’ll just create some links so we can do that by going to our text area and typing in some text that we want to create a link from so let’s say on our sub menu we wanted to link to Google we just type in Google highlight it press this little link icon and type in
HTTP colon slash slash then below it pressed shift enter twice that’ll make a smaller space under Google so the links aren’t too spaced apart vertically so press shift enter twice and we’ll do YouTube highlight it you insert again shift enter two times and we’ll do Gmail HTTP colon slash slash now these links can be anywhere on the internet they can be within your site or outside of your site and this could be a
faster way of making a submenu so again shift enter enter and we’ll do Yahoo I’ll link it to yeah and I want this on all pages so make sure your module assignment is on all pages save and close and USA all right now we have a little submenu so let’s create another little module right here that says the address of our business and phone number so back to the module manager new again custom HTML and we’ll name this address we will show the title
and we’ll select her position from the module map which will be bottom five select it and we’ll put in our address so one two three address Street and I’ll press shift enter to go right under it nine zero zero zero zero the United States California and we can also put a phone and I won’t hold shift this time I’ll just press ENTER that’ll make a bigger space phone now we’ll make sure that’s on all pages which it is and we’ll save and close that
one let’s view that alright now let’s add some social icons so this time we aren’t just going to go in add a new module we’re actually going to download a social icon module extension from the extensions website so to do that let’s just go to extensions Joomla at work and type in share this Joomla and we’ll see it if we scroll down a bit right here share this for Joomla and then go to download’ and you’ll see two versions Age a 1.5 version and
the J 2.5 versions we want to get the J 2.5 version because we’re running joomla 2.5 that’s what the J means joomla 2.5 so just go ahead and download it and drag it onto your desktop we can close this up now we have to upload the extension that we just downloaded so extensions extension manager and we can either choose file and find it on our desktop or just drag it right in so upload in install now we have to enable it and add it into our
template so extensions module manager and you will not see it automatically added over here we’ll have to go to new and we’ll see share this for Joomla alright now let’s make a title for it we’ll call it social and we’ll show that title then we’ll select bottom six position you alright now we want this to show up on all pages so make sure that’s selected and over here you’ll see the options for the social icon module so I think I’ll just have all
buttons and I won’t show LinkedIn I’ll include Facebook include Yahoo food email no share this and I’ll save and close now let’s check it out all right looks pretty good all this could be filled in Oh now people can share your site or like it on Facebook or tweet it or email it to someone so that’s pretty cool so let’s move on to some actual content on our pages so the first page we’ll make is a simple about page so let’s go back over to our
about article so content article manager and we have an about us article so on this one we’ll demonstrate how you can have an article and a module on the same page so I’m just going to add a picture into this article which I already have prepared so I’ll just a picture start upload insert it and that is all I need to do for this save and close then I’ll create a new module so I’ll go to extensions module manager and enter some text into the
sidebar next to that image so I’ll create a new module which is going to be custom HTML because I just want it to be text and I’ll put in about it I’ll hide that title I’ll select this sidebar a position so select position type in sidebar search work sidebar a and I have some text prepared already so I’ll just copy that in and paste it and I only want it to show up under the about Us page so only on the page is selected I can clear the selection
and click only about us so let’s say close viewer site and go to our about page all right I looks pretty good but I would like to get rid of all of this little text and this previous and Next button just so it looks a little cleaner so to do that I will go back to the article manager and I will click options right up here and here are the global options for every article and I want to shut off all those options for every article so I can just go
to show title hide it link titles no I don’t want to show it intro text hide category hide link category no show author I’ll hide that publish date navigation more show title show icons and hide the rest of these alright save and close let’s test that out and looks much cleaner but this image is a bit too high up on the page so to change that we have to go edit our article with the images so article article manager click the about Us article and
we’ll do a little HTML code that we learned earlier to make the image further down on the page so click this little HTML icon and we’ll just do the left pointing angle bracket be our space forward slash and the right-angled bracket and we can just copy that and maybe do it three times update as you can see it went further down the page save and close and let’s see how that looks about us and that looks perfect all right now let’s do a photo
gallery so if you didn’t get the same template as me this ws9 template you might not have the photo gallery that we’re going to use but you can easily get it from free at the joomla extensions web site extension that type in siege and you want to download this so click it click download and once you downloaded it you want to upload the zip to the extensions extension manager right here choose a file and upload it then go to your
extensions plugin manager and find siege and press enable so if you already have it and it’s enabled let’s just go to extensions plugin manager search for siege which I have already done and click siege and usually with third party plugins there will be directions on how to use it right here so the first thing we need to do is create a folder of images that we want to be in the photo gallery so to do that let’s close this up and go to content
media manager this is where you can upload or delete any of the pictures on your Joomla website so we want to add a new folder which is only going to be the gallery images so over it create folder let’s type in gallery create folder click the gallery then go down to choose files and I already have a bunch of images ready so I’ll just select them all press open and start upload a thing to know about the siege gallery is your image must be named
dot jpg not dot jpg like some images are named so make sure they’re called jpg and if they’re not just renamed them so the next thing to do is add the gallery plug-in into our photo gallery article so let’s go to content article manager photo gallery and we can delete this and then we want to enter in the gallery shortcode which we can find at the C’s plugin page but I already know it it’s bracket gallery bracket then we enter the folder name
that we just created so that would be gallery and then close it off by going bracket forward slash gallery bracket and that’s all you need to do save and close view our site let’s go to the photo gallery and there we go now we have a photo together so you can mess around with more options on the photo gallery if you go to the C’s plugin page right here so let’s move on the services page so on this services page we’ll put a nice pricing table like
the one we can see here on the demo site so we can compare and contrast our different services and prices this pricing table was built into my template and we can call it up using short code but if you did not get the same template as me you’ll have to check if you have a pricing table also so if we just scroll down to the bottom on our live preview we can see the shortcode for the pricing table so we’ll just copy that and go over our
administration control panel and just go to content article manager go down to services and we can delete this then since this is HTML we want to open up the HTML window and paste that right in so command V press update and what this short code is asking us to do is to place an unordered list right here so place here an unordered list you ll I will just delete that and press ENTER twice and then write in this blank space will click the unordered
list button right here and just start putting in our pricing table so the first thing on the pricing table will be the title so that’ll be the first thing we write in an unordered list so let’s say this is the bronze package now if we look at the live demo the second option will be the price fifty dollars third option is this writing in bold so maybe like a small description for our product you then the rest of the options will be the features of
a product and the last option we can put a nice button using the shortcode that we learned earlier so to do that we’ll go down to typography buttons copy this example paste it in and we can change this to black and we can change this to by now all right let’s make package said to do that let’s highlight and delete in between column 4 and column end and press Enter or return twice create an unordered list and make a new package so this one will be
silver package you this will be the description features and I’ll just go and copy this paste it right in all right let’s make one more so highlight and delete place here and unordered list delete it and press ENTER twice an ordered list so the name of the package the price the description the beach and paste our button alright see how that looks save and close you say all right now we have a pricing table to compare all of our products so now if
you wanted to have your customers get directed to somewhere where they could actually buy these packages you could easily put in a PayPal link right here that would link them to a PayPal checkout so I just realized that we forgot to add an FAQ page so let’s learn how to do that now the FAQ that we’re going to add is going to be this FAQ right here it’s called an accordion FAQ so I’ll close this up and since we haven’t added the FAQ page to our
website let’s do that now so close this up content article manager add new FAQ and we could just put in some dummy text for now saving clothes now let’s make up menu item menus main menu add new item menu item type will be single article will select the FAQ article that we just created menu title will be FAQ save and close’ let’s see if that worked and we have an FAQ page now so let’s add an accordion module to our FAQ page go to module manager
now if you don’t have this clue accordion module you can download it by going to Joomla extensions and typing in clue ql u e accordion clicking this one going to download and they don’t make it easy for us to download it so the best thing to do is just search right here for clue accordion click this one click read more then we want to download the free version for joomla 2.5 so just download the zip and upload it to the extension manager once
you’ve done that go ahead and go to your content page and go to category manager let’s add a new category and ramela categories are just a neat way to organize all of your information all of your articles so they’re in little folders or categories so let’s make a FAQ category that will hold all of our FAQ questions so ver title we’ll just call it FAQ and we don’t need to fill out any of these other options so save and close and now we’re going to
write out all of our FAQ questions into new articles so content article manager add new article and the title will be our question I already have a few questions prepared that I’m going to copy and paste in so my question is how do I add a module to an article and in the article text we’re just going to put the answer and the important step of this is making sure we have this article in the FAQ category so category FAQ save and close and let’s
make a new article with another question so article manager add a new article our question for the title category FAQ and the answer in the article text save and close you now let’s edit some options in the clue accordion module so extensions module manager clue accordion now first thing we want to do is select the category of FAQ so it’s going to call up those questions that we just made and the next thing to do is make a new position for the
FAQ to be in so we don’t want to press select position what we do want to do is make a new position that does not exist yet so you can write anything here just right my FAQ so we’re making a new position within our article now under my menu assignment let’s go to only on page is selected select FAQ and save and close now let’s put that module into our article so let’s go to content article manager FAQ we can delete this then we want to tell our
article to load up the module position that we just made so to do that we have to enter some code in let’s type a bracket then type load position then a space then type in the name of the position that you just made so in my case it was my FAQ method another bracket save and close now we just loaded the module into our article let’s see it FAQ and that works you so if we wanted to change the name up here we could go to our module manager and find
clue accordion and simply change this too frequently asked questions save and close and that should do it so last but not least let’s add a contact form to our contact page so our clients can email us from our website and also a map to show where our businesses all right so to add the contact form we first need to download a contact module so let’s go to extensions Joomla org and the contact module that I like is called Fox contacts so let’s just
search for Fox contact now let’s click this and click download you and scroll down to the free version and click download once it’s downloaded just put it on your desktop now let’s go to the extension manager so extensions extension manager and upload Fox contact upload in install now once that is uploaded let’s go to extensions module manager and create a new fox contact module so new find fox contact right here click it and let’s name it
contact form we can hide the title now again we’re going to put a module into an article so we have to create a new position name for this contact form so let’s just choose contact form one word let’s set the module assignment on only our contact page and then enter our email address right there save and close now let’s add this module to the article so content article manager contact and again we’re going to use the load position code to load up
that contact form so bracket load position oops position contact form so this is the name I chose for my position then another get to close it up now just press the save and close and we should see a contact form on our contact page that works now let’s see if it emailed us you you and all of these options for each section of this contact form can be easily changed in the Fox contact module and submit all right let’s check our email here we go he
mailed right to our email so after that I want to add a sidebar with a map and maybe some phone information right here so I want the map and the phone number information to be again in an accordion module so to do that let’s create a new category content category manager press new and we can name it contact info you don’t have to fill out any of these other options save and close and let’s create a new article for the phone number call it phone
and we’ll put it in the contact info category and the category is important so the clue accordion module knows which information to grab so we’ll just put our phone information and maybe a fax number and that’s how we need for this one so next let’s add a map so let’s go over to google and type in google map generator and I like this one map generator org then you could put in your address right here I’ll just put in my city and we’ll select a
width of 285 and a high of 550 and we can turn all of these controls off so I’m just gonna put none for any of these and to Street map so it’s real clean then let’s put generate HTML and copy this code right here close that up now this is where it gets a little tricky because if we were to create a new article called map in the category of contact info and open up the HTML window and just paste in our HTML code for the map that we just created by
default the map actually won’t show up in Joomla we have to switch around a few options before it does so we can delete this and add some dummy text and save and close for now and what we want to do is go to site global configuration and go over to text filters right here and for super-users select or make sure that no filtering is on so check off no filtering save and close and then go over to extensions plugin manager type in tiny and click
this tiny MCE editor and over here on the right side where it says prohibited elements we want to get rid of iframe so we’re allowing super users to put iframes into our text editor because the Google Map HTML code is an iframe so let’s save and close that now let’s try to see if our map works so article manager article map delete this and open up the HTML editor and just paste in our map code press update and there we go it works we can get rid
of this and press save and close now we need to create a new clue accordion module and display on the contact page sidebar so extensions module manager new Clou accordion we can name it phone / location now we’re going to select the sidebar a position so sidebar sidebar eh and only display it on the contact page like that then select the category of contact info save and close now we should have a phone and map in a clue accordion sidebar on our
contact page there we go here’s the map and here’s the phone info so that’s it that’s how you create a fully functioning professional business website for a fraction of the price that the web designers will charge you I really hope this has helped you and if you have any questions don’t hesitate to contact me on youtube or just leave a comment I will try to answer everything that I can thanks for watching and good bye