10 Steps to Using a New Divi Layout Pack for your Next Project

hello divination if you haven't heard by now let me be the first to tell you that as a part of our Divi design initiative our design team has been pumping out some brand-new Divi layout packs for you they're free every single week you can download them from the articles every Monday in them they have everything you need to get a site up and running in just a few minutes and in this tutorial I'm going to be walking you through ten steps to using a new layout pack on your next project I'll even throw in some not so well-known tips on how to handle your layout like a pro so let's jump right in and get started walking you through these steps together all right let's go ahead and get started on our ten steps that you should follow when adding a new Divi layout back to your next project try to keep these steps in order as much as possible whenever you doing the tutorial because they are meant to be done in order now before we start with number one let's go ahead and just go over what I have done so far right now I have a new install WordPress obviously I also have a new install of Divi the Divi theme and I've already gone to my article and downloaded the layout pack this one is the fashion layout pack that I'll be using and so that's already been downloaded to my computer and I've unzipped the layout pack so that I have access now to the individual JSON files that are inside of the folder all right so the first step is to import the Divi layouts to your Divi library first so let's go ahead and do that by going to our wordpress dashboard i'm already here and then going down to Divi and then Divi library once there go up to the import and export button up here click that and the portability modal pops up and you're going to select the import tab click Choose file and you you'll see that I have access to my fashion layout pack files here so I'm going to click on the one that says fashion all you know you yours is probably gonna be name something different but it will have the the word all in it so make sure you find that one that way it'll import all of these at once instead of having to do them individually go ahead and open that and select import Divi builder layouts alright once that's done you'll see them added to your library you'll notice that the name of the layout will be listed first along with its corresponding page which is helpful for finding it in the future now that our layouts have been imported let's go ahead and start adding them to our pages to do that from your wordpress dashboard navigate to pages add new alright so I'm going to add my home page first and each one of these pages will correspond to the you know whatever page layout is included in the layout pack make sure and click on to use the Divi Builder inside the Divi builder you're gonna select the tab load from library in the load layout modal that pops up you're going to click the tab that says add from library that way you can see all of these new layouts available for you that you have imported go ahead and select the one that corresponds to your page which in this case is home click load and there you are don't forget to publish the page just take a quick peek view the page you can see there it is now we're going to continue to repeat this process for each one of our pages that corresponds to our page layout but before I complete all of those I'm going to show you how to do it from the visual builder if that is your preference to do that let's go ahead and add a new page again let's go ahead and make this our landing page and then click to use the Divi builder this time I'm going to select use a visual builder once the visual builder loads find the menu at the bottom here open it up and then find this little add to library icon here the plus icon excuse-me load from library and then select it once that pops up you're going to select add from library tab and then you're going to simply find the layout that corresponds to this page in this case it is landing select it and you will see it come to life immediately don't forget to publish and you can start to see your links to your new pages that you've been adding pop up in your navigation menu up here this is of course if you have a new install of Divi let's go ahead and continue this process by adding our new pages and adding our new layouts to each one of those pages I'm not going to walk through every single page with you right now but you're gonna want ahead and go do that and I will skip to the part where I am done alright now that they all have been added up here to my menu I have a page that corresponds to each of my page layouts at this point it's a good idea to go through them and you know check them out make sure they look correct just keep in mind some of these are going to have like a shop or a blog in them so these wouldn't be functional right out the gate as you can see this one has a shortcode that is dependent on WooCommerce being installed and that's it for number two let's go ahead and go to step number three which is to create your primary menu go ahead and navigate to your WordPress dashboard go to appearance go to menus and from the menus page you're going to want to create a new menu go ahead and call mine primary menu once that's entered click create menu and now you can select all your pages over here in the left side by clicking this helpful link here select all and then I'm going to add them to my menu and don't forget down here to select primary menu for the display location of this menu click Save menu and you are done let's go ahead and check it out on the live site alright so I went ahead and jumped over to my home page which is showing this you know page that I don't want to be shown that as my home page so I'm gonna go back to my dashboard and I'm gonna go down to appearance scratch that lets go down to settings and to reading and from there I'm going to select my front page display to be a static page and I'm gonna select my front page as home now let's go ahead and visit the site as you can see my main primary navigation menu has been created and that's it for number three let's go ahead and go to step number four which is to set your default color palette to do that go to your dashboard navigate to Divi Divi theme options and you can see your color palette is right here under your general tab and it's labeled as color Pickers default palette here is where you're going to you know put the colors that go with whatever it is your color scheme is for your website at this moment it's a good idea if you're going to keep the colors that are for your layout to go and grab those colors from your layout and then put them in this default color palette that way they'll be ready for you to use in the future when doing certain edits customizations one good way to get some of these colors for your default palette is to simply go and open up your your website here and let's go ahead and go to the landing page this it seems to have a lot of colors that I may want to pull from go ahead and deploy the visual builder you could also use a an extension for your browser like an eye drop tool or whatever to go ahead and you know select these it might be easier for you to do it that way I like to actually go into the layout and do it because it allows me to get the exact code in that way I know for sure it's that's exact color and so let's see I like this pink I want to use it but it looks like it's a gradient so let's go ahead and find the button and I'm gonna go to the button module settings here I'm gonna go down to the design tab here go to the buttons section and I'm gonna search for this paint color here and simply grab it I'm gonna copy that and then I'm gonna go back to my theme here to my color picker and I'm gonna swap out this red color for this pink now it's going to be ready for me in my color palette I can go ahead and find the rest of the colors here on this page if you see a gradient one idea is to just grab both of the colors used for the gradient let's go here to our row backgrounds and there it is so column two background has this gradient and you can see there's two colors used here I think I can simply grab these colors and place them in my palette and you can see this process is pretty straightforward after you have finished uploading all the necessary colors to your palette you are ready for step number five step number five is to set your global accent color okay don't forget to save your changes and let's go ahead and go over to Divi theme customizer in the theme customizer you will find your default accent color under general settings under layout settings and then right here at the bottom theme accent color right now it's the default blue you're going to want to change that to that pink but since you already added your default color palette it's already there right there for you nice and convenient select the pink and go ahead and save and publish now at this moment you will want to exit out and then refresh the page now I go back to my theme customizer and it should update those things once you've completed that you're ready for step number six step number six is to style your header which is this right up here to do that you're going to go in your theme customizer from the main menu here you're going to click on header and navigation after that we're going to go down to this section called primary menu and you can see my my accent color has already updated these things down here which is nice but we want to go ahead and make some additional changes to match this menu with our theme maybe we want to go ahead and change our font to match the body font of the layout to do that just make it poppins alright once that's selected maybe I want to increase the text size a little bit let's go ahead and make our background color the pink and let's go ahead and change our text color to white it's always a good idea to keep the what the dark version of our color here and your capala as well as white for convenience and there you go let's go ahead and change that back to white and now you have a nav that pretty mostly matches your site make sure you save and publish you also want to go ahead and customize your fixed navigation at this time to go ahead and match your site actually look like the way it looks right now since it's pulling your default accent color for the background of your fixed navigation which is nice and that's it for step number six let's go on to step number seven which is to style your bottom bar let's go back to our main menu under theme customizer go down to footer section click on bottom bar here and let's go ahead and scroll down and let's see these changes as they happen it's going to change our background color to our pink and maybe you'll notice that it's showing that black behind it so we want to kind of pull this back up and I like it to be a little bit darker so let's just pull this up a little bit there and then the text color let's go ahead and make it white all right and then let's go ahead and make our social icon color white as well so let's go ahead and save our changes and exit out of the theme customizer and let's go ahead and go to our site all right now we're ready for number eight which is really how to use some shortcuts to make design changes to your page layouts a lot of times you will want to change your headers or your your fonts or your um the way your body text looks throughout your page and it makes sense to go ahead and do that from the theme customizer but some of these elements because it is a layout these are edited on a module level so editing it from the theme customizer may not work since this module would override it let me just go ahead and show you what I mean by that if I go over to the landing page here and let's go ahead and deploy the theme customizer and I'll show you what I mean so inside the theme customizer on this landing page I can see that I have the ability to edit certain things but some things I won't like for instance if I go to my general settings to typography let's see I could probably change the header text size since this is kind of taking on the default for the most part but my body text size as you can see I'm scrolling it and it doesn't move that's because it has already set inside the module so the modules overriding it so you'd want to go ahead and just either restore those to their default or you know go ahead and edit each one as you go throughout the page alright I'm going to go ahead and exit out here so that we can make a few changes to our landing page show you a few of these shortcuts all right so we're in the visual builder here and let's say that I want to restore some of these elements to their default like we like I just showed you the body text isn't really editable from the theme customizer because this is being overridden in the in the module settings so one thing we can do is click on the text module settings here go over to the design tab and under the text toggle here you can see one trick to recognize which ones have been chained which options have been changed is that you'll see this little icon to the right it's the little restore to default icon if it's there that means this option has been changed and you can then go ahead and click it to restore it to its default as you can see the font needs to be changed back to its default maybe the text size back to its default and the line height back to its default another little trick is to go ahead and use the search options box up bar up here and this little search bar is helpful whenever you you know that you want to just you know change the text items just type in text up there and it'll just automatically pull all of the options that have to do with your text settings and it kind of gets rid of your toggles as well so you can just kind of scroll through all of them right here also if I wanted to you know just edit the button for example if I had a button why don't have a button on the text module but maybe a shadow type in shadow and it pulls up all of the shadow options for text and things like that also you can go down to this menu here click on the options the Builder setting options here and you can toggle this setting off that says group settings into clothes toggles if you want to speed up the process of scrolling through your items all right so now that I've edited my text module here back to its default I still need to do it for these as well and so don't forget that you have these right-click options here so I'll just right click on my module and copy the style there and then right click on this text module paste style and it's going to paste it in there now notice that I'm pulling a white style there so I might have to go in here and just quickly change that back to a darker color alright so now that I have that I can copy this style paste it over here and paste this one so on all the way down my page a lot quicker than having to do each one individually within the settings and then if I go ahead and save this out and then go to my theme customizer for this page and navigate to my typography and now I should be able to change my body text as you can see now I can change my size here I can change my body line height if I need to and it will do it for all of the modules that are restored back to its default now one last tip that I want to show you if I let's go back to my home page here and let's go ahead and edit the page from the using the backend builder and right now it is only available in the backend builder so if you find yourself just wanting to restore all of your design settings back to its default without having to go and click through all of them you can do that just go to your back-end builder here click on whatever module you want to restore the to the default click on your design tab and you'll see that restore to default icon pop up there and once you click on this little icon here it'll prompt you to make sure that you want to erase all that and you can click yes and then it will restore all of these settings to the default and then you can save it out that way all right now we're ready for step number 9 which is how to save key elements to build new pages or posts we we're probably going to want to use some of these elements again and again as we build new things a lot of our layouts up here are great but maybe we have a page in mind that we need to build that doesn't really fit the mold of these layouts in that case you would want to carry some of these elements over to give you a head start on building those new pages or posts I say posts because if you want you could even choose to use some of these elements to style your own custom post layout your blog's as well alright so every page should have a header of some sort so maybe we like maybe we don't want a header from this page maybe we will want to go to our home page here and let's go ahead and enable our visual builder on our home page and let's grab this header here this looks like a maybe one that we can easily customize to fit all of our future pages to do that I would need to hover over the section and click this save to library or add to library call it header all right that's saved to our library and maybe we want to bring in maybe this section header here let's actually grab this one it's already centered and actually this might be a good idea to just take this whole row of elements that way it'll give us a head start for building another section of our page to do that I'm just going to add this row to the library call it section header save the library and I like this button here it's always a good idea to grab both a light and a dark version of your button call this white button and let's go ahead and grab this pink one here as well that way if I need to add some of those things I can do them easily by grabbing him from my library last thing I want to grab from this page is this footer section down here alright and now let's say I want to build a new page so I'll go it click to build a new page here and once I'm there I'll just call this new page and then I'll use the visual builder all right so now I'm starting with a blank slate here and let's say I need to start with adding a header first so I'm gonna add a regular section from my library here I should have a header section all right let's pull that back up here and erase this one and the next thing let's go ahead and add a regular section give it a full width 1 column layout here and I want to add a header but I need to do that from the row section from the row level here so I'll add a new row add from my library there's my section header so there you go and if I wanted to I could also add a module right underneath that header there to add a button now let's make it a pink button I took one that was left aligned that's no big deal just going to the design tab and make it centered all right and lastly let's go ahead and build a footer section here that's how you grab you know elements from your layouts in order to you know build new pages the best thing about this is keeps your design consistent throughout your website and briefly the last step is to consider you know making these some of these global items global items can be a great time-saver when you make future edits to your site but it does take a little bit of foresight you need to identify which elements of your layouts will be used frequently throughout your site and will require you know more uniform updates updates that should happen to all of them at the same time good candidates for this would be you know footer sections like this it would make sense to go ahead and make this a global item also these email opt-ins you may have scattered throughout your website that's a good option to have as a global item and of course all sections rows and modules can be made global items also call to actions is another one buttons is a good one and so just to show you as an example and when I save it to my library this time I'm just gonna call it a global footer and then I click this option right here to save as a global item and now every time I add this to my page and make an edit to any one of these sections it's gonna make that edit throughout all the website wherever this one is located well that's it for this video thanks for watching and please go ahead and give a thumbs up if you liked the video and don't forget to follow us on our social media platforms that way you can get notified every single time we have a new video for you thanks again for watching and I will see you soon

Channel: Elegant Themes

Views: 30,599

Keywords: elegant themes, divi, divi 3.0, wordpress, wordpress and divi tutorial

Id: rWP8JAW1m_Y

Length: 27min 44sec (1664 seconds)

Published: Tue Nov 07 2017