Best way to design websites with Divi - LIVE WEEK 3

hello everyone and welcome today i'm excited to talk about the best way to design our websites super fast in fact what i'm going to show you today is going to allow our websites to even be faster when we design our web pages they have a lot of css code so you can imagine if you have one button with a specific style and then later on in the page you have another button with a totally different style all this is additional code that is being added onto that page so the solution to that is to use presets so you design one button and that button would be used pretty much across the whole website which means your css will be much much smaller now the benefits of this as well is you'll be able to design your website super fast so let's go through a process of how you would normally design a website from scratch so i'm going to do a quick demo here and then i'll give you the solution as to the best way forward and how you should start designing your websites so normally in fact we will choose a pre-made layout or we will build this from scratch so let's go ahead and build this from scratch so let's add let's say two columns so in this column we could say okay we we need a text module we select it and then now we go and customize it so this is where we would go in so we come over here to design we go into the text we choose our font and let's say our font is poppins you know i love poppins here we go so that's my font here and then we'll say oh you know what by the way i need a specific color and then you choose your color like that you save it and then you say oh you know what i need the title as well so you would come over here and you would add another module so as you're adding this uh you would go in and let's say for this one here you want this to be a heading so i would add my heading here and let's make it heading one so we would go into our design go into heading text and then we choose our font as well so i'll search for my font select it so you can see how many steps i'm really going through just to add these two pieces of content it's quite a lot then maybe we want to make it bold so you go in make it bold like that and perhaps maybe even change the color and save same applies if we need to add other modules so let's say i need to add a call to action here i would add my call to action and you can see here this is the default so first of all i would add my link to my button like that [Music] and we also want to customize the call to action so we may go in and add a background color and then we want to go into the text so you can see here it's quite overwhelming if you're a beginner or if you want to design a website fast and i know we can also use pre-made layouts but sometimes you may want to design something from scratch okay so let's say you want to adjust the title here you would come in go in add our title let's give this a font so as you can see yes it is taking me time to uh to build this so let's say you want to add some padding here we'll go into our section here add our padding so let's say five percent excellent so i've added my padding and this is how we would design our website so as you can see oh there's a lot of clicks there's a lot that's going on as i'm designing this page so then the question is well is there a better way of designing our website and absolutely so this is why in this video i'm introducing the divi style guide pro the star guide pro has pre-designed modules for you so you don't have to go in and design each and every item you add on the page you don't really need to do that all you need to do is to load the style guide up and basically all your styles are loaded now let me show you what's in the actual style guide so when you take a look here when i start scrolling here you can see we have our hero area designed already so all you need to do is to select it as you're designing your site we have another style here this is hero number two we also have another one which has a gradient that's hero number three and as we continue we also have our page headings so we have our two styles here and let's continue on we also have headings so these headings are already set the sizes are already set we also have light ones which can be on a darker background our paragraph text has already been set our quote here has already been set and if you do need notices as you're designing your website these notices are designed for you all you have to do is to select them as you're designing your site we also have testimonials you can see we have different types of testimonials here and as we continue we have all these buttons all designed for you so you can see these eight styles these buttons are already designed for you you don't have to go in and spend so much time designing them we also have blurbs and these can be used they're very versatile you can use them in so many ways and all these are different styles that are designed for you and you may have not noticed this but they're all labeled so you can see this is a dark blurb and let's continue on we have images all these have styles we also have blogs they're all set up designed for you we also have contact forms so all these are designs that are designed for you ahead of time call to actions so that it saves you a lot of time and also makes your website super fast because once these are designed they can just be used pretty much across the whole website because these are presets now let me show you how to install these presets on your website and then you can get up and running super fast in fact i'm going to have this preset ready for you guys uh today uh so when you i'm going to send an email out so that um you can download it and start using it for your designs okay so it's also very important that i mention that this dv style guide pro is free for lifetime members and all of you that bought the web design masterclass vip members so this is absolutely free you don't have to worry about paying any extra for this i am going to be selling this because it's super valuable it took me about five days to design this making sure that this was mobile friendly and making sure everything was working okay so it did take me quite a long time and that is why it's on sale so to install it it comes in a zip file so let me just find my zip file here so i can show you where it is there we go so it comes in a zip file and it's going to be labeled dv style guide in fact let me show you here it will be labeled dv style guide pro and this is what it comes like now in the past i've sold templates and people do the same mistake of trying to load it up as a zipped file please you need to unzip this file first okay so to unzip it i'm on an apple mac so you just double click on it and now you have this folder you can see here it says dv style guide pro so in this folder you want to go in because there's two more files so there's the dv style guide color palette and the dv style guide pro so the reason why i've added the color palette as well is so that you can use this with consistent colors throughout it's very very important that our designs have consistency and also look great because of our colors that we use okay so i'm just going to drag this over to the side here okay so i'm done with this so i have a site here this is the one i was working on so let's get rid of this page let's go to our dashboard okay so i'm back on my dashboard here so the very first thing you want to do when you when you unzip these two files which are these two is to add your color palette first so to add your color palettes you want to come over here to divi and then click on theme options so by default dv gives you a color palette but of course you want to use the same color palette that dvd gives you you want to use your own the one that you've spent time creating to make sure your website has uh the type of message you want to convey so we want to replace this so replacing it is very easy all you have to do is come over here to these two arrows click on that go to import and then you want to choose the file so i'm going to choose the file and i'm going to go to my downloads and here we are so this is the dv style guide pro color palette so you're going to click once on it or double click on it and let's import these colors by clicking on import tv theme options so this is going to replace the standard color palette that comes with divi and replace with ours excellent so this is our new color palette i'm happy with that save changes okay so my changes have been saved the next step now is to add our style guide pro so to do this you want to come over here to pages click on add new and let's uh let's name this page style guide in fact let's call it star guide pro i'm going to click on use dv builder okay so now it's time to install our style guide so we're going to build this from scratch great okay now the quickest way to do this is to just drag the file and drop it here so i'm just going to go to the dv style guide pro drop it here i'm going to say replace existing content even though there isn't any that's fine but the most important thing here is to make sure you click on import presets okay import presets means you're going to get all those designs that i've just shown you a moment ago okay so now i'm going to click import divi builder layout so this now is going to bring all our style guides all our settings on this page okay so this may take a while so you have to be patient because there's a lot of styles that went into this page so this may take a while are we on the same page so far please let me know in the comments box if you have any questions or if there's anything that i've done that is um not clear it's very important that we get this part right okay so it looks like our import was successful as you can see here so i'm just waiting for the page to load up and here we go so once once the page loads up now it's loaded as you can see so this is all our styles so the question is why do we have to um load it up uh this way and set it up this is because we want to be able to see what we're designing as we're designing so i always use this page as reference so every time you start designing your pages just make sure you have this page handy so now let's let's design a brand new page so what i'm going to do now is i'm going to add a brand new page i'm going to come over here to the top and click on this plus button and add a new page i'm going to open this page in a new tab and you can see here the page is opening so let's call this page new page excellent now i'm going to click on use dv builder okay great so now i'm going to start to uh design my page and i'm going to do this from scratch so you know when it started off we were designing each and every item even the paragraph text and the colors and everything this time notice the difference i'm going to do a similar design to what i did in the beginning which is adding two columns and i'm going to add a text module like that so notice our text is like this now i can just come to my presets and i'm going to go to my main paragraph text boom done that's it that's my uh paragraph it's already designed ready for me next i want to add some headings so i'm going to search for my text module again and let's call this this is my heading [Music] okay all you have to do highlight the text click here set it to heading 2 over here on the top click on the drop down and we have heading 2 just like that i want to save that drag this to the top let's say you want to add a button click here on this plus button search for my button module okay we have this default one now i can come over here and you can see here we have many buttons okay so if you're not sure which one it is you can just come over here to your style guide and this is why we need to have this open as we're designing our site so i can just scroll down here and say okay buttons where are the buttons here they are so i want this bright button here okay back over here click on this drop down bright button here it is just like that it's styled it's ready for me all i have to do now is to just change the text so maybe the text is download now so that's the new test text i can just let add my url in here i want to save that and let's say i need to add something else here maybe this is a call to action so i'm going to search for call to action here here it is on the drop down there's two types it's called action one and two so let's go with one and you can see there it is there already and let's try number two and that's the dark version and then all i have to do is to add my link and there's my button call to action ready now you may have not noticed here but i did not go in to um the module settings to design anything everything was pre-designed for me and it's here on the style guide okay so this is the power of this style guide i can even choose different types of buttons here i can even use different type of blurbs in fact why don't we add another section here which has blurbs okay so i'm going to add i've got a question here what about the text style due to gdpr do we need to use google fonts uh we don't need you to uh gdpr has nothing to do with fonts uh first of all uh mister so fonts have nothing to do with gdpr gdpr is about emails um asking for consent when someone uh sends their before you collect their information basically they have to give you their consent that's the gdpr when it comes to fonts fonts you can use google fonts all these are google fonts so you don't need to host them on your own website it's easier that way and that's how it works ed says can you change the colors in the style guide pro absolutely that's what i'm going to show you next because of course you may want to use colors that are way different to the colors that i've designed for you so this is super versatile you can change the way this works you can change the colors you can change so many things on the style guide i will show you in a moment uh mr says how can i use the style guide if i use the local hosted google fonts um if the background in the background there connections to google servers is not allowed to europe i'm not sure um why what you mean connections to google servers is not allowed in europe uh i'm based in the uk and i did not i do not have any problems uh connecting with to google fonts or using google fonts on my website in fact this is on my local machine as you can see here it's woo.local this is not on the internet so this is working fine for me so i'm not sure maybe you can expand your question and then i can try and respond to that okay so as you can see here i've designed this super fast now we also have presets for our sections so you want to go in and each and every time you go in and add more spacing here on the section so i have a preset if you come over here here's your 10 padding boom just like that you've got your 10 and this readjusts as you uh design your website next let's add let's add a regular section here single column and let's add a text module here we go so for this text module i'm going to do something different and that is i am going to just copy some dummy text here i'm going to need to use let's have a look my section descriptions okay i want to use that so over here on the text i'm going to just make sure it's centered and i'm just going to replace this oops [Music] something happened let me let me fix this let's go back in here okay so i'm just gonna replace this text with my own and this is dummy text as well okay so what i'm going to do now is i'm going to do something a bit different i need a section title so so far we have this text i'm going to highlight this set this to heading 2 and i'm also going to center it in fact i need everything centered there we go now over here on the top if i click on this drop down i also have section description there we go boom my section description has been added and that is the text i'm going to use for my next section so over here i can now start adding everything else so let's say i want to add some blurbs so i can search here for my blurb so again i want to reference this style guide here and see what styles i have so let's go ahead and take a look so i want to use let's say let's go with this one here so we're gonna go with this one and this one is a standard blurb okay fantastic so now all i have to do is to come over here and look for standard blurb here it is boom okay everything is all set i'm going to change my text in here and also add my title i'm just using dummy text here to just make things uh easy for me okay there we go now all i need to do is add my icon and i'm going to choose my icon and let's start with this one so there we go i haven't gone in i haven't designed anything these are all presets okay so now i can save this and duplicate this a few times there we go add it over here add it over here now if i want the middle one to stand out this is where i can go in now and this was a question that was asked earlier on about can we style these blurbs and yes you can so notice now if i come over here to design and i can now go to box shadow and let's use this box shadow here and then we're going to further style this so what i'm going to do is to reduce the strength a little bit and i'm also going to reduce the blur strength like that there we go i think i'm happy with that uh we might need to add a color here as well there we go okay so i'm happy with uh how this looks i've just added a shadow to this so let's say you're thinking okay you know what i want to use this in the future because we don't have it in our style guide now check this out this is super amazing so you can actually create a style guide from what we've just done here and how do you do that all you need to do is to click here on the top now remember this is the standard blurb and how do we know this we know this because it has a check mark right there it has a check mark okay so what we're going to do now is we're going to create a new preset from current styles so let's go ahead and do that boom so we're going to say standard blurb plus shadow okay let's call this plus shadow there we go so now i have a standard blurb plus shadow now added okay so i'm going to say yes to that yes one more time fantastic now you can see here we're starting to have a clean design and what i may also want to do here and this is also super important you can also have these presets load by default so i'm going to come over here and let's say i want that every single time i create a section it has a 10 padding so what you do is you just come over here click on this star boom say yes to that and next time i design this it's going to have that 10 so let me just add a background color to this so um let's say i want to add this color right here save that just to uh distinguish our our sections okay great now you know we've just created this um this blurb let's say i want to add another one so i'm just going to click click here on this plus button and just to show you how powerful this is so i'm going to add my blurb now we've just created a blurb called standard plus shadow so if i click here on this drop down guess what standard blur plus shadow is there boom and now i have a new preset that i just created based on the current presets so this is how you expand on your current preset okay now we need to add a hero area onto our design let's go ahead and do that so i'm going to click here and this time i'm going to go with full width so now i'm going to go with full width header and i know we have some designs here for our full width headers and we have hero2 we have hero one as well so i want to go with hero1 i'd like to add an image in the background so i've set it up like this i'm going to come over here choose hero1 boom you can see now i have where my text goes and i also have that image in the background now all i have to do now is to replace that image with my own so i'm going to come over here to images in fact it's on the background let's go in and change this image so hopefully i have a nice image to add okay i'm going to go with this one here upload an image and now i have an image in the background and if you want to go in and customize this and use your own colors it's super simple you just come over here choose your colors let's say this is your color now you can go in and add a bit of transparency here so the house can start showing just like that you can do the same just like that and now you have a hint of the image now showing in the background and if you want to further customize the text all you have to do is to just come over here and let's use our lorem text here okay i'm just going to paste it in here and i can also copy some text i'm going to use for my title and here we go paste that and pretty much that's my content super clean super simple i did not spend a lot of time designing this because everything is pre-designed for me there we go okay sometimes it's dragging and dropping doesn't really work let me go to my layers here and just drag it using my layers and that should work fine excellent so now we have this landing page i've just created which has all my information ready ready to go and this applies to so many things let's say for this uh section here i want to add a call to action i can just come over here search for my call to action and i'm going to come on the top here and i'm going to choose call to action number two yeah let's go for a dark one and then all i have to do is to add let's add our text let's copy our dummy text from here we're going to paste it like that and then finally we need our button we're going to add our button url and boom we have our button and now i can save this and there's our call to action if you need a contact form we also have contact forms and i'm just going to do this quickly but of course ideally i wouldn't want to have my contact form here but anyway we have all the styles if you're not sure which style uh it is you can just come over here take a look at the contact forms what they look like and then you can just choose from there and here they are so i want to go with contact form number two boom there's my contact form it's pre-designed for me and ready to go okay so i'm just going to delete that because i don't need that for now all right so i'm going to save my page and our design is good to go julia says what did i click to move the sections uh what you do is if you can't find uh the sections you click here on these three little dots on the bottom here it's called expand settings and then you have this little icon called the layers if you click on that this will show you all your sections and you can also drill down and go into each and every item in here so sometimes you may want to do this if you cannot find or a way to click on the item that you need to make adjustments to okay so as you can see this is super powerful it is very very easy to design using these presets but there is a very good question that was asked earlier on and that is how do we modify these styles so let's say you want to um adjust these and you want to use your own colors well this is super simple same process i used to export my colors is the same way you'd in fact let me show you how to export your colors so i'm going to save this page and open another one and by the way oops unresponsive okay looks like a lot is happening here on my on my site hopefully this won't crash on me [Music] okay i'm going to exit the visual builder on this one and then show you how you can export your color palette in fact i'm going to show you how to add your color palette and then show you how to export it so you can uh use it for for other for other purposes okay so this is our style guide i'm going to open this in a new tab guys i don't think i've seen anyone out there who uh teaches how to design websites with divi showing you how to design uh your websites this way i think this is the best way and this should be the way forward when it comes to designing your website all right so over here is in fact let me drag this all the way here so i don't get confused so you want to come over here to divi theme options okay so this is our color palette if you want to export your color palette and i'm pretty sure a few of you knew about this even i found this not so long ago you can export your color palette and import it using portability right here in fact let me remove my video here so you click here and this now gives you the ability to export or import so this time we need to export so i'm going to call this divi okay you can just call it my color eye color palette there we go you can export this and this is going to export as a json file and it's taking a while here and boom there we go so here it is on on my computer if it's time now to import it you can just come over here to the import tab and then you just drag and drop it here and that's how you import it so that's how you export your colors so how to use this so basically you want to go to let's say coolers and create your color palette so i am going to generate a color palette here just so that you know how to apply this to your existing website so i normally work with um seven colors so there's one two three four five six one more okay so i'm just going to cycle through these colors here and see which colors i can add to my site okay let's go with these so i'm going to copy all these colors into our site there we go okay so i've copied the first one so now i'm going to replace this current color palette with my own let's move on to the next color which is this one come over here paste my color move on to the next one now while i'm doing this if you have any questions please add your questions in the comments box below so that i can respond to them all so just right now all i'm doing is i'm adding all my colors and once i add all my colors it's going to be easier for me to design my site you'll be amazed how you can update this color i mean this style guide you're going to be super amazed super simple there we go i've got two more let's go for this one here paste it like that right and then finally we have this one copy that so normally i'll go in and tweak these colors again but as for the purposes of this video i'm just going to quickly add them in like how it's just done i'm going to save changes okay great so now my brand new color palette has been saved so the question now is as we're designing our website how can i how can we update our color palette here to make it our own okay so this is where you want to go to the style guide pro the actual page you enable the visual builder okay this is taking a while to load up i think it's because i'm also live streaming so this may uh also cause some speed issues okay so my style guide has loaded up so what i would do now is i would go in and replace these colors with my own colors so i'm going to start here with this one okay so i'm going to go in and i'm going to go to the background no in fact i mean the wrong thing oops okay so let's start with this one here you want to go into the module settings go to the background and now this is our new color palette you can see change that and then i also need to change the text i'm going to come over here change my text to that i may also need to change the the metadata changes to that so that's my new design now if you just hit save here this won't work please it's very important that you you you take note of this if you just hit save here this just means that you've just changed the instance of this design okay but you haven't overwritten the actual preset so this is where you want to click here on this drop-down and this one the one with the check mark is the one that's uh the one that we're working on so what you do is you click here on this arrow pointing up so this is going to update the current uh pre uh presets with my current design right now so i'm going to save that and say yes so this is style number one now if you don't believe me let me show you i want to come back here i'm going to add a full width uh post title okay so you can see here it doesn't have a style so if i come to this drop down and i choose was it one i think notice it has updated and it has this color and this color now and this style will be updated across the whole website that's that means it's going to have your css it's much much smaller you don't even have to go to each and every page on your site to update this because once you update it it becomes the standard okay so that is how you update your style guide so uh let's go in and let me do a few more just so that you can see how easy it is uh let's say you want to change your paragraph text okay i'm gonna go in right and let's say you don't use pop-ins i'm pretty sure you've got different fonts that you use on your website but you want your paragraph text to change here's how you do it so right now i can now go in and say okay i'm going to go to the design i can go into text and then i can say you know what i want to use monsterat so let's go ahead and choose that there we go monster at boom so that's going to be my new paragraph text excellent but i have a different color now so the color i'm going to use is maybe this one for all my paragraph text maybe i may want to reduce the size a little bit okay there we go so i've reduced my size to 17 my line height is okay so now i can come to the top here how do i know which one i'm working on well i know because there's a check mark and here's the check mark right there okay so what you do you highlight oh i mean you hover over here click this little icon pointing up this arrow here i don't know how i can describe it if you click on that and say yes now every time i create a new paragraph this is going to be updated now i know sometimes it's going to be hard to believe if this can really work so what i'm going to do now is i'm going to go to my site and see how this is going to work so this is the page i was working on i'm sure you remember this okay i'm just going to refresh this and create a new paragraph okay so in fact look at that it has already been updated isn't that amazing that's the paragraph text that has just been updated because i changed it here on the style guide so across the whole website you're going to have that preset so this is super amazing when i used to review websites i used to see a lot of [Music] people that have different text sizes throughout the whole website for their paragraphs and that you know i just felt like guys you need to find a way to just use presets this is the best way to design your site so you can see here it's been updated and that's looking good already now what i'm also going to do is to change my button color here so i'm just going to exit the visual builder here because i want you to see this updating in real time okay so i want to change this bright button here on my style guide so let's look for that button oh here we go here it is bright button i'm going to go into my settings here now remember we added a new color palette so that means we have all our colors following us so i can now go into design click on button and here's our bright background so i want to change that to something a bit more subtle you see so here we go the changes are happening here by the way now i also have a border so i'm going to add my border here not sure if you can see the color change in fact you know what let's change and use a totally different color here let's go with that oops that's my text okay and then i need to i need to add my border here there we go so that's our new button so this is the bright button so i'm going to come over here and the bright button here is a check mark you can see that so what i'm going to do is to update boom just like that are you sure yes i want to save that now let me take a look at my site and see if this button has changed and guys this is a live this is a live stream so this is happening live there's no tricks i'm going to refresh this and boom my color has changed you see that so this is how you can go in and just change the colors of this style guide to suit your design okay and you can apply this pretty much to everything you can even do this on the blurbs you can do uh this everywhere now i know you can you're going to say well that's going to take a long time to go in and update all the colors or maybe even all the fonts well try and compare that to designing your buttons and searching for your buttons on each and every page that you may have added a button and also on the paragraph text imagine going to each paragraph on your website and trying to change your size your colors of your paragraph text it's going to drive you crazy so although this takes long but you just need to do it once and that's it and this is the power of the dv style guide pro now i know i have quite a few questions here let's see uh i've got a question here from jackie can we add new design components to an existing style guide absolutely in fact why don't we do that right now so let's say i need to add a totally different design to my style guide just to expand it a bit more because what i have here could maybe not be enough right so let's add a brand new button style so i'm going to come over here click on this plus button and then i'm going to start designing my button so i'm going to search for and i suggest you put it on the style guide because it's easier to find as you're designing okay so let's call this new style so that we can see it as i'm designing okay new style button okay great now let's go ahead and design this i'm going to come over here i'm going to go to alignment i'm going to center it and then i'm going to come to my button here activate use custom styles for button and i'm going to reduce my my size here let's go to about 16. okay next i'm going to add my color so i'm going to go with this as my button color and for my background color i'm going to use this color here it's black and i'm also going to add a border but now i want to make sure there's no rounded corners to this button and then moving on i also want to add some letter spacing okay i'm going to set this to one and then my fonts i'm going to choose let's choose monster right there we go i'm going to add my in fact you know what little spacing doesn't work here let me just reduce that okay so that's my color but i'm going to go even more extreme on this one here because i'm going to add even more things so my button icon i'm going to use this one there we go and icon color okay icon color is fine and placement to the right is fine so over here on spacing i want to make this button in fact you know what the size of this button here is fine okay so that's going to be my new style so we want to add this to our style guide how do we do that well you click here on this drop down and then you want to create new preset from current styles click on that and now we can call this new style button new style button i'm going to save that and that's our button right there i'm going to save that oops i had saved it already there we go so that's our new button okay so i'm going to save the page now let's say i'm going to start designing my site and i need to add this new style button because that's what i need to go with so let's find some way to add it i'm going to enable my visual builder [Music] okay so now let's add our new button we're going to add it here click on this plus button and let's go to our button here so i'm going to go in here and select my new style button boom it's centered it has the colors and it's been customized as it is on my style guide just like that so this is how you start building on to this style guide that i've created for you so this is just going to give you um quite a lot of work already done for you so you don't have to uh do so much work on this most of the things here have been designed for you all you need to do is to go in change your colors change your fonts and you're good to go now all these are mobile friendly by the way so um they they are going to look great on mobile devices as well as on um as well as on tablets so uh let's see do we have any more questions okay so the question now is how do you export your own style guide just in case you want to do what i've done maybe sell your style guides well let me show you how to do that so if you want to export to your style guide you come over here to expand settings on the bottom here okay you have these two arrows you wanna click here on portability okay and now let's give this a name so we're gonna say 2021 new style guide [Music] there we go and then you just want to export it and there we go you have your style guide you may also use this if you want to save your style guide so you've saved it now on your computer that's great if you want to import it simple uh the process is what i showed in the beginning but i'll show you once again you can just click here click on import import presets and then you can just navigate to the file and boom you've just imported it but make sure you're doing it on a brand new page and ideally you want to name the page style guide because that way it's easier to find and you can use it as a reference okay that's why we need to use this as a reference it's important okay so this is how you design your websites using the dv style guide pro let's see do we have any more questions here oh in fact i've got questions here okay i have a question here from arjuns talking about child themes my opinion style um child themes are not necessary anymore because with child themes mostly the files that need to be edited are the dot dot php files but most of us designers we do not go in and customize dot php files most of the time we are working with the actual design so i would like to think that the child themes are now replaced with the the dv themes okay so you can go into your your theme design your footers your headers and so on and so forth that is the way forward and when it comes to designing your website so i wouldn't recommend you buy child themes uh for designing your websites moving forward yeah i'd say about two years ago it was a big thing you know themes were child themes were a big thing but now you do not really need to use child themes unless you are going in and making changes to your dot php files hope that makes sense manuel says um i usually use lightroom to compress photos before uploading them to wordpress yeah i mean if you use lightroom that's great um that's fine you can use lightroom to do that i use photoshop myself so that should also do a fantastic job so i would um yeah continue using lightroom if you're comfortable with it okay any more questions um okay i have a few questions here how to create your own presets from scratch i mean as you're designing your website you can just uh create a button like i've just shown and then save it as a preset so that's that's how you do it but of course as you're designing your site you're going to have if you don't have like a pay a dedicated page where you have all your presets you're going to have problems because you're going to struggle to try and find where these presets are so i would have a dedicated page where i have all my presets all my buttons all my paragraph text my fonts everything on one page so that anytime i need to go and update my preset i can just go to that specific page which in this case is the style guide okay so the link is in the description below here i am going to be selling this for in fact why don't we open up the page right so this style guide pro as i mentioned it's free for lifetime members it's free for web design uh masterclass students it's also free for vip members i'm going to be selling this for 97 but i'm going to add a special offer since you joined me on this live stream i'm going to be selling it for 47. okay so the discount has already been added for you so if you click here on get the offer this should have your discount applied already so there we go you can see here design 50 has been applied so you are going to get it at oops not sure why this is here you are going to get it at 48.50 you can use this for unlimited websites um you can use this as many times as you want there's no limitations to how you use this but i'm pretty sure you can see the benefits of this it will enable you to design your super fast and it is going to make your website load up super fast too because your css file is not all over the place it's really working on this style guide so it's very very powerful like i said um this 50 discount uh is because you guys are on this live stream but um after this i'm going to be selling it for 97 because this also comes with a mini course showing you how to use it how to update your style guide how to also um expand your style guide so it's going to come with a mini course of about four videos so this is why it's going to be 97 but like i said hurry up get this offer it's uh 50 for a limited time because i want you guys to be on the same page and i'd like you to design your websites super clean super fast uh because we want to uh work through a system of how to design websites and this is the best way to do this i'm actually using this style guide on my website i will be changing some colors here and there but this is how i'm going to be designing my websites moving forward now before uh before we conclude our live stream i also want to talk about jackie says i subscribe to your master class already how do i get it for free good question i'm going to be sending an email out to all the students in the web design master class it's just a download link i am going to be sending this via email so keep an eye on your email today in fact in about um an hour i should have sent that email out so that you can go ahead and download it okay so let's look forward to i mean uh let's talk about what you need to look forward to um on funnels to income.com okay so i'm really excited because i am going to be releasing a lot of these um pre-made layouts color palettes i noticed that um quite a lot of people were hesitant are to send me their color palettes i'm going to make this process even easier i'm going to design about 10 color palettes okay which pretty much cover most of the industries out there okay so these 10 color palettes are going to be sold in a bun in a bundle and again these are going to be free for lifetime members flee for uh web design master class students free for vip members so these color palettes is just drag and drop all you need to do is to add it onto your website you don't have to spend time uh creating new color palettes you can just choose the one you like add it onto your website and boom you've got a color palette which you can use for your website so i'm going to be designing about 10 i'm going to sell them in a bundle and also have a mini course showing you how you can add them onto your site and how you can start using them so color so i'm going to call them div colors they're going to be released in a few days and again like i said it's free for lifetime members um upcoming is also some woocommerce templates i know a lot of you would like to create online shops so this is going to be very beneficial for anyone who's a freelance designer or an agency who may want to design e-commerce stores for your clients again i'm going to have templates all you need to do is to load them in and you're good to go you're up and running super fast um learn dash i'm also going to have learn dash templates uh twitter lms and wishlist member so by the end of this uh basically you have you're going to have tools which are basically plug and play you just install them and then all you need to do is to go in and customize them because i realized that divi is super powerful but if you're going to be designing each and every item over and over again it's going to take you a very long time sometimes you may even forget the the size of your paragraph test the text that you may have used earlier on and then you want to go back to that page to see what size you used uh on a totally different page that's going to really drive you crazy so i want you to start designing websites in a consistent manner which is uh super easy to follow and and also uh building fast websites so stefano says lifetime members will receive the email too yes lifetime members web design masterclass and vip members are all going to receive this uh very very soon so this is the new way to design websites now guys this is going to be our homework so please once you download this you need to complete your websites because the next step in our web design masterclass is to learn how to create websites that generate leads that's going to be our next part so please if you haven't watched the whole video watch this whole video and see how you can use the dv style guide pro and finish off designing your pages because the next few lessons are going to be how to generate leads on your website so i'll be showing you how to connect your email autoresponder like convertkit aweber and so on to your website so you can start generating leads and i'll also be sharing tips on what you need to say on that page in order for you to get people to sign up on to your mailing list um kathy says where can we join your master class now and and then catch up okay so let's head over here and uh let me show you uh so kathy have you do you are you um are you a student of the web design masterclass if you are all you have to do in fact let me show you here if you are a student you can just go over here to your dashboard and this is your main dashboard as you can see here by going to the course you can just click here on web design masterclass and these are all your lessons there's quite a lot going on here so you can see module one was branding how to create your color palettes how to create your logos where to get inspiration the web design resources module two was how to register your domain name and also how to uh set up your theme builder and then moving on we have module three how the dv builder works i also explain how the dv builder works and so there's quite a lot of information here now i've just got a question here saying where do we get this video so you can see here live q and a's we have uh live q a week one i'm going to be adding all these live q as over here and also in the facebook group uh and i'll also send an email out so i really want you to uh watch these live q a's because they have a lot of information that you need to cover so i will be adding them to our lessons here as well so this was live live q a uh week one and we should also have week two i will be adding this uh here and also you don't need to worry about uh finding this i'm going to add it in the facebook group i'll also be sending an email out and i'll also be sending it to uh lessons here okay all right any more questions okay kathy says i want to join okay so let me get you the link web design masterclass okay here is the link kathy uh jackie says will you create the template for fluent crm flow templates too in future workshops or in the master class absolutely absolutely absolutely um i will be creating all the the workflows the um email uh email funnels and i will be uh giving them out for free because i'm trying a lot of these um uh email templates i mean email sequences to see how they work and some of these have worked really well for me so i am going to be sharing those uh with you as well so yes there's going to be a lot of information uh where i'll be sharing with you guys by the end of this course this should be your default course if you want to uh become a web designer so this is going to cover pretty much everything you can see now it's starting to get even more and more exciting or at least that's how i see it so by the end of this you're going to be super comfortable designing websites with divi and even adding you know other elements to your websites which make it even more productive like e-commerce websites like online course websites membership websites lead generation and so on okay i think i've covered pretty much everything so the link to the dv style guide pro is in the description uh check it out it's at a 50 discount uh i will be putting the price up um in about a week or so so make sure you go and take advantage of that like i said it's going to have a mini course that comes with it and also some supports if you do need any support in how to use it but this style guide is the way forward when it comes to designing websites with divi okay it's gonna make your websites faster and it's gonna make the job your job even easier as you're designing these websites uh i will also have some templates uh your divi templates that i will be giving out as well once it's all complete so all is going to be done for you it's going to have your four or four pages it's going to have your search results page your footers your headers and all that good stuff so you must be i mean honestly you made the right choice in signing up for the web design masterclass all right guys i think i've covered everything thank you very much for watching enjoy the rest of your week and keep an eye on the courses i will be adding a lot a few more courses again and make sure you start using this web design style guide i am going to be sending an email out in a few moments so you can start using this on your own website alright guys thank you very much for watching and i'll see you in the next one take you

Channel: MAK

Views: 1,943

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, Mak, tutorLMS, tutor lms, online courses, create online courses, online course business, fluencrm, fluent crm

Id: G0MJ8uKdOkI

Length: 64min 44sec (3884 seconds)

Published: Thu Sep 02 2021