Elementor Theme Builder Tutorial [Elementor PRO Tutorial]

Key Takeaways

hey party people my name is Darrell and and today in this video I'm gonna help you all understand how to use the Elementor theme builder now in case you still don't know what the theme builder is maybe you're new to Elementor and you're not really sure the theme builder allows you to build a custom header a custom footer a custom page or post on virtually any part of your website without having any restrictions or even overriding the current theme that you're using so for example right here I have this menu right here now if I click on abouts right here you're gonna see that the header is different so the reason why the header is different is because I'm using the theme builder to apply a different header to virtually any part of my websites here I have also my products now right here you can see that this is just a basic shop page now here I'm gonna click on shirt you'll see that this is a custom a custom product page that's designed specifically for my websites now if I go over here and I select another product you're gonna see that it looks different because this is the default WordPress product page so you can actually design a fully designed custom product page because some category page etc now I'm gonna cover that in another video and I'll put that in the description below but in this video I'm gonna cover the general overview of the theme builder and just explain how to use it now the first thing that you're going to need is the Elementor pro version so I'm gonna go ahead and go to my seat what might feel a link I'll go ahead and put a link in the description below but the theme builder is only available in the pro version so if using the free version you cannot use the actual theme builder so you'd have to go ahead and purchase one of these plans personally I would just go with the expert because for $1.99 for a thousand websites I mean that's all you'll ever need so I mean the 99 for 3 websites not that good and I wouldn't do that one that's because that's just only for one website so yeah you'd have to have the pro version you know if you already have the pro version cool if you go ahead and follow along with me so the first thing that we'll do is we'll go to our dashboard right here and we'll go ahead and access the theme builder so right here under templates you'll see theme builder now I've already kind of messed around the theme builder on this website and I've already kind of designed some stuff just to give you an example so I did the single product I did the custom header but I'm gonna start from scratch just to give you an example so I'm gonna go ahead and move all these to trash and I'm gonna start completely from scratch with no help whatsoever so the first thing that we're gonna do is I will go to the header option so the header option is basically controlling the header so again that's the menu style so right here add a new header and you can give your head or a name so I'll just do something like main header now you might want to title this appropriately so for example if you want a specific header for e-commerce pages or product pages you would probably type with something like e-commerce header page just to give you an understanding and a reminder of where the headers being applied to so right here I'll do create templates now the thing I like most about element tourists theme builder and it's actually I think that Davies is a little bit more intuitive but I think this is more convenience because look at this we're given a huge amount of templates it's simple to use we would just pick pick it and edit it and then that's it you know so right here we can go ahead and take a look at some of these or you can build out your own personally I would just use these and then you can kind of edit it and adjust it how you want so for example right here I'll go ahead and insert this one right here so this right now would be my current header now again you can fully design this any which way you want you can style it so for example right here under style you can change the color you can change the font you can change anything that you want you can add different widgets to it so maybe for example you want to add another image like rights let's see right here let's let's see what we can do here so this is the actual menu we can go ahead and see if I can just put like a button over here or something like that button there we go something like that and then here I can edit it I can make it smaller and then this would be applied to wherever I want it or it can be applied to my entire website so you can go ahead and design it from scratch or you can go ahead and like you know mess around with its now the great part is that all of these links right here will automatically be converted from your previous menu so when you have your menu and you create this this will automatically adjust to your old menu so let me just go ahead and run you through it so I'm gonna go and delete this really quick just I'm just giving an example so you can kind of go ahead and go to these modules and build out your own custom header or you can just modify the existing one so now that I have this right here what I want to do is I want to click on publish alright so now we have conditions so where do you want this header displayed so right here we have to add a condition so I can say look I want this applied on the entire website so I want to replace my current header right or we can do something like singular where now I want to go ahead and put this menu on only specific areas so right here I can say I want this menu only on I'll I'll select pages and I want to do something like my about Us page so I only want this menu or this header only on a my about Us page I want to keep all my other my default header because I like it right so that's up to you you know if you want to go ahead and do that also what you can do is you can say I want to put this on the entire website as well so right here entire website however let's say for instance you want to keep your current your default menu on just like one or two pages so right here I'm gonna say exclude and I'm gonna say look I want to keep this header on the entire website however I want the default that I want the default menu to be showed on the about Us page so let's go ahead and run through this and see what happens here so I'm gonna go to save and close and it's now published so what I'll do here is I'll go ahead and exit to the dashboard and I'll go to visit sites all right cool so now you can see that my menu is being applied and if I go to my accounts page you're gonna see that the menus all applied there now if I click on the about Us page right here you're gonna see that the the menu is still there so what I'm doing is I'm just giving it condition so I'm saying put it on the entire website just not on the about Us page so you can see here now that's we have full control over our header etc so there it is displaying displayed everywhere etc now again you can always change this by just going back to your theme builder so these options aren't permanent you can always go back and change it so right here we can go back to templates and theme builder and then right here we can click on edit so at any time you can edit this stuff you don't have to you don't have to it's not like a the shark tank deal where it's like you have to make the decision and that's it you could always go back and modify and modify the conditions so over here what we'll do here is I'll go ahead and just I'll go ahead and just change right here there save options and then display conditions so that's how you go back to the two conditions now right here I can just say look I want to go ahead and just put this on only the bodice page I only want to talk about Us page so I'm gonna go do that so right here and then about us all right and then right here save and close and then now this is only game this is only going to be displayed on the about Us page so that's basically a quick rundown of how to change your header all right and again you can go ahead and test this at anytime you want right here view the page or here go to home and in the about Us page which should be applied there we go all right it's cool congratulations so now you can kind of understand how to build out a custom header now let's go ahead and go to the next one saw right here theme builder and let's go ahead and do the footer so let's go ahead and do the footer right here so footer add new and then right here I'll do main footer now I like to actually do something a little different with the footers I like to actually add call to actions on the bottom but that's all I'll give you an example really quick so this right here would be a custom footer right here so I'll just go ahead and just grab a template right here we will do something like what's a good one here something like this right here and that one's good all right so this right here is my custom footer now again what I can do here is just go ahead and just click on publish and then we can add the conditions so where do I want this footer to be applied well generally I think a good idea is to put the footer on the entire website however maybe not on your if you're running an e-commerce website maybe not on your checkout page or your car page because those pages are meant for conversion so you just want to just like you know get out of here go buy the stuff and get out of here right but just for the toll purposes I'll put this on the entire websites and there you go now let's go ahead and take a look so right here I'll go to or I'll go to exit to the dashboard and here I'll go to visit sites and we'll scroll down to the bottom and there you go so now we have our footer right there weekly news ladder news ladder huh okay well that's a new that's a new one you know and you can go to any page here so we can even go to the about Us page we can go to the contact page and it's gonna be displayed on every single page right there so there you go so let's go back over here now again you can actually do the same thing where you can have it on certain conditions just like we did it with the header so the same way you did it with the header is the same way you do it with the footer so if you want to display it on certain pages you can go ahead and do that so we did the footer we did the header and we also we did the footer so now you can understand how to kind of put it wherever you want next we have single so right here we have single and what I'll do is I'll do a post now let's say for instance you are blogging right and when you're blogging you want to create a template you want to create one style template because most blogs today use a one style template for all of our blog posts so right here I'll just do main blog posts main blog post and I'll create a template all righty it's loaded get my get my vanilla sweet keen cold brew but let me know what kind of coffee you guys drink from Starbucks in the comments below I'm a I'm a vanilla sweet cream cold brew guy you know I don't like the the sweet stuff too much but anyway so right here you just go ahead and select a basic template so I find that you know selecting the template guys it's just it's more convenience it's easier and yeah you can make it from scratch but for too-tall purposes I'm just gonna grab these because I don't want to I don't want to do it all from scratch guys I don't you know because that's it's gonna take a lot of work and a lot of time so right here I'll just insert this and you're gonna be given this templates now let me go ahead and go back over here so right here we have some different options so right here we actually have the Edit the post title so whenever you make a title for your blog post this is where it's going to dynamically appear right here we have post excerpt and then this right here is the post content so whenever you make a post the content will be displayed right here so that's just giving you an example of where your content is going to be displayed at and then right here it would be the author box so when you have different authors this is where the author is going to be displayed now again you can always go ahead and mess around with the actual widget so let's say for instance right here you want the you want the post content somewhere else I can go ahead and delete this and it's saying I want the post content to be displayed under under this right here you know under it maybe you want to have that approach so now whenever I post content it's gonna be displayed right here so you can kind of control where you want to set the dynamically update now the best way to kind of give you an understanding of how this works is just to publish this and create a new post so right here I'll go ahead and publish it now right here it's saying include all posts and then again or you can do something like certain categories you can do certain tags so what you can do here is a strategy is you can have maybe three or four different type of blog posts and have them for specific categories so maybe you have three categories one for money one for boys one for girls and you can have a different style for each one maybe for the girls you can have a pink style for the boys you can have like a dark blue-black style and for the money you can have a green style where you would you know put the background as green or design it however you want it to look but right here I'll just say all posts but I'm just giving you an example so again posts you can do by categories tags even by the author so that means again just to make sure you understand is whenever a certain author creates a post this style of blog posts will be displayed so if you have three authors you can appoint different blog posts templates to different authors hope you understand that I hope I was about as clear they're here so but I'll just do all posts and then just go to save and close alright and then the best way to understand this is to go ahead and just simply make a blog post so right here I have all posts and I'll just do add new and I'll just go ahead and just make a basic blog post really fast so I'll just grab some demo content maybe I'll grab some from Elementor here here here we go I'll just just grab some demo content and then right here I'll do something like I don't always a good title here we'll do ten things here I love these titles you know what ten things guys hate about girls these these stupid titles always get like the most hits because it's so controversial because as a guy you're like I have to read that and as a girl the girls like what do they hate I have to read this too you know but I'll just go ahead and post the content right there and under the document right here under featured image I'll just go ahead and grab just a basic featured image here I'll go ahead and put I'm going to put this girl right here swimming pool and then I think we're all ready to go and here I'll click on publish and publish all right so now let's go ahead and view the post here so view the posts and then here we have the featured image we have the author which is the admin you can see here the post time if you updated so 10 things guys hate about girls and now the actual content is displayed below the search icon remember and then here we can go ahead and talk about stuff and then there you go so and then there's our footer etc so you can see here how everything is dynamically updating so you can actually have a blog post for virtually any sort of author category etc so that's how the theme biller comes into play there so let's go back so I send you how to do the header to the footer and we did post now you can also do that for pages as well but I I don't know if I would do it for pages maybe there's a reason for it but I actually told you guys I like to do something with footers and let me just go back here so for the main footer right here I'll just give you an example of what I like to do on my website because I use this actually on my website I like to put call to actions on the bottom because I find that call to actions are usually already they're already they're always included on it so what I'll do here is go to blocks and then right here I'll do CTA or call to action and then something like you know just something like this right here like yeah this one right here and then I'll drag this and I'll put it above this and there you go now of course I'd probably want to change this I'm just giving an example I like call to actions below my footers or above my footers because you can put something like here like you know ready to get started and then you know you could do like purchase now or something so this right now is your footer so this was always gonna be displayed above this so let's go ahead now and go back to that really quickly before we move on to the next section just because I talked about it so here I'll go to home and now if I scroll down on the bottom you're gonna see ready to get started and then there's this is this is technically your footer so this is gonna be displayed on every single page so I do like this style you know I like the ready get started because usually above your above your footers you're gonna have this look the the the CTA anyways so that's just that's just my opinion my preference it's up to you guys that's that's what I like so here let's go back to templates and go as a theme builder so I've showed you guys how to use the header the footer the single and now also right here we have the archive okay so the archive is for something like categories or tags or something like that so what I'll do here is I'll go to add a new archive and then right here I'll just do create a template generally archives are for anything with like a custom post type essentially a custom post type so here for example they're using blog as an example now you can also use it for 404 errors or search results so let's say for instance you have like an archive for a blog you can go ahead and say if I have certain categories I want this space to be displayed for any sort of archive page because the default was as WordPress are really really ugly so here you can see that since I have a none categories post that anything that's like Uncategorized or anything that's an archive will be displayed on and this page right here so right here I'll click on publish and then right here you can do add a condition and I'm just gonna do all archives but then again you can do certain archives date archives and then you can go on and kind of design it but it's just for the Tal purposes I'm just going to do all archives and I'll also do one more which is the 404 so this right here is my archive page so yeah I mean that's pretty much it so you know for those of you who are using you know blog post or something like that you're gonna have archive pages and that would be a way on how to design your archive page let me go ahead and do one more really quickly this one is for the 404 error now 404 errors are pretty important so for example whenever someone reaches a dead link on your website usually by default I'll go ahead and just do this right here I'll just go ahead and show you so I'll just do something like this you're gonna get something like that or you're gonna get your website to say something that doesn't look good so for for not found or something like that so what I'm gonna do now is I'm actually going to create a custom 404 error so whenever someone reaches a dead or something like that it's going to go to this page instead so right here theme builder we're gonna go to leave it under single or I think it's under single yeah single and then we're gonna do the we'll go ahead and go to add a new and then right here we have four for page and then create templates alrighty awesome we have some beautiful templates that's designed from Elementor so what I'll do here is I'll just grab this and then I'll just say yes I want to go ahead and override etc so this again is controlling the 404 so again anytime someone comes to a bad page this is going to be displayed for them automatically which is really cool so right here I'll go ahead and go to publish and then right here we have 404 page and that's it save and close and now let's go ahead and take a look here so I'll just go ahead and go back to home ok so what I'll do here is I'll just select the page and this is page ID and I'll just enter a wrong page ID the one that doesn't exist and you can see here four or four so I don't have a page 18 ID so users will go out to this page right here so you can see here now the the 404 is working so in a nutshell that's basically the theme builder so it's very convenient it gives you a lot more control over your websites you can have a custom header a custom footer you can have a 404 page you can have a different archive page I mean there's so much you can do with the theme builder but it's available only for Elementor Pro so it's very I mean when the theme of our first came out it was it was just like mind-blowing it was super intuitive and I love the fact that they have all the templates to make it really really easy for you so in a nutshell that is the theme builder now I'm going to be having a second video on the single product and also the product archive it's personally the same thing guys I'm just making a second video forward because people might be actively looking for how to make a custom product page or custom shop page with elements or but so you can kind of mess around with this and kind of see how it works out for you is very similar to the other style so hopefully this video was helpful the theme Boulder is a great pic or I'm sorry Elementor is a great pic because it has a theme builder and if you guys have any questions for me and there's something that wasn't really covering that you're not really sure let me know in the comments below and I'll do my best to get back to you guys my name is Daryl Wilson and I will see all of you party people in the next video guys take care