Build an Elementor Website From Scratch in an hour!

today we're going to take elemental pro the hello theme and various other tools are we going to create a fully bespoke website creating our own custom theme if this impress you stick around because I'm going to take you to every single aspect right now when is palsy and welcome to wptouch the channel where I have you create beautiful WordPress websites if this is your first time on the channel please consider subscribing a smash in that bell icon below to become part of the WP crew and be notified every time new content is added okay so before we start let's go and take a look at some of the tools we're going to be using first and most importantly we're going to be using Elementor pro this is a pro to troll because we need to have access to that theme builder to create the various different template files for our customers theme so you don't have that I'd recommend grabbing yourself a copy the link is in the description below so you can check that out they are affiliate links so anything you purchase through those things we've got a small percentage back to the channel it doesn't cost you any more but does have support we do around you on top of that we're also going to be using the Hello theme now the hello theme is a free theme that's developed by the developers behind elemental an elemental pro it's a very bare-bones theme it literally just keeps WordPress happy and nothing more we're gonna create all the key different template files that we need for this entire website and project on top of that I'm gonna recommend that we use SEO press I'm not gonna go to detail about how you use this but if you are building a website it's good to have that SEO built into the site for the beginning SEO press is one of those things that you can use the completely free version it has a ton of options there's a pro level version that has some additional options which is a steel at the moment and again if you're interested in getting better SEO I'd highly recommend checking out SEO press again I've got the link in the description below so you can go and take a look finally we're going to also install a theme security now.i theme security is a free security plug-in I'm not gonna cover that in detail in this video but I've already created one on how you can use this plug-in to actually go through and secure your website I'll drop that link below so you can check that out if this is some indecision so take a look at that okay so that's the key things we're going to use now let's crack on and take a look at how the entire process of building this website from scratch the various different methods we can use to install WordPress on to our server for this example we're going to be using cPanel of a soft Occulus which is an easy way of go to the process of installing without any technical kind of knowledge however if you want a more in-depth manual way of doing things I've covered that in its own dedicated video on how to install WordPress I'll link down the corner now and I also put it in the description below so if you wanna check that out you can see that and you can focus a little more detail on how to install WordPress okay now before we move on and actually install WordPress what exactly is cPanel and what if you don't have it well cPanel is a visual way to allow you to interact with all the different tools and facilities you have as part of your hosting account now different hosting companies will have different versions of cPanel or they might have something different however pretty much all of the good hosting companies that they should have the option to allow you to quickly and easily install key software things like WordPress all then through this method but I say if you don't have that option and you want to do it manually I've got you covered on that one as well so just check out the video on how to do that ok so inside the cPanel we're going to scroll down and we're gonna find Softaculous you can see there we've got a ton of different software we can install we're only interested in WordPress so we're going to do is going to start that process off so click on WordPress that will take us over and give us an overview of the WordPress version and the different things we have available as part of WordPress now you could read through all this if you want to I'd recommend it only if you really need to sort of get a refresher on what WordPress is what sort of options of features you have and so on what we want to do is click on Install Now once you do that that's gonna start the installation process and all we need to do is fill in some basic information you can if you want use the quick install option however we're going to go through and just make sure that everything is in place for our particular copy of WordPress now speaking of the versions you can see we can choose from the various different versions that are part of this cPanel we're gonna set it to be at the most latest version of a 5.11 at the time of record in this video next up we've got the protocol we want to use now that might sound quite complicated what exactly is a protocol or what they really mean is do you want to use HTTP on its own do you want the www name or do you have an SSL certificate and at which point you would need to use the HTTPS to get the sort of secure connection whatever you have setup of whatever you want moving forward just choose the one you want to use on there we're gonna choose the HTTP and because I'm not using this SS s deficit at the moment the next option is to choose the domain now you might have multiple domains all associated with you one hosting account choose which is the primary one you want to use with your particular copy of WordPress next up we've got in directory so if you wanted a place where WordPress inside its own directory you could do that I'm not going to I want to make sure this is the root of my domain next up we've got the site settings so you can see we've got the site name we've got the site description and is it going to be used as part of a multi-site now we're gonna leave that as it is we can change that in WordPress later on and it's not going to be part of a multi sort of WordPress set ever not a multi-site so we can leave that as is next up you've got the admin account are the first thing I would so recommend here is do not under any circumstances leave your admin username as admin and don't use a password that's really really simple like password one two three a date of birth and so on so put in the details you want in there I'm just gonna fill those out making sure that you put something that's gonna be quite complicated to actually sort of figure out so you can see that I've put those in there I've got a hundred at 100 for the strength of my password so I've used things like uppercase lowercase we've used things like numbers letters and so on just to make sure that we have something that's difficult to decipher finally you've got the admin email address this is the email address that is gonna be associated with WordPress and this will normally get anything to do with your WordPress website sent through to so put in whatever is relevant for you and I'll leave that as the admin one here that's fine next up you've got the option to choose the language obviously if you're not using English as the core language for WordPress you can change that to whatever you want and you can see we have lots of different options available choose whatever is relevant Megillah we've got a couple of plugins we can go through and choose do we want to install limit login attempts optimizer the classic editor or the WP central the only thing I want to put in is the classic editor because I want to replace Guttenberg then you can see we've got two Advanced Options so we take a little look inside there you can see we've got things like the database name the table prefix and so on if you are comfortable dealing with this side of things then check or uncheck and change anything you think is relevant but for me for example I'm gonna leave this as is I don't want any of those things in it I'd like to have full control and we're not gonna choose a theme at this point so let's hit that install button I'm providing everything is in place it's going to go through now check any of the data that we've submitted and go through the install process and as you can see we've now installed WordPress on to our domain very simple to do you can see we've got a couple of links on here then link to the website and also to the admin for the website so we click on the first link that'll take us over and show us the website you can see it's just a default copy of WordPress just some basic filler information in there if we come back and we click on the second option which is for the admin link we can click and that'll take sue to allow us to go to the login section or log us in directly based upon the information that we created when we installed WordPress so we're going to dismiss all these and you can see we now into WordPress itself and we're ready to go through and start setting things that do things like installing the theme installing the plug as you want and making some basic configuration settings to make sure the WordPress is ready for us to start building our website senator wordpress is installed let's go through and clean up our plugin section and then start downloading and installing the plugins that we need first thing or we don't need the a kismet and the holo Dali we just simply gonna delete those because they're not needed for our copy they just installed as part of WordPress as default so that we remove those extraneous plugins let's go through and click on add new the first plug-in we've got to search for is the free version of Elemental we're gonna use that as our page builder so we're gonna click on install now we'll let that install we'll activate it and then we'll move on to the next plug-in the next plug-in we want is SEO press so we'll go ahead and install that but we won't activate it yet we'll need the activation until a little later so we'll install next up we're looking for our security plug-in for this example we're going to be using a theme security and again with install we won't activate this yet now we've got a detailed video on how to use a theme security so we're just gonna fly through it quite quickly when we actually activate it on the site if you want more details on that I'd recommend taking a look at that and again I'll link that in the description below so you can take a look in more detail ok so those are the first couple plugins we want to install next up we need to put in the element or pro which is something we have to purchase reason behind this like it's at the top of the video is that we want to get access to those templating flag functions so we can go through and create our own custom templates and create a more bespoke WordPress website I've already gone ahead and downloaded this what we need to do is click on upload plug-in and I'll open up the option to choose the file and then we can simply drag and drop our file over the choose file button and then click install now once that's installed we click on the activate plug-in now the process for this is a little different because we have to either put in the security code for using this particular plug-in or connect it through to our account I'm gonna activate it manually and then I'll just put in my license key and activate this and there we go we are fully activated so that's the key software that we want to install the next thing we need to do is put in the theme now as I said the top this video we're going to be using the Hello theme and the reason being is because it allows us to basically just keep WordPress happy by having a theme installed but it has pretty much no content to it other than the ability to sort of put in your logo and the tight and your menu that's pretty much all it does so it means that we have a total amount of flexibility to tap into those themes that we can build inside elemental Pro itself without the need to worry about the actual theme taking over now we've got a little bit more evident as we go through so let me just show you how we do that in the next section so in this section we're gonna take a look at how we download and install the Hello theme for our copy of WordPress and also how and why we use a child theme okay so the theme for Elemento is the holo theme which is like I said in the previous session just a very very basic theme that just keeps WordPress happy just has the cool things you need and nothing more now you can't get this by just searching at the moment in WordPress under the theme section you have to come over to the github where we can download all the files now this might sound a little daunting but don't worry I'm going to show you exactly how to do it I put a link in the description below for where you get this from and then you can just follow along with me now this looks a little bit sort of overwhelming because you have a ton of files and it's like well what exactly do I do well to be honest all you need to do is cut this green button click on clone or download and just choose download zip that's it it's done there's our zip file you can see we can find that on our system now what we need to do is go back into our dashboard for WordPress we're going to come over to the appearance section on the left hand side and come into themes once we're in there you can see we have a couple of themes that are default install with WordPress itself we're going to get rid of those in a moment all we need to do now is add our new theme so we're gonna click on add new and we're gonna click on upload theme because like I say we can't actually find it inside this section so we're gonna click on upload theme and exactly the same as we did in the previous section we uploaded the plug-in we're simply going to drag our file a zip file over this choose file button you can see it tells us what file it is we can click on Install Now let that go through the process of installing our theme and there we go that now tells us that our theme is installed we have a couple of options we can live preview we can activate it or we can return to the themes page we're going to return to the themes page because you don't actually want to activate this theme we want to upload a child theme now a child theme is a very very stripped out version of some core files that WordPress needs and what it allows us to do is if we make changes to any of those core files things like the functions file or the CSS file it will not affect the actual parent in this example the Hello theme what this means is if we make changes to that and we need to update the actual master the hello theme not the child theme the holo theme we could update that knowing that any of the changes that we make to our child theme will not be affected so we'll make sure that we have all of the changes we make no matter how many times we update the master theme the parent theme it'll always keep our changes and it's a little bit confusing right now but just bear in mind that whenever you use a theme no matter what you do even at this point when you actually install everything you don't intend to make any changes to that there might be times further down the line where you have to and you do not want to make those changes to your parent files now the holo theme does not come with a child theme you have to make your own now what I've done is I've gone ahead and made this for you I'll put a link in the description below so you can go and grab yourself a copy of that and you don't have to worry about trying to go to the process of finding out how and then making a copy for yourself so we're going to the same thing at camera click on add new once you've done that we're gonna click on upload theme are we gonna do the same things we go to choose our file so we're gonna simply gonna drag our file in drop that over the choose file you can see Elementor child theme click install now and that's gonna go through and do exactly the same as before so we go back to our themes page and you'll see now we have the hello child theme and the hello Elementor which is the parent so we're gonna activate the child theme to click on activate that will then go through and choose that as being our key theme okay so that's how we put the themes in name and like I said don't worry too much if this is a little bit overwhelming you're not really sure why you use child and parent themes just bear in mind that it's always good practice to make sure you use that child theme I like say if you want to use hello to follow along with this just grab that link from below and you can just upload it in exact the same way that I have now we're going to get rid of these add the themes and the easiest way to do that is click in the theme details and just click on delete so I'll just click on OK on there and now delete the other themes and we'll just come back as to carry on working now you might be asking yourself well if I've got a child theme like a really simple theme like Hello for our mentor do I actually need the parent theme the hello Elemental theme the simple answer is yes you do the reason being a child theme literally contains just a couple of core files the files that generally are the files that change when you customize a theme like I say the functions dot PHP file that allows you to customize various different aspects of WordPress and also the actual CSS file which is where you can style the way things look you don't want to overwrite the original ones but then there's other things like the template files for pages and posts and so on you don't want to edit those and if you do you should edit those and create copies inside your child theme I say might seem a little bit daunting but just bear in mind always use a child theme wherever possible okay so that's how easy it is to go through install and activate a theme we're now ready to move on to the next section so know that we've installed the theme and the key plugins let's just come back in and just configure some of the things that we need inside WordPress itself you can see we get this little wizard in the beginning that says these are the some of the things that you might need to do on your fresh copy of WordPress well we're gonna ignore those for now we're going to close those down we're gonna clean up the look of our dashboard click on the screen options in the top right hand side and we can uncheck anything we don't want to see so let's say we're going to get rid of these various different things so we end up with a nice clean simple interface to work with close that back down and you can see that's got rid of those things I want to bring any of those back you simply come in and just check them and that'll show them so just visually hiding things once you've done that we're gonna come through to the settings section you can see and said there we've got a range of different sections we can go through let's quickly run through the things we need first of all we're gonna jump down to the permalinks now if you've never seen or heard of permalinks before permalinks is basically the link structure for your website so you can see it shows us examples by default you might have something like this which is your domain forward slash question mark P equals one two three which means nothing to anybody what I recommend is use the post name that's kind of one of the go tools that you have available and that'll just make a bit more sense because what it does is whatever you title your post or your page and so on it will use that then as the actual second part of the URL so you're gonna have much better SEO search engine optimization results by using that kind of structure however if you want to go in and create something a little bit more customized you can choose a custom structure and then you can use any of these options to customize exactly how you want you to main and URLs to actually be displayed generally I tend to say post name is probably the most obvious and the easiest one to work with we're gonna save changes on there that's all I want to change at that point you then got things like your media if we jump into the in take a look you can see you can control exactly what media is created every time you upload a file so if you upload an image this will by default create three different versions of your file it'll create a thumbnail a medium and a large version you can also go through and say do you want to organize my uploads in two months and your based folders now this isn't something you see inside press this is just something that actually the file structure behind WordPress on the server this is how it will organize all of your data up to you whether you want to do that it does tend to make things a little bit easier to find if you know a date that you uploaded something however if you don't care you can uncheck that and it'll just put all of your files into one upload folder the next option is I want to go into discussion now if you are creating a website you don't want people to be able to leave comments you can go and do that on a page by page or post by post basis but that can get a little bit time-consuming and unwieldy you may also want to control how people comment whether they have to be registered where they want to be approved and so on see how a load of options available inside the discussion settings what you're going to do is go through and set up what you think is relevant so if you do or don't want to allow people to post comments you have a simple option we can go through and just specify we don't want that to happen so it says allow people to comment on new articles you uncheck that you can create that set globally and if you want to allow it on certain posts or pages you can activate it manually on a post or page it's up to you how you wanna move forward if it's a blog it might be good to allow comments whereas if it's a normal website you probably want to disable that now the things we've got in here then are things like reading which we can go in and specify a static page for our home page and our post page and this is something we'll come back to a little later on when we start creating our actual content and layouts for now we can leave that as is and that's the basics of what we need to do to sort of set up WordPress for this particular example so we're going to move on to the next thing now which is setting up and creating some of those key page elements your headers and your footers so the next thing we need to do now is create our header and footer these are the key components that pretty much every page in your site are going to display so it's very easy to do with elemental Pro if we take a look on the left hand side you can see we've got the template section and inside there we have a range of different sections we can use to do various different things so what we're looking for is to go into the theme builder so if I click on theme builder once we've done that you can see the first thing we can do now is create and out our new templates if you wanted to you could import them so if you are saving templates that you created you want to pull those in and use those as the basis of your next website you can easily do that however we're going to come in with a say add new template this is going to bring us into the template in options and it's a very simple section what we need to do is come in a specified what is this template about to in a click and you can see we have a range of different sections we can create we've got pages sections headers footers single archive and pop-up we're gonna focus on first of all the header section now click on there I'm gonna give it a name we're going to call this default header now the reason I call it default header is because this is the one that's going to be used on every single page unless we specified it separately so this is going to apply to the entire website you don't have to do that you can do it on a page by page basis or different headers for things like your post section for your pages and so on so we'll say create the template they'll then open up Elementor and we can go through and we can choose for any the predefined designs that are shipped with Elementor Pro we can look at the pages which are full templates or we can look at the my templates if we'd create it and upload it our own templates so as you can see because we've chosen this to be a header it now defaults to show us the header section if we click you can see there a range of other sections that group the different templates together so if we will create in something else we could simply go through and categorize those based upon what we're looking for we leave it at header for now we've also then got the option to preview any of these headers by clicking on the little magnifying glass we can insert them to insert them into the page or we can favorite them by clicking on the little heart if we click on the heart to favorite something you'll then find that my favorite section the top will show you any of the things you've hearted or favorited it's a very easy interface ok so we're going to do is we could go to the process of this everything about our website the templates and so on but for speed of this we're gonna use these templates that ship as part of elemental pro you can obviously use these and then configure and tweak them to do whatever you want to get the styling exactly how you want for your site so don't consider these to be a one-click and that's all you have to do you can go in and fine-tune to make sure that they are consistent with the look and feel that you're trying to achieve so for our example today we're going to keep this a really nice clean and simple website so we're gonna choose something that looks in keeping with that so I kind of like the look at this one if I want to preview it I can click on little magnifying glass and that'll show us what its gonna look like so you can see a nice simple clean header if we don't want to use that we can jump back to the library and take a look at any of the other ones by previewing those so you can see we can go through and just choose exactly what fits in is the basis for our header and a come back I'm going to choose this one so I'm going to say insert once I've done that that will download all of the assets that are associated with it and create the placeholder for our new header section now you will notice a couple of things first of all we've just got these gray boxes reason for that is because currently we don't have any menu set up and we don't have our logo associated with our particular theme in this example the holo theme so we can't do that obviously if we wanted to we could easily just delete anything that's in there and add our own site logo indirectly however what I would say is it makes sense to use that logo section inside the Hello theme because what that means is that then if you want to change your logo you've only got to change that inside the customizer which we'll take a look at soon and then that will apply throughout the site that uses that reference the site logo so if you look at the left hand side you can see site logo is the first option and that's pretty much what we have associated here if you want to get rid of anything inside this we can easily come in and just right-click delete so we get rid of my site so you can see we can easily fine tune and configure this the same kind of thing goes for the menu section if we click on there you can see that now pulls up and tells us you don't currently have any menus associated with this section and no menu set up inside your site we will come back and address that soon but for now we're going to leave this as is and we're going to say publish once we click on that that's going to take us through now to the template publishing conditions and it can are very very simple but they're also incredibly powerful what we can do is we can say add a condition once we do that we have two options we can include or exclude so you can build up multiple levels to make sure that you target this template to exactly what you want throughout your entire site structure for this example we're going to say include and you can see we have entire site if I click and expand that out we have three other options in total we have entire site archives and singular now depending upon the type of template you create it will depend upon what you see inside this particular menu so as you create things like archive pages or post pages for the single posts and so on there will be more complex options available and we will take a look at that when we start to create our archive and our single post pages but for now this is very simple we're going to say we want this to apply to the entire site and we're going to leave it at that click Save and close and that's how ahead are completed and now every page on our site unless we specify something else will have that header in place so now that we've associated the conditions with this template what happens if we want to make some changes to those conditions we want to add or change something well it's very easy to do but it is kind of hidden away a little bit inside elemental all we need to do is what we've got the template open we come down to a says update click on the save options the little arrow to the right hand side and you'll see we have the option for display conditions we click on there that'll take us back into the publish settings and we can then go through we'll make any changes to our conditions and then reapply that by click on the Save and close and that will apply those condition updates to that template so it's very easy you can go back in and make changes to anything you've created inside the theme builder of Elementor okay so let's close that down we finished with creating our header for now we'll come back and make some tweaks to that later we'll come back out of this with a click and exit to our dashboard we're then going to go back to our theme builder I'm going to the same again now for our footer just I'm going to click on the footer and then we'll click on add new footer same thing again you can see now it pre fills out footer big blue chose on that tab that come in and we're gonna say we're gonna set this to be default footer and create our template that will then open up the template chooser we can pick any of the blocks pages all my templates and we're simply gonna find something that I think into the design that would come in with and I'm gonna keep it really quite clean and simple and we're gonna choose this particular version so we'll insert that into the page you can see there's our photo at the bottom if we want to make changes to anything on here we might want to take out this phone number we can easily do that by editing either on the left hand side or directly inside that particular widget itself so it's very versatile we can make any changes we want we'll hit on publish we leave it as is and click publish takes two to our add condition click on there and again we've got include you can see the three options are available again and we're going to choose entire site and click Save and close so we've now created those header and footer areas on our website before we wrap this up we're gonna do a couple of simple things let's just come back out of Elementor exit to our dashboard I'm going to cut me I'm going to create a couple of pages only use these blank pages we'll take a look at actually putting some information on those a little later so we click on add new will create our home page we'll click on publish we'll create an about page and publish and finally we'll click add new for the third time and we'll just create a contact page okay so we'll click on publish on there we've created three key pages no reasonable doing this is I need something to put into my menu structure so those basic pages created we're just going to come over now into appearance we're gonna choose menus once we said the menu section we're gonna create our key main menu which we're gonna call it main menu now you have the option to automatically add new top-level pages to this menu this is something that if you create a parent page in other words it has no child pages you can have this automatically add those into a menu structure however if you're going to create a site that has a lot of content I would generally recommend not to do that because you can very quickly and easily end it with a menu structure there's too big for the actual design you're working with so I don't leave that turned off and I've set this is primary we're gonna go to the left hand side now save the wall and you can see all the pages that I can add in are listed so we're gonna choose the home about and the contacts we're gonna add those in if we want to reorder these we can simply drag and drop if we want to make them sub menus we can easily drag and insert those in to the right-hand side of any of the parents and keep the tree simple and just have to start with the whole about in contact and then we're gonna click on save menu that will now automatically associate that menu through with the template for the header because that's going to use the default menu the set as primary so let's just take a quick look at that in action I've already opened up the page and you can see there's our header there's our footer we've got some content in between because we haven't styled that template yet we will do soon but you can see that the head and now has the menu structure in place which we had that gray placeholder however the logo currently isn't displaying so let's rectify that come back into our dashboard we're going to go into appearance again we're going to go into customize that's going to take us through then into the customizer for the theme that we've got which in this example as you can see is the hello child theme so we know we've got the right theme and everything set up so let's go through and just set up that logo so that site identity we can click on there and you can see we have the option at the top to select our logo such as - that was say select logo I'll upload the logo that I'm going to use for this example and we'll drop in some alt text so we'll just call that logo so we've got our SEO covered we'll hit select we'll say we want to skip cropping so we want that to be the full logo now you see that now as that into the top of our design we've also got the option then to go and update any of the information we had when we installed WordPress at the beginning such as the site title and the tagline so this example I'm going to take off the tagline we can also specify a favicon in other words the little icon you'd see up in your tabs on your browser so you can set that in there they recommend 512 by 512 pixels so if you have a logo or something you want to use in there you can easily upload that and that then will be associated with your site okay so let's just say we want to publish that because that's pretty much our header already covered off so that's pretty cool we've got that sorted and before we wrap up this section of the video let's go make a couple of fine-tuning adjustments to our header let's come back out of the customizer we finished with that we're going to come over to the templates section and into theme builder and there's our themes our templates we've just created so we've got our footer or header so let's come into the header first of all and say edit with elemental once we've done that we're gonna take up some of the things that we don't need and we're also gonna make our head a sticky so at the moment I don't want this second section there's no need for that so I'm gonna take out that column by simply clicking on the column and click on delete that now increases the size of our logo slightly and if we want to reposition that that's very easy all we need to do is activate this logo widget and you can see now all the options on the left hand side are available we'll set our alignment to be left I don't want this button on the right hand side so we will do exactly sitting there gonna click on this column right click and choose delete that now gives us a little bit more extra space for our navigation on the right hand side so that's the couple of things I want to do but I also want to make the head a sticky so that's very easy all we need to do is click on the header block itself I'm gonna come over to the Advanced tab come down to motion effects and in there you can see we've got sticky and at the moment is set to be none and I click on that and you can see we can specify we want to be sticky at the top or the bottom obviously this is the header so we want to make sure this is sticking at the top so you click on that and I will now stick at the top of the page we can also go through and specify what device is this is going to be sticky on for this example I only wanted to be available on the desktop the tablet and mobile will scroll alongside the actual content so I can set that on there if I need to set any kind of offset I can do that we might need to come back in and configure that a little later when we put some content in for now we'll leave that at the default values we'll hit update and because what we're doing is making changes to the actual template we've created we don't see the condition panel anymore but again like I say if you want to make change of the conditions you can simply click and open up by using that little right arrow okay so there's our header fine-tune and tweaked we've made it sticky we've got rid of the things we don't want so all its pretty good so that's our header in place of a footer in place let's move on now and start creating the templates for the archive the single the 404 page and so on now before we move on and start creating the template for the various different pages let's just put in some filler content so we've got something to display when we're working with creating our templates what I do is just jump over to the post search and we're gonna come in we're gonna say add some new items in me I were just gonna create a couple of simple postorder the first one then I'll pause the video and I'll go and add a couple more in just so we've got some information so we're gonna call this new post and we'll simply just drop in some filler text we'll come over and we'll just come in and set a featured image and we'll upload a couple of images that we can use for our featured images so I'm just gonna grab something from this folder grab some lower resolution ones and doesn't really match too much what we've got let's just use just a couple of images and we'll say they'll do drop those up there let them upload and we are pretty much done so we set up a featured image with the first one click on set featured image and we've got our first post in place we'll hit on publish now I'm gonna go through and do that a couple more times just so we have that content where we'll work with creating our templates just makes the whole process easier to visualize when you actually see some content on the page so bear with me I'm gonna do that quite quickly now there we go we've got a couple of posts now all set up so we're ready to move on and create those key templates for our website let's just jump over and take a look at creating those right now now when you're building a website from scratch using some like the Hello theme just as the basis for keeping WordPress happy you have to go through and create all of those key template pages if you created something that just relies on pages and it doesn't use posts you could basically ignore the archive in the single post pages however for this example we are gonna be creating those so we're gonna take it for granted that there's gonna be both posts and pages so we need to create all the different templates now Elementor pro mix is incredibly easy if we come over to the templates section and come into the theme builder area you'll see we now have tabs at the top for the header footer single and archive now what might be a little confusing is when we talk about the single and the archive basically an archive is where you see a list of your posts so that sort of blog page where it'll show all the different posts that are available and then the single is the template that's used to actually view the individual post itself now just to make things a little more complicated the single also relates to things like pages so when you create a page whether that's something like an ordinary page you create or a 404 page that's also created through the single post section now what we do then is we use conditions to specify where these different templates are used now this seems a little bit complicated don't worry because there's because of the process it should become considerably clearer and as always if you've got any questions anything you need me to clarify look at the comment section below so you can just hop your comments in there I'll come back and help as many people as I can if you get stuck okay so we've already gone ahead created our header and footer let's start off now but creating our archive now click on archive we're gonna take us to now and you can see it gives the ability to create our first archive we click on add new archive we then got the option to choose a different template type but because we want to create an archive archive is fine we're gonna come down and we're gonna say default post archive again getting into obvious logical naming conventions makes the whole process of creating content and templates much easier so anytime we see this I know this is going to be the default post archive and if I created specific archives for specific sections categories and so on then I can name those accordingly and then it'll just make the process easier so get yourself into the habit of creating a naming convention that makes logical sense to you especially as projects get larger and more complex okay so let's create our template now for this video I'm not gonna go through and build out tons and tons of templates we're going to do this for speed we're gonna create the pages using the templates that we have inside Elementor this gives us a great starting point if we want to go in and fine-tune or tweak any of the aspects we can do that without having to start completely from scratch but if you do want to start from scratch you can do that and I will show you some of the basic things you can do when you're creating and working with these templates to make sure you get the information that you want inside your actual layout okay so you can see we've got a range of different predefined templates that are part of Elementor pro and in much the same ways we saw with the headers and footers we've got the same options we can preview we can go through and we can add this to our favorites and we can then go through and activate it so let's simply find a template that we quite like and I'm gonna go for this one we insert that for our archive and there's our archive template you can see it's now pulled in the post so we just added in this so we've got some content to see now we can change anything we like about this we can simply come over click on the little blue edit icon you can see now on the left-hand side we can go through what we can fine tune and tweak this entire layout so you have a ton of control if we want to change this background color because at the moment it's actually shown as a gray which I don't want so we're gonna click we're gonna come over to the Style section and we'll just set the background we'll clear that so we now have a nice clean white background we can then come in and edit the actual archive itself and you can see at the moment we've got the classic skin we can click on there and we can choose from cards and that will then fine tune it and as you can see now we can go in and adjust the number of columns so we could say we want to keep that to 1 we want to have it to 2 so you can see we still have full control over how we want to edit this will up the quality of that image tipico better-looking thumbnail I'm gonna come down there and I'm gonna get rid of the avatar image we don't want that on there and we can go through and just just configure this to get exactly what we want now when I don't allow comments on yours we can just click to remove comments if you want to you can see if we want to add anything else in this we could say the time this was posted so it all easy to add in come over to the Avatar section I will just click to remove that and obviously if we want to go through a style anything on here we can go through and we can edit all the Styles the colors everything to match in to exactly what we want now obviously you go ahead and take a lot more time to make sure this exact looks exactly the way that you wanted to we've seen some of the tweaks we can make and how easy it is with Elementor but now we're just going to go through and set this to be the archive page for all of our posts as always we come to the publish option once we do that that'll now bring up the conditions and we can simply go through and add our condition in so you can see it looks exactly the same as it did before with the only difference saying this has all archives however if we click and open that up you see we now have a lot of options on which you can go through and fine-tune tweak where this archive page is going to be used now for ease of this I'm gonna set this to be all archives so this will show for the post archives for category archives tags the author archive and so on but obviously if you wanted to tweak the layout for each of those individual page types you could do that from this point so say all archives and we'll just say save and close that's now become the default archive for anything on our site that uses an archive layout okay so we've done that let's come out of this and we're gonna exit to our dashboard we finished with this particular template so we're gonna go over to the theme builder again now we're gonna go through we're gonna choose the single so this is now gonna be where we create the template to display the actual post content itself again you can see we've given the option to go through and say we want to add a new single in this example we click on there and you can see we've got a third option this time we've got single select the post type and then give it a name we click to open up the select the post type you can see we can create a single post type for posts pages media and 404 for this example we're going to do the post first we're going to come back and take a look at doing the pages and the 404 later on so click on post we're going to call this default single because this is gonna be the default layout for any single page lips unless we've set a different of a page layout so say all posts will have this particular layout so because they create template once you've done that again will be taken over to element or we can go through or we can choose from any of the redefine templates we can go and create our own template or we can upload a template that we've previously created and/or saved into our copy of Elementor that we're working on again we're gonna keep this really simple and straightforward gonna use one of the predefined templates because you've already seen how easy it is to edit and configure and tweak everything you want but again I will show you some of the options that are available when we're working with templates and it's specifically when we're working with single post templates so let's take a look what we've got we've got a range of different layouts and again we want to keep this really nice and clean and simple to kind of keep him without the theme that we have with a site of less clean simple site so I'm gonna go for this option gonna come over and we'll click on insert it says you want to import the document settings of the template attention imported may override previous settings well we haven't actually set any previous settings so we'll just say yes we're happy with that that'll now download all the assets and create that blank page layout for us using that template so you can see now is pulled in all the design options now as I said at the beginning of this section there are a lot of other options you have available and a lot of them you use on the page in front of us but if we take a look on the left hand side because we're working with the template and specifically a single post template we have eight different options currently that allow us to configure and tweak the content that's on this particular template so you can see if we've got things like post title post excerpt content feature image and so on so you really can't get in and fine-tune or tweak to get exactly the layer that you want using these predefined widgets so let's see how we can make a few changes to this you can see the page looks pretty good all our basic content is being pulled in we've got some more content to explore the bottles of related articles we've also got a comment section at the bottom for if this is enabled on post types then they will see this and obviously the post thread as well so let's just scroll back up let's say we wanted to make some changes this header for example let's pop in the meta information and there was the date the post title and so on let's pop that up in there and clean up the actual content itself a little very easy all we need to do is come over we've got edit section which will choose the entire layer or we can just click on this header section and if we want we can just simply come into these various diff widgets drag them up into there you can see that we'll put them in there we'll do the same with the post title now obviously the formatting the position and so on doesn't currently work because it was set to go to the white of the page below but we can tweak that very easy as with everything with elemental we have full control just come over we're gonna click on the title to start off with we'll set that to be centered we'll also come in there to the style and we'll change that to be white so that'll stand off a little bit better now we can come in the typography if we want to I will just change this a little bit so let's just say I want to use a thinner title I want to set my title be all uppercase that looks pretty good I'm gonna go through to the letter spacing we're just gonna open that out ever so slightly come on to the Advanced section and you can see currently there's a 40 pixel March at the bottom we don't want that so we'll just remove that from there and we'll do the same kind of thing now for the actual metadata underneath this we're going to click on that we'll set this to beat it and the style to be centered will come in you'll see we've got the option then for the icons we can change the color on this we'll set that to be white I will do the same then for the text we'll set that to be white as well so now we've just taken a predefined template we've tweaked it and made it look exactly how we wanted to look easy to do and just goes to demonstrate that just use in a template you still have all the options to configure tweak and edit before we move on is one other thing I want to do we don't know what image is going to be placed at the top of each of the different posts so at the moment that looks okay with the white text overlaying it but that might not always be the case so we're do is we're to come up we're gonna click to edit a section color style you can see that this using dynamic information now to pull in the featured image which is what we're seeing at the top we then have all the controls to control exactly the position of the actual image all those kinds of good things you can see at the moment this is set to fixed so it will stay in place we look over to the background overlay and we're gonna set this to be just normal over at the moment is set to be a gradient as you can see but we'll come into the classic we're gonna set this with black that's fine we're gonna adjust the opacity to make that a little darker well 6.65 where are they so you can see now doesn't matter what pictures behind we will always see our white text place over the top of that so just a design thing to think of it is a template it could have any image underneath it so we need to cater for that but what this should demonstrate to you is it's very easy to edit those template files so what we're going to do we're going to come to the publish again you can see we've now got the option to go through and set up conditions however we now have two stages to the condition you can see we've got potion if we open that up there are a ton of options so you can really get right the way down and fine-tune exactly what template is going to be used throughout all the different sections of your site you can even use some things like conditional logic for example any child of a particular category for example by a particular author and then we can use the filter on the right-hand side to fine-tune that actual setting so for this example we're just going to leave it set to posts and we're going to set it to also all of the posts we'll use this template so let's just come through and say save and close we've now created a template and assign that to all of the single posts so pretty cool next up we're going to come through and we're gonna make one more template that we need because currently we've only set the template up for posts and for archive so if we have a page we won't have a template associated with it so let's just change that now gonna come through and we're going to exit out to our dashboard again we're come into the theme builder area where they come into single again and once we've done that we're going to come in and we're going to create a new template so all they'll do is say add new single is fine but this time we're going to set this to be page as opposed to post so going to click on page we'll call this default page template and click on create template now for this we're going to keep this really simple because we want to have the page that have the ability to go through and do whatever you kind of want with it however you can see we've got a ton of different options predefined layouts we could use if we wanted to but I want to give full flexibility to not use any kind of template other than a blank page to be able to create our content so let's click on blank for this and you can see that'll show us where it's likely we'll just say insert we now have a simple clean blank template it's going to be used to just have the header and footer on pretty much nothing else so we're gonna do is we're going to come down and then I click on publish say pages and we leave that to all save and close and that's the template now for our pages so let's take a look at what we have now on the front end of our site to see how this is working we're now taking a look at that test site so you can see we've got our blog listing as our home page because currently we haven't set a custom home page so by default WordPress will show your typical blog archive so you can see this I will lay out this our setup for show in our archive if we click on any of these items we'll jump into that new template we created for our single post you can see there's our custom title at the top all the options we've set up in there using that template in the tweaks we've done to it so that's looking pretty good now if we Cho go to the about page which is going to be just using that normal default template we just created four pages we'll see one little problem I'll click on there we just see in a full-screen layout we've got the headers and footers in place that's great but all our content is now sort of going white and full screen that's not really what we want but changing that is incredibly easy and this is one of the beauties of using templates as part of Elementor Pro let's come back into that template we just created and we'll select the area at the top this gray box which is effectively our template now you can see if we look on the left hand side under the layout section we've got content width full width what we need to do is set that to be boxed now any content we happen if we just click on update and we just jump out go to that page and refresh you see we now have a nice set of margins on the right and the left hand side so everything is now boxed and we can obviously override that simply by using the full stretch stretch section when we create in any kind of template so that's how easy it is to create those templates there's one more template want to create before we move on to the next section and that is the 404 page template so we're gonna do is gonna come back under this exit out of our dashboard come back into a theme builder come into a single and we're gonna say add new this time we're going to choose a 404 page and we're going to call this default 404 so I say create a template now if you don't know a 404 is basically just a page that if a link on your website is not working for example you might have change the link you might have deleted the page and so on I default you'll get a 404 not found page and depending upon the server setup that you using you might have something that's a little bit customized as part of your hosting account or you might just end up with a basic 404 page that's part of your browser not really the best way of handling it so what we can do with this is we can create our own custom 404 pages and as you can see again we've got a range of predefined templates which we can use at the basis and we will just use one of those for now so we will come in to this particular one I will just say insert once we've done that that'll get do the usual thing download all of the bits and pieces we need all the assets and then create this 404 page for us now we can come in and fine tune and tweak any aspect of this as we always count with elemental but we're gonna leave it as it is because it's okay we could put some links on it to various different things we think people might be interested in but as you can see the main one is to go back to the home page and continue your search so let's click on publish and we get our conditions and you can see this is include the 404 page so you one thing you should be noticing is that Elementor when you create these templates and you choose which type of template you want Elementor is it's kind of intelligent enough to know that there are certain things you're gonna do by default for example with the conditions it's automatically saying well this is for the 404 page so it speeds up your process of creating these custom templates throughout your entire site so we're happy with that this is for the 404 page we click on save and close that's now our custom 404 page setup so we created the key things that we need as the basis for our WordPress website using the hello theme and creating our own custom theme pages next we're gonna do is move on and take a look at how we can rapidly develop pages using a similar technique but this time instead of using templates we're going to take a look at the elemental page templates in other words the different blocks and stuff that make up the actual content of the page not the sort of placeholder I'll become a little bit clearer now what's that going to take you through and show you how to do it but this is a great way of a speed up that process of creating and prototype in your website and then just change the information in to make it a bit more customized so let's just jump on to that section next so let's take a look down and how we can create a more customized home page currently we kind of view in just our latest blog posts so let's go through and create a custom home page and then assign WordPress to use that custom home page as the first page of our site okay so let's come into the home page section and we come into that page and as you can see at the moment it is just literally a blank placeholder page what we're going to do is win a come here we say edit with Elementor once that's loaded in we can now go through and either start building up the different pieces of our page ourselves or we can use either the full page templates or we can use the blocks templates so let's just click on the template options or add a template now all this talk of templates inside elemental can kind of get a little bit confusing because we've been talking about creating templates that are part of our theme the theme builder section I'll also take a look at templates again now so what's the difference between the two different types of templates easiest thing to do is when you're looking at a page template like this where we take a look at on screen right now this is just a predefined layout for a page that you can use and it is only an individual page for example your home page your about page and so on whereas the theme builder templates where you just created for the archive pages the post pages and so on they are applied across the entire theme so every time you create a post you'll have that inserted into the archive page template and you'll also have it part of the singular post template hope that kind of makes a little bit more sense it's easy to get confused between all these terms of templates so as you can see we've now got a ton of defined pages that we can use and pull those in and use those as the basis for our designs if you don't want to use an entire page you can come out to the blog section and these are the individual components that are on a typical page so things along the lines of about section you've got things like call-to-action clients contact and so on so these are different building blocks we can use to speed up the process of creating typical sections on our site at which point then we can go through and completely customize every aspect so let's take a look at this in two parts first of all we come to the pages and we'll pick a design now that we think is going to be in keeping with the type of website that we're going to so you said we can't create a something that's nice and clean and simple so let's find a design that we like that fits into that ethos so we'll scroll through until we find something that we think actually that looks pretty good okay let's find something that looks good let's just say we're gonna focus on a clean and simple like this let's preview that so you all the different elements you can see this is quite a nice clean simple some nice colors some simple animations and so on so we'll go with that one hit insert that will again do the usual thing which is download all the assets to our local sort of set up our hosting account and there's our page created already set up for us so now we can go through and fine-tune anything we want on here so the say for example we want to put an image into the background we can easily do that by selecting this section come to the style set in come over and choose an image click find an image you want to use we just go for something like this and we'll insert that in there and then we can go through when we can just tweak that to say exactly how we want this to be so we want this to sort of be no-repeat and we'll set this to be cover and we'll also cover with the end so we'll go into the background overlay and we'll do a nice overlay on there so we'll just say we want to use a particular color we go for this we'll just adjust the opacity so you can see it's incredibly easy to come in and find him so now we can come in and say change any of this so we can say super easy to make changes to this any aspect of this can all be changed in just seconds okay so we'll say that we're happy with the look and the layouts there's our home page we'll hit update so that'll create the design for the home page but currently it still isn't our home page if we come back over to our site and we go to home you'll see we still have that blog archive so how do we change that super easy come back over into our dashboard will exit out of Elementor we finished with that for now we're going to do is we're going to come into the settings section when I come down to reading once we click on there you'll see we have the option by default it says your latest posts which is exactly what we were seeing however what we want to do is set this to be a static page so you say our home page is going be the homepage hit save changes on there we'll come back over now refresh this page is still the homepage will come back click on home and you see now there's our newly designed page added into the site for us all fitting in perfectly into the design using a simple way of creating those pages so that's how easy it is to create your home page how we can use those templates at a part of Elementor and how we can quickly and rapidly make changes to anything that's on that particular page so let's take a look at the second type of template we had which with the blocks template so we're gonna create a simple about page currently that's just got some filler text on this just come back over we're going to go back to our pages come in to all pages and we're gonna come into the About section so let's just edit that we simply come in and take out this text and we'll just update our page then we'll edit it with elemental so we click come in to the elemental editor once we're in there we're going to come through again we click on the templates this time we're gonna go to the block section and we're gonna pick out some blocks that we think are going to be useful so we come in you can see about is a section so we can click on there and that will now sub filter it out and show us the designs that I designed perfectly for about us pages so let's just find something we think is kind of in keeping with the design that we we're looking to achieve so we want that clean simple interface that clean simple layout that we want this can I say let's have this one that looks pretty good we'll say insert so let that download all the assets there's our page inserted if we want to come in and change any of these images the text we can simply click whatever we want to do with it so we've got full design control over all those different aspects we'll hit update once we've done that let's come back over to our page will refresh this again and there's our page all nicely design fitting into that nice clean design ethos so that's how easy it is to use both page templates to use that as a starting block with the entire page set up and designed at which point we can delete edit change to whatever we want and also how we can use the blocks and we can build up various different parts now if we wanted to add more to this super easy come back over we will add another template in we can click to add a template and let's sort of use this sort of pull old kind of thing at the tops we will insert that now as you can see that's underneath the images which isn't necessarily what we want so I'm gonna grab that drag it up until we get to the top and then once we get that in there we'll let go and it drops it into place now if you find this is a little difficult sometimes or even more complicated pages moving things around can become quite awkward it's a very easy way and something that elemental added a couple of revisions ago that makes life considerably easier it's called the Navigator so we click on the Navigator the slope of this little panel which if we want to we can simply dock to the right hand side of the screen so now we've got is a visual representation of the entire hierarchy of the page sounds really complex but it's super simple if we expand that out you can see every single element on the page is available to us and that allows us to select all those different things so for example where we've got this section then click on that it highlights this is a section we click on column it'll highlight the column so you'll see we know about the box around there we can go inside there and say there's the header there's the text section underneath it we want a different column we can click on that it'll scroll down and show us exactly what we've got selected so if we just shrink these up where we've got these sections if we want we can simply just move those around and you can see it updates in real time and shows us exactly what we're doing we can also make things visible and invisible so let's just say we've got a really complex long page with tons of different sections on and we want to make just things a little easier when we're working well you can just turn them on and off doesn't get rid of them it's simply just hides their visibility on screen while you're making those edits and changes so again a really super simple so let's just grab our section backer to the top so we've got that exactly we want and let's make that a little easier to read so we gonna click on it cover the style so in the background we still need mo to the background type gonna clip we're gonna come to the color and we're gonna set this to be an incredibly pale couple of shades down from being white just to give it a little bit of visual separation now there's something to be aware of because we set the page up to have the template for the page to be boxed that means if we just update this now and take a look at the site will find that the actual content itself isn't being full width so as you can see our gray is only showing to the box area how do we deal with that pretty simple come back over we're going to select this particular section go to layout and we're going to set the stretch section to be yes or alternatively we can just take the box and set that to be full width however if we do that the entire content becomes full width not just the background so we set that the boxed stretch our section and hit update and then we come back over and we'll refresh this page we should now see that they our background now fully stretches out all the way across so like I say we've got flexibility Elementor makes it incredibly easy to update and make these pages look exactly how we want there's one area we haven't actually touched upon yet we've gone through and created all the various different templates we need for pretty much the entire site but we've only looked at how to work with desktop we never take a look at working with mobile making our website responsive because we've used previously sort of designed templates and so on as part of element or we can kind of take for granted that a lot of different aspects of sort of mobile responsive has already been catered for but if you're creating these from scratch or you want to have more control over how they actually look on a mobile or tablet we can do that very easily with elemental so let's see how easy it is to go through and actually create mobile responsive designs using elemental we're going to just choose one of our templates and we're gonna start off just by going into the default single for a single post template we'll edit that with elemental that'll take us back into the editor and then we can do is we can see exactly what it looks like on a desktop but if we want to see what it looks like on other devices all we need to do is come down onto the panel on the left hand side come to the responsive mode and you can see that gives us three options based upon various different breakpoints in other words which types of screen resolution will change the way things look which is a desktop which is a tablet on which is a mobile so we need to do is click on tab but for example and you can see now we get a mobile responsive representation of what our site is going to look like so you can see we can scroll through and make sure everything looks exactly as we want it to look all the different aspects are in the right order and so on so everything looks fine on there if we jump over to the mobile view you can see everything looks good on there as well if we scroll right the way down you can see we've got all the different aspects of our page layout all set up for us okay so that's how easy it is to see what they look like but what about how do we control these things how do we control various different aspects of this maybe hide different elements that we don't want to show on a mobile device and so on again really really easy if we scroll back up to the top and let's just select something like our title for our post if we look on the left hand side you'll see we have things like alignment and you can see we have three simple little icons this is your desktop this is your tablet and this is your mobile now because we're a mobile the UC Mobile is currently highlighted in blue so we can see that this is the particular layout that we're currently looking at the beauty of this is we can change various different aspects so every time we see these symbols we can change the parameter that's associated with that based upon the device that we're viewing it on so for example we can adjust the alignment based upon whether we view it on a desktop a tablet or a mobile if we cover the things like the Style section you can see if we come into typography again we've got those icons available to us so we wanted to we could make the title smaller when we're working with a mobile we could make it a different size on a desktop on a different size on a tablet different alignments different weights different line Heights and so on and so forth so it's incredibly easy to customize and tweak all of the different aspects that you need to to make sure your design looks perfect on mobile and tablets let's take a look at another option so let's take a look at these icons now for our different social shape again you can see if we scroll down on the left hand side we've got various different options we can adjust the number of columns that are used to display these different symbols we can adjust the alignment and we've got a lot of control just by using those simple options again if we come with a style you can see all of those different options border sizes button Heights and so on all have options to change them based upon the device again typography has the same kind of options so we can adjust size letter spacing and so on if we come over to the Advanced section you can see we can adjust the margins the padding all those kinds of things are catered for inside Elementor so let's just come back over to this and let's just say we'll set the column value for example so let's just say on a mobile we want to have just one column you can see that immediately changed the look and feel if we now switch over to a different type of device you can see now we're back into a tablet we've now got four in a row as opposed to four individual rows because we have no column value said well let's just say for example on the a we want to set that to easy come back over then to something like the columns and again you can see if we change that from auto and we'll just say three only you can see each time we change it if we switch between the different types of devices all those different settings are associated with each of the different devices so it's very very easy to go through and make sure that everything looks too where you wanted to so that's the basics how parts of other things how about we say we don't want this left-hand column to display when we're actually looking at mobile can we do that we can very easily go to the Advanced section we'll switch over into responsive mode and we'll go into mobile so you can see if we scroll down right at the bottom we've got the information about the author of this particular article and I don't like the way that looks so I've got a couple of options I could go through adjust the styling on there to make sure it looks exactly as I want or I can go through and specify whether this is viewable or hidden on different types of devices in this example let's just say you want to hide this based upon if anyone's using a mobile go to the Advanced section all we need to do is come down to the responsive and you can see we have three checkboxes we can hide this particular item on different types of devices so we say hide on mobile making sure that we've got this row column selected we'll click on that now even though it's no shows it in the editor that will now be hidden on mobile devices so we won't see that section at all in our design unless we're looking it on a desktop or a tablet it is that easy to show and hide things so by using this very simple method you could easily set up different kinds of layouts based upon the device that's being viewed on so you'd have a slightly modified layout for a desktop or tablet or a mobile and do whatever you want with each one of those so it's pretty cool how we can use those responsive options easily inside Elementor so as you go through the process of creating your templates creating your pages it's a good habit to get into to ensure that they look great upon those different devices knowing that you can fine tune and tweak everything so get into that habit that when you're creating these set it up in whichever method you want first whether you work in from mobile first and then you want those things to scale up towards the tablets and desktops or if you're actually just creating responsive where desktop is your key audience then degrade gracefully so go through the total process of setting the desktop the way you want to look then move down to the tablet on finding the mobile to make sure everything looks consistent and the way that you wanted to get maximum control over the way that your site looks on all the different devices that people can view your site on okay so we've gone through now and created the majority of our entire site the templates and so on we check our mobile responsiveness and make sure that everything looks good there what's left to cover and take a look at well it's great to be able to use something like Elementor and when you creating templates that's really useful because you can then style things like headings and subheadings and so on there's different elements that are actually pulling in dynamic data from just the posts that you create but what about if you're creating a post layout or a page layer that's independent of those themes and you want to have some consistency of the font styling colors and so on how can we actually set things like that up because we're using a theme like hello it's very stripped out very basic leaving us to basically control every aspect over those very simple things we have like logos menu choices and so on well we got a couple of ways we can do this I'm going to show you first of all how we can set some various different things up inside Elementor and then I'll show you how you could be on that and actually start custom coding your own CSS definitions so let's take a look at how we use element or first of all if we come into Elementor and we come into for example one of our posts or one of our templates it doesn't really matter where we go as long as we can access Elementor what we can do is we can come in with say edit with elemental that'll open up the elementary editor and it gives us the ability then to go into some of the different settings that we have available so we go to this top menu in the very top left hand side click on there you can see we've got some additional options now up until this point all we've done is use exit the dashboard we've also taken a look at maybe like the view page by either using this search and all the icons at the bottom however we do have some great controls here for example we come into default colors you can see we've got four default colors that they use throughout the site so whenever we add something in because our theme doesn't control this currently we have the ability to specify what those colors are now if we take a look underneath you can see we've got some predefined palettes and if we choose one of those then various different things on our site will change so you can see we mouse over now the links at the top they no longer blue they're now red however if we come down to for example this royal one you can see we've got different colors again and we mouse over you can see we've now got purple colors ivory Canada Earth rigs you can see we have various different colors there as well so we have this sort of burgundy color so we can use any of those pallets or we can easily come in and customize and choose our own so if you're working to a specific color palette you can easily come in set your color palette up inside you and then those will apply throughout your designs your templates and so on wherever those colors are reference your primary secondary text and accent and so on so you have that level of control so you can change those if you want to let's just reset that we'll simply come back are they next up we've got default fonts now at the moment with this we do only have pretty basic level of control over what fonts are used and where they used you can see we've got primary headlines secondary headline body text and accent text so not a huge amount so if you want to go above and beyond this and you're not relying upon a theme to do it then you are gonna have to get your hands dirty and use some kind of CSS coding which again we'll take a look at in the second part of this section but just take a look so we've got our body text on this particular area we're previewing so if we come down and we say we want to change this we could easily come in and say well we want to change the font weight and you can see immediately that's updated and the nice thing with this is this will update throughout the entire site because we are globally changing the values inside this particular section through it anyway in elemental so that's very very powerful but like I said we are still slightly limited by the amount of actual settings we currently have in here so hope this is something that elemental will elaborate on further down the line at the start to give us full control especially where people are using the hello theme because it does give you a great level of control to have more ability to make changes to headlines and so on and so forth ok so let's just say we wanted to change this from being Roboto you can see we have literally hundreds of different fonts we could use on there so we've pretty much got all the google fonts we've got normal safe fonts and things on this you can see custom fonts with a default we've got your system fonts which you'd normally expect to have and like I say then you have Google you can go on if you want to imagine your own custom fonts that's beyond what I want to cover in this video but you can do that through the Elementor settings panel where you can add things like that in however we're going to keep this straightforward and use most people are gonna do which is using those google fonts all the system fonts so if we wanted to we can easily come in here and let's just say you want to change Roboto so open sans click you can see that immediately updates if we want to change the weight we can do that something crazy or we can take it is something we think is a lot more readable so again very very easy to do we can't change the size on here we have to do that inside the element or editor itself for the relevant section there's pulling in this dynamic data or we'd have to do this inside the actual post or page itself so you can see you do have some control there but not a huge amount of control we come back out of that we've got the color picker now anyway you can pick colors throughout the entire elemental site editor you can choose any of these eight colors and by default you've got these particular acres and again underneath we've got palettes of colors that are predefined so you can use any of those if you want to however you can again simply come in and customize any of these colors to make sure they fit into the custom part that you're working with for the design or the site you're currently working on so like say anywhere that color picker for example things like your fonts you drop shadows and so on these eight colors will be evident there and you can change them at this point and they will reflect again throughout the entire website any changes you make to these colors will also be reflected through your design so keep that in mind if you change colors later on down the line that will have a ripple effect through your design so that's how we can use the basic controls inside Elementor to set up things like color palettes color choosing and go through one sets with the basic fonts we do have some more controls if we come into elemental and what we do is you can see we have custom fonts if we want to add our own custom fonts in there however we can override those options if we want to let's just say we want to come in unspecified that we don't want elemental to control any of the sort of type typography colors and so on we can do that what we need to do is go into the settings panel inside there under the general section you can see we've got options to disable default colors and disable default fonts so no matter what we were set then in that elemental panel we just take a look at they would basically be ignored completely so if you are finding that when you're trying to set up some custom CSS styling and you still find in that element or is overriding it it's good idea to come in to this point and change those settings to make you have full control over all of the fonts and styling colors and so on throughout the entire site so you just bear that in mind okay so now let's take a look at how we can put that custom CSS in what we need to do is come down to appearance and go into customize and inside the customize we've got back into our theme you can see we have a tab that says additional CSS if we click to expand that out we can now start custom coding CSS directly inside here so you want to start typing something in and adjusting things like your headings 1 2 3 4 5 & 6 you can set those up so you can set things that your colors size line spacing all the things you can do with CSS so if you are comfortable working with CSS you can do that directly inside this particular panel however if you're not that comfortable with CSS and creating your own there is another option we can use plugins like CSS hero now CSS hero allows you to visually edit and change pretty much every aspect of your entire site and can go beyond a lot of the things you can do out of the box styling and laying things out inside element or elemental Pro so if you are looking for a visual way of doing these kinds of things I would highly recommend take a look at that there's a link in the description below so you can check out more on that I've also got a couple of videos on the channel that demonstrates exactly how to use and get the most out of CSS hero so please check those out I'll link those in the description below so you can take a look but it's a great way of creamer customize the entire site without that dependence upon built a custom code everything yourself the great thing about it is on the front end in other words what people see all CSS hero does is add an extra CSS stylesheet in that's independent of your theme and everything else you do so if you want to undo any of the changes it's incredibly easy to do so check that out if you want to there are alternative things like yellow pencil which is another option you can take a look at that does a very similar thing I don't have any experience of using that so I can't comment I tend to use CSS hero in my projects so that's how we can go through we can customize the various different CSS definitions and style and colors throughout our entire site so interrupt the video up at this point we've gone through and covered a whole range of different topics and skills we've taken a look at how we can take the holo theme which is a bare-bones theme just to keep WordPress happy we've got to the process of creating all the key fundamental templates for a wordpress website we've then gone through create some simple content we've customized things we take a look at mobile responsive a whole range of other topics this is just scratching the surface of some of the great things you can do using elemental an elemental pro the theme builder and the theme like Hello theme so as always I'd love to get your feedback on this video if you enjoyed it give it a thumbs up if you didn't you can give it a thumbs down that's perfectly fine but as always let me know why you didn't enjoy it in the comment section below as always speak in the comment section I'd love to get your feedback on this video and everything we cover on the channel let me know have you feedback let's get that conversation started well - beep or C this has been wptouch and until next time take care

Channel: WPTuts

Views: 38,010

Keywords: elementor website from scratch, elementor website, elementor website 2019, elementor website builder, elementor website demo, elementor website design, elementor website tutorial, elementor page builder, elementor pro, elementor tutorial, elementor wordpress, build a website, create a website, create a wordpress website, how to create a website, how to make a wordpress website, make a website, make a wordpress website, wordpress website tutorial, Hello theme

Id: hRjlgmAlZWI

Length: 77min 43sec (4663 seconds)

Published: Thu Mar 21 2019