Divi 4.0 Design Websites Faster

all right fantastic welcome everyone to our Saturday livestream today we're going to be talking about web efficiency tips so I'll be covering things that can help you design websites really really fast thank you very much for for you guys tuning in so as I mentioned today we're going to be talking about the web design efficiency tips now when it comes to designing websites a lot of the processes especially if you're designing websites for clients a lot of the processes are repetitive so you can imagine if you're setting up a website you have to create the term in the header the footer custom fonts and all and all that stuff on each and every website that you need to design so what I'm going to be sharing today is pretty much tips on how to design your websites fast now this live stream is also going to be recorded so I will add it into our membership section so for those of you that didn't watch last week's one it's also in the funnels two-income membership so if you go in there you will see that live stream you can watch it it's in high-res as well all right so the first thing that we're going to talk about here this is just a refresher from last week because last week we spoke about flywheel local by flywheel this is a tool that allows you to build websites on your local machine so I'm just going to switch over here so we can take a look at flywheel so as you can see here I have quite a lot of websites installed and I'm always experimenting with different tools different techniques of you know how I can enhance the web design process so as you can see here I've quite a few websites here so this is the first step now this tool is absolutely free so you can you can go to local buy flywheel download it and you can start using it it's free for Mac and also PC so you can actually start by building your websites locally on your machine without committing to any hosting so now with this tool here the the good thing as well is once you install it you can also create what are known as blueprints now blueprints are pretty much sites local by flywheel where you can actually set up a website which has all you all your themes and all the tools that you are likely going to use in your future websites so this is what you save as a blueprint so each website you install here by coming to add local site here you can actually install this website from a blueprint so you can see here create sites from blueprints if I click on this drop down I've already created a website which has all the plugins that I need and the blueprint is called Mac so it has my DV it has my Divi theme it has my SEO plugins it has all all the plugins that I need for me to design my website so this is the first step create a local Blythe I will account download the software onto your local machine and this is where you're going to be building your your site so even if it's a client's website build them on your local machine and then export them later to the hosting company so that's step one now let's talk about step number two now with step number two what I need to do here is to actually demonstrate it here so I'm going to come to one of my sites here Genesis I'm going to click on View site right I'm just gonna bring this over here so you can see as I am working on this site okay so when we take a look at this site in fact I'm going to get rid of this layout that I've added here I'm just going to come in and just delete that layout come over here delete yes okay great so I've deleted this layout so this is pretty much what you'd see if you are building a brand new WordPress website with Divi so over here now I'm just gonna click on visit site so as you can see this is plain the header here doesn't have anything going on it's plain this is how it comes out out of the box with with Divi this is the footer and as you can see here and nothing is going on as well it's pretty basic it's pretty boring so if you are designing websites what you'll have to do here is each and every site you build you are going to need to do sign the header designed the footer and so on each and every time you design a website that is if you're using Divi of course now that in itself is very inefficient because think about it every single time you're designing a website you're going to go in design your header design your footer so one of the quickest ways you can actually save time is by creating a template that you can actually use to to design your header and your footer because you're going to be wasting a lot of time designing these layouts every single time so you need to have a standard header and footer template that you can apply to your designs each and every time alright so I'm just taking a look here at your questions Patricia says I use MAMP yes map is also very good but as I mentioned map also lacks features like the blueprint that I've just mentioned where you can actually have a website which has all your plugins and all your templates and also there is a link that you can share with your clients from your local machine I know we tried it last week and because it was quite a lot of us trying to access it it didn't actually show but it actually works so that's the easiest way to actually do it but mam does the good job as well Oh lamp it also does a very good job okay so I'm just taking a look here at the comments so moving on so what we gonna do now is show you where you can actually design your templates so I'm soon as switch over here now so to design your templates you can always come over here to dashboard and go straight over here to theme builder so here on the theme builder you want to start by designing your header and you can do this by coming over here build build global header and this will take you into the Builder and build build from scratch so once you start designing your header here so let's say this is the layout you can add your logo here by just searching for an image module like that and then you can set up your logo now your logo here could be let's say on your local machine so I'm just gonna choose this one here upload a logo so you can see here I've just added a quick logo for my header area I can also go in and add my background colors if I wanted here like that and so on so this is how you would actually build your header I'm just gonna close out of this because I'm not going to spend a lot of time doing this I already have a tutorial where I show you how to design a header and a footer for your website now once you've designed your header and your footer the next stage is to export it so you can come over here click on Portability give your theme a name and then export all the templates now why is this important now the reason why this is important is because this is the template that you're going to be using for all your future websites and to prove this I have a template that I built called the Genesis template now this is a template that can be used pretty much on any type of website it's highly customizable but it gives you a very very good starting point it actually saves you a lot of time when it comes to designing your website now I have a link here the template is only seven dollars but if for those of you who are lifetime members or those of you are VIP members this is also in your dashboard so if you log on to funnels to income com in the dashboard you will see that template you can download it and start using it right away so now I'm actually going to show you how this template works so this template has a dark and a light theme so that's very exciting so if you're designing a website which has a light theme you can go ahead and use the light theme but if you wanna use the dark theme you can also go ahead and use the dark theme alright so let me show you how to actually use this right so like I said I've already downloaded my template so I'm gonna click here on Portability and notice that in fact this is a question that I've been getting from quite a few people if you want to install this template you need to be in the theme builder okay you definitely need to be the theme builder here so you just hover over TV in fact let's start over here from the dashboard so you need to come over here hover over here click on theme builder and then you want to click here on portability so this is where you want to import by clicking this import tab and also you want to override the default a website template and then allow input to override existing assignments click here on Wade says choose file now I'm going to navigate and I think mine is on the desktop yes it is so here it is if you download if you download it it's going to be a zip folder as you can see here and then when you open it it's gonna have these two files so we have Genesis light and Genesis dark okay so the one we're gonna use for this example is going to be Genesis dark so I'm going to click on that click on open and then import a Divi theme builder template okay so now it's importing so this template is actually really cool because it comes with a few pages that are very very important which is the custom 404 page and also the search results page so when someone goes to a page that doesn't exist on your website it will display a custom build for a full page alright so now that I've imported my template and this is the Genesis template I'm gonna click on Save Changes now let's take a look at our website and see what it looks like now if you recall earlier on we didn't have a footer we didn't have a header so now if I come over here and click on a visit site now we have a footer and notice this on our logo has it has been already imported here it's down there right in place and on the top here you can see our navigation here has all our links and by the way it looks like it's cut off at the top here don't worry about that because you will be able to see it properly once you exit out of this website okay so I will show you this towards the end so you have your social media links here you can go in and actually customize this background color so let me show you quickly if you wanted to use different colors for this website so all you have to do is to come over here to global footer so change your colors to match your branding click your own design click on background and then over here now this is where you can change your colors now notice as I drag this right is changing the colors so that is how quickly you can go in and change the colors for this template so just like that if I save this this footer will be applied across the whole website so you don't have to go to each and every page to change to change the the footer it's already there it's done for you and you don't have to you know make any further changes so as you can see everything is all laid up for me I don't have to go in and spend an hour trying to create a footer and then you know the header the 404 page and so on so as you can see here it's very very easy to use now once we've added our footer all we have to do above here is to just click on Save Changes now after this footer stage this is where you can now go in and start building all your pages okay so if I clicking on all pages and then let's say I want to work on this contact page I can now click on edit with Divi so this is going to open the Builder so let's say this is our page so as you can see on the top here the selected page has the color as well the header is there in place if I scroll all the way down here look at our footer our footer is right there so at any point I can actually come over here to to the actual template change this footer anytime change these colors of my links and my headings so now I can just go back over here to the dashboard let's go back to the Builder so let's say right now I'm just going to refresh this so we can see let's go to the contact page so you can see here on the contact page if I scroll all the way down this is the color of our footer so let's say I want to change this so all I have to do is to come back over here to theme builder global footer and then I'm gonna go into my section settings click on background and now I can just change my color back to what it was save that save the page and then I'm just gonna exit out of here save all Changez now if I come back over here and take a look at all my pages all I have to do is to refresh and then you can see this for there now changing there we go so now my footer color has changed and I can go to any other page here for example services and you'll notice that the footer has changed across the whole website so this is a quick way to actually improve your web design workflow so now that we have this we still have other stages that we need to work on to actually speed or increase our web design efficiency tips and by the way for those of you who are not members I have a link in here just below the the live stream which says by Genesis template you can just buy it seven dollars you can use it on in many web sites as you want and it's you know there's no licensing pretty much you can just use this however you want alright so I've got some questions here I have changed footer or header on one page ray right when you change your header and your footer in the template it doesn't actually change it on one page it changes it across the whole website so let's say your website has 500 pages as as soon as you change your header color or text or layout in the actual template across the board it's going to change the whole website so that's the beauty of using templates and this is why I really need to emphasize on your web design efficiency tips in this episode because a lot of you are going to be wasting a lot of time designing all these things you know manually from scratch so I want you to get into the habit of actually using these templates or using the the the Divi template because if you don't do that you're going to have a headache trying to build your website this way by I'm in fact the old way where we're designing footers for each and every page and you know there was a lot of hacks to try and make it work so now with the theme builder this is pretty much what we can actually do to speed up so once you design it you design your header and your footer it'll be applied across the whole website it doesn't matter how many pages you have when you sign alright let's have a look here reto says show us the responsive version of the footer eg tablet version ok fantastic I can do that so I'm just going to switch back over here so if you wanted to see one way is to actually drag this or in fact you might not be able to see it clearly let me just log back in here let's go into one of our pages alright so I'm just going to go to our contact page here so click on this three little dots so so far we are in the normal desktop view now this is the tablet view okay so you can see here on the top it has this hamburger icon so if we click on it then it shows our pages look at that so that's how it would work on a tablet so you have all your pages like that's if you click it it goes away and all the way down here to the bottom this is where we have our footer so it just divides this into four spaces like that and then this is our phone now there's something that I need I may need to do here is to change the font size on these devices and while we're in this tutorial I might as well show you how to do that quickly alright so let's quickly do that in fact this is something that I'm should have taken a look at alright so I want to come back over here now to dashboard click on DV let's go to our theme builder let's go to our food right okay so right away I'm just gonna go into my module settings here click on design text all right so now in text here I'm gonna click on this little icon then I'm gonna go into my tablet view so as you can see here the font here is quite small on the tablet view so this is where we just need to bump it up a little bit okay so let's set our size here okay this is the wrong place in fact I need to be working here so now I'm gonna come to my text size click here on this little icon so now in tablet view I'm just going to increase the size like that so you can see I think it looks better here at one point let's go with 1.6 and for the phone we're going to bump this up with gain to about let's say 2.3 okay so I think that looks much better now so what I'm gonna do now is to save this and then I'm just gonna right click here copy module styles and then I'm gonna paste my module styles here so all my settings now pretty much applied to both of these now let's take a look at this in there are three views so I'm gonna start here by going to the tablet view so now we can see our layout it's much better we can now read all this text if I go to my phone view and again it's now nice and clear we can read it so all I have to do now is to go into this text and just customize the heading text and also right here on the bottom so as you can see this is pretty much like using my normal builder so again I'm gonna come back over here let's customize this so here we need to go into this little icon click on tablet and then over here on the tablet view I'm just going to increase the size a little bit to about 1.8 come over here to my phone let's get crease that as well to about maybe 2.5 save that right click copy styles right click paste module styles great now the final stage is to you know do the change over here now on the phone and the email but of course you get your menu you get the process so definitely thank thank you very much for pointing that out I'm going to be updating this template so that it has these latest sizes for the different views okay so now let's take a look at it one more time so if I click here on the tablet view you can see now it's in four blocks very easy to read if I come over here to the phone again it's much easier to read great so that is how this would have looks like on these devices Michelle yes I'm going to update the Genesis template with the correct font sizes for tablet view before you purchase it definitely I'm going to do that so for those of you that have bought it all you have to do is to go in and just add this new template that I'll put out there and it will have the latest so if you want to go ahead and buy the template you mean you can just go ahead and buy it now and I will update sits on the actual file and just tell you that this is the latest version so this was going to be called version 1.1 okay so pretty much this is how the footer works so I'm sure you can agree with me that if you're designing websites and each time you start off with a new site you import your template and this is you know this templates gonna have the header and the footer this is a very very good starting point now moving on to the next stage now before in fact before we start talking about the next stage any questions so far before I move on to the next stage web design deficients tips okay so I'm just gonna come over here and I'm just gonna save this Michelle says if you use a template footer or header can you make a change to one a single page so it's different that's a very very good question absolutely so let me show you how that works so here you can see this is a global header and global footer so that means this header and footer actually applies to the whole website so if you wanted to add a different header and a different footer to a different page what you'd need to do is to come over here add new template now do you see here where it's a specific pages right so if you hover over here on specific pages you actually target the page all the pages that you want to have a different footer on okay so I'm gonna come over here and let's say it's the contact page that we need to have a different footer click on create template so now it is it has been added here so you can see specific pages contact so now if I go to my footer in fact let me just close this so you can see what I'm doing here so this is still global header and global footer right so what we need to do here is to create a footer for this actual page so if I start designing the footer here I can click on build custom footer build from scratch so let's say I'm going to have let's say for this footer I'm just gonna have maybe a contact form I want to save that and then I'm just gonna add a background color here right this is just a rough design okay I'm gonna save this okay now I want to exit out of this Save Changes okay so for the contact page it won't have the global footer design that we have it is going to have a totally different footer that we've just created so let's have a look at the site and see if that actually works so if i refresh this page you notice that this is the footer that we have now if I go to the contact page scroll all way down to the bottom look at that we have a totally different footer now so yes it is possible to actually create a different foot all together for a specific page and this template here allows us to do that in fact you can even be even more creative and design a specific footer for your blog posts so let's say for your blog post you want to have a totally different footer that has a different design you can actually separate it by coming over here add a new template let me show you okay so let's say you want to add a new template form for a specific page on your website so what you'd need to do is to click here on add new template and then you want to come over here to all pages okay in fact you don't come to specific pages so I want to add a brand new footer for our contact page so I'm just gonna come over here choose contact page and the good thing is you can also choose multiple pages so let's say private policy needs to have the same footer that I'm going to be creating now all I have to do now after selecting those specific pages in this case is the contact and the privacy policy create template so now you want to make sure you delete this because this is global if you go in and edit this it's as good as letting it edit editing it over here on the global footer so delete this and then add your custom footer by just clicking over here build custom footer or in fact you can use global footer sorry what am i saying click here and then click on a build custom footer build from scratch so now you can start adding all your elements to your footer so let's say for your footer you want to have this column and in the first column here you want to add an image so I'm just going to choose my image here and let's say my image here needs to be a logo fact let me close this I can just use my dynamic here site logo so now my logo is gonna be added add it there and let's say I need to add a background color to this I can just come in here add my background color okay let's use this one here save that and then over here maybe I may want to have an an email opt-in so it just depends what you want to have on your custom footer so here I'm just gonna get rid of all this text here save that and then let's say over here on the right or I'm going to add what can we add here running out of ideas what could we have okay let's add a search okay save that right so let's say this is our footer for our contact page and also our privacy policy page so now that I've finished designing this I'm just gonna save it I'm gonna close out of here and here it is this is footer I'm gonna save changes now if I come over here in fact let me go to a page like services so you can see the difference so if I come over here to my services page you can see this is my footer but if I go to my contact page and scroll all the way down to the bottom this is now our new footer of course it's not designed in a nice I mean in a pretty way but pretty much this is the footer that people see when they go to the contact page so every other page will have the normal footer but on the contact page it's gonna have this footer because it's been controlled here by our theme builder so that's how you would actually have your footers on custom pages and as I mentioned before you can actually become even more creative here by assigning specific footers and headers to different types of content so let's say you have an e-commerce website and you want to have a specific footer on your product pages you can totally have a different footer by pretty much coming over here to a template and in fact I don't have wool Comus installed here so I can't demonstrate that but let's say you want to have a different footer for your post this is where you would come here all posts and you can start designing your template here for you know your posts so this is how you design your template alright so I'm just gonna take a quick glance here and see if you have any more questions peter says you've just bought it and it says it's on hold yes I just need to go into PayPal and approve that payment honey says if I buy this template do I have a tutorial on how to use it yes I've actually recorded a video on how to use the genesis template so if you buy it definitely you'll have instructions on how to actually use it yes honey a recorded tutorial yes absolutely I have a recorded tutorial that shows you how to use this template alright I'm just going through the comments here okay right so moving on I'm going to be talking about the third stage of web design efficiency so let's just recap and go through the steps that you need to design your websites efficiently so first of all you want to use something like MAMP lamp or I think it's desktop server but I recommend using local by flywheel that's the one I use so local buy fly will allows you to design your websites locally on your machine so that's step number one you can design as many variations of the website test a lot of things before you can actually have the website live and the beauty of using local by flyable as well is you can build what are known as blueprints so your website's will have all your plugins all pre-installed each and every time when you set up a new website so if you're a freelance designer you're designing a lot of websites each time you load one it's gonna have all your SEO plugins and any other plugins that you may need have they including all your themes so that's step number one step number two is using a template similar to the Genesis template that I've just shown you now the advantages of using this template is it comes with a custom 404 page so when people go to a page that doesn't exist on your website normally they just get an ugly page which comes in by default DV by the way you get an ugly page which doesn't look very attractive but with the Genesis theme now it has a 404 page which has a button that takes you back to the home page if people try to access a page that doesn't exist or a broken link on the theme as well you have a custom designed header and footer all you need to do is to add all your headers and then just assign all the links that you need to do any of your pages it's highly customizable you can go in and customize it based on the colors of the new website you're working on so the template is very very very very important step stage number three now is actually using what is known as a style guide so you'll notice now in fact let me switch over here so you can see so what you'll notice here is when we start designing our website I'm going to come over here to add new so we can add a brand new page so let's call this page testing click on use Divi builder okay build from scratch oh it can now can even start by a building name from a premade layout so let's say it's time now to start working on our website so I'm gonna click here add my text module like that okay now you notice one thing this text that we have here comes in with a default font default font that comes with Divi so ideally that's not what we want again let's say I add let's add in fact let's split this into two okay so over here let's say I want to add a heading so I'm gonna add a text module again and let's assign a heading here highlight this set this to heading 1 so you notice that I mean our headings paragraph texts all is I mean it's all pretty much with a default font that comes with Divi okay so again let's add a blurb module there we go so you see everything here it's not I mean it's pretty much standard right so again you are going to take quite a lot of time going in changing all your fonts at each and every instance so for all your headings you'd go in each and every time change your heading size change the paragraph text size so it that takes a long time so what you need is what is known as a style guide and how many of you are actually using style guides in fact I'm sure those of you that have gone through my course on funnels two-income about the web design formula you know what I'm talking about you need to have a page which has your predefined styles for your website this is how you design websites professionally all right so so as you can see here things that are looking good you know everything is all standard I would need to go in here go into design heading text and then find my heading here change my font give it a font name and so on so let's say this one's this one here is supposed to be George here and then I have to come here maybe I wanted all caps change the color so as you can see all these steps right if I want to add a heading two I have to go in and do the same thing change the header change the size change the color so is very very time-consuming so I'm gonna save this page and then I'm going to show you how powerful it is to use what is known as a style guide okay so now that I've saved this exit the visual builder okay now I'm gonna come back over here to my dashboard so to import my style guide I'm gonna come over here in fact I'll show you in a moment quickly how you can create a style guide but I've already created one so I'm going to go ahead now and import the style guide on to my website so I'm going to come over here to divi divi library import click on import choose the file it's in my downloads folder I think there we go downloads here it is difficult a style guide open and then this is very important you need to make sure you click here where it says apply layout default to website and let import Divi Builder layouts yes there we go so my style guide is now added on to my site ok and all the stuff that I have on this page are actually applied across the whole website now so if I come back over here now to this page I'm going to refresh this page and see what magic happens here refresh the page and now if you take a look here at my text it's all changed my blurbs now are all centered my paragraph text is changed here and if any page now that I open that I want to start designing it's going to have my paragraph text as my font that I've chosen here so let's go ahead and do that so if I enable the visual builder here and let's say I add a brand new module there we go so you can see my text here has taken the settings of my style guide so that means each paragraph I'm going to be creating on my website it's going to have pretty much the same size same color across the whole website now this is really really powerful now when I used to do web design reviews one of the one of the most consistent things I used to see is websites that have different font sizes on different pages so you can imagine if you start off with a style guide like this you're going to have a consistent website across your whole website so this is what you want to do you want to have a style guide so let's switch back over here and let's close this in fact let's say you want to change this to a heading now this is now our heading notice that every time I'm going to add a heading here it is going to be sterilised how cool is that so let's say this is going to be heading 2 so my heading 2 is already customized so all I have to do now when I build my website is just to go in and just start building all my blurbs now everything is all centered I don't have to go in and Center each and every blurb as I am building my website because that is very time-consuming so the question is how do i how do you create this style guide I'm sure most of you want to know how to do this I'm going to show you quickly how you do it but I cover this in great detail on the actual course so before i start designing it showing you how it works let me just take a look here retail sales i've tried to create a global header with the same properties using Divi standard header unfortunately it did not succeed the shrinking did not succeed yes for the shrinking - to happen you need to add some code in the actual header that you're actually designing so that's it shrinks so you need some CSS code in there if you try to do it without using the CSS code it will not shrink but this Genesis theme actually shrinks because I've also added the code in there that allows the header to shrink as you're scrolling up and down okay Michelle says shrinking is not a feature included in the theme builder right that's correct yes Michelle you're absolutely right that feature the shrinking feature is not included in the normal template that comes with the theme builder you would have to add some CSS code in there but thankfully on the Genesis template I've actually added the CSS code that allows this header to shrink you're scrolling on your website Ahmed says can you answer my question please what's the question here Ahmed okay Ahmed says what if you want to change one thing from the global footer then applied to the contact page do you still have to redesign the whole footer again so if you change one thing on the global footer that one thing that you change is going to be applied across the whole website but if you want to design something different on the contact page for example you'd need to redesign it because this design is going to be on the actual contact page so you need to redesign that footer because if you use the same global footer pretty much whatever changes you do are going to be applied across the whole website I hope that answers the question if not please let me know all right Brenda says I do now after watching your course fantastic Monique says as well Michelle says what's the default font I think the default font is let me take a look it's can't believe I almost forgot that okay the default font is called open science so ideally when you design your websites you don't want to use the exact same font for your website you want to customize it use a totally different font as you're designing is okay yes open sans open sans thank you thank you thank you all right so why don't we go ahead now so I can show you how to create this right so let me just delete this reset this okay now let's add our style guide and I've saved this to my layout so I want to come over here to existing pages and oops am I on the whole right website here actually I have to import okay there we go ad from library here it is it's called style right so you can see what I've done here I've added my headings so it's heading 1 heading 2 heading 3 this is my blurb okay and this is my paragraph so when it comes to creating a style your style guide you just you just have to add all your modules here so let's say you want to add an image module here and you want your images to have rounded corners all around you just come over here you customize everything so in this case you'd come over here to border add your rounded corners like that and then you want to make this item global so once you set up as a global this now gets applied to your whole website but you want to be adding all your elements on a specific page which you can then import on any other website that you're working on and then once you import it on that website it'll have all your default settings even your section settings if you want to add dividers and let's say the dividers need to be the same across the website that will have all your default settings so this is the actual page you would need to create and then once you've created it you can then export it and make sure it's named style guide but as I mentioned this I go into a lot more detail in the web design formula course and show you pretty much how you can create the step-by-step and how to apply it on your website so step number one is the local buy fly we'll make sure you have that free piece of software step number two is to create a header and a footer template for those of you that don't have one it's in the description here you can buy it it's only $7 ok and then the third stage is having a style guide now the fourth stage now this stage is very very important I need to really really talk about this because I see a lot of people really getting confused about the pre-made layouts that we get with with Divi so a lot of people are waiting to see a proper layout for let's say a plumbing company now as a designer now you don't need to worry about that because you can pretty much get any type of layout and change it to whatever you want let me show you how so now I'm just gonna switch over here and let's start building a brand new page here so come over here to my dashboard just called an exit so this is called this page landing right so with the pre-made layouts this is what you need to click here right in the middle click on choose premade layout so this is where now you can decide which layout you need to use so let's say our website is about photography it doesn't have to be a layout here about photography okay it can be any layout so as I'm scrolling through this I can actually choose the pottery studio for the type of website I need to create so I'm gonna go ahead select this and let's say the page is pretty much a landing page so I'm gonna go with this actual page use this layout so it's gonna take a bit of time downloading this layout so now that I have everything all in my page what I need to do now is to go in and customize this so the the main advantages or the reason why you want to be using these pre-made layouts is because they are highly optimized for all your viewing screens so for example when it comes to tablets it's high optimized for that it's highly optimized for mobile devices so it is really really good you don't have to temper with changing the sizes of the fonts changing the sizes for the views because everything is done for you in the actual design so let's prove this let's take a look at let's take a look at this so if I come over here to this middle to the tablet view right you notice that everything has you know enough space here on the sides the text looks great and because I have a style guide it has gone in and added my my fonts in here so I don't have to go in and play around with the fonts everything is all added so you can see here it looks great on all devices now on this device here on this phone you can see here everything is all spaced out everything looks really really good now the next stage is to start adding all our images okay so now let's change this website into a site that we need to create so if I come over here to my section settings I can pretty much now go through this and see where all the changes have been made so here I can see that there's an image here so I'm gonna come over here choose my own image so for this example I'm going to go with let's go with this one here okay so that's gonna be our image now so just by clicking that you can see immediately I've gone in and I have changed my image to suit the design of website that I need to be working on okay so now I'm gonna save next I'm going to change this text here so I can read easier come over here to design and then on the heading text boom now it's easier to read save that moving on so over here of course you want to change you know the the button way it's gonna link now let's move on to this to this section so if I come over here all I'm doing here is to find out where these changes have been done and where the designs have been done so here I can see nothing was done on the sections so it's going to likely be on the row settings I'm gonna come over here to row settings filter modified styles okay so it's not here either close that so differently it's gonna be in the columns so I'm gonna click here on this little gear icon filter modified styles and there we go this is where they changed it so I'm changed my color here right away okay no messing about change my color here save that close modified styles come over here to this one here filter modified Styles change the color for that one so you can see pretty quickly I'm actually going in customizing this adding my own colors to this layout now moving on I also need to change this image right here so let's find out where the changes have been made come over here and this is the second column so let's check let's check here because yes there it is the change here is on the second column I'm gonna go ahead and add my own image and this time I'm gonna go with this image right here upload an image actually this one here doesn't look really in fact you know what I like it let's go with it there we go now I have my own image here now moving on I can also change this image right here click on my row settings first column filter modified styles and I'm gonna change this one here let's see what we're gonna use this time okay this time I'm gonna go with this guy here upload an image save that and then on the right column here I need to change the background color so I'm gonna click here on filter modified styles and right away I'm just gonna go in and change my color just like that so you can see quickly that this layout is quickly changing to my own design I haven't really tampered with any other thing here so let's say this section here I don't really need it right I can just delete it and this one right here don't need it go ahead delete that so this footer here don't need it get rid of that so this subscribe here I think that's gonna be very important for me so I'm gonna go in a game filter modified styles so I can see this is where the background color is that's gonna be my color maybe I'll go with this okay save that and I can see there's a little bit of a gap here delete that right perfect so now I've gone in I've added all my images my layout looks great I'm gonna publish this page and then the next stage now is just to quickly look and see if everything is looking great on the different devices so I'm gonna come over here tablet view there we go you can see here everything is properly laid out my colors are in there my branding colors are in great my footer is there as well phone the same thing this looks great on the phone as well there we go so pretty much these are the three steps or four steps rather of how to design websites efficiently with Divi so now that we have this layout the second layout that we can actually use does not need to come from this layout page so we can go in and choose a totally different layout from a different pre-made layout it doesn't have to be from the pottery so we can choose a totally different layout for maybe the contact page so let's say over here we go on the contact and we need to change the contact page so here we need to let's delete this and now let's build our contact page click on this plus button so over here I'm just going to search for contact so this is gonna bring out bring up my contact pages okay look here right so I can you scroll through this and see which contact page I need to use so let's say I want to work with this one here click on it use this layout I know it's gonna bring its own colors and all of that but because we have a color palette that we that we have we can use that color palettes by replacing everything that we have here including all the fonts ok so I'm just going to do this section here and then I'm pretty sure you'll know how to work out the rest ok so let's go ahead and do this so if I click here section settings so let's go to our background so I'm gonna delete this image here and add our own image so the image I'm gonna have here is let's say this one upload an image so now look at that how does our page design is already you know transforming if I save this I can come over here to my text design changes to poppins change the color save that and then over here to the right second column filter modified styles and this is the color I'm gonna change this color to the colors on my branding so I'm gonna go with that one I pre AB yeah I prefer this one okay so now that we have this the colors all set you can now go into each and every module here and then just customize it so for example here we can change our title font just to make sure it matches pretty much everything here change our font here to poppins there we go save that now if you want to really you know do this fast you're right click over here copy module Styles come over here right click paste module styles now you see that I can also use extend styles so very quickly I was able to go and change the image change the fonts change the colors really really fast so let's say I don't actually need need this I delete that and let's say pretty much this is our page save that and then I'm gonna exit the visual builder there we go so this is now our contact page I've changed all the fonts here added my own image now we have a contact form but of course you want to go in here and delete what you don't need and change the fonts like that so as you can see I've actually used a different pre-made layout from a different layout pack so it doesn't have to be the same pack that you're actually taking your layout from but the only thing is you just may want to go in and change all the fonts from as you're deciding this layout ok so pretty much this is what you need to do to to work on I mean to work efficiently with Divi as you're designing your websites so you can actually pretty much have a website design in a few hours you know from start to end if you have all these all these components in place so it's really really fast it's actually a better way of designing your website so add all your questions here if you have any I can see here Michelle has a question why they a gap before the footer I think it's on the previous page that I was working on and let's have a look oh there we go so this is the gap so let's investigate and is find out why we have a gap here so I'm gonna go into my section settings here filter modified styles and I can see here these are padding but I don't think that's the problem let's have a look okay the padding is not the problem here so this must have this must must be something to do with with the margins strange right so let's see let's see what happens if I add so this yeah so what is happening here is we have this gap here no matter what I add so let's take a look here at the footer so I'm gonna go into my dashboard here teambuilder global footer it may be so it's gonna make sure I don't have any margins here okay so this one is fine okay Samir says the margins in the footer add tablet mode okay let's take a look at that hmm a strange so we don't have it here this is weird I know this is a quick fix but I just couldn't work out where that margin was let's see if this works now okay so I've just gone in and added my margins Rita says god of the Builder the gap will disappear okay I'm gonna try that sometimes GV does some weird things you know right so I won't save this let me just try and exit the visual builder here like what Rita says just got an exit okay now let's go back in and see because clearly there were no there were no margins there so they shouldn't be a reason why that gap was there so let's go back in now and see if this is working now okay the gap is back this is strange right I'll need to work out what is going on here but if you add the negative margin this will just get rid of the gap but I'm not sure why this is showing here unless there is some sort of CSS that comes in with this I don't know let me take a look oh no CSS the strange okay so let me just test this one more time it's actually annoying me that we have this gap you know yes it shows up yeah I'll need to work it out find out why that gap is showing that's my challenge for me I'll share my results as well here on the on the stream alright I have a few questions here I think I may have answered these there's a question here saying are you going to show they headed to if we've created the header with the mega menu on it can we see it working okay right I know I'll mention that right now it seems like the header is cut off at the top here this is because we are actually logged into the website so if I come over here and log out and then go back to our site you will notice that now the header looks fine you can see here it looks okay the search let's say we search for something here the search results page looks like this and this is a much better design and this is all this is the Genesis template by the way and let's say I click on the services page contact page the one that we've just been working on there we go so if I scroll all the way down here that was the example template that we built but you can see here as I scroll it shrinks like that and if I scroll back down it expands so that's how this template actually works now let's say I try to search for a page that doesn't exist we have a custom 404 page there we go and you can see here this looks really nice but of course if you're not a fan of this color you can always go in and change this color and this button here is dynamic so whatever websites you have this will always link to your home page boom back to our homepage just like that all right let's have a look here display rules this question is from Marilyn Marilyn says is it possible to prevent the footer from showing on on just one page eg the blog or contact page yes absolutely absolutely let me show you quickly how you can do that right I'm gonna log back in here so back over here to the theme builder let's say for our footer we don't want to show a footer all you have to do is to click on this eye icon and that's it Save Changes back over here if I go to our contact page like that you'll notice that you will not have a footer there we go so no footer for the contact page okay so yes you can actually choose specific pages that you don't want to show a footer on and that will just not show the footer the same thing applies here with the 404 page you may have noticed that the 404 page does not have a header and a footer let me just show you that quickly so you see that it's a full page no header no footer that is because I've clicked on this eye icon and that just disables the header and the footer gray says I'm a lifetime member where can I get the Genesis template it's actually in the membership if you go to your dashboard your membership dashboard you'll see a tab called templates you can get it you can just download it from there Jim says why are your Styles not as applied to the imported layout page very good question now this is something that I think elegant themes is working on at the moment because when you imports a layout it's supposed to adopt the styles of the actual style guide that I added earlier on so that is something that elegant themes is to working on I've actually raised this issue because it is quite annoying that you have to go in and starts you know reassigning all your headers I mean all your Styles your page sizes and so on but this is something that is that is being addressed but any other pages that you add in that you design from scratch will have the styles of your layout okay this is the same question by Jim as well and I've just answered that yeah hopefully that's going to be something that's gonna be addressed very very soon in fact on Monday there's a brand new DB feature that I'll be talking about so on the elegant themes channel please tune in I'll be talking about the new update for Divi which allows you to build websites inside the WordPress Gutenberg editor ok Ahmed says back to my question to explain again what I mean is let's say I remove one column from global footer right I'm trying to understand this question here let's say I remove one column from the global footer and then I apply this change to the contact page Ahmed does this mean because right now from what I understand you have a global footer right you go into your global footer delete a column if you delete that column whatever change you save there is going to be applied across the whole website right but if you want to have that column on the contact page you need to design a footer for the contact page I hope that makes sense so you need to have your a footer for the contact page now if you want to have the most of the elements that you have from the global footer what you need to do is to save that design of your main footer right into your library and then as you're designing you need to apply it as I mean from the library let me show you what I mean so you just need to make sure you use the library to do that let me just show you quickly so let's say you want to build a new footer here let's delete this one so you'd need to save this one here as a global style or save it in the library so when you come over here now to add a footer you can see here ad from library so you can actually go now to your library where you've saved your layouts add that add that layout and then that will be your starting point which would be very similar to what you have here as your global footer so I hope that's answered in fact Michelle here's also said just copy the global footer and make a change and apply to certain pages yes that's another way of doing it as well okay so I've made hope hopefully that answers the question excellent alright so any more questions okay so pretty much this is our web design efficiency tips these are you need to bear these steps in mind as you're designing websites otherwise it's going to take you a very very long time to design all your websites from scratch every single time so yeah take these steps this live stream is going to be saved so if you go into the membership you will see this live stream I'm actually going to pretty much you know re-edit I mean edit a few points in this live stream and then add it on to the website right alright so pretty much this is Saturday live stream thank you very much for tuning in next week you can join me again where we'll be discussing you know other topics or other you know features I haven't decided yet what we're going to be talking about in fact I'm also going to be giving you the opportunity to add in fact why don't you do it now Oh before we actually conclude Douglas here says why do we have a 404 page alright the reason why we have a 404 page is I'm just going to disable this for now okay and just demonstrates to Douglas why we have a 404 page right so I'll just disable that so let's say Douglas let's say someone comes to your website and you have a broken link right let's say this is in fact with money to delete this altogether okay right there we go right so let's say someone goes to a website which is a broken link like that this is the page that shows up so I'm sure you can agree with me that this page does not look good it does not look professional this is why we need a custom-made 404 page which you can design add graphics add whatever you want on that page to make it look really really nice this is not a good 404 page so my answer to Douglas is this is why you need a 404 page it just makes it look professional this one here looks does not look professional at all alright guys so this covers us for today's live live workshop thank you very much for tuning in I'll see you again next Saturday around the bar at the same time gmt 12:30 or 1:00 o'clock you know gmt so again thank you very much for tuning in if you have any questions just add them here i'll always see these questions as I go through all you know all these questions and again the genesis template is right here if you click on it it's only $7 order appreciated if you go ahead and bind alright guys thank you very much for watching have a great weekend and see you again on Saturday take care

Channel: MAK

Views: 4,652

Keywords: Augustine mak, Divi 4.0, divi 4.0 tutorial, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows, wp fusion

Id: Ng0btZGHVoA

Length: 72min 50sec (4370 seconds)

Published: Sun Jan 12 2020