DIVI THEME BUILDER TUTORIAL - New Divi Theme 4.0 update is WOW!🔥🔥

well today the new DB 4.0 theme builder update has finally been released now in this video I'm explained to you exactly what the theme builder is and also give you a full tutorial on how to use the Divi theme builder for your WordPress websites now in case you don't have to view already what are you doing is the number one theme in the world there is a special discount to purchase Divi in the description below now what one second here it here we go okay okay that's better I don't have contacts today guys so right here is basically the theme builder now this interface is super easy to learn in fact I'm also going to do a comparison between Divi theme builder and also elementor's theme builder and that's gonna be at the end of the video so make sure to stick around for that comparison now in a nutshell right here the theme builder allows you to add a different header and a footer and also a different body style to any specific pages you want so now you can fully design the archive pages the shop pages and any custom post type pages as well from any various plugins you can design category pages shop pages the works you are no longer limited to using the default styles that come with certain custom post types so for example right here this is my website right here and right off the back you see I have a custom header for my websites I also have a custom footer as well for my websites now I'm not also going to give you all there's a link below to have some free header and footer templates that you can go ahead and download and use for your websites I'll put those also in the description below they're free they don't cost you anything they're also layout so they have a header layout right here and they also have a footer layout if they have like six or seven and you can use these to follow along if you want to do that but let me just keep explaining what this is so right now I have a custom header and footer on my home page however on my about Us page I have a different header and I also have a different footer so you can basically mix and match any single header you want for any website you can have a header for basically every single page a different header for every single page now you can see right here it's very simple to read so right here I have a global header and footer and that applies to my entire websites however if I want a different header on only my about Us page I can design a custom header as well or I can use the global header but for my about Us page I chose to have a special custom header that I designed now also right here you can see that I have a different custom and header for my account page and also five other pages so right here you can see that I have five other pages so right here the specific pages that I want a different header and in a different footer is for my accounts might check out and also my shop page so what I'm doing here is I'm basically saying I want to have a special custom header and footer for my custom post type pages as well over here you can see that I also have a specific header and footer for my product categories so for example right here I have a demo product now the biggest flaw with Divi before was when you have a product right here and they click on the category it'll revert back to the default will commerce module however now you can actually say all right let me click on stuff right here on this category and now this is your new default setting so customers will no longer be brought to the old who commerce category pages look terrible so here you can see that you can have a specific page for a specific product category so you're not limited to the default WooCommerce settings anymore also if you want to have a different header for any single page so right here you see this is my users account page they have a special header and you can make a special footer as well so going back right here you can see that I have a special header and footer for my categories let's talk about posts so for example right here we have a special header and footer for my post and also my blog page as well so let me show you what my default blog page so this right here is my default blog page this is not a special page that I made if someone goes to my blog it's going to go to this page right here and below that are my posts so here you can see I have these posts actually now let me refresh this I think I think updated this page or the images there there we go there we go there we go so I have these three posts right here now I'm gonna click on this image right here tend to best things for women now you can see right here I have been brought to this post right here now this is a template that is going to be applied for every single post that you make so you no longer have to worry about your you have to design a post from scratch etc and these titles update dynamically so what that means is every time you make a post the title is gonna display right here for whatever title that you make for your specific post so you can see that this is incredible no and this is my default post page now so this is going to display on my websites whenever I make a post so now you can start making poached without having to redesign everything doing it all from scratch now you can see that it's very simple and easy to understand so looking at the theme builder it's pretty simple to understand and I'm gonna give you a full rundown of how to do everything in this video so let's go ahead get started so let me show you what we're gonna achieve in this tutorial so what I'm gonna do here is I'm going to have a custom header and footer for my home my about Us page my shop is well also my product categories my account page my blog page also 404 pages as well you can design and then lastly our post pages now have to speed up this process elegant themes a few years ago had a header pack and a template pack that you can use you can go ahead and download the footer pack and also the header pack if you want to go ahead and use these to follow along because I don't want to make headers and footers by scratch for every single one because that will take a long time I just want to teach you how to use the theme builder so for example right here I want to put a custom header and footer that I built on my entire website so right here under global header I'll click on this and click on build global header so what you can do here is you can build a global header and then you can apply it to your entire website so right here I have built from scratch add from library or you can go ahead and design your own and I'll just use header one so this is the head of them I made and I'm using right here so I'll go ahead and put it right here I'll go ahead and save this so what I'm doing here is I'm saying to the theme is that I want this to be now my global header for my entire website so I'll close this and now I'll put a global footer as well so add one from the library I'll put some foot or five all right and click on Save Changes so now if I go ahead and visit my web site right here I'll just refresh the page you'll now see that this menu has changed to my personal custom footer also if I scroll to the bottom right here you're gonna see that I now have a custom footer that I created so this is not from Divi this is actually the footer that I built and this is going to apply to every single page on your website now you can go a step further here and you can say well look I don't want this header on my about Us page let me refresh the page to show you that this applied to the entire sites so next we're gonna do is we're gonna say all right well I don't want this to be on a specific page I don't want it I want a custom header for a special page so right here add a template now whatever page you want to put it on or apply it to just say I want this to be my about Us page and here I'll click on creative templates now by default it's going to apply the global header and footer to your about Us page until you make a change now right here I'll close this add a custom header I'll go ahead and click on build a custom header and all I'll do here is I'll just change the color from my original one right here so add from library and I'll just select a primary menu and then here I'll just change the color just to give you an example so a background color will put a beautiful purple color I'll go and make the changes here and then right here I'll click on save all right I'll go ahead and yeah you get the point you get that you get the idea it's gonna have a little bit of a little bit of a stretch there but that's fine so let's go ahead and go back here right here and right now click on Save Changes and what i'll do here is i'll go to my bodice page and i will refresh it and now you see that this menu is now applied however if we go to our home page and we refresh our home page you're gonna see that the the one that we set before go ahead and scroll up right here that this header is still being applied however only from my about Us page now I have a special header only for my about Us page so now you can kind of understand that you can have a a custom header and footer for virtually any page now one thing I want to show you or want to notify you is that if you have a custom post type page and you have the Global's right here it will not apply to any custom post site page you need to manually set that so what that means is let's say for instance I have a shop page for blue commerce the global header and footer will not apply to custom post type pages you need to manually put it in there and I'll show you how to do that right now so not I've showed you how to do that right there I've shown you how to basically do a custom header and footer for your about Us page let's go ahead now and do the shop and then the shop category page as well so let's go back to our theme builder right here click on add a new templates and say alright so I want to go ahead and add in a special header and footer for my commerce page here I'll just go ahead step further and just say for my all my commerce pages and right here on created templates now right here you can see the global is is being assigned however I don't want to do that I want to have my own global header into my own global footer only for those specific pages so right here I'll close this and I'll go ahead and say alright I want to go ahead and apply something I'll add something from the library really quickly here I'm using the the headers because I don't want to design it all from scratch every single time but right now I'll go to build a custom header and just load it from my library within the within the Builder so right here built from scratch add from library and right here head everyone button push that up right there and there you go and right here I'll make this quick small change I'll just change the color just to give you an understanding of the end result right here so this one will be orange and I'll save that alright and this right here as I see the thing I love about this theme builder update is that it's so easy to understand it's not now right here I actually deleted my my global footer so I might actually want to just go ahead and just copy that and then just drag that into there and then this one I'll just delete it you see that so I'm just basically you know using the same footer cuz I don't want I don't want a different footer for my job page right so here I'll click on Save Changes and now let's go ahead and check out our commerce pages so right here I'll refresh the page and there you go so now I have a different custom header and footer for my shop page and also for my account as page as well so here I'll go to something like my accounts I'll refresh this page and there you go so it's being applied to all the pages that I want now let's just say for example you want to have a specific style shop page and a specific style category page so let's go back to our theme builder right now and right here well what I'll do here is I'll make a new templates and what I'm saying here is that I only want this to apply to our shop page now when you apply a new setting to something that already has a header and footer already being used this right now will override any current settings so now right here you can see that I'm selecting my shop page but this one right here is already controlling my shop page so when you do this you are now overriding whatever previous settings you have for this specific new page you understand you know some what I'm saying there so right here I'll add a custom body right here and I'll add it from the library so here I'll just type in shop and I'll just simply grab one really quickly just just so you guys can understand how this works so right here we have a let's see here this one's really ugly ugly ugly ugly I will just grab this one no offense Kenny your layouts are great and they also really nice use this layouts alright and now what I'm basically doing is I'm creating a custom shop page from scratch and I'm just using a template because I don't want to recreate it again because this horrible can be three hours if I do that all right it's going 75% come on come on there we go it's good it's good you know a good thing I got this good thing I got this you know alright so anyways so I made a custom shop page now let's go ahead and go to my shop page really quickly right here and let's refresh the page and see what's happened now alright so you can see here how my shop page is loading I'd have to make some small changes to it but this right now is my default shop page so these are my demo products and this is now the exact shop page that people are going to see when they go to your shop page pretty cool right now there's one thing that we need to change when you do this so I clicked on a product now of course you can already design this page that was actually last update with the Commerce Builder but let's say for instance someone clicks on the category of stuff so I have stuff right here as a category and if I click on it it's like oh god this is ugly you know I want to change this category page to something that I want this looks like crap so let's go ahead and do that so over here under the theme builder I'll go ahead and say I want a new templates and this template I want it to apply to product categories alright so right here this go ahead and find the product category pages so all product category pages or you can do specific product a product category pages so right here I have a product category for stuff and on categorized which is what I have in categories now you can have a specific page for any single product category so you can design any category you want any style you want by just so that selecting a page and then just making the product page for the category page for that now now that you've seen what I'm doing here you can get an understanding of how you can design other pages so for example right here if you want to design your 404 page you would simply just select this and then create a template for your 404 page so I'm just trying to make you understand that these options right here are basically pages so let's go ahead and just keep going and then we'll do 404 page next to make sure you understand what I'm talking about so let's go ahead and do a product category page but just the stuff we've got the stuff right here stuff now I want to create a template for stuff so here add a custom body and I will add them from the library and I'll just simply grab one really quick I'll do a shop one now when you do the product categories there's something that you need to do when you do this and I'll explain it to you what you have to do and it's actually within the Builder let me go to my let's just grab an ugly one again no just joking Kenny let's do something like we'll do this one we'll just do this one and I'll use this layout so right here I have a custom body right now I need to actually edit this right here and the reason why I need to edit it is because the module for the shop in this right here is probably set to all products right so over here I'll click on this little gear icon and the product view type I need to change this to a product category and I want to basically specifically set its - you see right here we'll set it to the specific category of stuff so let's go ahead and change this to stuff so now what I'm saying is that all of the stuff products are going to be displayed only here you understand what I'm doing so you can have another product category and then if you do that another page you'll need to say ok on that page only have another category etc so I'm assigning only one category to this page so even though it's a template it's only going to display the stuff category all right I hope you understand that ok so if you don't sorry but that's how you can have a custom product category page as well alright so I've shown you how to do a shop page I've shown you how to make specific category pages so your tone twisters now here know let's go ahead and add a new template and what we'll do here is we'll just do a 404 page so what this means is basically saying any page that visitors get lost on they'll be redirected to this page by default so let's say for instance they tried to go to a page that doesn't exist so let's add a custom body I'll just go ahead and grab a premade layouts see if any 404 we got 404 here they have no 404 what is that elegant themes come on come on come on so let's just say for instance that I'll just do I don't know I'll just I'll just add in this one right here we'll just use this one right all right so it's loaded now right here I'll go ahead and just select this little mark right here this is probably what you want to do for all of your 404 pages you want to have a template so what I'll do here is I'll just go ahead and delete all these right here I'll just delete everything I don't wanna you don't want really a custom header and footer I mean you can have a footer and header for your for your 404 pages but I think just having something like this right here like that and then changing this to your home page so right here what this one would be like go back home and then for the link right here you can just put your website to go back to the home page and then right here I'll click on check check and then save all right so let's go ahead and test this out so I'm just gonna go to a bad URL that doesn't exist on my website right now so we're here click on Save Changes now right here I'll just do something like this and what it should do is that should redirect me to that page we just created so something like this right here now what I probably want to do here is I probably want to go ahead and click on these right here to hide my header and footer click on Save Changes again and then refresh the page again all right so now it's basically deleted my header and footer or so right here lost and then just go back to home so that's how you can successfully create a 404 page right so none of them that right there let's just go ahead and do the last two sections which is the blog and also the post as well so now I want to say all right I want to have a special blog page right so right here add a template and this is gonna be my blog page all right so right here blog now one thing that you need to do you need to go to your theme customizer and still set the blog page to the specific blog page and if you don't do that you're gonna get a 404 error so you need to make sure that you have a specific blog page already assigned okay before you do this all right so right here blog and right here I'll just add in a custom body I'll just add from library and I will go ahead and put in a blog section so I'll just throw in a blog all right and I will grab something very simple let's see what what good layouts we got here what's what's a good one what's a good one you know let me know your favorite layout in the comments below you know let me let me know let's just use a can Schama lay out candy shop no right here I doctor in fact that's why I'm wearing glasses right now because I actually slept with my contacts on and I woke up and my eye was just like super red and it hurt really bad and the doctor was like did you sleep with your contacts in and I was like yeah I always do he's like don't do that again this is why so let me go ahead and click on Save Changes and let's go ahead and go to my blog right here so this is my blog link but if i refresh the page I'm gonna have of course my default header my default footer and also by special blog page and you can see all my posts are being pulled and they are now being displayed on my blog page so now let's go ahead and click on one right here so I clicked on it and I have this right here and this is pretty ugly right this doesn't look good so let's go ahead and create a template for all of our posts so let's go back to our theme builder and right here under add a new template we'll just say alright I want this to be displayed for all of my posts now also when you do this you probably want to create another templates for your post categories remember how we did product categories so now you want to do it for your post categories tongue twisters tongue twisters I'll gonna be should pay me for all these tutorials you know they're lucky I don't charge they're lucky you know right here just click on add a custom body and then right here add from library alright and also good type in post now there's something that you need to do here so I'll click on this right here and I'll use this layout's alright don't leave yet there's something that you need to do here before you actually before you actually do this you need to actually create a post content module or else it's not gonna work so right here we have our all posts so what I'm saying now is I want this to be my default template for all of my posts all right so I'm a lazy ass I don't want to make I don't wanna make more posts I just want it to be easy and right here dynamic content is already being applied so whatever post you make it's gonna be dynamically changed to any post that you make and the image will displayed right here alright so right here I'm gonna say you know what I don't want this right here I'm gonna delete this I'm gonna delete this I'm gonna delete this I would leave this section related articles yeah sure why not I don't want the comments and I just want this section and that's it all right so this is not my new page but however right here I'm gonna actually delete this and we need to add a module we need to add the post content module so right here the post content now what the post content means is basically saying whatever I type for that specific post it's going to display right here all right and I'll go ahead and drag it above here okay and then right here I'll click on save and the only way to test this of course is to just make a post so let's go ahead and do that I'll click on X right here I'll save now what I'll do here is I'll go over here and add a new post so out of new posts I would do that to check my my thing so recording one time I record like a two hour video and it turns out the recorder wasn't on so after I was done recording it turned out nothing we got recorded and I started to cry so right here we'll do something like things things girls hate about men and then right here I'll set a featured image probably I don't have a pissed-off girl here oh that's a good one she looks like she's kind of like yeah you know like yeah you know and right here default editor I'll just simply go ahead and put this is the demo content I'll go ahead and copy this actually you know what well just we'll just go here that's there we go perfect perfect we have some demo text and I'll just paste it in there our demo content and then paste that there and then publish now let's go ahead and view this post I just made so right here you the post alright what's going ok cool so obviously I need to do work with the imaging but you know that's fine so the featured image displays right here the title is dynamically pulled from my post so things girl things girls hate about men we have the writer right here and right here you can see this is the demo content and then all the information that you post will be displayed on your post content so what you can do is this design it but make sure your post content is there or else it's not going to work alright so now you can see that this is my new post everything's already displayed correctly header and footer perfect done so there you go congratulations so that's basically the theme builder in a nutshell so I've showed you how to make the header and footer four different pages all your custom post type pages your shop page your shop product your shop product category page your 4 or 4 pages your blog page and also how to create a template for all of your future posts now that I've done that let's go ahead and quickly talk about the comparison between Elementor horse Divi and what I think about them so now that I've shown you how to use a theme builder I'm gonna give you my personal opinion between Divi and also Elementor theme builder which is a very highly debated very talked about conversation in the WordPress community now personally I do love this interface I feel that this interface from Divi just nailed it I mean everything is visual you can really see what's going on here so for example I know that any page that I make will have this global header and footer applied I know that my about Us page has a specific header and a general global footer and then for my commerce pages I know that I have a special header and footer for all of my commerce pages as well my shop and my product categories etc so I feel this interface is very easy to understand for beginners now let's take a look at elementor's interface so this is their interface and I gotta be honest this is a text nightmare so it's very hard to remember where your conditions are being applied so I mean right here I have around what like seven or eight instances or eight conditions and over here if I had eight right here I have to actually write them down it's like okay this is being Dennis this is being this it's a text nightmare and it's very very difficult to understand now remember I do like both page builders I want both page builders succeed I have tutorials on both page builders but seeing this from elemental it feels very dated this feels very like three years ago and I don't know why they don't update their user interface in fact comparing the builders I'll just give you a quick quick preview of what I believe and I'll be having a follow up video to this is I just believe that the interface from Davi is just so much easier and simplistic than Elementor so like for example right here just adjusting padding and margin is just very easy to do now if you were to do that Elementor that would take a long time so for example right here have to click on this go to the advanced unlock unlock and then start to make changes by clicking like this so this is like very old fashioned and old-school but when you compare this to something like Divi where it's just so simplistic and very fluid I feel that Divi on on this situation just has a higher a higher hand as far as the theme blur goes I remember both theme builders achieve the same exact thing so the big seal II can design any product page and the archive page for a four page but I do feel that this is very simplistic so if you're gonna ask me you know this is my first time learning about WordPress I would definitely recommend a Divi / Elementor because now that they have the theme builder I don't think that Elementor has anything on top of Divi anymore now there are a lot of debated talks with like things like short codes and stuff like that but I'll be making a separate video talking about why Elementor is better in that regards but for the average person and beginner I would have to say that learning WordPress and setting the theme builder up is definitely easier with elegant themes but let me know what you think in the description below do you think that this interface is easier do you think Elementor still is a better theme builder than the Divi so let me know what you think and let me know about your experiences with both of these team builders in the comments below so I hope you enjoyed this tutorial let me know if there's anything else that I missed my name is Darren Wilson and I will see you all in the next video everyone take it easy

Channel: Darrel Wilson

Views: 35,613

Keywords: divi, theme builder, divi theme builder, divi 4, divi 4.0, divi theme, divi theme tutorial, divi theme review, divi theme footer, divi theme header, darrel wilson

Id: SyAI1GF70hw

Length: 28min 35sec (1715 seconds)

Published: Fri Oct 18 2019