hey, everyone! itâ€™s emediacoach here.it's very very easy to make a website using wordpress. i'm going to showyou how you can get this $3,000 website for virtuallynothing. the purpose of this tutorial is to help all of you out there who havebusinesses want to attract more customers and need an awesome looking website todo that but do not have the budget to pay thousandsof dollars to web designers. so we will show you how you can get allof this. creating this is not difficult at all. if you have ever used a wordediting software, you'll be able to do
this without any fuss. the web design here was done by the guysat site origin. we're going to help you implementthis, as well as other essential website settings and plugins and configuration items onyour behalf, so that you can get off the ground andrunning as quickly as possible. i'll take you through some of itsfeatures. a lovely drop-down menu that you see here. a lovely image slider that automaticallychanges every
x number of seconds. you can customizethat. a nice home page here that you can customizeand make it look any way you want. any items you see here are completelycustomizable. you can add, edit, removed, move around.basically, close your eyes, picture what you want your homepage to look like, and you will be able to do that. a lovely dynamic google map where your customers can zoomin, zoom out, and find your location ofbusiness very easily. and also, weâ€™ll show you how to integratesocial media icons
onto your site as well. we willpre-install a contact form, so that will already beready by the time you receive this website. allyou need to do is update your e-mail address, and then customers can come in here, fillout the details, and youâ€™ll receive those details in your e-mail inbox, and then reply directly to them. checkout this awesome image gallery here. it opens up into a beautiful box feature thatyou see. users can scroll through
all of your images, and this is also another item that ispre-configured so you don't really have to do much except add your images. as you cansee, this is a beautiful effect. it's a lovely feature and you can expectto pay thousands of dollars for something of this quality outside in the real world. the design is responsive, which means itworks flawlessly on a mobile. the image slider works perfectly. and as iscroll down,
every other element renders absolutelyflawlessly on the on the mobile device. not to forget forusers that are on the go, the google map can still be usedeffectively. i can zoom in, zoom out. move it around, and therefore your customers will beable to find your location of business very veryeasily. why don't you grab your own phone, go to emc vantage demo dot com, and you can see it how works on yourmobile phone. everything you see there on your mobile
is included with the website design,therefore you can see that we're going to be creating an awesomewebsite here. everything you see here is managed through wordpress, the wordpress contentmanagement system or cms. some of the most well-known namesaround the world use wordpress for managing their web sites.and you're going to get this pre-installed as well. all the features you see are freeonce you have your domain and hosting sorted.
and as iâ€™ve said, our goal is to show youhow you can get this $3,000 website where you can expect topay that much in the real world for virtually nothing. word press is one the world's most popular and easy to use content managementsystems. now that's a big term. but don't worry,it's a very very simple thing to use. if you've ever used microsoft word orany word-editing software, you will be able to use wordpress. smalland large businesses around the world rely on word press
to manage their entire sites. here issome clear examples - new york times, cnn, forbes, reuters. looking down this list, there are some bignames in here, and they all rely on wordpress. best of all, it's actually a freeplatform. that doesn't mean it's no good. it isincredible. things you can do and the things thatyou can customize using wordpress, and at the same time, very very easy touse. that's what most of this tutorial is dedicated for.
once we set up and configure yourwebsite, the rest is dedicated to you customizing your site and addingthe content and pages that you want shown. let's begin. let me give you an overview of whatwe're going to do. first, i'm going to show you how to get your dot com domain name and web hosting. this will cost you about $5 per month, and are the only twoessential that you need
for running a website. as you probably already know, a dot-comdomain is where your website lives, and web hosting is where your website'sfiles are stored. without web hosting, when somebody goesto your dot com domain, it would simply just load up a blankpage. so therefore, these are the only two things that are absolutely essential, and also you how you can get that forliterally a few dollars a month. it's not difficult at all. secondly,we will set up and configure your website design,
and other essential settings. we will do this for you for free. by doing this for you, it allows you toget up and running as quickly as possible. and thirdly, weâ€™ll teach you how tocustomize your entire website. and this will also be free. this page of our website contains justabout everything you need to know about our web design and setup offer to you. if you go to emedia coachdot com
forward slash web dash setup, you'll see itsummarizes everything you need to know. step 1. we will show you how to get your dot comdomain name and hosting. step 2. all you need to do is complete this form. step 3. you sit back and relax while we do thehard work. my team will take their time to set upand configure all your essential settings, as well asthe web design we showed you
at the beginning of this video. andexpect to hear back from us within two to four days, often much sooner. solet's get straight into it. the first thing you need to do is get adot-com domain name and web hosting. i'll show you theeasiest way to do that. go to host gator dot com. host gator are one of the world's biggest and mostreliable providers of domain names, as well as web hosting.we use them ourselves for our emedia coach website, and so iwouldn't recommend anything that i don't
actually use myself. as you can see, theyâ€™re currently hostingover 9 million domains. they have great support. they've got a 45-day money back guarantee no questions asked if for whateverreason you do not want to continue with them. and they've got a great live chat systemhere as well. if youâ€™ve run into any issues, it's a 24 by7 live chat technical support. or you cangive them a call, or send them an e-mail. so 24/7 support, and
45-day money back guarantee, andeverything for about $5 a month. let's have a look at their web hostingplans. theyâ€™ve got three to choose from - hatchling, baby,and business. the business is not something you'llneed. the hatchling and baby, the main difference isthe hatchling allows a single domain to be hosted with them,so a single dot-com domain name. whereas ababy plan allows unlimited domains to be hostedwith the same account.
most people have just one business, andtherefore will just have one dot-com domain. and likely, youâ€™ll fall under that category,so it's sufficient for you to acquire the hatchling plan. the goodnews is that is also the cheapest plan available. everything else is pretty much the same.go ahead and click the â€œorder nowâ€ button. you want to make sure the â€œregister a new domain tabâ€ is clicked. then, take a second to think about whatyou want your dot com domain to be.
enter it into this box here. it will do asearch to check if that dot com is available. ifit is, you will be the new owner of that domain.so let's try it jim's physio dot com. now i know thisdomain isnâ€™t available because we've used it for something else.therefore, it will come up with this notification, â€œplease enter another choice. jim's physio dot com is unavailable.â€ sotherefore, you might have to go back and forth a little bit until you find a domain name that youwould like to own and that is available.
for the purposes of this demo we're going to register a domain called emc vantage demo. now, you would obviously have something thatrelates to the name of your business dot com. you'll see a notification,â€œcongratulations! the domain is available and hasbeen added to your cart.â€ then once you scroll down, ensure that the correct package type isselected. we are going to be purchasing a hatchling plan, which is the cheapestplan.
select a billing cycle that you'recomfortable with. i want you to skip all of this informationand just scroll down to the hosting add-on section. de-select any of the hosting add-onsthat are already selected. the reason is these are not essential. theyâ€™re great if youwant them, but they're definitely not required. now,scroll down a little and have a look at your total due. hostgator will apply a standard 20% discount off yourorder, and you can see that here.
this total is made up of your hostingcost, plus your domain registration cost. andthis domain registration here is for an entire year, not per month. nowgo to the coupon code box. delete whatever is in that box. and ifyou've read the page on our website, youâ€™ll notice that we require you to useone of two coupons for us to be able to set up andconfigure your website and the web design for you on yourbehalf. use the coupon, â€œmyhostmost,â€ m-y-h-o-s-t-m-o-s-t.
then, click the â€œvalidateâ€ button. immediately, you'll see that the total duehas changed and is now less than what it was just asecond ago. that's because this coupon actually givesyou a bigger discount than host gatorâ€™s default 20% off. it will always give you a biggerdiscount to the default discount. as an alternative, there's also anothercoupon that you can use if you want to get the first month ofhosting for just one cent. so if you scroll up, select one monthfrom the billing cycle.
go back down. it's currently about $20. enter the coupon code 1centgenius, 1 c-e-n-t g-e-n-i-u-s, and click â€œvalidateâ€. youâ€™ll notice that the first month ofhosting is just $0.01. so therefore, there aretwo coupon codes you can choose from, either myhostmost or 1centgenius. myhostmost gives you 25%off
your entire order, whereas 1centgenius gives you your first month of hostingfor $0.01. to have our team professionally set upand configure your website, you need to useone of those two coupon codes. the reason is from time to time wereceive a small referral commission from host gator, and essentially this helps us cover ourtime and labor costs that goes into setting up your website.without that, we wouldn't be able to do this for you,
so that's why it's essential that youuse one of those two coupon codes, and in return you do get a biggerdiscount. and we really appreciate your support. if you are more comfortable paying on amonth-to-month basis, then go ahead and use this coupon codeyou see here. that's absolutely fine with us. for thisorder, i'm actually going to change it back toone year. go up, and select a username and securitypin for your account. now,
enter your billing information. itâ€™sessential that all of this information is correct because you will receive an orderconfirmation from host gator notifying you of your new accountdetails, as well as confirmation that your order was successful, and that you now own your new dot-comdomain, as well as the hosting that you require to be able to set everything up. i'mgoing to blur my screen here as i put in my details.
once youâ€™ve done that, scroll down. double check your details. tick the â€œi have read and agreeâ€checkbox, and then create account. immediately after creating your account, you will receive this email from host gator confirming your order details. you willsee that it contains your new account details, as well as the dot-com domain that youhave registered, which you now own 100%. goto your e-mail inbox,
open this e-mail, and keep it open. youwill need that for the next step. you've just completed step 1 of what we require to be ableto set up your website for you. now moving on to step 2, you just need tocomplete this quick order form, so that we've got all your details. first,choose your design, and in this instance it is known asvantage. enter your name and e-mail, and the domain name that you used toregister that will also be contained in yourconfirmation e-mail from host gator.
these two fields are optional - business name and business address.reason being, we can always add them in later on. but if you have them on hand, definitelyput them in. then in this box here, all you need to do is copy and paste thecontents of your order confirmation from host gator, so that's this e-mail. justcopy, and paste in there. hit this tick box, and then
click â€œokayâ€, so we can start on yourwebsite. if you've entered all the required fields,youâ€™ll get this notification. by the way, this small print, it's very simply just saying that you understand that yourwebsite will look and function exactly like the demo website that weshowed you. and of course, you will have a 100percent ownership. we will hand over all the logins and passwords upon completion, so it's all reallystraightforward.
once you've done that, step 3 is tojust sit back, grab a beer, and relax because my teamwill take the time to professionally set up and configure all the essential settings as well asthe web design on your behalf. it will be live as soonas we deliver it to you. you just need to update your content, andthen you're off and running. so sit back and relax. in about two tofour days, we will contact you via e-mail, and you'llhave a brand new website up and running.
this is what youâ€™ll received from us whenwe're done with setting up and configuring your websitefor you. there are a number of things that we'veplaced on this site as a placeholder. and as a scroll through, you'll see that we've added a few itemsin the menu here. we've added the image slider, and a couple the images just as anexample, as a placeholder. we've slotted in a few panels just here, and a few other elements
that you'll see including a map. now, all of this is absolutely customizable byyou. you can choose to include or exclude anyone or two or any of these elementsthat you see here. you can delete them, or you can add newelements. essentially, if you close your eyes and come up with what you want your homepage tolook like, you will be able to do that because everything you see here iscustomizable. they're all made up of differentelements on your home page,
and i'm going to show you exactly how tocustomize all of those elements. and guys, that's what the rest of this tutorial is all about. it's about meteaching you how to customize all the various bitsand pieces of your website. first things first, when we deliver yourwebsite, we will give you three important piecesof information. i'll just bring that across here.
youâ€™ll receive a url and a username and password. this is forlogging into your wordpress admin dashboard. now your wordpress admindashboard is where you'll go to customize your entire website. it'sthe area that you'll be using most, and so keep these details handy. first,copy and paste this url into your web browser. that's the sign-in page here. enter the credentials that we send you. and that's how you log into yourwordpress admin dashboard.
your first course of business is to change thepassword. go to â€œusersâ€. â€œall usersâ€. click on â€œadminâ€. scroll down. enter a new password inhere. then click â€œupdate profileâ€. while you're at it, also update this contact e-mail you see here with your own e-mail address, your own personale-mail address.
then â€œupdateâ€. this replaces the password that we gave you initially. soit's really essential that you keep this information on hand because anytime youwant to make changes to your website, you will need to log in from this pagehere. secondly, go to â€œsettingsâ€ and â€œgeneralâ€. youâ€™ll notice there is adefault â€œsite titleâ€ and â€œtaglineâ€. in the â€œsite titleâ€, enter yourbusiness name. delete whatever's in the
â€œtaglineâ€ section. also,update this e-mail address here with your e-mail address. and, scroll down and click â€œsave changesâ€. once youâ€™ve done that, go here and enter â€œwww dotâ€, the same in thenext field, then go down and â€œsave changesâ€. this will actuallyprompt you to log in again. let's go ahead and
replace this sample logo you see here. nowif you've already got a business logo ready, it'll be a really quick process. ifyou donâ€™t, that's okay. i'm going to show you howyou can get one made quickly and also cheaply. otherwise, whereyou can go and make one yourself. back into your dashboard, go to â€œappearance, theme settingsâ€. and under the â€œlogoâ€ tab, click on â€œchoose imageâ€.this will prompt you to choose an image from your media gallery.
go to the â€œupload filesâ€ section. here you can select the file from your pc,or you can just drag-and-drop if you've gotthe window open on your computer like you see here. so say for example, that's our new logo. you can justdrag-and-drop that in there. it will upload the image, and then you can â€œset logoâ€ using that buttonthere. then, â€œsave settingsâ€. now, letâ€™s refresh our website. there you go, as easy as that.
if you haven't already got a logo ready, i'm going to let you in on asecret of mine where i get a lot of my design done. go to a site called fiverr dot com, f-i-v-e double-r dot com. this is an onlinemarketplace where you can buy basically anything, all kinds of services. searchfor â€œlogo designâ€. you'll see there are noshortage of people offering logo design services. you'll beable to look at their feedback.
so let's take a couple of them as an example.you could look at their feedback, their past work. scroll through and find a designer that you like. when youhave found somebody, you can join, become a member of thissite, then you'll be able to purchase one ofthese services for $5. actually, now it's about $5.50 including a $0.50 processing fee. really, for $5, you really getsome amazing designers.
so feel free to have a look around. it can be hit and miss sometimes, but youwill generally find somebody who's pretty good at what theydo. secondly, my other tip is if you don't have thetime or money to spend, simply go to a websitecalled online logo maker dot com. scroll down. start the online logo maker. i'll justget rid of this. delete. we can add a symbol. obviously, you can choose something that
perhaps relates to your business. i'llstick with that, and you can add some text, and you can also resize. in this drop down here, you can change font, and also change colour. when you're happy with what you'veproduced, ensure the background color is set to white, thengo across and download logo. that's it.
now, that file is saved onto your pc. if you go back into your dashboard and sameas before, go to â€œchoose imageâ€ over here. â€œuploadfilesâ€, and â€œselectâ€ the files, which we just saved,and â€œsave settingsâ€. let's see how thatâ€™s turned out. there we are. you may not be completely happy with itthe first time. you can always go back in, change thingsaround, change colors, change sizing, fonts, etcetera, etcetera,
until you get something that looks nice.for about five minutes of work, it really is a good solution if youdon't already have a logo ready. so i hope that's been useful for you. now we get to the fun part guys, this â€œimage sliderâ€. you can nowstart putting in your own images into that slider. and once again, justlike with a lot of other things in this video, allthe settings and configuration has pretty much already been done. sothere's really not too much for you to do
except adding your own images. going back into the wordpress dashboard, go to â€œmeta sliderâ€, and click on â€œmeta sliderâ€. you'll see there are a number of settings here. to behonest, you don't really need to touch any of them because everything has beenconfigured for you. the only thing you may want to change is the â€œslide delayâ€. this number here isthe number of milliseconds between each slide, so that thereis
seven seconds. you can change that, and then click â€œsaveâ€. another thing you may want to change is the height of each slide â€¦ sorry, the height of eachimage. so currently, that is at 400 pixels. if ichange that to 600, and â€œsaveâ€, iâ€™ll show you what itlooks like. there you go. similarly, if i change it to just 250,
there you are there. so it's all about finding the rightbalance. i like to keep it around 400. now, once you've got your images ready, all youneed to do is delete the ones you see here. then, go to â€œadd slideâ€. â€œupload filesâ€. now, go to the area on your pc where yourimages are stored. so say these are the
ones we want to includein our â€œimage sliderâ€, you can highlight all of them like that, and clickâ€œopenâ€. that will actually start uploading all of your images to image gallery â€¦sorry, our image library, which we can later edit, or delete,or do anything else. so everything you dohere is not locked in. just so you know, it's completelycustomizable and manageable down the track as well. so let's justwait until all our images are uploaded. there we are. once that's done, ensure the imagesyou want
are checked off like you see here, andthen click â€œadd to sliderâ€. now that theyâ€™re there, you can actually rearrange them toappear in any order you wish just by dragging and dropping. then when you're done, click â€œsaveâ€. now, let's go back and see what our site looks like. there we are. if youâ€™ve changed the length of time between eachslide,
that will take effect. there we are. i think that's absolutely perfect. and asyou saw, there really was nothing much for you to do except uploading your images and making a smallnumber of customizations as far as thelength of the slide and the image height goes becauseeverything else was pre-configured for you. so that's all there is for adding sliderimages to your website. if you want to remove any, just go backinto that section there
and hit the â€œdeleteâ€ button. simple as that.i hope that's been easy. now, itâ€™s come time for me to teach you how you can edit allof these elements you see on the home page here.like i promised you earlier, you can change, remove, or add elements wherever you wish. essentially,you should be able to close your eyes think about how you want your home pageto look, and you will be able to achieve that. sowhat i'm going to do now is teach you the groundwork required foryou to be able to do that.
i think the best way for me to do thisis to literally delete everything you see hereand start fresh, so that you can see how i added all of these.therefore, giving you the tools and knowledge required to do the same inany way you please. back into my dashboard, go to â€œappearanceâ€ and â€œhome pageâ€. this tool here is known as â€œpage builderâ€. it is an absolutely awesome tool. it's one of thebest tools i've actually come across.
it allows you to customize any page to make it look exactly the way you wantit to look. these three elements here, â€œcircleiconsâ€ correspond to this circle icon panelsover here. the â€œvisual editorâ€ here, â€œwe are the expertsâ€ is just that bit in there. now this â€œvisual editorâ€ is an image, and these area few customer testimonials right there. and these two are â€œopen hoursâ€ and a â€œgoogle mapâ€. sowhat i'm going to do now,
i'm going to delete all of this. todelete, just hover over a row and hit the â€œdeleteâ€ button. if you want it to delete any elements by themselves, you canhit the â€œdeleteâ€ button you see there, and will delete that particular element. okay. i'll save that, and refresh. as you can see, i'm starting from a blank slate now. toadd a new row,
click that there. choose the number ofcolumns you want, and you can use this to adjust the width of each column. so youcan customize them, change the width, and be as precise as youlike. for the first one, iâ€™m going to add three columns. then, click the â€œinsertâ€ button. what i'm going to dois put the three circle panels in here. to do that, click on one of the boxes, and hit
â€œadd widgetâ€. go to the â€œcircle iconâ€ widget you see here, and you'll see thatup here. similarly, click on the second one. â€œadd widgetâ€. â€œcircle iconâ€, and the same for the last. iâ€™ll go through this bit by bit, so you know exactly whatchanges we're making. there you are. so now let's go and customize all that.click the â€œeditâ€ button you see here. now, let's give thefirst panel
a title. it could be â€œour productsâ€ or â€œour servicesâ€, whatever relates to yourbusiness. in this drop-down here, you'll beable to select an icon. this icon will appear in thatdark circle that he saw earlier, so feel free to use a bit of trial anderror. letâ€™s choose a rocket icon. now, set the icon size to large. and for â€œmore textâ€, we will come back andupdate this a little bit later when we have all the pages on ourwebsite ready. essentially,
this will be a link to another page onyour site together with the â€œmore urlâ€, which will take you to that page. for now,letâ€™s click â€œdoneâ€. we added the rocket icon. we changed theicon size to large from small. we added the title and description. later on, we'll come backand add a link just over here, so that this particulartile links through to another page on our website. now, let's do the same for the second andthird the next thing iâ€™ll do is add a sectionunder these panels
with some text in there. so back into thepage builder section, i want to add another row. this time i just want a single column insert. let's add a widget called â€œvisual editorâ€, and you'llnotice i use this â€œvisual editorâ€ quite a bit. it'sreally flexible, and it's also pre-installed, which means you don't needto install anything. it's all there ready for you to use. soclick that. hit the â€œeditâ€ button.
now, let's give that section a title. and now, i'm just going to copy acrosssome dummy text that i have on my other screen. this area here justacts as a word editor. if you've ever use microsoftword, this is exactly the same. once you'vedone that â€¦ now, the cool thing is i can actually change the order inwhich they appear just by hitting that â€¦ sorry, pressing downon that button and dragging it across. by doing that, i can
change the location of any of theelements on the page as you see there. now, say i wanted to add a background color to this element here. to do that, hover above this icon here, and click â€œedit rowâ€. now, we go to â€œthemeâ€, you'll see an area forbackground color. you can pick any background color fromthe palette
over here. iâ€™ll give it a light gray background. there we are. next, iâ€™ll add back the image and thetestimonials just under that section here. so let'sadd a new row, this time with two columns. once again,iâ€™ll add the visual editor in both. now in here, i want to add an image. click â€œadd mediaâ€, and â€œupload filesâ€.
of course, if an image is already uploaded, you canselect that image from your media library. once selected, ensure the â€œlink toâ€ is none, and the â€œsizeâ€ is â€œfull-sizeâ€, or alternatively â€œlargeâ€ if your original image isextremely large itself. and click â€œdoneâ€. okay. now, i want to add the testimonials. once again, this â€œvisualeditorâ€ is just like a word editing software. youcan do anything you like with it.
so we'll give it a title, and testimonials can be done usingthis little â€œblock quoteâ€ here. what i'm going to do is just copyand paste some testimonials from the other screenthat i have here. and there we are. last but not the least, let's add a â€œgoogle mapâ€ and some â€œopen hoursâ€ just under here. now this one, i want the map to be quite large. so
let's set it to say 30/70. if that's not right, we can always comeback and rearrange. now here, we want to add a dynamic â€œgoogle mapâ€. to do that, go to â€œgoogle mapsâ€. put in your exact business address. now, click on that icon here, and click
â€œshareâ€ or â€œembed mapâ€. embed. from the drop-down, select a custom size, and let's try 800 by 400. go here. copy that entire code. now in this â€œvisual editorâ€, ensure you go to the â€œtext tabâ€. theâ€œtext tabâ€ is used for any html or code that you would like toenter. if you enter in the â€œvisual tabâ€,
that code will not work. so we want to enter that into our â€œtexttabâ€. so paste that code in there. let's givethat a title, and click â€œdoneâ€. there we go. as you can see, the map is probably a bit too tall, so we caneasily go back in and change the dimensions. spend so on and so forth until you get it right. now, let'sgive this area a
little background color as well. i'm going to give it the same color that i gave the other row. so let mejust check what that was. i think iâ€™ll just make it a little bit lighteras well. okay. so that's really how easy it is. as you can see, we can add in anyelements we want in any position we want, and rearrange, and adjust the dimensions ofthis box to precisely the size that you wouldlike it to be. so feel free
to brainstorm and come up with how youwant your home page to look, and what information you would like topresent. and go ahead and add each one of those elements inthere. now, iâ€™ll show you how you can add, edit, and deletepages from your website. i won't be showing youhow to use the content editor just yet. just adding and deleting pages, and theni'll show you how to set up this menue area here, so that you canput the pages that you want up there
in the order that you want. and also, howto create a beautiful looking drop-down menu. so go back into your dashboard. go down toâ€œpagesâ€, and click â€œall pagesâ€. to delete pages, it'svery simple. just hover over the page you want todelete, and click the â€œtrashâ€ button. so let's get rid of the pages we do not want. iwould suggest you leave â€œhomeâ€ in there. donâ€™t mess with that, and also leave theâ€œcontact usâ€ in there as well. whenever you delete pages,
always remember to go back into thisâ€œtrashâ€ can here, and then â€œselect allâ€ and â€œdeletepermanentlyâ€. to edit a page, simply hover over and click theâ€œeditâ€ button. i will show you how to use this â€œcontent editorâ€here a little later. and to add new pages, just click the â€œadd newâ€ button and youcan add an unlimited number of pages on your website. so iâ€™ll go ahead now,
and add a few pages relating to ourdemo site, which is a flooring company. when you've entered a title, just clickâ€œpublishâ€. you'll see that the page gets assigned its own url, which is â€œyourwebsite dot com forwardslash the title of the pageâ€. you can edit that if you need, and alsoyou can come back and change the title at any time. here is an example of how to change thetitle or the url of the page. so let's take this one for example. clickâ€œeditâ€.
say i want to change â€œimage galleryâ€ to just â€œgalleryâ€. as you can see, the url hasn't actually changed becausewordpress knows that just because you changed the title of a page, doesn't mean that you will change theurl because they may be other things linking to this page. so to change the url, just click thisâ€œeditâ€ button, and change that manually. and as you can see,
this page takes on the new url. carpet, tiles, and outdoor. now, say under each one of those items, so for usfloorboards, carpet, tiles, and outdoor, we have another hierarchy of pages. so for floorboards we have solid pinefloorboards, and laminate flooring, for example. weâ€™llalso add a few types of carpet. and iâ€™ll add in a couple of types
of tiles as well. so that should do us for now. here are all the pages iâ€™ve just created. so obviously, you would need to plan out how you would like thehierarchy of your website to be. so top-level items, and then second levelitems. so for me, the top-level items are carpet, floorboards, tiles, and outdoor.
the second level items for example, the secondlevel items under carpet are plush pile, twist pile, cut pile, and textured pile. so that's just anexample to work your head around, and it's as easy as that to add newpages to your website. so once you've planned your websitehierarchy, go ahead and add as many pages as you wish. after adding all the pages, youâ€™ll noticethat the menu area looks very empty. so i'm going to show yousomething really cool.
i'm going to show you how you cancustomize this menu area, and also add a beautiful drop down menu. in your dashboard, go to â€œappearanceâ€ and â€œmenusâ€. you'll see that there is aâ€œmain menuâ€ assigned. all you need to do is tickoff the items you want to appear in the menu. and then, click â€œadd to menuâ€. now,everything else has been configured beforehand, so you don't need to worry.i'll show you what that looks like. you'll see we've added everything,
but currently it looks like a bit of a mess.what you need to do is order the menu items in the order in which you want to appearby dragging and dropping. the first thing i'm going to do is locate my first level pages, and they are floorboards. so iâ€™ll put that after home. tiles, and outdoor. okay. now, i had pages that we're going to fall
under each one of these four. and these aregoing to be our first level drop-down menu items. so underfloorboards, i'll put solid pine floorboards, laminateflooring. under carpet, iâ€™ll put twist pile, textured pile, cut pile, and plush pile. you'll see what i'm doing here. forsecond-level items,
you need to drag and drop such that theyâ€™reindented and that will appear below the item above it. so i can even go for a third level menu. say for exampleunder textured pile, i want to add polyester. by doing that, it would come under carpet. by making it indent, it would actuallycome under textured pile. and say for example, wool blend. okay. now, let's do kitchen tiles under tiles, and bathroomtiles.
weâ€™ll have contact us last. and that's about it for now. let's â€œsave menuâ€ and see what that lookslike. there we go. so if i just scroll my mouseover each one of these, and there you see the third level. and theseitems were single-level items. that is looking absolutely fantastic. and as you can see, all it requires isdragging and dropping the pages that you want in the order and in the hierarchy thatyou want them in.
another cool thing iâ€™m going to show you is inthis â€œlinksâ€ area here, you can actually add a link to any url and put it in the menu. so for example,that will appear here. now, i can drag and drop that and put itanywhere i want. if i click on that, it will take me tothat url. to remove any items, click the drop-down and hit â€œremoveâ€. to change the label, justchange that â€œnavigation labelâ€. so as you can see, that was really simple, andit made our website look a thousand times better. from a user'sperspective,
it's extremely clean, and easy tonavigate. once you know the structure of your website, you canimplement that structure and your customers will find it veryeasy to navigate through your entire site. let me quickly show you how you canchange the color of these menu items when youhover over them. go into your dashboard, and go to â€œappearanceâ€ and â€œcustom cssâ€. now, open up a new browser window, and go to â€œcolor picker dot comâ€.
first before you do anything, i'd likeyou to copy and paste that there onto a notepad fileon your computer in case you want to revert back to the original color. when you're ready, go to color picker. here, you can choose any colour you wish. youâ€™ll notice that every colour has a particular number attached to it, aparticular number or letter combination. it's known as a hex code. when youâ€™ve got the color you are after, just copy
and paste in there after the hashtag. then click â€œupdate custom cssâ€. refresh your site, and there you go. youâ€™ve changed the color of your hover menu.feel free to use trial and error. experiment because you can change thatas much as you like, but just make sure you do not touchanything else on this page except these numeralsright here. now, here is a quick intro on the â€œcontent editorâ€.
youâ€™ll need to know this, so you can goin and edit each one of your pages. most of thiswill be self-explanatory, but i'll go through itnonetheless. so let's go ahead and click â€œeditâ€ on thispage here. the â€œtext tabâ€ is used for entering any code or html. the â€œvisual tabâ€ works much like a word editor like microsoft word. so i canput in some text, i can set that as a heading.
iâ€™ll just copy and paste some dummy text i have ready here. that's all normal paragraph text. you can bullet pointthings. you can number list. you can also bold, italic, and also change color of any text you like by using that iconthere.
there you are. and you can also hyperlink. select the words or phrases that youwant to hyperlink, and click that icon there. by clicking this arrow, you can actuallyhyperlink to any page on your website very very easily. not only can you hyperlink within your web site, but youcan also hyperlink externally.
so if i highlight that, and that checkbox means that the link will open in a new window, whichmeans the user stays on your website. let's check it out. there we are. and as you can see, that one opened in new tab. to remove ahyperlink, click that icon over here. last but not least, you can add images. click on the â€œaddmediaâ€ link. you can either select an image
that's already in your image library,otherwise you can upload a new image, and selectone from your pc. ensure that the â€œlink toâ€ is none, and the size is sufficiently large. then, click â€œinsertinto pageâ€. you can actually link images to anywhere on your websiteas well by clicking on the image and selecting the hyperlink icon.
so as you can see, the content editor isactually extremely easy to use. if you've ever used microsoft word oranything like that, it will be a piece of cake. the next thing i need to share with you is a bit of information about â€œpagetemplatesâ€ and what they are. there are three types of â€œpage templatesâ€; aâ€œdefaultâ€ template, which has a sidebar; a â€œfull widthâ€ template,which means the page and content runs across thewhole screen; and a â€œcustomâ€ template built with â€œpagebuilderâ€.
templates can be selected from this drop-down menu here within each page. so as you can see, there's a defaulttemplate, which includes a sidebar. currently, this is thetemplate used for this page. and that's what it looks like. thecontent is over here, and then we have sidebar content. andthis sidebar content is of course completely configurable. iâ€™llshow you that in a second. the second template is â€œfull widthâ€.
now if i refresh that, you'll see the content runs acrossthe whole screen. the third, â€œfull width without a titleâ€. this carpet should disappear becausethat's a title. and the last one, we can actually build a â€œcustomâ€ templateusing â€œpage builderâ€. you will recall that earlieron in this tutorial, we set up our home page using pagebuilder. we can actually use that tool to set upevery single page on our site
if we like. and i'll give you an examplethat as well. but first, letâ€™s select default template,and i'm going to show you how to edit the sidebar. go into â€œappearanceâ€, â€œwidgetsâ€. youâ€™ll see in the sidebar section, there is already some content. that corresponds with what you see here. so essentially, you can delete
this right here. when you refresh your site, that will disappear and it will turn into a â€œfull widthâ€ becausethere is no sidebar. but now what you can do is add new widgets into the sidebar andput any content you want. so scroll down. ilike to use the â€œvisual editorâ€. once again, it is just like a text editor. very easy touse. you can add content, add text, add images,
etcetera, etcetera. letâ€™s see what that looks like. you can always go back in and edit what you see there. you can also add more widgets. simply drag-and-drop another visual editor. and youâ€™ll actually be able to choose which order you want things to appear. so if youdrag this and drop it above that there, itâ€™ll save. then when yourefresh,
you'll notice the information of that widget appears in that order. so you can goahead and edit the sidebar with anything youwant. you can actually add a â€œgoogle mapâ€ in there as well. that's a really good idea, and i'll showyou how you can do that a bit later on. essentially, anything you can add in thecontent area here, you can also add into the sidebar. now lets choose another page, floorboards. for this section,
let's try using the â€œpage builderâ€ tool. iâ€™ll add a new row. i'll leave two columns. what iâ€™ll do is iâ€™ll put two little circle icons. thetwo types of floorboards i had were solid pine, and i can put a link to our page on solid pine floorboards a little later.for now, click â€œdoneâ€. and i can add laminate.
you'll see that the two circle icons appear here, but we've gotthis this sidebar, which we need to get rid of. simply select the â€œfull widthâ€ page template. there we are. what i can also do is position the icon on the left. and iâ€™ll select an icon for this one as well. perfect. to add some space between the title
and the icons, you can actually add another row, and drag that above there. so that will look a little nicer. letâ€™s add links to our solid pine and laminate pages. so if i go to these pages, all i need is the url, and i can go back in here and enter the details. same thing
for the laminate page. there you are, and now the user will be able to clickthrough. once they come to your home page, floorboards, click through to laminates, and youâ€™ll have something about thatparticular section right there. so that's a breakdown of how to use theâ€œpage builderâ€ on any page. if you need more help withâ€œpage builderâ€, go back and have a look at how weactually set up our home page,
and it's exactly the same concept. justremember, if you're using â€œpage builderâ€, set the template to be a â€œfull widthâ€ page, and then you're good to go. so if youhave any doubts, go back and watch this section aboutsetting up the home page elements. and after that, you'll be able to set upany page on your site and make it look exactly the way youwant it to look. quick note, just letting you know, i'vetake the time to update a couple of the pages. so forexample, carpet. i've set this one up using â€œpagebuilderâ€,
and floorboards. i've just put some plaintext in this one here. so don't be alarmed if you see that thepages are a little bit different than what we showed you just a few minutes ago. i want to show you how we can update our homepage tilesthat you see here, and link them to specific pages of ourwebsite. in your dashboard, youâ€™ll remember it's in â€œappearanceâ€ and â€œhome pageâ€. it'sthese circle icons we want to edit.
let's make this one carpets. we can make a link text. and in the â€œmore urlâ€, just go back and find out what the url is, so thatthere. click this little checkbox, and done. weâ€™ll do the same for the nextcircle icon. let's link this one to floorboards. similarly, i can go in, get the url of the floorboardspage,
put it in there, and change the link text. you will see that has taken effect. so basically, a user can come through toyour site, click on to one of the tiles, andthey'll be taken through to the respective page. therefore, you can tell that the hierarchy and the user flow ofyour site is fairly important. so please do take abit of time in planning your hierarchy. as you already know, you can come backand edit these
links, all these panels in any way youwant any time in the future. another cool thing you can do is changethe color of the background of this icon. if you go into the circleicon widget, it's this field here that you need to enter a hexcolor. basically, go to color picker dot com. you'll see that as you scroll around, every color has a different code,
a number and letter code attached to it.that is known as a hex code. so if you just look for a color that you you are happy with, copy that code. place a hashtag, and then paste that code in there. press â€œdoneâ€, and â€œsaveâ€. let's see what that has done to ouricon. as you can see, that changed the color. so you can change the color of this to anycolor that you want really.
use trial and error. maybe match it up with your menu, andactually that's what i'm going to do. i know my hex code for the menu itemsis that right there. so i'll save that. i'm pretty happy with that. if you want to remove it, just go back and delete, and it will return back to the original.
now, i'll show you how you can add this contact form you see here anywhere onyour website. and also, let's configure it, so that when acustomer enters their details, that form will be sent directly to youre-mail, and you'll be able to reply back to the customer directly. if you goto dashboard, and go to â€œbws pluginsâ€. click on â€œcontactformâ€. the beauty of this is everything is already configured. wedid this when we took the time to set up your website for you. but,
all you need to do now is update thisfield here with your own e-mail address, your ownpersonal e-mail address because that is where the form will bedelivered to. here, you can edit the text that the customer sees when they submitthe form, or you can leave it as default. click â€œsave changesâ€. there it is. that text there corresponds with the text over here.
you can also edit the text that appears over here. if you go into â€œpagesâ€, â€œall pagesâ€, and find the â€œcontact usâ€ page, youâ€™ll noticethis page is set up using â€œpage builderâ€. so click â€œeditâ€ on this panel here, and you'll see the text. so you can update that as you need. also, to place that form anywhere on yourwebsite, all you need to do is copy and paste this little
tag you see over here. it's known as ashort code. so iâ€™ll show you how that works. let's go toany other page on our website just as an example. now, if i paste that tag in here and â€œsaveâ€, you'll see that theform appears on that page as well. so essentially, you can make this formappear anywhere on your website. you can also put it in the sidebar if youlike by going to â€œappearanceâ€, â€œwidgetsâ€, and pasting the tag
in there. there you go. when we deliver this website to you, you would have noticed that inthe â€œcontact usâ€ section, there is a map there. now let's get rid of this map andadd in a new map with your business address, so thatcustomers can find you easily. open up a new tab, and go to â€œgoogle dot com forward slash mapsâ€. now enter in your exact business address in here. as an example,i'm going to use this one.
youâ€™ll need to enter your exact businessaddress, of course with your street number as well. once you've done that, go down and click on the â€œgearâ€ icon, â€œshareâ€ orâ€œembed mapâ€. â€œembed mapâ€, here youâ€™ve got a number of preset sizes, or you can select a custom size, which iswhat we're going to do. leave the width at 800 pixels. change to height to say about 350.
now all you need to do is copy that code, go to the â€œcontact usâ€ page. let's get rid of this code you see here, and paste our new â€œgoogle mapsâ€ code. ofcourse, this is all done in the â€œtext tabâ€. if itwas done in the â€œvisual tabâ€ and i enter code in there, it would simplynot render. so let me show you what i mean. if iaccidentally do that, click â€œdoneâ€, â€œupdateâ€.
that code didn't render. but because wedid this one in the â€œtext tabâ€, that one did. you can change the text. and that's all there is to adding a google maponto your website. if you want to change the size, you can easily do that. so let's makethis one a little bit taller. so we'll just go back here, change thisto 400 pixels tall. once again, copy the code, go back in, and replace the code in there with a newcode. that's a bit better.
so as you can see, use trial and error until you get thesize of the map correct. and of course, you can always addmore text around it whenever you need to do that. so that'show easy it is to add a dynamic â€œgoogle mapâ€ wherecustomers can zoom in, zoom out, and easily find your place ofbusiness. and the beauty of it is this works on a mobile device as well. the contact form renders perfectly, and
so does the map. so even a mobile device, a user can zoom in, out, and easily beable to find you even when they're on the go. now iâ€™m going to show you how you can add an awesome looking imagegallery on to your website. most of the hard work is done. weâ€™veconfigured and set up a few of the basic essentials. so all youneed to do now is add some images, and iâ€™ll show you how to dothat. go to â€œpagesâ€. here you can
add a new page where youâ€™re imagegallery will sit on, or you can select an existing page. the first thing to do is ensure that the page you select is a â€œfull widthâ€ page. click â€œupdateâ€. now, go to the â€œadd mediaâ€ button. â€œupload filesâ€. if your images have already been uploadedand exist in the media library, you can select them. otherwise, youâ€™ll need toupload your image gallery files.
now, iâ€™ll select some images from my pc. iâ€™ve got them ready here. you can click onthe first one, hold down â€œshiftâ€, and click on the lastone, and that will select all. then hit â€œopenâ€. it will take a fewminutes to upload. once theyâ€™re all uploaded, go to the â€œcreate galleryâ€ link here. ensure the images you want to create the gallerywith are ticked, and then go down and â€œcreate
a new galleryâ€. here you can define how manyimages you want across in each column. i'm going to select five.i've got 10 images in total, so five plus five will look good. actually, iâ€™ve got11 here. iâ€™ll get rid of one. ensure in this drop-down, you select â€œmedia fileâ€, and then go down, and â€œinsert galleryâ€. if you're in the â€œtexttabâ€, that will show you some code. in theâ€œvisual tabâ€, you'll be able to see your images. now, simply just click â€œupdateâ€ and thatâ€™s about it. letâ€™s view the page. that looks
absolutely awesome. iâ€™ve got five across. you can change that if you like, by theway. that's completely up to you. when i clickon an image, you'll see that it opens up into a lightbox.there you are. so a user can go through your entiregallery, and scroll through your images. and this lightboxhere is already setup and configured on the website that we set up for you.that's why all you have to do was set up, and add your images to agallery. so it's very, very simple we've made itas
easy as possible for you. to make changes, go back to the page, and click the â€œpencil buttonâ€. here youâ€™ll be able to change how many columns â€¦sorry, how many images you want in each column. so you can play around and depending onhow many images you have, you can select the best layout for you.and there you have it, a beautiful looking image gallery thattook no effort. now, i'll show you how you can add somesocial media icons onto your site
very very easily. obviously, first youwould need your social media pages set up. for example, your facebook page, google plus page, maybe ayoutube channel, etcetera, etcetera. but once you have that, youcan easily set up some icons, so that visitors can access your site, and then click onto your social media pages to see moreinformation. social media is a great thing to build trust, and loyalty, and get yourcustomer base to speak
and communicate with you. you'll see there's a â€œsocial mediaâ€ widgetin the sidebar here. click on â€œsettingsâ€. here you can choose froma number of different ways that your buttons will look. i quite like that one there. so, iâ€™ll select that. choose your size. you can adjust the order in which theyappear. now, in these fields here, enter your social media urlâ€™s. if thereare any of these you don't have, that's absolutely fine. because
any field here that you leave blank, theicon will not appear. so you'll see when i do that here. i'mgoing to leave a couple of them blank. my twitter username, emediacoach. facebook url. so i'm only going to use these five here. pinterest and the feed url, iâ€™ll leave blank.and you'll see that those icons wonâ€™t show up. hit â€œsave changesâ€. once that's done, you can go to any sidebar or widgetarea
on your website, and add these social mediaicons to that area. so weâ€™ll add some on ourhome page. i might just had the icons in this areahere. click on the box, and â€œadd widgetâ€. select the â€œacurax social mediaâ€ widget, and that'sit. save the homepage. let's see what that looks like. cool. so we can actually
get rid of this heading,and we can change the size, and also align the icons left. to do that, go into the â€œeditâ€ button here. remove the title. change the â€œicon sizeâ€, and align left. it might make the icons a bit smaller, actually. there, that looks good. so as you can see, it's a great way tointegrate social media onto your website.
very easy and straightforward. congratulations on making it this farbecause you just got yourself a $3,000 website for virtually nothing. and what's more, you now know how tocontrol and manage your website all by yourself. we are in the process ofputting up more awesome videos to help your business. so don't forget thumbs up, and subscribe toour youtube channel by clicking on the â€œsubscribeâ€ button. ifyou have any questions, comments, or suggestions, we wouldappreciate it if you ask
them in the comments below. the reason is i'm sure many have you havethe same questions, and it would be great to answer all ofyou at one time. so don't be afraid to ask any questions, and we will be more than happy to help.do you have any other suggestions on videos you want us to put out in thefuture, let us know. and don't forget, share this with yourfriends if you think you know somebody that would find this helpful. thanks very much for watching.