Using The Divi Theme Builder

in this video we're gonna be showing you how to use the Divi theme builder the Divi theme builder is an interface within Divi that allows you to use the powerful Divi builder to construct theme templates and assign those templates to pages or posts across your theme in short the Divi theme builder takes the power of the Divi builder and extends it to all areas of the Divi theme allowing you to build custom headers footers category pages product templates blog post templates 404 pages and more with the theme builder you have complete control over every single element of your website and because you have the power to use or exclude templates on any page or post throughout your site there really is no longer any need to manually edit a theme template file ever again in this documentation video we're gonna cover how to customize templates using the Divi theme builder and also how to manage template assignments how to get started building a global header and footer for your website you also show you how to build a custom post template for things like blog posts and WooCommerce product pages using dynamic content we'll also cover the many powerful features and settings available within the theme builder so let's go ahead and jump in and get started the first thing you'll need to know is where to find the Divi theme builder to find it simply go to your WordPress dashboard and navigate to Divi and then theme builder which will be located right under your theme options and right above theme customizer so go ahead and click on theme builder that'll bring you to the Divi theme builder interface here you also notice the default website template and this is the area which basically represents your standard theme template and you'll see that it's made up of three template areas the first one is a global header and then a global body in the middle and then a global footer and clicking on any of these would start the process of creating a new area for your template on the right of each of these areas you'll see an eye icon which is basically a way for you to hide any one of these areas on the front-end so if I clicked on this one for example this would hide my header on my default website template so basically I would have no header on my website and there's also a few items here in this menu right above your global template here which allows you to duplicate this template to create a new one which would start that process or you can use the export icon here to export your default website template and you have a more Settings menu here which allows you to do some more actions like duplicate disable the template and export it as well so let's go ahead and jump in and add a global header for our default website template to do that we're going to click on add global header and then click build global header you'll be prompted on how you want to start the build process just like you would for a normal page or post when using the Divi builder let's go ahead and click build from scratch and there you'll see you have a blank slate available for you inside this template layout editor where you can of course use the power of the Divi builder to design a custom header layout however you see fit for example you'll start by adding a row and start adding modules to your row just like you would when using the Divi builder on a page I'm gonna speed up the process and I'm going to add a header layout that I've already made I'm gonna add it from my library and so to do that I'm going to open up my settings here click on the load from library icon and let's go to my saved layouts you'll see there's my global header layout that I've added to my library I'm going to select it and there it is this is my global header that I've already designed but one thing I do want to point out is the header is built with a menu module and this is a module that is specific to the theme builder and specific to the header area of your templates so whenever you're creating a new header layout for any of your templates you'll want to use this menu module and to add a menu module you would just simply click the plus icon and find it and then select it here and let's go ahead and erase this one because we already have one and let's open up the settings just so you can see some of the menu module settings that are available so I'm going to open up my menu module settings I'm gonna bring it over here to the right and as you can see I have the option to select a menu I don't have one created for this new website but I could select my menu there I could add a logo you can see I've already added a Divi logo here and that will be automatically placed to the left I could choose to show my shopping cart and search icon in my menu if I go to my design tab I see that I have a layout option where I can change it from the default left-aligned style to a centered style or a inline centered let's go back to left aligned I can also change my drop-down menu direction from downwards to upwards and I have all of these design settings for each one of these menu elements like menu text drop-down menu icons I can even customize the logo styling and of course add any one of these many options and you'll notice that I've included a search module here in my header just as it's kind of a different look to include a search bar inside your header so that's one option you can do of course you can do anything and add any module to your header if you like by default your header not be fixed like the standard Divi header is so you'll want to take steps to go ahead and make that fixed if you in fact want a fixed header on your website let me just give you a sneak peek of how I've done this one go back to my wireframe view and there's two things I have a section here that includes my menu and my search bar right here and above it is actually a section with a divider and that's just to add the spacing necessary to push my content down the page but in order to make my menu or header fixed here I'm gonna go into my section settings and go to my Advanced tab and go to custom CSS you'll see that there's a CSS snippet here that basically gives it a position of fixed a width of 100% and a top position of zero or zero pixels and that makes sure it stays fixed at the top of your browser window and I'll also want to change my visibility z-index to something really high so that it stays above all other content on your page and that's basically the idea behind creating a fixed menu if you desire and you're always going to want to make sure and save your layout before clicking the X to close out the template layout above just to make sure that your layout is saved and then once you exit you'll see that the global header is a bright green to let you know that it is a global item and the global header is ready and I'm going to make sure and click Save Changes above to make sure that the theme builder settings have been saved and there you can see my header has been added to the default website template for my site now let's go ahead and add a global footer for our website to do that let's go ahead and click the add global footer area and click build global footer I'm going to click build from scratch and then just like before I have a blank slate ready to you know design my footer using the Divi Builder since this is a footer you might want to import one of our pre-made layouts to jumpstart the design of a footer and to do that you would open the load from library pop-up here and you can you know search throughout these pre-made layouts find a template that has or a layout that has a footer that you like and then you don't import that layout in there and just use that footer to jumpstart your design I'm gonna go ahead and use one of my footer layouts that I have saved to my library so I'm going to deploy that one and once it's all done go ahead and click Save and then exit your template layout and you'll have a nice bright green global footer added to your default website template don't forget to save changes and then let's check out what that looks like on the live site and there's my custom footer down there that has replaced my standard Divi footer and you can see my header is up at the top and it is fixed as I scroll up and down okay so that about covers our default website template let's go ahead and jump into building a new custom template to do that you'll want to simply click on this add new template box or this plus icon and this will open up your template settings and this is essentially where you manage your template assignments and here's where you can choose from any template throughout your Divi theme including the pages and those templates all of your posts and those page post templates your archive pages your projects even the other like search results in your 404 page and you have a lot of these options that will allow you to assign your template on a macro level for example assigning it to all pages throughout your site and you can assign your template on a you know a micro level like for example if you wanted to to a specific page on your website so a single page would have that template and you can of course select multiple assignments if you want you even have the option of the use on and exclude from logic which you know you can use in combination with one another for example if you want to include your template on all pages but you want to exclude it from let's say a specific page you would click the exclude from tab go to your specific pages and then exclude it from one of those pages and you'll see a red X instead of agreeing to let you know that that specific page is being excluded from having that custom template one thing you want to take note of is that if you accidentally click to use it on let's say a specific page and let's call it the services page and you also choose to exclude it from the services page the template actually will be excluded so whatever you have in the excluded column will override the if there's a conflict will override the Yuuzhan tab there once you have your template assignment in place you'll want to go ahead and create the template by clicking the create template button the custom template will appear and you'll see that all pages will show here because I have selected to show the template on all pages if I were to go back into my template assignment and you know add you know more assignments to it you'll see a name derived from one of your selections but when you hover over it you'll see all of the actual ones that have been selected and you can actually change the name to whatever you want and it will still show the actual templates on hover you'll also notice that my custom template has automatically inherited my global header and global footer from my default website template the theme builder is assuming that you want continue to use these global headers and global footers throughout your website even on your custom templates but you can also choose how you want to treat those global items on your custom template for example you may choose to leave it alone and keep the global header in global footer that you've created or you can choose to delete it altogether and if you do that it's going to default back to the standard Divi header which looks like this and if I wanted to add it back I can simply drag it from my default website template and it's going to basically duplicate the header and place it in my custom header location and now if I go ahead and look at my page you can see that my global header is now in place on my custom template another option is I can right click or click my more settings icon there and then select disable global and now you'll see that it's no longer green it's just displaying as a custom header which now can be further customized to fit the specific needs of this template and of course I could also delete it and start the process from scratch by adding a new custom header I can I have the option to use the global header again or build the custom header from scratch or add it from my library let's go ahead and bring that global header back in before we create a new template let's go ahead and check out our custom template settings here we have a settings menu that pops up when hovering over a custom template and you'll see that this gear icon will pop up that option to assign your template to you know different pages are posts throughout your website the duplicate icon will duplicate your custom template and prompt you to manage your template assignments basically pick where you want this template to show when the template is duplicated duplicate template will inherit all of the layouts of the template that was duplicated you can also use the trashcan icon to delete the template altogether and use this icon here to export your template to be used on another website and if I click on export you'll see the portability pop up shows and then all I need to do is give my export file a name just call it header layout and then click the export Divi theme builder template if I wanted to import the layout that I just exported I would go to this portability icon up here click on it click import and then add the file here to be imported the more settings menu will open up some you know action items that you can perform all in one place for example go back to managing the template assignments reset the template assignments altogether duplicate it disable it delete it rename the template or export it now let's go ahead and jump in and add a new template this time we're going to assign this template to all of my blog posts and then I'm going to click create template and for this template I'm going to add a custom body layout and the reason behind this is because I want to create a site-wide blog post template that I can use for all of my blog posts and to do that you'll need to use dynamic content that is built in to the Divi Builder so this will be extremely helpful for building site-wide blog post templates or even WooCommerce product templates and things like that to add the custom body I'm going to click on the add custom body area and then I'm going to instead of building it from scratch I'm gonna add it from my library because I do have one already created and go to my saved and here it is it's called post body layout and you'll notice that it's already added I just haven't gone into the actual template editor to edit my layout but let's go ahead and click my gear icon to go in and see what we've created you can of course you know build the entire thing from scratch if you like but this is actually using you know a combination of a Divi pre-made layout and then I've added dynamic content or post content throughout the layout so that it can be used site-wide for all of my blog posts just to give you an example here is a image module that is pulling the featured image of a blog post of course there's no blog post assigned to this specific template layout because this is just going through the process of building a template but it is going to pull in the post featured image whenever the template is deployed on a specific post that's pulling in my featured image for my blog posts here's my post title module which is going to be pulling in my post title and this is a text module over here that's actually using dynamic content to pull in the post publish date this is a text module pulling in the post categories this is one pulling in the comment post comment count this is actually an image module that's pulling in the post author profile pic and this is my text module pulling in the author's name and this is very important you remember this is the post content module and the post content module is where all of your actual page or post content will be displayed so whenever you're editing a post using the standard word post editor you can add your content inside this WYSIWYG area here for your blog post and then it will be displayed inside the post content module on your custom post template and if you use your post content settings to design the you know the different headers the links the list items and things like that here at the template level you won't have to worry about it whenever you create your blog posts and down here for example I have the Komets module pulling in the post comments and this is actually a static this isn't dynamic but it's a you know helpful subscribe area if you want to add those to each one of your posts as well make sure and save your changes and then let's go check out what a post looks like so here is an example of a post on the back end and the post editor here and you can see this is my content and all of these other elements are what the template are going to pull up as dynamic content for example my category my featured image my tags and my title and as you can see I haven't even used the Divi builder for this blog post I've just added the content here but when I view the posts live you'll see that my custom post template has already designed my post and implemented the dynamic content so that my my title appears here my post date from my post shows up here my category my comment count the author and here's my post content and my tags here my comments section here as you can see this is a very powerful way of creating a post template site-wide to design all of your blog posts at once building a custom body using dynamic content is a great way to build a custom post template but it's also a great way to build a custom product template for your WooCommerce products to give you an example of how this might be done go ahead and add a new template you'll see if you have WooCommerce installed if I scroll down here you'll see that WooCommerce pages will show up so I have the option of you know creating a template for each of my WooCommerce pages and also for my product pages and even product archive pages or even for specific products so will commerce is integrated in the theme builder and it will allow you to customize all of those WooCommerce templates but for this example we want to create a template for all of our products so I'm gonna select all products and I'm gonna create template then I want to add a custom body and I'm gonna actually add it from my library instead of building it from scratch because I do have one saved that's already made so I'm gonna select this product template then I'm gonna go ahead and open my custom body to see the layout and if you are familiar with the whoo modules that are built into Divi you'll know already that this is one of the great features that Divi has when building a product page that you have all of these womb modules in a nice layout by default that allow you to customize them in in certain ways we're doing the very same thing but we're just doing it for a template layout so as you can see this is ace you know a pretty standard product page template or layout and it has the you know breadcrumbs the cart notice the the whoo images here and the the title the price the Add to Cart all those whoo modules are basically displaying dynamic content for my template and the great thing about this is I can design this layout however I want and it will be reflected on all products throughout my entire site so this would be a great way to streamline and design of your Wu products and this layout I've added an accordion with some dynamic posts or product content if I click on my accordion settings here and let's look at this first accordion you'll see that I'm pulling in the product description dynamically for this this accordion element here the next one has the product additional information and this last accordion is pulling in my product reviews as dynamic content alright so let's go ahead and save this out and let's exit our template layout let's go ahead and make sure and save our changes first and then let's check out what a product looks like you can see I have a lot of products here let's just go ahead and view one and you can see that it has inherited my my product template design let's go back to and let's go ahead and change our assignment from all products and let's change it to let's actually just set it to nothing so I'm just gonna select take out all products click Save you'll see that now it's unassigned there's a nice little warning there letting me know that this template has no assignments let's go back to that product as you can see without that custom template the product will you know resort back to its default layout and you can imagine how much time this would save you by you know designing one product layout for all of your products as as opposed to you know designing each of your product layouts individually I also want to mention that sometimes if you build a lot of templates you may have templates conflict with one another for example you might have created another template let's go ahead and create one and then assign it to all of our products well if I do that it's going to send or it's going to display this little warning message saying this item is a sign to another template saving will override and remove its current assignment if you notice that over here I have my template assigned to all products well if I select to assign this template to all products and click create menu it will override the previous one and that one now is unassigned so that's a way to keep your templates from being conflicted with one another so it's important to understand that if you do have a conflict the the theme builder will warn you before you save that template the Divi theme builder also includes portability options which basically allow you to import and export entire website packs so if I have my global header and my global footer designed for my site for my default website template and I have if you can imagine multiple templates designed throughout my site I can export the entire collection of templates into one file that can be imported into another website and basically give you an entire child theme for your new website to export your templates simply click the portability icon here at the top right and then under the export tab give your export file name and then you can either choose to export export all of the templates or you can deselect that option and then select individual templates that you want to export in this case I want to export all of my templates and then click the export Divi theme builder templates button to import your website pack or collection of templates onto a new site you will need to go back to the portability icon and go to my import tab and we're going to choose the file here and those are the custom templates that I previously exported now I'm importing them and it's given me these options to override the default website template and to allow import to override existing assignments so this is important because you may have templates already and you want to be you want to make sure and choose the right option in case you don't want to override the default website template or override the existing assignments on your template in this case I'm starting fresh so I'm gonna override both those leave it as is and click the import Divi builder templates and just like that I have an entire collection of templates for my website I want to make sure and save my changes and we're good to go hopefully this will help give you a greater understanding of how to use the Divi theme builder

Channel: Elegant Themes

Views: 58,864

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme

Id: Fma502HZUd8

Length: 29min 28sec (1768 seconds)

Published: Fri Oct 18 2019