Elementor Theme Builder Tutorial - Create Custom Shop Pages, Product Pages and More!

what's up party people my name is darryl wilson and today in this video i'll be showing you how to use the elementor theme builder now i recently made a video on how to make an ecommerce website with elementor and in that video we use the theme builder for that specific tutorial so i'll be taking that specific part of the video and putting it here so after you watch this and you understand how to use a theme builder and if you want to create an ecommerce website you can go ahead and check out that other video but that said let's get started with the tutorial so let me explain the theme builder every theme for wordpress has a preset style for your shop page and your blog and other various parts of your website you cannot edit these normally and these are pre-built by the theme that's why there are so many different type of wordpress themes however the elementor theme builder allows you to build each page with the builder from scratch regardless of the theme settings basically you can completely build any page from the ground up overriding the theme settings just in case you want to fully customize every part of the website with no restrictions i find many people tend to do this because they want to match the color scheme and the design of the website so it all matches up in the end all right party people in this next section i'm going to show you all how to use the elementor theme builder which will make your website look a lot nicer than it normally comes so for example we have this menu now with the theme bowler we can have a custom menu that we can fully design making it look a lot nicer also this is the base version of the shop so without the theme builder this is your current shop you can't design it you can't customize it so we're going to turn it into something like this where we have this really nice banner we have this really nice sidebar and we can customize and design every part of the shop page also in this video i'll be showing you all how to create a custom blog and custom blog posts using the theme builder so for example this is just my demo website and let's just go ahead and take a look at my current blog now this is the default blog and as you can see it's you know it needs some help you know it's not too stylish so in this video i'll show you all how to turn it into something like this where it just looks a lot more cleaner it matches the websites it's more welcoming we have our featured posts here and we can customize and design this page any which way we want so i'll show you all how to create custom blogs and custom blog posts as well in this video let's go ahead and get started so i'm going to take this base ugly website and we're going to convert it into the demo website which looks a lot nicer so first you'll go on over here to dashboard and we'll scroll down and we'll go to the templates and then you'll click on theme builder now elementor just created this interface and i love it it looks a lot nicer so we have different parts of the website like the header the footer the single product and also the product archive which is the product categories so for example if you want to have a different header like this you will go ahead and say okay i want a different looking header so you'll click on the plus icon so now you can see that we have a large selection of different style headers that we can apply for our websites so just to get started i'll select this one that says i think this is like modal they're just using a bunch of demo you know demo logos and stuff so to insert a header just click on insert and now you can see that we have the header right here so now we can go ahead and just build out the header normally like you would build any rest of the part of the website so i want to stretch this out i think that looks a little there we go so we'll go ahead and stretch this out also we have this really ugly purple you know what's what's that about you know so i don't want the purple i don't think the purple looks good so i'll go ahead and just click on the any logo or anything in the menu and then it's going to bring up the actual element that we're editing so this is the nav menu and we have the style so i can click on the style and then you can go ahead and design and customize this normally like you would any part of the website so under topography i want to use poppins i think poppins is uh you know it's what we're using it looks good also we have the hover so the text color i don't want to change the text color you know i just want to leave that base you know i don't want to you know i don't want to here we go i don't want to touch that and then the pointer color i want to leave it as red right we're using red throughout the website so now when i hover over it we just have that red look to it okay my bad my bad for text color we got to make that black guys so whoops i won't even edit this part of the video i'll just leave it in there just to let you know that everyone makes mistakes including me so uh let's go ahead and take a look so now it looks good and yeah that's all said and done and then we have our logo there and everything looks good also we can go ahead and edit this button so now you know how to do this right style background color and then maybe something like black you know there we go so remember guys i'm lazy you know i'm very lazy and if you notice we have this other header and we have these other cool things on the top but i don't want to have to remake all that from scratch because then you'll have to click on plus and you'll have to make the whole new structure all over again so what you can do is kind of go and mix and match other blocks and add them to your header so for example i will click on this add template and then i will scroll down and i will pick on this one okay so we have this header now i just like this black bar you know i don't want this other stuff because we already have this menu that we created so i'm going to delete this and say you know what i like this let's just put it on the top you know hold on put it on the top right there there we go put it on the top and there you go and now we can go ahead and use this and customize it and design it to kind of get this style so what i'm saying is you can kind of mix and match different header parts just because one header doesn't have what you want you can always grab other parts of other blocks or whatever you want and add it to your header so now you know a little bit about how you can you know design this and customize it let's go ahead now and apply this to our wordpress websites so i will click on publish on the bottom left where do you want to display this well since this is a header i want to display this on the entire website right so right here we have entire websites now you can also apply it to specific pages so for example we have singular and then maybe i want to put this on pages and i want to only on this about us page you know i only want this header on the about us page so that's an example of how you can set conditions for specific headers so virtually you can kind of have any header you want on any part of the websites now that's for really picky annoying clients so if you have those clients i feel very bad for you but what we're going to do is just apply this to the entire website i think we only need one header for the entire website right that makes a lot more sense so um the entire websites and then i will click on save and close all right it's updating you can see on the bottom left it's updating congrats your global site is live so what we can do is let's just go back to our websites and i'm just going to refresh this page so i'll just refresh this and voila it appears on any single page so the about us page the contact us page it's going to carry and go throughout all of your pages so that's pretty cool so that's an example of the theme builder and what you can accomplish with it so let's go back to view page and also don't worry about the demo websites because i'm going to give you a package with the header the footer and all of the pages that you need because i am amazing and you need to like this video i'm just kidding that that sounds a little desperate there so i'm not i'm not desperate so so let's go back to my website and go to dashboard and we'll go down to the templates and go to theme builder all right and if you've noticed we lost all this other stuff you know so now we're kind of you know we're on our own but that's okay just click on the footer it's saying no templates found do you want to create one yes so you can click the plus icon here or you can click the add new there it is the same result it takes you to the same page guys so yeah don't don't panic don't worry it takes things to the same area so now we have blocks that have been loaded so the same thing that we did for the header you can do for the footer so it's like all right cool which header do i or footer do i like here and i chose this one you know i find that the red was already i kind of cheated you know i cheated guys i'm a cheater so i took the design because it's just simple it already matched with the red so i'm gonna click on insert and there you go now we have this uh footer also if you get these little weird symbols just click on the pencil and yeah there we go it's all fixed and it's all good to go now the footer might be a little different and might be a little tricky so you kind of have to think outside of the box here so for example we have the uh you're gonna put like the the contact us here right contact us and then maybe this can be like the the shop page right so we have the shop the about the contact and then you can go ahead and put whatever you want there like for the social media icons so what you'll need to do for the footer is you'll need to go ahead and link whatever you're typing to that specific page manually so for example um over here on my on the same websites i have the contact us link so i'll click on contact us and i'm going to copy this go back here and for the contact us when it says link i'm going to paste that in there so what that means is when someone comes to the footer and they click on the contact us it's going to take them to the contact us page right so there is a little bit of work that you might need to do you know so it's not like you know all strawberries you have to kind of get your hands dirty here so for the about us you would do the same thing so you'd have to go to the about us let's go to the about us we will copy this and we will go ahead and paste that link right there and there you go so what i'm saying here is when they click on the contact us it'll take them to contact us when they click on the about us it'll take them to the about us page now so on and so forth so now you can go ahead and click on all of these and you'll go ahead and say okay for resources i want to put the link here for the resources once you are done with your footer you'll click on publish and then we will click on add a condition and the same thing so where do you want your footer well probably on the entire website right now there are instances where we're going to use these other ones like for example the shop right so yeah for the head and the footer generally it's going to apply everywhere on your website so you want to keep it consistent so let's click on save and close and if i scroll down to the bottom now we have this new one and look at that if i click on the about it takes us to the about if i click on the contact us it takes us to the contact us page okay so now that you're getting the hang of all this let's go ahead and show you all how to create a custom blog and custom blog posts so let's go to our dashboard and we'll go to elementor i'm sorry templates and a theme builder and this is the old interface guys i'm using a different website so if you do get this just click on the try it now option and it'll display the new style they're actually phasing out that old theme builder style because it's really old it's really outdated and this just looks a lot more nicer so what you'll do is you'll go to archive and you'll click on the plus icon under the archive section and here it'll go ahead and give you a display of blocks now i'm just going to keep this very basic and just select on this one here that says the blog and i'll click on inserts alright so this is my current blog page and what i'll do is i'm going to start from scratch so i'll just go ahead and delete this now whenever you're editing custom post types or like your archive pages usually there will be more elements so here we have an author box archive posts and also archive titles so for instance if you want to have like you know the author display you can just drag and drop the author and then you can design this and customize this any which way you want now if you want to go ahead and just add your blog post you can use the archive posts or you can use the pro elements of just posts so for example i'll just drop that in there and i like to use the cards i think that's better what do you guys think the card looks pretty cool huh so yeah i can go ahead and customize this any which way i want and i can make this my new specific um blog page now let's say for instance you want this to display a specific category for your blog so let's say for example this is like the men's page or it's a specific category of your blog posts so what you'll do is you'll go ahead and click on the post element you'll scroll down to query and under the posts you will include a term now you're gonna say okay so which kind of post do i want to display here well i'll just display the uncategorized post because that's all i have right now so this is this would be a way on how you can display specific posts on a specific page for your blog and then you'll click on publish but uh before i do that i already have a specific blog page that i made so what i'm going to do is just go ahead and close all that and let's just say you created a template right something that you created somewhere else you can go ahead and save that added to your library and i will use my specific blog templates now this specific blog template that i'm using this is the astra theme and you guys can get this for free it's included in their starter templates also i do have a 10 discount for the astro theme and i'll put that in the description below of this video it's a very uh good theme for elementor they really go hand in hand together so i'll go ahead and just uh here we go we got my posts going on here let me go posts and then the same thing cards and then we can design this and customize it any which way we want so this is now my new blog page so let's assign it to my blog so what i'll do is click on publish and now it's saying you know where do you want to display this so let's click on add a condition and i want this to be under all archives so i'm basically saying i want this to be my default blog archive page by default so that's it and then click on save and close and you're done so let's go ahead and test this out so what i'll do is i'll go ahead and view the page and there you go so now by default this is my new blog page okay so now that we know how to create a custom blog page for the default blog let's say okay well how do i create the blog page for different categories because this is only for the blog it's not for specific categories so let me go ahead and run you through that really quick and then we'll jump into the actual post section so let's go back to our dashboard and it's really simple in fact we're just going to duplicate the whole page so under templates i'll go to theme builder you know i don't know why it keeps loading this old version guys i really don't know i i don't want to edit it out because it's just really frustrating but i just don't know why they're doing that so so this is the default blog page right so let's make one more so i'll go to add new and i'll go to archive again all right and i'll go to my templates and i'll choose the blog template again and click on insert okay so here's my blog now i'm going to change this to women's section right women's section and then i will add in the blog posts so i'll go over here to posts and just drag and drop those in there so let's say for example i am a blogger and i specifically made categories and i want those categories only displayed on specific pages which a lot of blogs tend to do so here you'll see i have five blog posts however these two posts are for the women's sections like girly stuff and great tips to lose weight so what i'll do first is i'll take this out of this ugly classics and put it into cards and then i'll go down to the query section and i want to include this by term and for the term i want to have women's category so i made a category for women's there it is so the category women so now you'll see that only the category of women will be displayed so you see how the category right here woman is displayed so now that i've done that i will click on publish and under add a condition i don't want to put this under all archives i want to put this under categories so this is going to be for the women's category so i'll put it under women and there you go and i'll click on save and there you go so now let's go ahead and view the live sites so now we have our blog right here and you can see how we have two different categories however if i click on the girly stuff and i click on the actual woman's category you will now see that only the posts that are in the women's category will be displayed here so you can have a category for men you can have a category for losing weight a category for this and then you can create this specific template for that specific category so that's how you would create a blog and also blog categories for your website so let's say for example you also want to create a custom blog post for your post so let's do that really quick we'll go to our dashboard and then we'll go to elementor and i'm sorry templates and team builder i keep getting that wrong i think they probably should have changed that and i'll do try it now again because they keep asking me to go to the new version and i have no problem with that but they just keep asking me so let's go to single post and then i'll click on the plus icon so with the single post basically i'm telling elementor that i want this to be my new default post so uh they gave us some posts right here and let's just click on something more basic i think this right here is very basic you know let's just do this one these other ones are you know that's just too much like this one it's just too much but i'm sure there's a reason for everything you know i mean i had a cr a client who wanted me to build a website that was running selling taric cards so you know whatever everyone out there has different preferences and different stuff that they want to do okay so we loaded this post now what i'll do is i'll click on the elements tab now you'll see on the left side how we have specific elements for the single post so we have a post title post excerpt post content featured image and so on and so forth now if i click on this image right here this is not a real image this is actually the featured image so whenever you make a post and you have a featured image the feature image will display here dynamically the same thing for the title so when you have a specific title it will display here automatically you can see at the top how it says edit post title so these are not normal text widgets they're not normal uh images they're actually from the single post so these are more like placeholders so for example this is your featured image this is your author and this is your title and then if you want to know what these are you can just click on it and it'll tell you right here so edit the post info and you can add the date the time the terms and let's see what else we can add uh the number of comments and so on and so forth so you can go ahead and customize that any which way you want this is the post content so when you're writing your blog post or whatever this is where your content will be displayed now also you'll see how we have different elements here like this and then also this which is the share button so what you can do on your post is you can mix and match the elements so you don't have to use only the single post elements you can use all of the elements so you can you know customize this maybe you can add a button here and then this will be like going to your home page or if you want people to go to somewhere else you can go ahead and put that link in there and then below that we have this comment box and yeah so that would be an example of your post now let's just say for example okay well you know darryl the the template's nice and all but how do i make it from scratch and i'll make it i'll make it really fast it's really really simple so for example we have our featured image right and then you can you know change the size of the featured image if that's too big if you wanted to looks you know another style you can go ahead and you know decorate it or whatever whatever is that you do and then we have the author box below that or you know what let's put it at the bottom you know we'll delete that but at the bottom so i want to put the post title and i want this to be a line in the center and you can also go ahead and change the style and topography of this by default so if your blog uses a specific font or a specific color you can go ahead and throw that in there throw that bad boy in there and then also we have the post excerpt and then we have uh post info here we go we have the post info which is like the author the date and everything and we probably want to center this right so we can line this in the center and then you know i can throw in some content so the post content is where the actual content will uh be displayed and yeah that's basically it and then for example let's just say okay so who wrote this well let's add an author box and under the author box maybe we can have the um see we'll do the we'll do this first post navigation right actually i think the comments go under the author box what do you guys think let me know let me know if you're a blog expert here we'll put the blog comments below that and then we have the previous and they can go ahead and you know so what i'm basically getting at here is that you can design this any which way you want and you can also customize this any which way you want so for example you know if you want to add in like a you know this there or you want to add in a box to somewhere else you can just go ahead and just uh you know put that in there and decorate it any which way you want so that's just a quick rundown of how you can create a default post for all of your posts so whenever you make a post it will use this template instead of the theme defaults so having a you know a blog post that you know you use for templates is a lot nicer it matches your entire website you don't look tacky and overall it just looks nice and matches the style and criteria of your website so now that we've done that let's go ahead and apply this to our website so i will click on publish and where do you want to display your templates so under add a condition we have the all singular front page and we also have posts so let's just keep this basic and apply this for all of our post templates so i'll go ahead and click on save and close okay so this is my blog now when i go to any post they should all look the same now so i'll click on this one here and there you go so if you are not human please don't read this and then we have this you know this element here and then there you go and people can comment and they can even scroll to previous posts or the next post so let's go ahead and click on one more a random one uh 10 thing girls want from you it's a very controversial post so that's you know the more controversial it is the more clicks you get this is how it is guys you know it's just it's it's really not what it sounds like it's just whatever gets you more clicks that's really all that matters so now you'll see how it applies for every post so congratulations you guys now have a beautiful blog and you also have beautiful blog post templates for your blog so now that you know how to use the header and the footer let's now go ahead and go back and let's do something a little bit more complicated like the actual shop page so it's actually not complicated you know i just like to sound like i know everything but it's it's not it's the same thing guys so the uh the templates and click on theme builder okay so we have the header and we have the footer that we created next let's create a custom shop page so on the left side you're going to see product archives click on add new for product archives so there are some product archives that you can select with elementor and you can see that we can select this one or this one or this one now they don't really have a lot to be honest so that's why i created a separate one because i feel like this is it's just not enough you know it's not enough for you so we're going to go ahead and build it from scratch so instead of actually selecting anything i'm going to click on close so now we're going to build the page from scratch so what we'll do first is i'll click on add a new section and i'll click on the plus icon so taking a quick look at our other websites hopefully you guys can tell what this is so this is a text a text and another text and that's it and then i just added a background image so let's go ahead and make that so what i'll do here is go click on the elements and for the basic i will grab a text and then i'll duplicate this and i'll duplicate it actually no don't only duplicate it once because uh we're going to grab the other the other special text which is under the pro element which is the it is the did i pass it guys see the animated headline there we go there we go so animated headline now i know this looks ugly but don't worry because it just takes a few seconds to make this look really good so for this one i'll go ahead and click on it and align it and the same thing so for the text color i will click on this and make it black and then we need to kind of design it so this will be poppins right good old poppins and the weights will be bold and then i think i put here let's see yeah i put here let it begin actually i think i use it thin so yeah let it begin wow can't even spell wilson there we go let it begin and for the topography i think i did make this a little lighter you know there we go i made it around like 200 just just to kind of you know not be so close to this other one also you might tell that i made a little bit bigger and i think i added some letter spacing so just a little bit of letter spacing you know just uh just a little bit just to kind of give it some distinction so i think i set it at one now i'm not really reading off the script guys so i'm just visually looking at this to see what it looks like but i think you guys can tell yeah it looks like that looks similar right next we'll click on this one align this to the center and we will change this also to black and we will change the topography to pop-ins and the weights will be bold right and then i put 50 summer sale so here 50 50 summer sale you know a quick tip for web designers i don't know why but we always capitalize the first letter of every word it's just how it is so i don't know why we do that so there we go and then of course you can you know if you want you can go ahead and do uppercase or whatever you want to do you can also design this you know mess around with that also i think i did add somewhat of a text shadow here so i think i did add just a small blur just a very faint blur you can tell it's a very faint blur just to make it just to give it something and then i put on the bottom starts now so here is starts now you know to make it look all cool and i think it underline zigzag that's right and let's go to style color we'll do red let's do it the brighter red there we go and for the headline we will do the text color as black and then we will make this one also black and we we'll make this one a little bit different so for the topography we'll also change this to poppins and i want this a bold you know i want it to stand out from starts from the different ones so i'll make this bold and for this one i'll just change it to pop-ins but i'm not going to make it bold so it's just going to say starts and then now looks you know like that so what i'll also do is make this bigger like that and you know i could do also i could make this yeah let's make this a little bit thinner so for the starts we can make this just a little thinner just to give the you know a distinction between the both so that looks pretty good right now the only thing we need to do is we need to add a background so i'll click on edit section under the content layout i'll put full width style and classic and i want to add an image so the images i gave you in the folder should be there so go ahead and select that specific image it's kind of hard to see because it's a blank square so i'll go ahead and insert that is it cover yeah i think cover was the one i selected yeah something like that that'll work you know now one thing to note is i want some more space you know i want some more space on the top here so i'll click on these six dots i'll go to advanced and i want to add some padding so now you're going to understand what padding is all about so i want to add maybe 30 pixels of padding on the bottom and on the top so 30 pixels so now you'll see that there's space so now we can kind of breathe here you know so here you can see the space and also this space this section i'm going to give you in the template and it is a little hard to make it does take a little bit of time so i've given you that in the templates to save us some time in this tutorial so the next thing that we'll do is we need to add the products now we also need to add a sidebar as well so what we're going to do is we're going to have a a two-column row and this section is going to be small and this section is going to be a little bit bigger with all of the products so let's go ahead and say all right i'll add a new section and now we have structure so now you can see all right now i kind of understand why there's why there's different structures right so the structure that i selected was i believe it was this one right here and remember you can always go ahead and say you know what i just want this to be a little smaller you know so maybe 25 of the page and on the elements tab we will find sidebar all right sidebar so we don't really have a sidebar yet you know we don't have one but uh for right now i'll just do woocommerce sidebar and then we'll go ahead and add widgets to the woocommerce sidebar and then over here i will select in products and then drag and drop those products those bad boys over there and then we can go ahead and customize it and design it just like we did the on the home page so that's pretty simple in fact maybe you even want to copy and paste it you you want to save those as a template and bring them over here whatever you want to do so uh the same thing for the style we can go ahead and say all right it's the contents this i'm sorry the style you know we can just mess with these really quickly and uh you know topography we'll keep it up the pop-ins don't copy my font guys all right you got to use your own fonts you know it's my font people are really like that's my font man and i'm like okay like monster at everyone's like create about monster and roboto like come on you know i can use whatever i want so we have the uh you know we have the products and then that's it so basically what you did on the home page you can do on this page as well so it's the same exact thing guys it's the same exact thing that's why i kind of wanted to touch base of it on the front page because now you know how to design all of this from the actual um the shop page so the star rating we might need to have a color all right and then also the empty color you know right and then we have the button which we can also have it as uh we'll have the texas whites right and the background as back and then remember if you want to create different categories you can do content but i don't recommend it on your shop page i don't so don't don't actually put categories on your shop page if you want you can but we're going to create separate categories for that specific page so yeah click on publish now let's say where do you want to display your template click on add a condition now elementor already recognizes that this is going to display in the product archives so we want to put it as our shop page so this is shop page all right so click on shop page and click on save and close and voila now we have a custom shop page that we created it's already looking beautiful now we need to add a sidebar because it looks so naked without it right so let's go ahead now and add a sidebar so let's go ahead and go back here and exit the dashboard and i'll click on dashboard so on my demo website i have filter by price they can also filter by popularity and all these other things we also have product categories and products and also see our product where i have a video of a specific product so i'll show you how to do that so first let's go over here and say all right so number one filter products by price remember we have that so we can go ahead and take this now there's also i think a default one of filter products by attributes by rating and these other ones so you can kind of check all those out i have product categories and uh we also have let me go ahead product categories we also have products so we have products on the bottom you have to scroll down and just drag and drop it and then we also have a video so what you can do is just link a youtube video and then put it in there so i'll take the video and i'll leave it there all right so now what we can do is say all right we have all these filters we have all this stuff let's now take a quick look and see what we can do to our or see what happened to our website so let's go back to our let's go back to our main website and now i will refresh this page and now you'll see that we have some stuff on the left side so now we have filter by price product categories and we also have products so if you might have noticed that these are blue and the page builder cannot edit this however the theme customizer can so click on customize and now we're going to use the theme customizer to customize those specific widgets because remember these are actually part of the wordpress theme so you see how that works so it kind of with a tug and pull right there so i'll click on the filter by price and now you can see that we have the woocommerce sidebar so this is currently using the wordpress theme but if you want to change the color and everything we'll go ahead and go back we'll click on global and colors for the base colors i want the theme color to be black and then i want the link color also to be black and then i think that's pretty much it yeah so now you'll see that this is black and now that makes a little bit more sense and now we'll scroll down and now you can see that we have a beautiful uh page that looks great and you can see uh you can add more widgets so you can just go through here add more widgets you can add more custom filters and you can go ahead and have fun and knock yourself out okay so now that we made a custom shop page let's now create a custom shop page for the specific product category so if you've noticed over here we have men's shirt and if we click on men's and we click on the archive the men's page still looks like this now this is going to be actually really quick so all we're going to do is we're going to just go ahead and take a copy of this and then we're going to use that for all of our product category pages so what we will first do is click on edit with elementor and then we will click on the products archive page so this is one way to do it so on the bottom left we can click on save as a templates and we can do the main shop page templates templates and then click on save i'm just giving you guys a few ways on how to do this just in case uh sometimes when you're using elementor things might be glitchy it might not work out so for the main shop page templates you can click on this and export it so this is how you can export layouts and use them on different other websites so for example if you want to make another website you can take this layout and then upload it to your other website so i will click on save file and here is the file so this is the json file that i need so now let's go ahead and go back to the theme builder and let's make the men's category page so let's go over here to the theme builder so right now you'll notice that we have the header we have the footer and then we have the elementor product archive so what i'll do is i'll click on add new and i want to do the product archive so we have the basic blocks but we can go to my templates and we also have the main shop page template which is the products archive or you can go ahead and upload that json file that you downloaded either way i just want to show you that sometimes when you save templates they don't always display properly and that's just one weird thing i found with elementor so just keep in mind this theme builder just came out with this new interface so if you do come across bugs and glitches um don't panic just work your way around it so this is the main shop page template i will insert it and click on insert and say yes override overwrite all the settings all right awesome so instead of the 50 summer sale i will put men's product men's products and here i probably want to only list the men's products so i will click on this click on the query and include by term and then also have only men's so now i'm only saying i want men's products to be displayed on this specific page now one thing to note is that if we shrink this sometimes your page will not be displayed all the way so you want to make sure that your page is always full width so let me just quickly show you how you can change that without having to go back to the edit page and everything so on the bottom left we have this gear that says settings for the page layout you want to make sure this is always under elementor full width if this is under default it's going to display this as a box so let me see if i can see if i can show you there so yeah it's not doing it but if i save it it'll be boxed so just make sure the page layout is elementor full width i just want to be very clear because there are instances where you upload it and sometimes it might not be full width so this is full width i think that's all good to go so now we can go ahead and publish this page so i will click on publish so where do i want to display this specific page well i want to add a condition and under product archives i want to have it under product categories and i want to select it under men's alright and i think that's all good and then i will click on save and close let it save all right awesome so now it's saying our website should be or the men's category should look like this so we can go back to our websites i'll go ahead and view the page go to home so now let's imagine i'm going to the website again and going to the shop page okay 50 summer sale however i want to go see the men's products men's products i will click on this now you'll see how it says men's products and only the men's products are being displayed here really really cool now we need to actually do the same thing for women's but i think you get the points i think you understand now how to do that so i'm not going to do it for women's but you will need to do it for every category so if i click on women's it's just going to be this uh really ugly default page so you need to go ahead and add in that same specific product category template now that we've shown you how to do the shop page and the shop category pages let's now talk about products so if i click on a product it looks default there's not much we can change now this is not bad this really isn't bad at all however let's say for example we want to make a custom product page let's do that so let's go back to our wonderful theme builder so under settings we can click on theme builder that's a quick way to get there instead of having to exit out and go back to the beginning so we have these templates here so on the left side we have single product let's click on the plus for single product so here are some templates that you can use to speed up the process so we have this elegant wedding cake and we have all these other ones but i want to go ahead and show you how to do it from scratch just in case you might not want to use a template you don't really know what you're doing so what i'll do is click on close now let's go back to our product here and i'll go to my demo website and simply click on a product so let me explain what all these are so right here we have the breadcrumbs we have the image title so let's go over here and i will select a two column row two columns and i want this layout to be well let's leave it as box i think box is okay we'll click on the elements tab and now we notice that we have these different little elements so we have like you know product images breadcrumbs product title so these normally aren't available when you're building the page so we can do is use these to build out our product page so we have the breadcrumbs put the breadcrumbs at the top the text color i want it black the link color also black and i want to make this look a little bigger so for topography we can make the size a little bigger if you want to do that and then also under the advanced section i could add some space so i want to add a little bit of space here it's just a little too close to the too close to the top right there so i think that looks a little better and then on the right side we have the product title so product title drag and drop and then we can go ahead and design this make it look beautiful like the other ones so pop-ins and then i'll make this bold all right and then of course we'll make this bigger could that's yeah there we go we'll do 30 something like that and then maybe i want to add some padding as well so i'll add them some more padding also you can add padding to this whole column to make it look a little bit more even but if that's you know something you want to do you can do that so for example i can click on this box and just say i want padding for the entire you know for everything so if you want to do that you can add padding but i'm just giving you an example next let's add in the product image so thinking what to do now right product images we can go ahead and select product images and there you go so we have product images and then we can add stuff like the border type we can add other stuff to it so yeah that's something that you want to add you can go ahead and customize this even adding a border radius ooh i think a border radius makes it circular let's see here does that work yeah see how it's like circular yeah so you want that look you can go for that look i think that's hideous so i'm not gonna add that so next we have the uh woman's white shirt and then we have this divider so what i'll do is just grab the divider and saying all rights i want to put this under that and then this is a little bit too long all right so make that look a little bit uh you know make it look a little bit closer to like that and then this title you know we got to make it bigger guys it's it's too small so i'll go ahead and make this a little bit bigger there we go and shirts i will take the short description and drop it in there and there you go we have the short description now remember your products will all dynamically update so when you do this for one product it'll apply it to all of the products so you will not have to do it for every single product i just want to make that clear so you might think oh that's so much work no it's really really not so next we need to add in the category so what we'll do is under the product meta we'll select the product meta take that and drop it in there so the product meta will just show the sku number it'll also show the category as well so if you want to have that information on there you can have it you can also change it to stacked or table i think table it looks like uh yeah sometimes when you when you go through these you have to save it and then look at it from the outside because sometimes it won't update but i think that looks good right i think that looks clean can add a divider to it make it look nice and then we have the price and then the add to cart so we'll go find the price we have the product price which is there and then we can update this we can make it look cool and the topography we can change this to pop-ins and then we can do bolds is that updating let's see here so oh that's the sale price so sorry so this is the one right here so yeah pop-ins and then we can change that to you know bold or whatever you want to do and then we will add the add to cart button so simply find the add to cart and drag it down there all right and then since this is a variable product it recognizes that and it's putting it right here for us so pretty cool now also on the bottom we have social icons so just like you guys build a normal page you can just grab it some social icons put it below it and then align it and then you can style that however you want also if you want to add things like the reviews and additional information you can add that to the bottom of the page if you want if you don't want to you don't have to but you know you can just kind of go and add whatever you want now so product stock we can add stock then i will add in something like the additional information and we can also add in something like the uh let's see at this point we just want to get creative upsells and then we can add in something else we can add in the product rating or something like that so you can just keep adding to this and you can keep grabbing whatever you want and you can keep putting uh different stuff here so product tabs you can put the product tabs on this side and there you go so you get what i'm saying here is that we can fully customize every single product page so this is how you would decorate your product page if you want to do that so what i'll do next is i will click on publish so where do i want this to be displayed well all products now you can get a little bit more complicated so for example if you want specific product categories to have a specific product page you can do that as well you can go crazy with the theme builder there is no limits on what you can do but i'll just say you know what i like this product page i want to p i want it to be displayed for all of my products so i will click on save and close so this right here was our current product page remember now i'm going to refresh the page and voila now we have this different product page and it looks beautiful now let's go to our shop page and what you'll see is it'll actually dynamically update so if i click on women's shirts it's going to dynamically update so women's shirts and everything is good so it works for all of our pages pretty amazing so what you can do is you can go through here check out everything that you want and just whatever you want to change you can go ahead and do that so i think that concludes this part of the video so now we have a custom shop page we have custom category shop pages and we also have custom product pages so that is a tongue twister okay so we're gonna do one last section for the 404 page so for example let's say your visitor goes to your website and they go to some weird link that doesn't really make sense by default it gives us this default theme setting now maybe you want to have a more customizable 404 page let me just quickly show you how to do that so you probably know what to do now we'll go back to our dashboard now you're probably the theme builder pro now you probably know a lot more about it than i do so uh we'll go to the templates and go to theme builder and of course they keep reverting this back to the old style i wish they didn't for video's sake but you know in six months from now it's going to be like this so that's just how it is so you'll see here i was messing around with the 404 one but uh what we're gonna do is i'll go ahead and delete this so i'll go ahead and click on this and i will trash this one all right now on the left side you'll see error 404 now you can also have this for search results and you know other archive pages let's just keep it basic guys come on come on you know here plus icon click on the plus icon for the 404 page and here we go so now they have a default 404 templates for us to use which is really convenient that's why we probably want to upgrade to the pro version or no if you're using the theme builder you have the pro version so yeah congratulations so let's just keep it basic you know just for its whole purposes i'll just grab this one here with the the the red yellow and blue 404 okay cool so now we have this 404 page it looks really nice and clean and cool and flashy and if you want to change this you know you can just put like uh you know whatever you want to add in here just by dragging dropping in elements there we go let's see there we go all right ah didn't work out all right let's let's redo that so to go back just click on your history and go back but you know i don't even need to do that because i already have the heading here so i'll just change this to something like uh here we go see lost go to homepage you know that's it and then this right here it looks like they have a link right here to the actual home page so i'll click on this little gear actually this had a button you know what's up with that let's add a button here so a lot of button okay that looks okay it looks like this this template the the text is really large and stuff like that so here button try this again all right moment of truth here we go we're going to put it down there all right and we're going to center it and this is going to be the home page so i'm just going to put zenith wp.com and that's it it looks like this little there's a little glitch there you know something weird happened up there i'm not going to edit it but it'll look fine once we actually you know view the page so let's go ahead and click on publish and this will be our 404 page i will save and close all right so i'm at my home page now let's go to a permalink that doesn't exist there we go and press enter and there you go so it says 404 lost go to home page click here and if i click there it should bring me back to my websites and there you go so that's just a way on how you can always redirect people if they get lost or something like that so congrats party people you guys are theme builder professionals so pretty simple right the elementor theme builder is really simple to use i mean at first it can be a little intimidating but you know just give it like an hour to and you'll like have it down 100 so if anything changed in that video let me know in the comments below and i will always update this tutorial so go have fun go build your website my name is darryl wilson and i will see all of you guys in the next video

Channel: Darrel Wilson

Views: 57,249

Keywords: elementor, elementor theme builder, elementor pro, darrel wilson, elementor tutorial, elementor wordpress, elementor page builder, elementor theme builder header, wordpress, wordpress elementor

Id: yEh7r7Pc6GE

Length: 51min 59sec (3119 seconds)

Published: Mon Nov 02 2020