How to build a Joomla 3 Website - 2013

hey everyone in this tutorial I will be showing you how I made this Joomla website and what makes this Joomla website really cool is that we're going to be building it on the helix framework the helix framework is basically a really customizable Joomla template and that means that this whole layout of the whole website can be completely changed to whatever you want it to be so for example if you wanted the menu to be on the bottom or the logo to be on the right side or the body or article to be all the way up here you can do any of that just by dragging and dropping I'm going to be showing you how to everything like this text slider and this button I'll be showing you how I made these little modules with the icons and I'll also show you where to get these icons for free I'll show you how I made this green text and the Twitter and like buttons I will also be showing you how I made this basic about page with an image slider and the image slider could also be on the home page you can pretty much do anything you want with this template it's really cool and this is also just a basic article and maybe a testimonial over here I'll also be showing you how I made this FAQ page with an accordion FAQ and that just means that when you click on any of the topics the whole topic slides out like an accordion I will also be showing you how I made this basic page with an image in it and I will be showing you how I made this contact page with a map at the top and some phone information and some email information and address with these little icons and a contact form built directly into your website so your visitors can email you directly from your website so the most important part about this website is that it's completely mobile friendly and that means if some comes on to your website from an iPhone or any other mobile device the whole website is going to change and respond to the smaller screen size this will make it really easy for people to find whatever they need or read whatever content they need to on your website even from mobile devices so if we check out this mobile page we can see that 90% of websites are not ready for mobile traffic mobile traffic accounts for 10% of all Internet traffic so that's a lot of traffic in a recent google study it said that 72% of Internet users say it's very important to them that the websites that they visit are mobile friendly and people are five times more likely to abandon the task if the website is not mobile friendly almost 80% will go to another site to meet their needs if the site they're on is not mobile friendly and three out of four people are more likely to revisit a website which is mobile friendly so it's super important these days to have a mobile-friendly website because there's a lot of people browsing on their iPhones or iPads or other mobile devices to find what they want and if they can't find what they want on your website they're going to go to someone else so the other great thing obviously is this website is going to be built on Joomla and with users like Burger King sprint Porsche MTB and millions of others Joomla is one of the most popular content management systems out there and what a content management system does basically is make it super easy to manage your whole website so it's going to be ridiculously easy to add content or delete content or edit content or edit the whole look and feel of your website without knowing anything like PHP or CSS or any other coding language so I made this site in about an hour and you will be able to make it in about the same amount of time it's super easy and even if you're a complete beginner to any of this type of stuff I'm going to walk you through step by step so you're not going to be confused about anything that you see here so these are the steps that we need to take in order to build this Joomla website we first need to get a domain name and a domain name is something like WWE Google comm so this is Google's domain name you can also get stuff like dotnet org dot info or any other extension that you know about so this is going to make it so people can go to their web browser and type in your domain up here and then they'll be brought to yours website but without hosting which is the second step your whole website would just be a blank website what the hosting is is basically it's a computer that's on 24 hours a day that stores all of the information on your website so that means it stores all of the images and the text and all of the the whole Joomla system on that computer and then it allows people to access that information from anywhere in the world so the domain is kind of like the name every website or like the phone number every website and then the hosting is the actual content or the meat it's where all of the files will be stored that are on your website so after that we have to install Joomla and that's just a one-click install it's super easy and then we have to get a template and what a template is is it's what's going to make your Joomla website look the way it does so it's kind of just the skin of the Joomla website so in this case we're going to be using the helix framework template after that all we have to do is add our content which is super easy and our whole website will be complete so let's get started with steps one and two but unfortunately steps one and two do cost money getting a domain is about fifteen dollars per year and getting hosting is about ten dollars per month this is kind of just the basic costs of having a website you do need to get a domain and you do need to have somewhere to store all of the files on your website a so there's no real way of getting around it everything else like the Joomla and the template is free so to start off the whole website is going to cost you around $25 and I also will show you how to get a little discount off that $25 so steps 1 & 2 can be done at the same place at the same time so let's head over to hostgator.com Hostgator is one of the top hosting companies it's probably the biggest hosting companies I've been using them for around 5 years and they've been really good to me and they have a really great live chat support which is probably my favorite feature about Hostgator so once you get to Hostgator you can click on web hosting and then you'll see a bunch of different plans and usually I recommend the baby plan I recommend that only because it allows unlimited domains so you could have like I love dogs calm I love cats calm and I love Turtles calm all on the same host meaning you won't have to pay the extra $10 a month for storage for your websites but I mean obviously you would have to pay for the domains so if you plan on having multiple domains down the line I definitely go with the baby plan but if you only want one domain and you know you're only going to want domain for the rest of time just go with the hatchling plan because it is a lot cheaper so once you figure out which plan you want you can click here and there's different billing cycles if you pay for 3 years up front it's going to cost you 639 a month two years seven sixteen six months seven ninety six obviously the longer you pay the cheaper it's going to be but generally I like to go with monthly because then you're not going to be locked into anything and if your website doesn't work out or whatever you can just cancel at any time so click order now and then this is the important step of choosing your domain name so again like Google is WWL calm you have to come up with your domain name so I'm going to do cool Joomla tutorial calm you can also do net org info or dot biz and if you've ordered your domain from another website like GoDaddy calm you can just type in that domain right here and Hostgator will always give you 20% off by default but if you type in hostgator two five one seven down here they will give you 25% off and this is a my coupon code so when you type this in Hostgator does give me a little bit of credit and I really do appreciate anyone who signs up so thanks a lot after that just click continue to step two and this is where you're going to fill out all of your account information so right here you're just going to make up a username I'll just do Michael and make up a security pin and then obviously you're going to fill in your billing information and if you are not from the US or you would prefer to pay with PayPal you can pay with PayPal by clicking this button right here and after that this is where you can choose to have a private domain if you want to save yourself ten dollars per year you can uncheck this but if you want your domain to be private you can leave this checked off because people can with any domain of look up who owns the domain and look up their name and I think their phone number and I think their address so if you don't want people to know that information you can check this off but if you don't care you can leave it unchecked site lock is not recommended by me you can just save yourself $15 and uncheck it and do not do this SEO jumpstart save yourself another $15 and obviously we're not going to do this Mobile MIT website maker because we're going to be making our website on Joomla so after that just make sure all of this is correct information you got the correct domain that you want and then clicked I have read and agreed to the terms and click create account so I'm going to fill this out and I'm just going to see you on the next page so the next page was just a confirmation page and you should be receiving this email pretty soon sometimes it takes a few hours for you to receive this email and also it might take a couple of hours for your whole domain and hosting to become fully functional once you sign up but once you receive this email just click it and this is all very important information so make sure you print this email out or keep it in a safe place so we have gotten our domain and we have gotten our hosting the next thing we want to do is to install Joomla and that's what we're going to do right now so let's go to the email and then you will see your username so remember that username and your password so you'll just want to copy this password and then you're going to click on where it says your control panel so just click here and you'll be brought to this page so just type in your user name and paste in your password so this is the back end or the administrative area of your Hostgator server so from here you can do things like add domains or change your billing information or do the live chat support but that's not what we're here to do what we're here to do is to install Joomla so let's head over to software and services right here and then click quick install and then under CMS software on the left hand side just click Joomla and click continue so this is where we're going to set up the installation of our Joomla website so first make sure that this is the domain that you want your web that you want your Joomla website to be installed on so if you have multiple domains you can just click here and choose the domain that you want to install it on and then right here if you were to type in hello you could install Joomla on a subdirectory so if I typed in hello here my Joomla website would be available on cool Joomla tutorial comm slash hello but I want my Joomla website just on cool Joomla tutorial comm so I'm just going to leave this blank after that I'm just going to leave enable auto upgrades on and I'm going to type in my email address and then my username usually I just choose admin but you can choose anything this can be your name or your email address it can be anything you want after that I'm just going to type in my site name so my site name is just going to be my website but obviously this would be something like your company or your name or whatever you want it to be after that make sure to not install sample content so do not check this off then you can click install now so once you get this message you'll just want to go and copy your password right here and then you can actually go to your new website so for me it would be cool Joomla tutorial comm and see our brand new Joomla website so this is what Joomla looks like straight out of the box but we want what we want to do is to go into the back end or the administrative area of our Joomla website now to do that you can click the admin section right here or alternatively you can to go to your domain comm slash administrator and you might want to bookmark this page and it will bring you to the same page so once you're here just go ahead and type in your username and paste in the new password that's on this page right here and click log in so this is the back end or the administrative area of your Joomla website and this is where you're going to be adding content editing content or changing any aspect about your website so this is the back end of your Joomla website and the first thing that we want to do is to change the password that they just created for us so let's go to edit profile and let's change it to something that we will remember and click Save and close so in Joomla when you get the green message up here that means it's good if you get a red one that means it's bad so watch out for the red ones so the next thing that we have to do is to get a template so we've installed Joomla next up is get a template so let's head over to Google and then type in helix to Joomla and I'm also going to add a link to the description of this page so you don't have to Google this once you get here and just click the download button and we actually have to download two files so the first thing we have to download is the template only 2.5 and 3 file so just click download and the second file we have to get is the system plug in joomla 2.5 and 3 files so this one and this one so I'm going to just download this one and once those are down done downloading just throw them on your desktop and then head back over to the administrative area your Joomla back-end so let's go over to extensions and click extension manager and this is where we can add new templates or new add-ons like modules or plugins to our Joomla website so we have a plug-in in a template so let's start off with the template by clicking choose file and going on to our desktop or wherever you stored it clicking open and click upload and install next do the same thing for the plugin so just choose file plug-in and upload and install so now if we were to check out our website we would not see any changes just yet so the next thing that we have to do is to enable the template and plugin that we just uploaded so let's do that now by going over to extensions template manager and this is where we can enable the template so you'll see a bunch of templates right here and this is the one that we just downloaded so let's click this little star right next to it and now our template is enabled and is in use but you'll also notice that there's another star and next to it it says administrator and this is the look this is the template or the look of the administrator back-end so if I were to click this one we could change the look of the Joomla back-end but I'm going to change it back and now if we check out our website we can see that it has changed but it is blank so the next thing that we have to do is to enable the plugin that we just uploaded so let's go over to extensions plugin manager and then you can just type in helix right up here and click search and then you'll see the system helix framework plugin and next to status you'll just want to click the X so now we have enabled the template and plugins so if we check out our website we'll see that it has changed and it's kind of looking like a real website but the next thing that we have to do is just to add our content and after that we'll be done so the first thing to do is to start adding more pages to our website so as you can see we have a home page right up here and I want to add an about page a location page an FAQ page and a contact page so in order to do that we have to do two things we first have to create a new pages also known as articles in Joomla and then we have to create the menu items which point to those pages so let's get started with adding new pages or also known as articles so let's go to content article manager add new article so for now I'm just going to add some blank articles so that my first one is going to be called about us and I can just leave this blank and I'll click Save and new the second one will be services save and new and the third one will be FAQ and the last one will be contact us and I can click Save and close so now if we were to check out our website there would be no difference yet so now we need to create new menu items which point to the new articles that we just created so let's do that by going over to the menus main menu and then click add new menu item so what you want to do is to select the menu item type so just click select right here and we want these menu items just to point to single articles so we're going to click articles single article and then right here where it says select article you're just going to want to select the first one which will be about us and set the menu title which will be the title that you will see up here to whatever you want but in my case it's just going to simply be about us so let's click save and new and then set the menu item type again to single article and we're going to just keep doing this until we did all of the articles that we just created so about us the next one I want is going to be FAQ so I'll just set the menu title to FAQ save and new single article select my article name my menu item and this one will be contact us and I can click Save and close so now if we were to check out our website we would have new menu items and if we were to click any of these menu items it would actually bring us to our blank articles that we created so we actually have a website with pages on it now and there's actually one more article that I forgot to create so let's go back to the article manager and click add new article and we also have to create a home article because by default the home page in Joomla points to featured articles and on this website that's not exactly what we want so let's create a home article and then let's point the previously created home menu item to this home article so let's go over to menus main menu and then you'll see the home article and you can see that it's pointing to articles featured articles and we want it to point to a single article so let's click to the home button and then under menu item type just like the other ones let's click single article and let's save and close that oops we got to select the home article all right and we will not see much of a difference but now that we've added all of the pages that are going to be on our website let's actually start adding content to each page so the first one that I want to do is the home page let's complete the home page and then we'll move on to about us FAQ services contact but before we start adding content I want to teach you a little bit about modules so let's head over to the helix 2 website and I'm just going to click on the live demo this is kind of the demonstration of this template so most of the things that you're seeing on this website are modules so this thing up here is a module all these little boxes are all different modules this sidebar is a module all these little sections of little content around the website are all modules even the logo and menu and search bar all different modules the only thing on this website that is not a module is this main content right here this main content is actually an article so everything on this page is either a module or an article so let's first add this thing to our website let's add this little text slider with some text to our website so how would we do that well we would have to know the position and name of this text slider we would have to know where to add the text so let's go over to the module map and you can always find a module map or modules positions page on every template if you just go to features module positions this is also in the documentation most likely of the template so you'll see a bunch of different names you'll see logo menu user 1 user 2 user 3 user 4 and those will all have positions like this is user 1 2 3 and 4 so if we wanted to add this little a text slider we would just look at our module map and see that it's on the feature position and then we could go to our back-end and go to extensions module manager click new and then all I want is just some text so I'm just going to click custom HTML so if you just want text or an image you'll just choose custom HTML for your module type and I'll click that and I will give it a title which will be a text slider and I will give it a position so if we check it our module map again we'll see features the place that I want to put my text slider and I'll just type in under position I'll either scroll down and find under helix we'll see shape or helix and we could see feature or work I can just type in feature like that and I'll click that right there so under custom output this is where we can actually write the text that we want it to display so I'm just going to write hello for now and then the other important step is to select the menu assignment so on this on this text slider I only want it on the home page so I'm just going to select only on the page is selected click select none to uncheck all of these I'll select home so this is going to only show up on my home page after that we're done for now and we can click Save and close so now if we check out our website and refresh it we would have a little hello thing right here but it doesn't look exactly like this one where it slides it has different little texts on it in order to make it look like this one we have to paste in some short code that the template came with so let's head over to the short code section of the demo website and click carousel so what you want to do is go ahead and just where it says get the code you'll just want to copy this code make sure not to copy anything else but this code and then let's head over to the module manager and let's go back to the text slider so let's go to custom output and we can delete the hello and then what you want to do is just for now click HTML and then paste in that code and then click update all right so it doesn't look like much but this shortcode is what's going to call up the little text slider so so our text slider will look like this alright so what we want to do is just kind of make this a little more neat so let's make a space right there right there so you want add image here on one line and then we can actually just get rid of the caption the whole caption tag so you want to get rid of the bracket caption and even the last bracket caption so the way this works is it's going to display the text that's in between the two Kara so item tags so right here is a tag and right here is a tag so this is the text that it's going to display so I'm just going to write hello and on a new line I'll write well to the best Joomla tutorial ever and then what I want to do is make this hello really big so I'll just highlight it and up here where it says paragraph I'll just click heading 1 and that's all you need to do if you click Save and check out your website we now have a new slide so if we want to make more slides all we have to do is come over to the custom output area and copy the carousel item tag the first one and everything in between and the second one and then I'm just going to make another space and another space right here and then just paste in what I just copied so now we have two slides as you can see we have two carousel item tags well actually we have four but what we want is to change the text in between the tags so if we change this to hey so now we have hello and hey click Save and check out our website now we have two different slides so the next thing that I want to do is add a little button below this hello that says learn more and then that button will bring you to the about Us page but before we do that I want to get a new text editor this right here is a text editor it's called a what-you-see-is-what-you-get text editor but I want to get a more advanced one that's going to make our job a lot easier so let's head over to Google and let's type in jce editor joomla and then let's click this top one up here and click downloads and click joomla 3 but if you're on 2.5 and make sure to click 2.5 i'm going to leave a link to this website in the description once you're here just click download under the zip file and once it's done downloading just drag it onto your desktop and head over to the place where you add add-ons to your Joomla website so that's going to be extensions extension manager and then you can just drag this in or click Choose file and click upload and install now once it's done uploading just head over to system global configuration and then you will see editor right here it says default editor and you're just going to choose editor jce click that and then click Save and close now if we go to our module which for me is text slider and click the custom output area we can see that our editor has changed it's a little bit different now and now it's going to be easier for us to add some more features and content to our website so let's add that button let's go over to the demo website and click shortcode button and you'll see the code right here so let's copy this and let's go over to the custom output area of our text slider so I want my button to be right under where it says welcome to the best Joomla tutorial ever so I'm just going to make another line by hitting Enter and then I'm going to go up here and click paste as plain text and then I'm going to paste in the code that I just copied and then that's going to paste my shortcode so the reason why I paste the shortcode as plain text is because if I were to just simply a press command or control V or just press pay it would actually paste some of the style from the demo website and as you can see there's like a little border around it and we definitely do not want that on our website so make sure you paste all the shortcode as plain text so after that I am just going to change this little dot to learn more so that's what I want my button to say and then you'll see button type and if we go over to the demo site if we look at all these different success info primary these are all different button types so if I were to write danger where it says button type I would get the red one or success is the green one and info is this blue one but I want success so I'm just gonna go over to my shortcode and erase button type making sure not to erase the quotations and then I'm just going to type in success and if I click save and refresh now I have a button but I want this button to be big and I want the button to link to the about Us page when you click it so to do that just go over to where it says button type use equals success and after the quotation after success make a space and type in size equals and a quotation and then type in large end quotation and then make another space for the link and you're just going to type in link equals quotation and then go to your website and go to the about Us page and then just copy this URL up here so just click copy and then again your going to paste the plain text so just paste as plain text paste it in and it'll paste right there and then make sure you end the quotation all right now if we refresh our Paige we should have a big button that links to our about Us page there we go so the next thing that I want to do is to add some more modules to my homepage and I want to add a bunch of little text modules that are also going to have some icons right underneath the text slider so let's do that now and let's go over to the module manager extensions module manager and then I'm going to create a new custom HTML module so I'm just going to give this one a name of amazing but I'm actually going to hide the title on this one because since we're going to be putting in some icons it looks better if we put the title in the custom output and I'll show you what I mean by that in a second so after that just let's find our position so let's go over to the demo site and let's go to module positions and then we want to find so it's under feature so it's going to be user it's going to be user one and that's the first one that we want to do right here so let's go to the module manager and let's go over to position and type in user 1 and then let's go to the custom output and I've already prepared some text so I'm just going to type in amazing right here make another line right below that and then I'm just going to copy this and oops I'm just going to press command V and paste it in and then I'm going to take this amazing highlight it and where it says paragraph right here I'm going to change this to heading 4 this will make it a little bit bigger and then I want to add my icons so let's go over to google and type in Dry icons and it's going to be this site called dry icons calm and click free icons right up here and I'm just going to find some icons that I like and these ones look good so I'm going to click view and download and I'm going to download them to PNG so right here where it says PNG so once that's done downloading just throw it on your desktop and unzip it alright so thank you dry icons and what you want to do is to put your cursor right at the beginning of this sentence and then you want to hit image right here so after that just go over to where it says upload file on the bottom of this frame and let's go over to the icon set that we just downloaded go to the PNG folder and then the size that we want is 64 by 64 so click that and then we can choose our icons so this one I want it to be ah sure this one so I'm just going to click open and I'm going to click a start upload so this is going to upload the image to my website but now I have to insert it into my article so I'm going to click the image and then set the align to left this will make it so that text wraps around the image and then I'll click insert right up here so now you can see text representation I Slee and if we go over to menu assignment and assign it only to the home page unless you want it on other pages and then I'll click Save and close and if we check out our website now we have one a text module right underneath our text slider but I want to add some more so let's do that now let's go over to the module manager and click new and go to custom HTML and this one is going to be called it's easy but I'm going to hide that title and I know now that it's just going to be user one two three and four so I'm just going to set this one to user two and I will set the custom output to it's easy I'll make a line I'll write my description and then I'm going to upload my image so I just got to find the right image for it's easy and this one looks fun so I'll just do that click start upload now we have to insert it into our article so I'm going to click this set the align to left and click insert and then make sure you set the it's easy to heading for and set the menu assignment to only on the home page click Save and new and test it out there we go looks good and so let's keep adding more this one's going to be customizable hide the title user 3 I'll just put in my text make this the heading for style put my cursor at the beginning of the sentence and click image and choose files this one will work this one's better start upload select my image align it to the left and insert it then we have to make sure it only shows up on the home page save and noon we have one more to go so this one's going to be called step by step and it's going to be user for so I'm going to align it to the left and insert my last one all right I'm just going to save and close that and now we should have four nice new icons and little features of our website so the next thing that I want to do is to add a little paragraph right here which is just going to be like a little description of our company so to do that we have to edit the home article because this is an article right here so let's go over to the content article manager area of the back end and click the home article that we created so I'm just going to paste in this little paragraph that I got from Joomla and I also want this paragraph to be a little bit more stylized so if we head over to the shortcode area of the demonstration website and click alert we'll see a few different styling settings that we can do with like a little alert thing what I want to do is make it look like the success one but unfortunately they don't give the shortcode that makes it look like this but I figured out a way you can do any of these so if you just go over to the article and type in your paragraph and then you'll want to hit this little button right here that says source code editor and then you'll just want to make a space right after this P tag right after right after the P in the P tag I should say like that and then just type in class equals and then a quotation mark and then type in alert and then a space then type in alert - success so that I'll make it look like this one right here hopefully and let's click Save and close and refresh it now we have the green text but I don't want these two home things or any of this information or this next button here so let's get rid of that now to get rid of this home let's go over to menus main menu and then click the home menu item and then under advanced options you'll want to scroll down until you'll see page display options and then where it says show page heading click and know so if we save and close that and refresh our page got rid of one of those homes and now to get rid of the next one let's go over to content article manager and hit options up here and then right here where it says show title you'll just want to hit hide and to get rid of the rest of that stuff just click no or hide to the rest of all of those things so make sure all of these are read if you don't want that information on your website and click Save and close so now hopefully it looks a little more clean and simple and that completes the home page and before we start adding more content to the rest of these pages I want to show you how you can change some of the options on the layout like changing the logo or changing some of the coloring options and I also want to show you how you can actually change the layout of this template for example if you wanted the logo on the right hand side or these modules to be above this text slider I'm going to show you how you can do all of that so let's go into the back end and let's go to extensions template manager and let's hit the shaper helix to template right here so this is kind of the back end of this template most templates do not have a back end that's the speech of rich but this is why I really like this helix framework template it's really cool so let's go over to the basic tab and I want to change the logo so you'll see logo right here and if you already have a logo prepared you can just upload it by clicking select and clicking Choose files and uploading it but if you don't have a logo I'm going to show you how you can really easily create one for free so let's go over to pixlr.com that's p IX l our comm and let's hit the Pixlr editor right up here and click create new image and let's make it around 90 by 40 you're going to be a little bit wider if you have a long company name and you'll want to click the transparent button right here so we can tell that it's transparent because it has a checkered background and this is going to make it so the background on our image is going to show the background on our website and I'll show you what I mean by that so let's just click the text tool and I'm just going to write logo and then I'm just going to choose my font and this one will do I'll make it a little bit bigger and I will make it a dark grey okay and I can move around the font by clicking this tool and just moving it like that so once you're done making your logo obviously you want to get a little more creative than this just click file save and under format make sure to click PNG and make sure to write your file name and make sure to type in PNG after it or a dot PNG I should say so just name your file logo dot PNG or something like that click OK and save it on to your desk top or wherever and we can close this up now under logo just click select click Choose files and now just choose the file that you just created click start upload and once it's done uploading it just click the file once and click insert and we can change this to the actual width and height of the image that we just created and that's it for the logo so if we save this and refresh our page we now have a new logo right up here at the top the next thing I want to show you how to do is how to change some of the coloring options on this website so let's go over to the layout I'm sorry let's go over to the presets tab right here and if we were to click one of these presets like this one and save it we could change the color of our website but you can also change some of the more coloring options if you just click right here and you can select any colors that you want but I'm just going to use this blue one and if you want to actually change the layout of this website you can go to the Layout tab and let's say I wanted my logo to be on the right-hand side I could just go over to the little logo box and click the four-way arrow button and just drag and drop it to the right hand side click Save and now if we refresh our page our logo should be on the right-hand side but we can also change around like the some of the bigger elements on this page if I wanted these modules to be above this one I could just drag the users above the feature click Save refresh and totally changed the layout of our website but I'm just going to change it back and I'm going to leave the options at that but there are a lot more options to play with if you go into fonts or advanced but you can definitely just dig in and try different things out so I'm just going to leave it at that save and close and let's start working on the services page so all the services page is is going to be just a image and some text a few paragraphs that wrap around that image so let's go over to the article manager and let's hit the services page and now I'm just going to paste in or write some text into the body of my article so I'm just going to grab some text and paste it in and now I want an image right over here on the left hand side and the text to wrap around the image so I'm going to hit the image button and I'm going to upload my image click start upload select my image and align it to the left so the text wraps around it and click insert but now if we save this and refresh our services page for me there isn't enough space in between the text and the image so let's learn how to make a little bit of space also known as padding in between the text and image so let's go over to our article and I'm actually just going to delete the image and what you want to do is hit this button right here that says inserts a new table and under columns just set it to 1 and under rows set it to 1 under cell padding and this is going to be this space just set it to about 15 and definitely set the alignment to left and that's all we have to do for that click insert and the cursor will automatically be in the middle of the table so just hit image then we can insert our image within that table and you do not have to align it to the left since the table is already aligned to the left so just select it click insert save it and now our image has a little bit of space in between the text and image so next step is the about Us page and the about s page is going to be a little bit different than the services page the about Us page is going to have a little image slider with some pictures of my fictional company and then it's going to have just a couple paragraphs and it's going to have a little testimonial module on the right-hand side so let's go and make the paragraph first close this up so I'm just going to go into the about Us article and I'm just going to paste in a little of this text and maybe a little bit more and that should do it for that so that's all I need to do for the article now I want to make a little module on the right-hand side that's going to be a testimonial so let's go over to the module manager and let's click create new and custom HTML since it's just going to be text and I'm just going to give it a name of testimonial but I'm going to hide the title and the position is going to be if we look at the module positions page we can see I want it on the right side of the main body so it's just going to be right change it to right and make sure it's right under the shaper helix to template and then let's go to the custom output and let's go to the demo site so let's go over to typography and then we'll see a few settings for these little bubbles and this is what I want my testimonial to look like so I'm just going to copy this shortcode and paste it into my custom output but making sure that I paste it as plain text click insert and then I can change the author of the testimonial because act as you can see there's kind of like a a description and then there's the author so I'm going to just change this to my name and I'm going to change this text to some of this text right here like that and set the menu assignment to only on the page is selected select none of them and then only select the about Us page so now if we save that and refresh our about Us page we should have a nice testimonial right here I'm actually going to add a little bit more text to the article so it fills in a little bit better down here so I'm just going to do that real quickly save and let's refresh that all right that looks good now if you want to change some of the colors on this little bubble you can by going into the module manager and if we check out the shortcode on our testimonial we'll see that there's some color options so these are called hex colors and it says bubble background FFF color 666 border CCC these are all different colors and if we look up on Google hex color codes we can see all different types of options so if I were to choose this one for the background and just paste it into the background color like so oops that's why I pasted it as plain text I don't know why that's not working and all right I'm just going to type in 999 and click Save and if i refresh now my background should be a different color but I just want it to be what it was before so I'm just going to change it back to white and you can mess around with more coloring options just by messing around with the the bubble shortcode but you can also change the border size right here it says 3 pixels and the color right here where it says color 666 is the actual text color the border obviously this one's the border color and this is the background color alright so that concludes the article and the testimonial so what I want to do is now add an image slider right above all of this so I'm going to make a new custom HTML module and I'm going to give it a title of image slider and I'm going to hide the title and then I want to check out some of the module positions but I think I want it to be in the users module position and even though there's something above the users position since I'm not using the feature position the users position is just going to fill in kind of where the feature position is and I'll show you what I mean so let's go over to the module manager click custom output and then I want to insert an image slider right into here so let's go over to the shortcodes and let's click carousel so I want this image slider so I'm just going to copy this and I am going to paste it as plain text insert all right so let's make this a little neater by adding a new line where it says add image here adding a new line after add image here and having caption on a new line and carousel item on a new line so all we have to do is erase where it says add image here upload an image and you'll want to make sure that your images are around 984 by 300 or something around that if you need to resize your image you can just go to the Pixlr editor again so let's click this one click open start upload then I'm just going to select it and insert it right there and then I can add a caption and this one's going to say look at our awesome company so now add another slide or actually let's first see if that works oops forgot to set the menu assignment to only on the about Us page so I'm just going to refresh this and that did not work because I did not set the position so I'm just going to set it to user 1 right there and click Save so I'm going to refresh this and now we have a slide so I'm just going to add a couple more slides by going into our custom output area and then I'm just going to copy everything from the last caption tag excuse me I'm going to copy everything from the carousel item tag to the first carousel item tag like that and then I'm just going to make a new line and click on the press control-v or command-v if you're on a Mac and I'm just going to do that again right under it and I'm going to erase the second image and insert my second image insert that change the caption and let's do the third one let's insert it all right so now if we save that we should have three images with three different captions and that completes the about us page oh and if you do not want a text slider on the home page and you want an image slider all you have to do is just set the menu assignment on the image slider to the home page so from there let's go to the FAQ page and the FAQ page is just going to display a bunch of frequently asked questions and when you click on any of those questions the answer is going to slide out it's called an accordion so let's go over to the demo website and let's go to shortcode and let's click on accordion and let's highlight this and copy it and then let's go over to the article manager and let's click FAQ and usually when pasting shortcode I'd usually say paste it as plain text but with the accordion shortcode it's a little bit easier if you just hit this source code button right here so let's hit that and let's paste in the shortcode so all you have to do is change item title to the question so the first one is going to be what is Joomla and then where it says add content here you just change that to the answer and just keep doing it until you complete these and if you want to add another question all you have to do is just copy one of these where it says accordion item and make a new line and then paste it so now if we go in save this and refresh our FAQ page we should have a nice accordion FAQ so from there I want to do the contact us page and the contact us page is just going to have a big map on the top and then it's going to have a nice contact form in the middle and then on the left hand side it's going to display some phone email and address information so let's get started adding the map to the top and let's head over to the template manager before we actually get the map and let's go to the shape or helix a back end so let's click the shape or helix link and under basic let's change the layout width to 940 and this will make it so the map doesn't get too big because we're going to have a 100% width map and I'll show you what I mean by that so after you changed your width to 940 let's head over to maps.google.com and just type in your address and hit this little link button right here click customize and preview embedded map then you'll want to hit the map size and put it as custom and then set the width as 940 and you can keep the height to 350 and you can move this around if you want to and then down here at the code just right-click or control-click if you're on a Mac and click a select all and then hit command or ctrl C to copy the code so you can close this up and also close this up and before we paste in the map code that we just copied we have to change a setting on our new jce editor to allow iframes so let's go to components jce editor and let's hit profiles hit default and on the top where it says plugin parameters click that and then on the left hand side you'll see media support and where it says allow iframes you'll want to check it as yes so from there let's just save and close that now if you didn't allow iframes this map thing will not work so you must enable iframes from there let's go into the module manager click new and let's make a custom HTML module and I'm just going to name it map I'm going to hide the title and I know now that I want it on my user 1 position the same position as my image slider so I'm just going to change this to user 1 and under custom output I'm going to open up the source code editor and just press command-v and that'll paste my code and you'll want to change one thing which is the width right here let's just change it to 100% and that'll make it so that the map responds or resizes with the template if you're on a smaller screen like an iPhone or any other other mobile device so let's set the menu assignment to only on the contact us page and let's click Save and close so now we have a nice big map on our page and the next thing that I want to do is to add a contact form to on the bottom of this page but unfortunately when I made this the walk through the demo walk through at the beginning of this video I use the Fox contact form which is a Joomla module but now they started charging for that so we're going to have to go with another form which is called wufu let's head over to wu phu kham that's w UFO and these guys make really cool forms for websites but you do have to sign up but it's completely free so just click sign up for free enter in your email password account URL can be anything and agree to the terms and click create account alright from here you'll just want to create a new form by clicking the new form button right here and then on this form all I want is a name field an email field and then a big paragraph field so let's just drag in a name field like this let's drag in an email field and let's set these two required by clicking them and clicking required and then let's add one more field by dragging in a paragraph field and from there I think that's all I want we can give it a name which is email form and let's click the save form so once you saved it click setup email notifications and insert your email right here and set this set the to reply to to email this is this will make it so that people and you can respond to these emails and I'll email people directly so after that just click Save and let's go to the forms tab up here and where it says email form or where it says your new form name just click the code button and click the embed form odhh so you'll just want to copy the javascript version right here just copy it and we can close this up Thank You Wu foo forms and let's go over to our where are we going we're going to the article manager and let's go to the contact us article so all we have to do is just open up the code editor right here and just paste in what we just copied then we can save and close that so now we should have a nice new form on our website and then the next thing I want to do is to add a couple side modules with some email phone and address information so you probably know where we're going by now let's head over to the module manager and let's create a new custom HTML module I'll name it contact details and I will show the title and then let's check out our module map and this is the main body so I want it on the position called left so it's going to be directly on the left side of this email form set it to left on the shape or helix template and then over custom output here's where we can add our information so I'm just going to write my address and you'll want to hold shift and press ENTER to make a new line if you're doing an address that'll make a smaller line that's when I press shift and enter but if I were to just press Enter it would make a bigger space in between the two so I'm just going to hold shift press ENTER and write the rest of my address and then I'm going to hit enter maybe two more times and write my phone information and hold shift and press Enter write my email next I want to add a couple icons right here and right here so let's head over to the demonstration website and let's go to shortcode and let's go to icons so let's copy the shortcode right here and let's go to the Joomla custom output editor and let's just paste it as plain text at the beginning of both of these little sentences and we can get rid of the dot actually doesn't do anything click insert make a little space right there and then do the same thing for this one paste as plain text paste it get rid of the three dots insert it and make a little space between the icon and the phone number or address all right from there we can just check out these icons and see which one we want to use and I know I want to use this one right here so I'm just going to copy the icon - map - marker and where it says icon name I'm just going to replace it by pasting plain text and I'm going to do the same for the phone number and email and it's going to be this one right here called icon - comment and I am just going to paste it right here all right so let's set the menu assignment to only on the contact us page and let's click Save and close all right now we have some address details some phone and email details contact form and a map on our page now the next thing to do is to add some Facebook and Twitter icons to the bottom down here so let's head over to Google and let's type in facebook like button and it will be this top one and where it says get the code you'll just want to type in your URL and I don't want to send button I'm just going to get rid of that and I want my layout to be button count and you can change the width to 100 and then just click get code so it's going to give you two different pieces of code this is one right here and this is another what you want to do is just copy the first one and before we paste in the first one into a new module let's go over to the jce editor options again so go to components jce editor profiles click the default profile and under editor parameters just go to advanced and then where it says allow JavaScript click yes then we can save and close that and let's go over to the module manager and let's make a new module for our Facebook and Twitter icons so that's going to be custom HTML and we'll just call it Facebook and Twitter now let's check our module map and I know I want it on the bottom so it's going to be maybe footer one footer one and then over at custom output let's open up the code editor and paste in the code that you just copied and hit the code editor button again so from here you'll just want to make a new table by clicking this button right here and we want the table to have two columns and one row so set rows to one and then click insert and you can drag this out a little bit if you want to and then let's open up the code editor again and you'll see a bunch of code but what you want to look for is the for TD tags you see TD & nbsp let's just erase the an and bsp between the first TD tags and let's go over to the Facebook code page and let's get this code right here copy it and paste it in between the first TD tags alright from there let's make sure that the menu assignment is on all pages because we want the Facebook and Twitter icons to show up on all pages and let's click Save let's test it out and now it's over on the left-hand side but actually I want it on the right-hand side so it must be footer - all right let's try that now that we have a Facebook icon I want to add a Twitter icon right next to it so let's go over to Google and let's type in Twitter buttons and it will be this top one right here and I like this one where it says share a link so we'll just keep use pay each URL checked off and then if you want to add some tweet text custom tweet text or if you want to show the count which will be right here on the right-hand side of the Twitter icon you can hide it or show it and you can set the via to your Twitter name or hashtag and you can use a large button but I'm going to use the small one and then what you want to do is just copy this code right here and then go to the custom output and let's open up the code editor and then over at the second TD where it says and nbsp what we want to do the same thing just erase the an and bsp and the semicolon and paste in the code that we just copied alright let's check it out now we have a Twitter and Facebook like buttons and as a finishing touch I want to show you how you can get rid of this helix logo and change this copyright information if you want to so let's go over to the template manager extensions template manager and let's go over at the shaper helix back-end and let's go to basic and then down here where it says helix logo you can choose to hide it you can write your copyright information right here you could write your company name and you can either choose to hide the copyright altogether but I'm going to show it and I'm going to hide the helix logo and I'm going to click Save and I'm going to check this out so now the helix logo is gone we got our Facebook and Twitter icons and we got all of our pages so that concludes this tutorial I hope you liked it and if you have any questions leave a comment below

Channel: iLoveWebDev

Views: 662,904

Keywords: joomla tutorials for beginners, how to, Joomla (Software), walkthrough, joomla 3, cms, how to make a website, joomla how to, joomla tutorial, joomla 3 tutorial

Id: CiPzIiTWnLM

Length: 85min 57sec (5157 seconds)

Published: Wed Apr 03 2013