We’re going to show you how to create this awesome website with WordPress in the next hour step-by-step, and it’s going to be super easy for you.If you’ve got a keyboard and mouse you’ve got the right skills you need to make this amazing WordPress website you’re looking at right here. We’re going to use WordPress which is one of the world’s most popular website platforms and also a plug-in called Elementor which is an amazing website builder and it’s perfect for beginners these pages that you’re looking at right here we re actually imported in just a few minutes with a few clicks of the mouse and thenthey were edited to customize our pages so it was super super easy to make thiswebsite it’s perfect for beginners and there was nothing technical involved so it’s the best way to make a website for your small business before you go to sleep tonight and here’s something else that’s really cool it’s perfectly responsive on the mobile phone as well go to this URL on your own mobile phone because we’ll keep this live just so you can see for yourself how it will be wheny ou finish yours in about an hour we’re going to go through this tutorialin a few easy steps firstly we are going to get online.
we’re going to get our ownwebsite domain name so that you can have your own address on the internet thenwe’re going to install the very popular WordPress platform to manage yourwebsite then we’re going to install the design and with a few clicks of thebutton we’re going to import ready-made professional-looking website buildertemplates that you’re going to be able to edit you can edit the pictures thetext at the buttons everything you can imagine and we’re going to go throughall of that step-by-step if you have any questions please do ask in the commentsbelow and we’ll be more than happy to help all of you out there we want all ofyou to succeed today so like I said we’re going to be using the WordPressplatform it’s used by about 70 to 80% of websites worldwide and you can see somevery popular names as I scroll down the page here companies such as eBay CNN NewYork Times jay-z Katy Perry and TechCrunch and a lot more used WordPress.
some way shape or form for their website we’re also going to be using aplug-in called Elementor and if you can use the keyboard in the whales you canuse this drag and drop website builder and it’s fast becoming one of theworld’s leading WordPress page builders so here is our agenda firstly we’regoing to get online we’re going to get you your com domain name and your webhosting because without that without those essentials you wouldn’t have awebsite and because you’re following everything with this tutorial that’sonly going to be about five dollars a month installing WordPress is step twothat’s going to be free because you’re going to be following this tutorial willshow you how to do all of that installing the design and usingready-made templates we’re going to show you all of that it’s going to be freedrag and drop click a few buttons and we’re also going to customize yourWordPress website which will become the fourth step and making a look exactlyhow you want in terms of images text contact forms and any othercustomizations that you need for your small business so let’s start with stepone getting online it’s the absolute bareessentials and then after that everything just gets even easier solet’s start building our WordPress website okay so let’s get to step one inour process to create this WordPress website and that is to get online andthat is the only way that you can get your website live
and online in the realworld so that your website appears anytime somebody types in your webaddress so what you need to do is go to hostgator.com forward slash discountedthat you are all over there and I’ll link it in the description below as wellyou’re either going to land on this page here or you’re going to land on theHostgator home page either way it doesn’t matter I’ll show you what youneed to do so Hostgator is what is known as a web hosting company web hosting iswhere all of your files are stored on the internet so that when anyone visitsyour web address your website shows up and is able to be accessedso without web hosting your website would not load it’s not enough just tohave a name buying that is just a name but the thing that makes your websiteappear and all the contents of your website is web hosting and it’s only afew dollars a month and that’s the beauty of this it’s very cheap and veryeasy and Hostgator are the company I’ve been using for around 13 to 14 yearssince 2004 so that’s why I recommend them they’ve generally got very verygood support 24/7
and you can read up on their services but what you need to dois go to web hosting the hatchling plan and the baby plan are very similar theonly difference is that the baby plan will allow you to add an unlimitednumber of web sites to your hosting account whereas the hatchling planallows a single domain to your hosting account you can always upgrade in thefuture so if this is your first web site just go to a hatching plan and click onthe button to go to the next step you can look at all the tech details if youwant to if you already own your website address which is for example your comdomain name click on this tab here and enter your domain inthis field and if you don’t own one register a new domain by entering it inhere as an example if I type that in that URL is unavailable that’s becauseI’ve previously purchased this so what you need to do is think about what yourbusiness name is or what you want your website to be called and type in yourrequested domain name here cool selecting between commnets org or anyother extension just so you know it’s all the same the best practice is tostick with com .
a dotnet or if you’re a charity generally org but you canchoose from any extension you want so once you’ve entered your domain namejust go down the page you can add domain privacy protection if you want yourdetails to remain private or you can deselect that this is an example of whatyour domain address looks like if someone searches for the domain owner ifit’s private and this is what it looks like if it’s not private so it’scompletely up to you I personally do not keep all of my domains private so thisis not essential completely up to you I won’t be purchasing this on thisoccasion then if you go all the way down the page do you select all of theadd-ons that are selected by default over here you don’t need this I can showyou later how to keep your website secure in another video you’ll be ableto add your business email without paying this additional $5 a month feewhen you purchase web hosting this comes as default and I can show you how to dothat in another video you definitely don’t need this and similarly backing upyour website you don’t need that either so you don’t need any of these add-onsin fact I don’t use any of them myself so it’s completely up to you if you wantto now go down to the coupon code if you went through the URL .
I said earlierhostgator.com forward slash discounted you may already get a really good priceand a few discounts but I’m going to show you how to make sure that you do isso just type in the discount code discounted and click validatewhen you do you’ll notice that the price you’re paying is much less and if youscroll up you’ll see that you’ve got a number of options to choose from allthat a very highly discounted rate so take advantage of that I generallysubscribe for approximately one to two years at a time because the costsinvolved are so small around five dollars a month to get my website up andlive on the internet and think about it if you’re running a website your websiteshould be making you money it’s a revenue generator it’s not an expense soI’ll select that then you left it enter your user name enter a security pin andthen under billing info enter all of your details and be careful to enter thecorrect email address because that’s where you’ll receive your new accountopening information with the next steps in this tutorial so I’m going to take asecond and fill all of that out and then to the credit card details or you canuse PayPal .
once you’ve done all that scroll down just check your order then go down clickon the agree to the Terms & Conditions button and click on checkout now andwe’re ready to then log into our account and install WordPress in the next stepso checkout now after you do that one of two things will happen either Hostgatorwill redirect you to a checkout page where you’ll be able to see your accountdetails and you’ll see a tab at the top of your screen called hosting if you seethat click on that tab there another thing that will happen is that youshould receive an email like this from Hostgator which will contain your newdetails your new account details such as the plan that you’ve purchased and somekey login information with a username and password and this is the informationthat we’ll need what your control panel is is a control center for your websitethat just allows you to install WordPress after you install .
WordPressyou’re not really going to need this anymore so what you need to do is click on this link here and it should take you to ascreen that looks like this all you need to do is copy and paste the username andpassword just making sure that you don’t have a space at the end when you copylike that otherwise it won’t work and then log in to your control panel soI’ll do that now and then login so here is our control panel what youneed to do now is scroll down and look for either WordPress or look forsomething called quick install so there’s quick install if you’ve got aquick install you should be able to see an area that allows you installWordPress and there it is there if you don’t see that then you may seesomething like this and that will work as well so get to this page hereit’s the installation for WordPress you should automatically see your domainpopulate over here but since I’ve got a lot of domains I’ll just have to go andchoose it from the drop-down menu keep the directory field blankall of this stuff here are upsells and you don’t need this we’re showing youhow to install WordPress and set up your website yourself you don’t need any ofthis stuff everything from here doesn’t cost you a cent so make sure you selectthat keep your directory filled empty then click Next enter a blog title whichis your website title and this can all be changed later enter an admin usersuch as your first name or any other admin username that you want to use andenter your first name and last name also enter your email address and this isvery important because if you ever lose your logging details to WordPress andremember WordPress is the engine for your entire website it’s whereeverything is going to be set up configured and managed so it’s thevehicle behind your entire website so just ensure you enter the correct emailaddress and leave this checked yes we want to automatically create a newdatabase and we agree to the Terms of Service and then click install what itwill do now is take a minute or two to install the amazing WordPress platformonto your new website once that’s done you’ll see your installation detailsappear over here .
what I highly suggest is that you take all of this copy it andput it in a notepad somewhere write it down somewhere save it in adocument somewhere because if you lose that it may be a little bit moredifficult to get into your WordPress installation but if you’ll also get anemail when you install that to that email address but it’s good to have thathandy then I’m going to click on the login button and I’m going to open thatlogin page in a new tab just so I’ve got these details handy if your websitedoesn’t load and you cannot see anything then that means one of two thingsfirstly it means that the domain you’ve registered has not been connected toyour hosting check out our frequently asked questions on an a media coachwebsite and we’ll show you exactly how to fix that right therethe second reason could be that Hostgator has not yet activated yourdomain so what you could do is get on the line to Hostgator contact them viathe live chat and you should have someone help you out in the next 10 to15 minutes so if you come across a page that doesn’t work when you click logindon’t worry do one of two things check that your domain is connected if you’vebought your domain elsewhere otherwise contact Hostgator and if it stilldoesn’t work or you can’t figure it out let me know but it can take half an hourto an hour to activate your domain once all of that happens so what I suggest iscoming back to the login page and another important piece ofinformation here is the login page URL write this down it will be your websiteURL forward slash WP dash admin this is known as your WordPress dashboard loginwhenever .
you go to that URL after your domain is activated that will be whereyou login to the engine of your website so if it’s not working now come back inan hour and check again so I’m going to wait about an hour and come back andcontinue this tutorial okay so I’ve waited an hour and I’m justtry and load the website again absolutely perfect and this is thescreen you should see to log into WordPress so all you need to do is nowcopy the username and password and login to WordPress oops that’s a username andnot paste the password and here we are this is your WordPress dashboard this isthe dashboard that you’re going to be using to create your entire businesswebsite and we’re going to be showing you how to customize the look and feelof your website add new pieces of functionality using things calledplugins and it’s going to be so simple the hardest part of this tutorial isalready passed us the first thing to do when you log in is just go to users andthen go to all users and go to your username and what I’d like you to do ischange your password because it’s going to be very difficult to remember that soif you go into that area there scroll down and you’ll be able to enter a newpassword here you can enter your own password so let me just hide what I’mtyping in here I’ve confirmed the use of weak password I suggest you put in somesome stronger characters capital letters dollar signs things like that to make ita stronger password and then update your profile now just as an example.
I’m logging out of my wordpress dashboard you won’t need this stuff anymore youcan close this you can close your cpanel the way to get to this screen once againis your website forward slash WP dash admin that will take you to this pagehere and then you’ll be able to enter your plain password to log in to theengine of your WordPress website if you have any questions so far please do askin the comments below and if anytime we’re delivering value to you and you’reenjoying this tutorial and it’s helping please do give it a thumbs upnow let’s continue on and I’ll show you how to install the amazing websitedesign so easily in just a couple of minutes in the next step so let’s moveon to step three let’s install our WordPress website design .
theninstall a ready build template that looks amazingand it’ll just take a couple of minutes here’s where the fun part starts so backinto your WordPress dashboard go and hover over appearance and then go tothemes click on themes you need to go to the area that allows you to add a newtheme and that’s just here the wordpress.org themes then search for atheme called ASTRA hit enter and this is the one here this is a theme inother words design that we’re going to use for our new website it’s called theAstra WordPress theme it’s an incredibly flexible theme that allows you to do a multitudeof things to your website and customize your website in any way shape or form solet’s click on that click on the install button and then once it’s doneinstalling you can click on the activate button when it comes up so there it isclick on activate perfect now let’s have a look at our web site address just soyou know your website is now live to the real world you’ve now been able to getonline and that’s exactly what you’re looking at you can access this from yourmobile phone or any computer your web domain is live .
running and this iswhat you currently see not very good right now but don’t worry in the nextcouple of steps you’re going to be really really amazed at what we’re aboutto do it’s really the easiest way to create a website with WordPress so nowonce you’ve installed and activated the Astra theme what you need to do is go toplugins hover over plugins click on add new now what is a plug-in before I do thislet me just explain that to you a plug-in is something that allows you toadd extra functionality to your WordPresswebsite for example right now we have a core WordPress installation but we canadd plugins for various things such as contact forms we can add a contact formplug-in we can add an SEO plugin we can add a WooCommerce plugin for sellingecommerce online and so plugins come in various shapes and forms and allows youto add extra functionality to your website the plug-in that we’re going toinstall now is going to be one that allows you to create instantly abeautiful looking website template so what you need to do is go to add pluginsand then search for a plug-in called Astra starter sites and that’s the onethey’re Astra starter sites install now and click activate that will allow youto import an already built website in a matter of seconds so if you scroll downnow you’ll see that the Astra starter sites has been installed to import theready-made website design what you need to do now that you’ve installed all ofthat is go to appearance hover over appearance and you should see an areafor Astra Sites so click on that and then scroll down .
it will ask you to selectyour favorite page builder and the one we’re going to use is Elementor. Elementor is an extremely flexible WordPress page builder so click on that you’ll nowhave an option to choose from a number of beautifully designed templates andyou can preview on just by clicking on it and looking through it like that andyou can see that they’re absolutely amazing these are pre-builtyou can deploy these in other words install these to your website in thematter of a click or two and then start editing things on your websitehere’s this outdoor an adventure one it’s also one of the easiest ones to setup so let’s check this one out if you’re happy with this one what you can do isthen just click on once you preview just go down here and click on installplugins you can install the plugins individually like that again a plug-inis adding extra functionality to your website so contact form 7 and Elementoron are needed to use this particular pre-built template once you’ve installedthe necessary plugins you’ll then be able to import this site to your ownwebsite so now it’s just letting me know that this will now import this entiresite onto our WordPress installation and are we sure that we want to do that yesgive it a few seconds up to a minute to import all of that data and let’s justwait and I’ll show you what the outcome of that is depending on the speed of your internetconnection it can take up to a minute or two so this is what it looks like whenit’s done and then we’re able to view our new website and check that out guysthat looks absolutely amazing don’t you think in just a handful of minutes we’vebeen able to go from getting online to installing WordPress to installing anamazing-looking pre-built website that we can now start going in andcustomizing to your taste and I’m going to give you all the tools and knowledgeyou need to do that in this tutorial right here again if this tutorial ishelping .
you please do help us by giving this video a thumbs up and subscribe toour channel and do share it with your friends but check it out here’s yourhomepage here’s the about page it looks pretty spectacular we’ve got a servicespage that has been built by default as well and last but not least here’s what acontact page looks like with your very own webform so customers can come andfill out that form and you’ll receive that message in your own email addressand this is a good example of a plug-in we just installed a plug-in calledcontact form 7 if you remember a couple of minutes ago and this form uses thatparticular plug-in to have that contact form functionality on your new WordPresswebsite all of this cool stuff and it’s ready to go so the rest of this tutorialis to show you how to customize and setup your website to make it lookabsolutely amazing the next thing we’re going to do is do a little bit ofhousekeeping just to set up the site as we need it without all of the clutterthat exists on it right now so what I’m going to do is just go back to thewordpress dashboard .
you’ll see all of this clutter that exists and we don’tneed a lot of this just follow me and you’ll be fine so I’ll take you throughthe process of how I set up a standard website so go to settings and go togeneral this is the area where you’ll be able to change your website title andalso a tagline if that’s applicable to you you’ll also be able to add a WWE infront of your website URL what that is is just a display on your browser itdoesn’t really affect anything so it’s just a personal preference for me I liketo have a WWE in front of the URL when I go to my website and same for yourvisitors and so if if it doesn’t and you want to do that all you need to do isclick in between the forward slash and the first letter and just type WWE andmake sure you’re doing in the second field as well over here now be very verycareful double-check and triple-check this because if you stuff this up yourwebsite won’t load and you’ll have to start the whole process again andreinstall WordPress so make sure you’ve got the forward slash /ww your websiteURL in that field and in this field here when you’re confident you’ve done thatright you can click Save Changes and what it will do is log you outautomatically .
asked you to log back in when you’vedone that next what we’re going to do is delete any of the plugins that we don’tneed that have been installed by default it’s just a lot of clutter and a lot ofbloatware and we don’t need most of it so just hover over plugins and go to theinstalled plugins area what you’re going to do is scroll down and I want you todeactivate everything except the Astra starter sites the contact form sevenElementor I want you to deactivate everything except those three pluginsbecause they’re the three essential plugins that we’ve just installed andessential for building our website at the moment everything else is just a bitof bloat and it’s messing up our side it’s just creating a lot of clutter wesimply don’t need it and it also adds the risk of your website being hacked sowhat we’re going to do is hover over all these other ones and click deactivate a quicker way is to just click on thecheckbox next to each one of the ones you want to deactivate and go to bulkactions and deactivate and then hit applyif you deactivate one of those these three by accident don’t worry you canjust reactivate it so once you’ve deactivated those just check them offagain and then what we’re going to do is delete perfect so now all we should have whenwe go to install plugins is these three plugins and we won’t get any of thatclutter that we had before next what you need to do is go to pages and click onall pages .
when you install WordPress and you install a themesometimes it installs some default pages justjust to give you a sample and there it is there the sample page so what we cando now is delete that sample page so we can click on trash all the other pagesthat have Elementor next to it are obviously created when we imported thatdefault template on our website as we can see up here so you can delete any ofthose if you want but I would suggest leaving them activated because you candefinitely use them as a template then go in and then start editing those twopages to make it even faster to finish your website in fact it could even bejust an hour update a couple of images update a bit of text delete anything youdon’t need and boom there you are you’re done you can launch your website you canstart promoting to all your clients so once you’ve deleted a page just go intotrash and you’ll just have to delete that permanently and the same thing whenyou go to posts just hover over post and go to all posts there should be a helloworld post trash that go to trash and delete permanently now the next thingwe’re going to do if you go to any one of your pages right now and look at theURL it is not the best possible URL it could be that is not a clean URL whatyou want it to be is something like this and then if you have a service you wantit to be reflecting the service or the page that’s under it so .
you want yourURL structure to be nice and clean so there’s a way to update that back inyour dashboard if you go to settings and go to permalinks right now we’ve got acustom structure activated and it takes that structure over there and that isnot ideal what we want is to delete that we want forward-slash category forwardslash post name so it’ll be your website calm /the category of a post forwardslash the name of the post now it’s important to note that this only appliesto posts however I think these things here are pages but I’ll get to that in asecond what we’ll do is just make sure you update that and then Save Changesnow go into any one of your pages so go to pages and all pages let’s take theprojects page for example click on that and what you’re going to be looking athere is the content editing module for WordPress I’m just going to go back tothe wordpress editor the settings tab over here and as youcan see the URL for this particular page has actually changed it’s now projects and if you’ve seen what I’ve just donewhen I toggle back to the WordPress editor the website format did not formatcorrectly when I loaded the website so you need to use this in the Elementorsite editor module but anyway we’ve been able to update the URLs of our pages nowand that’s all we need to do as far as basic housework goes now let’s startcreating our home page the next thing I’m going to do is take you through someof the general customization features that are available for you to choosefrom to customize this in the way you want so I’m just going to go back intomy dashboard now and I’m going to hover over appearance and click on customize if we start at layout .
And I click onthat and then go to header and site identity here you’ll be able to add alogo of your choice if you’ve already got a logo created or made on yourcomputer you can upload that right here and it will appear over here that’sspecified for the logo if you don’t have a logo made already go and check out oneof my other tutorials on getting one made online for free or how to get onemade by a designer you can change the site title over here we previouslychanged it to make a website so you can change it in the method I showed youbefore you can change it by going over here and your tagline can be somethingabout your business something that’s interesting that would make people click you also have the option of notdisplaying the title and not displaying the tagline that’s particularly usefulonce you’ve updated or I should say uploaded your logo whenever you’veupdated something just click on publish I’m just gonna go back to customers Ijust lost my spot there back into layout and header you can also choose the wayin which you want the header to be laid out right now we’ve got a logo on theleft and menu on the right you can also have logo in the center like that orthat way around or you can disable the menu completely the last item in themenu at the moment it’s set to a button and that’s this thing here you’ve gotthe option of not showing that or choosing something else and also theoption of changing that text and that will update dynamically as you saw andalso changing the link URL you can also customize the style of the button and doa few other things that you can have a look at in your own time so I’ll publishthat and this click the back arrow when you want to go back to yourcustomization options you can also choose a transparent header if you wouldlike to do that what else can I show you in terms of general customization colorsand background you can choose your base colors so that red over here is thathighlighted color over there so you can actually choose based on what your colorscheme to be and if you’re in doubt about the color scheme.
just go andGoogle something like famous brands color palette and you’ll be able to seethe colors that some famous brands around the world use to get some ideasof course you can also choose a background color you can choose from anycolor that you want here and that color can also have a level of transparency toit if that’s what you’re after but I’m going to clear that once it’s updated I’m going to clear that then I’ll goback header transparent hello this is actually the one I was looking for thebackground color overlay will not change that that changes the bar at the top asyou can see now you can choose from any color that you want and you can alsochange the intensity of that particular color and also manage the transparencyif you want that Henner to be a transparent header and that looks prettycool actually so this is a popular one here if you go to black and then makethis sort of semi-transparent this is actually a very popular style to havefor a header area over there so that’s completely up to you you can also changethe site title color and that’s the site title over here so you can change thosecolors and I’m just going to clear that to a default similarly the hover colorso if I hover over that that’s the color that changes to and also the menubackground color the menu link colors and the menu hover colors in the sameway so that’s all completely customizable later on this tutorial I’mgoing to show you how to create a drop-down menu and when we do thatthat’s called a sub menu and you can actually change the background color thelink color and the hover color for those drop down menu items as well that’s abit later on so if you’re happy with .
what you’ve done you can publish thechanges or you can clear anything you want to get rid of so I’m going topublish that I actually like the way this looks similarly you can do a few colorselections for the footer and the footer is the thing down here for two feet downat the bottom that’s what that is there you can also change the typography whichis the font style the font size line height and other stuff like that to makeit more personal to whatever your theme is for your website or the business thatyou have and you can also Google some popular themes for your industry to getsome ideas around that you can change font style and sizes just like that andalso the content font size customize buttons customized menus I’ll get intothat later and other home page settings but you won’t need to change any of thatbecause right now we’ve got the home page set to home which is done bydefault so that’s all fine but I hope that gives you some sort of an idea ofthe kinds of things that you’re able to customize I’m actually going to upload alogo here but I’ll do that in my own time after I finished this part of therecording I’ve got a logo pre-made so I’m going to upload that but if you wantto learn how to make a logo check out one of my other tutorials any questionsabout .
any of that stuff just ask in the comments below and I’ll get back to youas soon as I can the next thing I think that’ll be usefulfor you guys is to explain the usage of Elementor, the plug-in Elementoritself and how that’s used to manage and customize your website so once you loginto your site and if you go to visit your site and go to any page on yourwebsite you’ll notice this black bar over here in that black bar you’ll beable to click on this button edit with Elementor now let me explain a little about thisarea over here so you understand what the various features are and how you goabout editing all of this stuff so if you click on a module and then click onthese dots over here it allows you to edit that particular section what happenwhen you do that is this bar will come up over here on the left hand sideyou’ll be able to adjust the layout and the various options within the layoutyou’ll also be able to adapt the style for example this is the image over thereyou’ll be able to select from a gradient an image or a background of video youcan also select the position of text stuff like that the Advanced tab is notone you’ll use too often unless you want to increase or decrease the padding andthat is the space in between items so you can also add new sections byclicking the plus icon over here what that will do is add a new section inthere you’ll be able to click the plus icon there when you want to add a newsection then select what kind of a layout you want so let’s say we wantthis layout you’ve got some three bars over here you’ll be able to click thesedots over here and then drag and drop elements such as that to start settingup various modules or new areas on your website so you can create as manysections as you want so I’m just going to delete this section for now and I’mgoing to start by just showing you the options for this particular section hereso you can change the structure as .
you can see there right now we’ve got 3columns 1 2 3 these two on the side are providing a little bit of padding sothat this text doesn’t get extended past that area in case it’s a very longsentence and the way you add a text is very very simple it’s a very visualmethod of editing a website so all you need to do is click there and edit justlike you would it’s a visual inline editor and you can change various bits andpieces by clicking on them for example of clicked on the button I can changethe type of button what that button says and what I want to link to with thatbutton just like I can when I click on that text there I can change variouselements and of course I forgot to mention if I click on the button and goto the next tab over here I can change the actual style which includes thebackground color and various other visual elements of that there so that’sa brief introduction on editing things with Elementor and as you can see I canclick on any section edit text edit style or even remove that section or adda new section in between here and there and starting from scratch so that’s justa very brief general overview of how this element or plugin works you canalso copy and paste things such as right-click on a button or copy thatand say I want to paste that button over here or I can copy that button copy thebutton and paste not the button but paste the style of that button that whatthat will do is take whatever that is there but it will paste the visualelements of that thing I can also press control Z or command Zon my keyboard if you’re using a Mac to get rid of anything you’ve done justlike you would in Microsoft Word Peh style there we goso it’s very very cool it’s very user friendly and you can use that to startediting various modules or you can create new modules on your own so that’sjust a very basic overview of how to use Elementor and that should give you a lotof the tools you need already to start messing around and using a little bit oftrial and error and don’t worry because you can always go back to the previousstate if you wanted to if you make a mistake so please feel free to messaround and use trial and error if you’re not confident on thePaige go to any other page on your website and you can do the same thing soyou can go to any other page on your website that’s currently.
existing or youcan create a new page so let’s try projects for example edit with Elementor and you can use the exact same process alittle bit of trial and error to get a feel for it and within about 10 to 15minutes you’ll start to become quite comfortable but if you have anyquestions about that so far let me know in the comments but let’sget into now setting up the home page module by module so like I said I’mgoing to start with editing the home page and let’s start with editing thetop hero area that you see at the top of the home page so what I’m going to do isclick on that module click on these little dots over here what that will dois open up the left hand side editor menu what I’m going to do is go to styleand what we can do is actually insert a new image if you wanted to so we candelete that one and add a new image we can select an image from the medialibrary that’s already there or we can upload a file from the computer ifyou’ve got an image and here’s a little tip go to unsplash.com it’s a collectionof free royalty-free photography and it has some beautiful images there that youcan use so just type in a keyword and you’ll be able to find something prettycool download for free to your computer so I’ll save that and now let me just go to upload filesselect files and I’m just going to look for that file that are downloaded whenyou select a file it will upload just wait for a couple of seconds and you’llbe able to insert that media to your website and there we are so as we cansee now the image is also not just the image itself it’s overlaid with thedarker texture so that the writing is highly contrasted against it so it’seasy to read that’s the original image there but thishas a dark overlay you can also change that by going to background overlay andincreasing or decreasing the opacity and you can also select the color of thatparticular background overlay if you would like to so that’s how you can addan image to the background and so .
if I update that and then go to visit mywebsite let’s see what that looks like there we go that’s already looking veryvery cool now I’m going to take this a step further instead of just an imageI’m going to create an additional module and keep it there to show you what we’reable to do when we upload a video so there we go I’ve duplicated that entiresection by right clicking and clicking duplicate so now I’ve maintained all ofthe style and all of that stuff but all I want to do is give you anotherdemonstration of what’s possible what I’ll do is click here I’ll go to thosedots I’ll go to style and now the background type at the moment is classicand it is this image I’m just going to delete this image for now I’m going toselect a background type of video and what this allows you to do is enter avideo link which will display a video a dynamic moving video has thehad a banner for your website and it will look absolutely fantastic if youchoose the right video so I’ve found a video on YouTube here that’s slightlyentertaining so what I’m going to do is grab that URL and I’m going to pastethat URL in here and just let that do its thing so as you can see the videohas started playing I can also select the start time so let’s say 55 secondsin and an end time if you would like to you can also add a fallback for thevideo if the video doesn’t load for example sometimes on mobiles videosdon’t load so you can also add an image in place of that if you would like to perfect let me just check if I want to changeanything in the advanced slide should be okaylayout okay I won’t change anything there all I’m going to do is clickupdate and let’s refresh to check it out one other thing to mention if you don’tenter an endtime you won’t actually loop so what we’ll do also is enter an endtime let’s say eighty seconds and that video should loop over and over againnow if I go into the background overlay section you’ll see that there is anoverlay in front of the.
video that’s why the video is a little dark so you canchange the opacity of that to make that even clearer if that suits your videoand your home page so we’ll do that let’s update that and refresh one thingto note though is that the video if it’s on top of your website it sometimesinterferes with this banner if it’s a YouTube video particularly so Irecommend that if you’ve got a video you uploaded onto your website as a videofile and all of this stuff won’t interrupt you won’t get this black barwhat you’ll get is this is a beautiful-looking light menu bar thatyou would have seen before with the video in the background but of coursethis is just an example for now what I’m going to do is just move the video downthe page a little and move this image up the top the way to do that is if I rightclick and go to navigator I can actually just drag and drop the first section forit to become the second section and therefore the second becomes the firstand that’s what’s happened right here and that is the way that you can startarranging your website you can also make the video appear in a certain portion ofyour website for example if I want this module to be bigger I can then go tothese tabs over here drag and drop the video module click on that and then allI need to do is paste my video link set the start time set the end time and now we’ve got this beautiful videositting in our screen we can also make that water play we can also mute that ifyou want to do not play the music it’s completely up to you so it’s up to you how you want toarrange that obviously it’s all about personal preference all right guys let’sfinish off the homepage if you scroll down you’ll be able to do a few thingsyou can actually copy or duplicate a particular section if you like thelayout of that so then you can clone that you can delete anything you don’tneed you can add new modules and just drag and drop them from all the modulesavailable in this area here you’ve got quite a few to choose from depending onwhat kind of a structure you want to your site and what kind of informationyou want to put on there you can choose from a whole range of content elementsas you can see here very very cool what I’m going to do is I’m going to scrolldown little I’m just going to add a new section here let’s say I want full widthsection I’m going to click on the dots over here so I can drag in the headingperhaps and put in some text I can align that I can also adjust the size of thatheading when I go to style I can also assign the text color and any shadowsand font that I want to change.
what I was gonna do let’s see I might also putin some text under that heading if I click on that I can adjust this text I can of course I can align that as wellif I click on that there I should see the ability to align that and then let’sgo to style so that’s already Center aligned I can change the color if I wantto and if I want to increase the spacing between this and the thing above it Ican add some padding so there we go so I’m going to unlink all the values sothat I can just add top padding and not affect the rest then I can add perhaps Ican even add a Google map if I wanted to to show my location of business ifthat’s something that’ll interest you let’s try some social icons so click onthat I also want to add some padding there so there’s some space in betweenthe social icons and the text above it style that’s all good okay and then whatyou can do with social icons either you can put your actual social links there and you can put your Twitter you can putyour Google+ or you can also add other social links you can choose that fromthe drop down over here so we’ve got a youtube account so I’m obviously goingto put a .
YouTube icon and then link our YouTube channel as a final example I canadd perhaps a perhaps a button under that I’ll just drag that in there clickon that module let’s center-aligned that one let’s increase the size of thebutton but to make it easy let’s just get one of the existing button styleslet’s copy that and then let’s paste that style here center-aligned I’ll add some padding perfect you can make any adjustments youwant to over there change the text color at the moment it’s white on a redbackground so it stands out nicely and you can obviously change what you wantto button to say and where you want it to link to perfect let’s update that now I’m justgoing to refresh the website so we can see what we’ve created there another thing we can add is a backgroundthere because it’s a bit of a fusion between this and the thing above it soit would be nice if this area stands out a little bit so what I’m going to do isclick on the buttons over here then let’s go to style and background I wantto add a classic background and I want to select an image and for this let’sjust select an image from our gallery if there’s one that’s appropriate let’stake this one and what I will do so that it stands out nicely now this imageobviously is too small for this area that we selected so we’ll obviously needan image that’s appropriate and if you can’t find one like I said before go tounsplash and choose one from there but I’m just going to give it a shot now okay so you get the point instead of animage where you can also do is just select a solid color and we can even adjust the color of thisthing here and we’ll make that white as well andwe’ll give that a little bit of padding and we’ll give this some padding at thebottom there we go that’s nicely spaced out so there we are just an example of howwe can add modules that’s obviously a very crude example but you can obviouslymake a lot better by adding a nice background image or just copying anexisting module such as this we can duplicate that so it exists there we canrearrange in the navigator so let’s say we want that there and then we can startediting things so that it looks good we can just have – all we need to do isedit the image and edit the text and this one is an overlay image so I hopethat makes sense if you have any questions about any of that just let meknow in the comments below so I decided to Center align all of these modulesover here and also give the background a darker gradient so the backgroundoverlay what I did was given a darker gradient so that the text pops out alittle more and then updated that and refresh the site and I think that lookspretty cool now perfect example of using the existing module and updating it tomake it look just the way you want it actually minimizes the work you need toput in to create various modules on your page and this approach can be applied toall of the pages on your website going forward alright so we’ve created anawesome home page for our WordPress website but now I’m going to show youhow to add new pages onto your website I’m going to show you two ways to addnew pages one way is going to be to use a pre-built template and the second wayis going to be using or adding pre-built modules .
so I’ll show you both methodsand both methods are very very fast so to add a new page just hover over pagesand click on add a new and just keep in mind you can add an unlimited number ofpages to your WordPress website there’s no limit just make sure it’s structuredcorrectly and I’ll show you how to do that a bit lateTerron so add a title to your new page so say for our example we’ve gotservices so we want to add a service called consultancy let’s then after weadd a title we’re not going to use a standard WordPress word editing modulewe’re going to click on edit with Elementor as that’s the easy way tobuild our website give it a few seconds to load all right so now the firstmethod and that is importing a pre-built template so what you need to do is clickon the folder icon over here you’ll be able to choose from a number ofpre-built templates the ones that have Pro written in the top right corner paidtemplates the rest are free so let’s just focus on the and the free ones fornow let’s take this one for example it looks pretty slick so what we can do iswe can click on the insert button and now this is where the magic happens giveit a few seconds to load to import onto your website it’s doingall of this automatically for you it’s going to import that entire web pagejust as we saw right there and now it doesn’t have to look like this you canclick on any one of these modules you can click on this thing here you canchange this background image if you like and you can change all the other bitsand pieces like we talked about for the home page in this very same way and everything you see here iscustomizable from images to the background to the text and also thelayout you can also click on a module so let’s take this module and you canactually change its structure and layout it’s very very cool but what we’re doingis using a pre-built template that already looks fantastic and justtweaking it and customizing it to make it look any way you want it’s thequickest way to create a WordPress website that I know of currently sothat’s one method let me take you through another method by the way .
if Ipress ctrl Z or command Z it allows me to undo any changes that I’ve made andget rid of that entire thing okay so now here’s the second way to add a new pagecheck this out it’s fully customizable using pre-built modules so now insteadof the pages area over here where you can select from a number of pre-builtpages what we’re going to do is click on the blocks area so what this allows usto do is choose from a number of pre-built blocks to add to the page andthen we can go in and customize all of those blocks the way we want so if Iclick on the drop down here first we need a hero block that is the thing thatsits at the top of any page the big image with big writing something thatcaptures the users attention so let’s take this for example it’s free 1 and Ican click insert what that has done is entered or added this entire block on tothis page now let’s go in add a few more blocks if I scroll down here I can clickon the folder icon again go to blocks now I’m going to repeat this process andat around 4 to 5 blocks so you can see what this thing looks like and seriouslyit’s the quickest way that I know so I hope this is really helping you out in abig way ok let’s add a client section our clients let’s throw that on nice one what else can we add perhapssome services okay and then perhaps call to action something like that now don’t worryabout the colors that’s all customizable and to top it off we will add perhapsour team members that looks alright and for good measure some testimonials now feel free to have a look through allthe remaining modules that I haven’t already gone through because there’ssome really cool pre-built modules that Elementor gives you ready to go so youdon’t have to spend time setting all of it up so we’ve added all those modulesto the page but now what well all of this stuff like I said is customizableso say I don’t want this dark background on the top module over here let’s clickon those buttons let’s go to style let’s go to the background overlay actuallythe background okay yep background overlay you want a classic overlay wewant to add perhaps an image and I’m going to drag one from my computer andupload that insert and there we go we’ve changed that image and we can alsochange the opacity one of the suits your website you can also change the text ofcourse change the images nice one change all the colors for example etcetc I can even get rid of a whole entire block by clicking on the X over therebut I think you get the point you can even .
change all of the images here thetext of course and the social links anything that you need to change justclick on that item and you’ll see it come up and you’ll be able to customizethat or even right-click and delete that particular thing at any time so that’sthe quickest way to create a page now let’s click the publish button and thenwe can preview our changes there we go we’ve created this in as little as a fewminutes with a few tweaks and color changes this will look fantastic if youhave any questions about any of that let me know in the comments below but justfor the record I’m going to go back into the WordPress dashboard and show youwhat a pre-built template looks like so let’s exit to our dashboard and thenlet’s create that other page and then ed up with Elementor and nowI’m going to select that pre-built template and save that just to prove toyou that it’s easy to set up an entire page in as little as about a minutes there we go and I’ll click publish andlet’s have a look at the changes there we go a brand new page and it looksabsolutely amazing the easiest way to create pages on yournew WordPress websites by the time you’ve created all your pages and addedthem to the menu I want to let you in on our little nuances that will make a bigdifference to your website if you hover over any pages that you’ve added to adrop down you’ll see that the URL well let’s go to that in fact let’s go tothese two pages they’re both pages under the services parent page so you may havesome parent pages and some child pages the parent page URL so services forexample should be your website forward slash whatever that parent pages now forthe child pages such as consultancy because it’s under that item there itshould be consultancy however you’ll see the URL is not that and it’s forwardslash just consultancy without the services so that’s not ideal in terms ofa website hierarchy we do not want that you want child pages of a particularitem above it to reflect that they are one level deeper so how do we do that goto any pages that you need to change the URL of so let’s take consultancy as anexample let’s go to edit the page you’ll see there’s a URL over here that’s thedefault .
URL but what we need to do is go down to the page attributes section soclick on the error that opens up the page attributes then parent page selectthe parent page for this particular item in this case it’s servicesand then click update’ you’ll notice that this URL has now changed this pagehere is now a child page of services so now when you go to that page the actualwebsite URL now reflects that proper URL structure so let’s take this one asanother example it’s a level deeper than services in this example so let’s editpage let’s go down page attributes parent page services update now thispage also reflects the proper URL structure so just keep in mind yourwebsite hierarchy whenever you have pages and subpages make sure youcarefully select the parent page so that your WordPress websites URLscorrectly reflect that so it’s great for search engines and it’s also very verygood for your human users as well because they can see exactly where theyare within the hierarchy of your website so there’s a little tip a little nuancethat will add massive impact to your website’s performance and your userexperience so you’ve created all these amazing pages but you can’t see any ofthem in your WordPress menu so now I’m going to show you how to add those pagesinto your WordPress website menu so let’s go back into the dashboard let’sclick on that let’s exit to the dashboard so what you need to do is goto appearance and then menus the menu structure that comes up here just ensurethat the primary menu is checked if it’s not do that but one of these this is themenu structure of your website at the moment so home about services projectscontact home about services projects contact so now we want to customize thismenu you may have added a whole lot of new pages so how do we get them on thereand manage this menu so the first thing is we can drag and drop things to anyorder we want them to appear and when we do that and click Save that will takeeffect on the front end we can also click a drop down and then remove anyparticular page we don’t want to appear in the menu when you do this it doesn’tdelete the page it just removes it from the navigation menu thirdly you can goand select pages that you’ve already created so I just created one forconsultancy and for product management so I can tick them and add to menucurrently if I click Save and then refresh my website .
this is the order inwhich the pages will appear but you might not want that for the simplereason that product management and consultancyyou can’t see it at the moment because there’s not enough space is part of ourservices so we want them to appear under the services drop-down so what we haveto do is just drag that up to the thing that you want it to appear under andindent that just like that so that that becomes a sub-itemof the page above it the parent item similarly you can do that with any otherpages and rearranging that order over there allows you to manage the order inwhich they appear in the drop-down so let’s save that menu and I’ll show youwhat that looks like perfect we have this drop-down but not so perfectbecause this is white and we cannot see the actual words behind it and that’sjust a little bit of color management which I’ll get to in a second but firstthe other thing you can do in the menu is also create custom links so say youwant to add a link to a URL which may not be a page or a post or anything likethat just a random URL so I’ll enter that URL in there and we can call thishome we’ve already got one but this is just an example add that to the menuI’ll get rid of that and that’s just a custom link to that particular page youcan add a link to any page you want anywhere on the Internetsave that alright so we’ve customized down menuhowever the drop-down menu is coming up as white that is because it’s a whitebackground and it’s white text so it’s all blending in so what you need to doto fix that is go back into the dashboard and go to customize appearanceand customize then go to colors and background go to the header transparentheader it’s at the moment it looks like that but what you need to do is justscroll down and under the submenu so this is now a submenu we need to changebackground-color to reduce transparency and now you can see the words so I’vejust reduced this from full transparency to no transparency so you can see thewords or you can make that a solid color just for the purposes of an example soit’s super clear that’s what I mean we’re going to do what I did for theheader so it was so we wanted to be the same as our main menu so it’s black andsort of semi-transparent so I’m going to click on that submenu this one heresorry black and sort of semi-transparent now that should be similar entities ifthat’s still hard to .
read because of things behind it all you need to do isincrease transparency and that will be crystal clear like that so feel free toplay around with that so that it looks exactly how you want it to look you canalso change the link text color which is the color of your words over here andalso the hover color for purposes of an example let’s make that green and let’smake the hover reddish so it’s green now red but we’re going to clear all thatbecause that doesn’t look very good so there we go we’ve added a beautifuldrop down menu and we’ve made it super clear okay so now I’m going to show youhow to create or update one of the most important pages on your WordPresswebsite and that is the contact page this pre-built contact page looks prettygood but we can do a lot lot better so let’s edit this page edit with Elementor I’m going to show you how to use some of the pre-built contact modules orpre-built contact page templates to make yours look muchthan it is right now all right so we’re gonna scroll down click on the folder aswe’ve previously done before scroll all the way down and look for some contacttemplates okay this is the one here it’s free and it looks pretty cool so I’mgoing to insert that now what that will do is it won’t get rid of your existingmodules but it will add the new modules down the bottom so what I’m going to donow is pick and choose the ones that I like now I much prefer this header overhere as opposed to this one here so what I’m going to do is copy paste now thatthat’s there I can delete this one I like this area here with the form andthe contact information I think that’s pretty cool I can also delete this asI’ve copied that to the top now this also looks pretty cool these threecolumns here but for the purposes of this demo what I’ll do is delete thatbecause we don’t need that and in terms of a map this full width map using thenew template looks much better than this one here so I’m going to delete thesmaller one so now what we’ve got is a bit of a customized contact us area andalso with a social area over here that can be edited or customized by linkingto your social channels at any time we’ve got a map here and what Irecommend is you put in your exact place of business over here your exact addressso that customers can find you very easily and navigate to you especially ifthey’re using a mobile phone perfectof course I had to highly recommend that you edit all of your contact informationover here your email and any other links if you have themsuch as social media links otherwise just delete those individual modules sothat they don’t appear on the page and then update that click on the Updatebutton and we can now view the page so here we are here’s what our contactpage now looks like and last but not least .
to polish off your brand newWordPress website I want you to be able to receive messages from all of yourcustomers that visit your website so how do we customize this form over here whatwe need to do is go back into the dashboard and we need to go to contactand contact forms this form that you’re seeing here is created using a plug-incalled contact form 7 so if you go to plugins and install plugins you don’thave to do this I’m just showing you contact form 7 that’s the plug-in thatis creating the functionality for us to have a form on our website for yourusers to fill in and submit so if I go to contact in contact forms this is theactual setup of that form so let’s click on that these are the fields that yourform has currently and you can actually edit the form template by editing thesefields over here or by adding new fields such as telephone and then you can justclick insert tag and that will add that to your form but I’m not going to dothat for now here’s the important part here in mail we wanted to send to youremail address so make sure you enter your email address over here so thatwhen someone submits that form it comes to you we want the from to be the emailaddress that the person who submits the form is using or enters in that box sothat is the your email when it says your email it means their email the customersemail so let’s make it from your email and subject will be the subject thereply to will be the email address that your customer enters and this is themessage body this is what you will receive in your emailokay so let’s save that for the time being now go to messages when the forumsubmitted a notification will come up just to validate that the message hasgone through so you can update that message similarly for message files andvalidation errors etc etc so let’s save that for now okay so now I’m just goingto refresh our website I’m going to load up my email as well just so I can showyou a live demonstration so test customer customer that’s whatever theiremail is and they’ll leave a message so let’s try thatthere’s the notification thanks for your message and now I’m just checking theemail address to make sure that that has been received there we go this is themessage that I received and the subject is coming up as your subject so that’snot right we can configure that in a secondif I click reply you’ll see that the reply to is the customers email addresswhich is absolutely perfect everything else is fine the only thing .
I need toupdate is this subject so let’s try that again let’s go back into theconfiguration mail subject and the reason this has happened is our form onour website doesn’t actually have a subject field so therefore it’s he’s notpopulated and doesn’t come up with anything so what you can do is add yourown thing so for example whatever your website’s called so demo one of yourwebsites called customer contact saving that I’ll refresh this let’s trythat again alright perfect there we go there’s the message we received now I’vereceived in my inbox which subject whatever I put in there and that justmeans that when I reply to the customer they’ll receive the reply with thatparticular subject you know exactly where the emails come from and you canstart off communications so there you go you now have a fully functioning contactpage with a fully functioning webform for all of your customers to fill out onyour new WordPress website and also a map so they can find you easily.
it’s avery very effective contact page to get the most conversions out of your websiteas possible any questions about that please do ask in the comments and I’llbe more than happy to help you out so here we are guys that brings us to theend of this tutorial you now have all of the skills andknowledge that you need to make an amazing WordPress website by yourselfeven if you’re just a beginner and most of it was drag-and-drop and usingpre-built templates please give this video a big thumbs up and subscribe toour Channel and click the notification bill so that you can be notifiedwhenever we release another awesome wordpress website tutorial of course asalways any questions ask in the comments below and until next time thank you forwatching