How to make Websites Professionally LIVE - New Divi Ultimate Template

so what we're going to do today is we're going to be talking about how to design websites in a professional manner now when it comes to design there's a few areas that we need to master in order for us to design these amazing sites so what i'm going to be doing today is i'm going to be showing you what happens when you first install divi and what you need to do in order for you to have a streamlined streamlined way of designing your websites a website really there is a structure to this so before we just used to design websites really fast and i'm sure uh some of you that design websites will install divi for example because this is our main page builder of choice you would install divi and then you'll start designing your pages now there are specific areas of the websites like the header the the footer the 404 page and so on these pages are not pre-designed for you when you first install divi so these are the pages that needs to be designed in order for you to have a consistent website but out of the box these pages are not designed for you so what really makes a complete website work is to have all the templates in place you also need to have the style guide now for those of you that did not watch uh live masterclass last two weeks ago you need to watch that because we talk about the style guide and how it improves the speed of your design and also your website it really makes your website fast because there's less css to load finally it's the colors so these are the main things that make our web design process especially using divi much much easier for us i did mention quickly that the templates we're going to be talking about today are your 404 pages the headers the footers the page titles the search results page the archive page the blog page the posts all these areas or all these pages are not designed for you so as you can imagine if you're trying to design a website it's going to take you a very long time to design this over and over again as you're building your website what we're going to do now is um we're going to be i'm going to show you quickly what the page or what the website looks like out of the box when you install divi so this is a typical blog blog post so as you can see here our text here is not customized we can see here our header is pretty much standard and if i scroll all the way down here to the bottom it's pretty really really standard now if i go to this category here which is the latest posts only to see what happens you can see here nothing is styled it's just showing these posts in a straight line which is you know pretty basic now let's take a look and see what happens when we search for something let's say we want to search for cars right so the results page will look like this no results found and it also has a sidebar and as you can see here the footer doesn't look good at all so these pages here that are that i'm showing you are just your standard out of the box when you install divi now let's take a look at the blog and again we can see here that there's no styling to this and if i were to search for a page here that does not exist on this site notice what happens this is the 404 page or the error page that we get so this is not professional if you're a designer if you hand over a website like this it doesn't look nice ideally we want a situation where all our pages look consistent now notice what happens now uh after we install the template that i'll be showing you how to install today so when we take a look here at the pages you can see here we have a page title we also have a header here we have our icons here on the top and when i scroll you can see here my header has shrunk now when i go all the way down here all of a sudden now we have a design to this so we have our email opt-in here we also have our main footer which also has our social media icons so as you can see this was this is something that's going to be consistent throughout our whole website now remember that search results page look at that i'm pretty sure you can agree with me that this search results page look looks much much better now let's take a look at our blog page now we look at our blog page it has a slider here so when someone lands on the site they can scroll through and see what posts we have here they can search the blog and look this is all the latest posts that we have on our site and as you can see here this is much much better in terms of presentation now let's go to the latest post now this is our categories right now before when we had a look at our categories uh our categories didn't look good at all but now we can search the blog and this is showing the latest post category and everything is all styled and looking great okay so this was able to be achieved using the divi ultimate template this is a template that i designed it took me quite a while to design this in in order for me to uh make sure everything was consistent so this template is going to be absolutely free to anyone that bought the web design masterclass it's going to be also free to anyone who is a lifetime member of funnels to income and also vip members you don't need to spend any money on this it comes free because your lifetime either a lifetime member vip or you've bought the web design masterclass course now let me show you how to install it on a website that does not have any templates on it and how easy it is to do this over here i have my site it's pretty much it only has pages nothing much going on here and i've just installed divi okay if i come over here to the theme builder you're going to notice that there is nothing here okay as you can see so the idea here is to install our template and have those pages that i mentioned when you download the file let me just find it quickly uh it's in my downloads folder i think oh there we go so when you first download the zip file this is where you need to go you need to unzip it and when you unzip it you're going to get these two files so the first file is your dv ultimate template colors and then the second file is the actual template so let's install the template now installing the template is very very easy okay let me just show you now i'm just going to drag this over to the side so i can show you how to do it so you want to come over here to portability in fact let me remove my video here you want to come over here to portability click once like that and then you want to come over here on import because we want to import our template okay and the template we need to import is this one right here the ultimate template okay so i'm just gonna drag and drop it here like that right so now that i have it here if you have a template on your site this is going to override it okay this is why i've chosen override okay it's going to override the templates that we already have on the site so you may want to also download a backup before importing just in case maybe you may not like it or whatever it is you may want to just download the backup but in my case i don't have anything here so i'm just going to go ahead and import the theme builder templates okay there we go for those of you that are not on the web design masterclass course i do teach you how to create this but now we're at a stage where you don't need to do this every single time you are designing your website if you have a template you can just import the template and you are good to go now check this out when i take a look here now you can see i have a header footer all my blog posts i have all the web pages here all these are templates that i designed and created which now give us the results that i've just shown you a moment ago with all these pages which are designed okay so what i'm going to do now is i'm going to open a new tab just to show you what it looks like you can see our footer here everything is all standard right now i am going to save changes and then refresh the page so you can see what happens so now i've saved all my templates and if i come over here now and let's say i go to my blog page look at that just by doing that it has transformed my website i have a footer now that looks brilliant and i can go to a specific page on my site here and look at that you know everything is all styled for me and i can also go in and disable certain parts that i don't need so what i'm going to do next now is to go in and show you how you can customize this and even go in and style it even further okay this is our starting point so you can see here my header it shrinks a little bit and the color changes on hover i mean on scroll if you want to adapt this to your liking and you really want this to really reflect the website you're working on this is where the colors come in you want to go here to theme options import the color now to import the color you want to click here on these two arrows click on import now i already have the colors and again i'm going to come back to my file and this is the dv ultimate template colors okay these are the colors so what you can do again just like how i did before you can just click on that and then just drag and drop it here or you can do it manually by coming over here and searching for it so now i'm going to click on import divi theme colors so now we're going to assume that these are your color palettes and these are the colors you're going to be using for your website okay now that i've installed my colors pretty much we are good to go all i have to do now is to hit save changes now this part here is for customizing this template the dv ultimate template so now i can just go to the theme builder so let's first take a look here at the header so we come over here to the header and look this is what it looks like uh right now so let's say you want to use a dark version or a darker version of the header it is right here for you all you have to do is to disable this light version by coming over here to section settings like that go to advanced visibility and then you can disable this on all devices and save now if you want to use the doc version all we have to do now is to go into the settings of this doc version click on advanced visibility and then make sure disable on phone tablet and desktop is unchecked so now this becomes active i'm going to save this and i'm also going to save this one more time now i want you to notice what happens when i come over here now and refresh this page let's say we're going towards say black friday and we want to have a promotion on our website this is where you can come over here and activate uh this top bar here which has this call to action button and again to activate it you want to come over here to advanced visibility and then uncheck this and save okay so we're going to save this save all changes now this is a global header so this is going to be applied everywhere where we have a global header okay so now if i let's say go to my home page we notice now we have our main call to action here at the top and this is now our dot version of our header okay so we can activate it and disable it anytime we want so let's say okay my promotion is gone i want to get rid of this promotion i can just always come over here go into my global header and go into my section settings advanced visibility disable it on all devices save that and then we're going to save this one more time and now when i go back to my site and refresh this page boom that promotion is now gone so this is how you can pretty much activate and deactivate uh header style that you need to uh to add now let's say you want to change the the header color all you need to do is to go into the settings here the section settings go to the background and you can just change your heading color over here so let's say you want to add this color here you can see it's updating you can change this to whatever color you want and then this updates on your site okay so if i save that and then come over here and refresh you can see here it has been updated and that's looking good but anyway for my design i rather have the lighter version so i'm going to go back in here and disable it now if you if you're sure that you don't really need to use the the darker version just go ahead and delete it all together you can just delete this by coming over here but in my example here i'm not going to delete it because i may want to use that in the future so i'm going to come to advanced visibility and then i'm just going to disable this like that and then up and then activate this light version again i'm going to come over here visibility and then just do that and save so any questions so far so that was our header i'm going to refresh this page and we should have the light that the lighter version there we go excellent now uh like i said if you have any questions please add your questions in the comments box below now let's move on to uh working on something else so this time let's say uh you want to make some changes to or you want to make some changes to your footer all you have to do is to come over here and click on this pencil icon okay so when you click on this pencil icon it takes you now to the builder itself and this is where you can go in and start making changes so for example i have the address here this is my address so if you want to change this to your address it's so easy you can just come over here and let's say you're in the united states you can just go in and say united states right and add your own address just like that easy once you're done with that you can save you can move over here now these blog these pages here again you want to link them to your own pages so i have a blog page let's just go to our blog page it's right here so what you do is you copy the url of this blog page you come over here and then you highlight this blog like that click on the chain icon paste your url just like that and then you want to click ok and save now the beauty of using the the template for designing your site is once i make a change here pretty much across the whole website wherever i have my footer i am going to have this update which is fantastic so it makes the design of our website very very easy and whenever i make a change here i don't have to go through each and every page for me to uh update all these links you can imagine you're going to have a lot of errors uh trying to go to go in and make changes to this page that page this page that page templates allow you to make one change and the change gets applied across the whole website so it's very very powerful and i highly recommend that you start using template even if you don't use this one make your own templates i've spoken about and shown you how to create these templates in the web design masterclass course so that's your all your theory and this is how you apply them in real life okay so moving on so i've made an update to this so now when i refresh this page and let's say i want to go to my blog and someone is on the footer they can just click here and boom it has taken them to the blog just like that okay brilliant so that is how you go in and customize your pages now the same applies here with your social media icons all you have to do is to click over here and you want to go into each and every one of these so facebook i'll do this in real time let's go to our facebook page and go to our facebook main facebook profile which is right here the web design masterclass okay so the url for the web design masterclass is right here i'm going to copy it back here to my site i can now go in click on link and paste my url in here save that save one more time and i'm good to go so you want to follow this do the same on twitter for twitter instagram and linkedin and this should work fine so i'm going to save this again and then if i come over here to my site now and refresh you know when you go over here you can see it's gonna link to my group it's opening up in a new tab and we are good to go okay so you wanna do this to all the other links and that's how easy it is to go in and add your links now let's say you want to um [Music] grow your mailing list and of course grain your mailing list you need to have an opt-in form so this form you can choose to have it on all pages on your site which in this case i've done but if you're not ready yet you can always go in and disable this feature now let me show you how to do that so now when i go to my site let's say you want to disable this i've made it very very easy for you because all you have to do is to come over here to this section click on this gear icon go to advanced visibility and disable it just like that i'm going to save that and i'm going to save one more time right so when i come over here to my site you can see here i have the uh the form oops i've gone to the wrong page you can see now it's gone right the opt-in form is gone and this is how you can go in and disable any parts of this that you don't like okay now let's go to our blog posts and on our blog post we have something similar as well so we're gonna go to a specific one so let's go to uh this one right here so when i go to my blog post i want you to take a look at the layout oops now what is happening here is my site is quite slow i can hear my my processor here really screaming so this is why this is not rendering fast enough but anyway um i'll keep refreshing this and come back to this and resolve that so um i'm getting curious now because i'm not seeing any questions so i'm wondering now if this is working or not so please ask your questions let me know um if you have any questions if you can hear me please let me know that you can hear me loud and clear because uh things have just gone quiet here oh in fact i've got some questions here i've got a question here saying if you want to edit the color the color template to your own colors would you edit the json file in the code or in some other way okay that's a great question from roger now if you want to change or update your color palette uh what you want to do is spare with me while i open the um the website here coolers okay so i am going to start my generator here okay so let's say we want to update our colors in our color color palette so i'm just going to pretend this is our color palette so you come over here to your site and you want to go to your theme options okay so this is where your color palette is so there's two ways to do this one of the ways is to come over here copy your colors so you just copy your hexadecimal value here you come over here go into this color paste it and so on until you've added all your colors okay so this could be your color palette so that is how you would do it there is no access to the actual json file uh in fact i haven't updated my colors that way so this is the way that i would do it and uh add them onto your site that way so once you've added your color palette this is where you can go into your templates and start updating uh the colors using your updated color palette so the color palette process here is very important if you want to use this template but apply other colors okay let's see here i have another template right very good question uh from ed uh how does this template differ from blogger pro and genesis templates okay this one here is um slightly i wouldn't say slightly but it's updated because i've added a bit of animation and sticky uh to the top using the uh latest updates that we had in um in divi that's number one number two i've also added the dark uh versions and the lighter versions and also um i've added a few more templates in this to uh to make it much much better now this template as it stands is going to be improved on so when we get to the part where we're going to be doing say learn dash creating your own online course website i will be updating it and pushing it out there and that obviously will be a free update so again when we do twitter lms it's going to be an update to the templates and i will be giving these away in the web design masterclass so it is quite similar in a way with a blogger pro but it's uh it does have a few updates in there to make it much much better okay will there be a replay yes there will be a replay in fact um i will post a replay in the facebook group as well as well as the video uh maurice very very good question now this is something i was going to ask the divi engineers and the question is as follows if you disable the section rather than the other rather than delete it does it add weight to the site in terms of load time now don't quote me on this but it shouldn't low add any weights in terms of load time because it's not being loaded but i may be wrong on this one but let me get the proper answer for that and get back to you on that so i'm not 100 sure but i will get back to you uh with that okay so uh any more questions before we continue okay so uh we're going to continue on here and show you how to further customize this template so every time you want to make any changes to your template you want to remember to come to the theme builder because this is where everything is now let's take a look at our 404 page so for our 404 page it's pretty much a page whereby when you go to it it doesn't exist on your site and it shows you uh the error so i'm going to open this on a in a new tab okay so let's say we type in some gibberish here and hit enter now this becomes our error page now if we compare this to what we had before this is definitely much much better and this link here even if you download it you don't have to go in and customize this because it's dynamic when you click on it it just takes you back to the home page just like that okay so um now you may be thinking okay so what if i want to have a page which does not have a header and footer how do i do that so i really thought about it and when i scroll down here you can see we have a page which says no header so let's create a brand new page here which does not need a header and footer so i'm going to come over here to add new so let's call this uh a promo page [Music] okay let's just call it promo i'm gonna come over here to dvd builder i'm just going to build something quick so i'm going to start from scratch and you can see here automatically i have my page title added here and that is coming from my template so all i have to do now is to add my contents so let's say over here i'm going to add a video [Music] like that so i'm just going to keep everything basic so let's say that's my video and over here i'm going to add a an image so let's add an image from our library so i'm going to go with this one here upload image and save okay so when i save this and view the page so i'm going to exit the visual builder okay so we can see here that we have our page title already uh created for us and this is the promo page that i've just created it has a footer and everything is looking great okay now let's say we don't want to have the header and footer on this page because it's a promo page what you need to do is to just assign a template to this page right here called promo so to do that you want to go to dashboard theme builder and we need to find this page here and this is where we can go into the settings and we want to apply this to a specific page and the page is called promo here we go just like that i'm going to save i'm going to save one more time now when i come to my promo page and refresh notice what happens the page title is gone uh the page name is gone as well so all i have is no header no footer this is good or ideal when you have when you're creating landing pages so when you create landing pages if you design it this way this just makes things much much easier you can use the template to achieve this so as you can see the template is super powerful when it comes to designing your websites really fast so you don't have to go in and start changing the templates manually to exclude the header and footer okay now i also want to show you something very exciting when you use this template now there was a question here i forgot who it was from was it the question about is this similar to the blogger pro so this one here this template has a bit more so this header and footer is not in blogger pro at all and we also have category pages this as well is not in the blogger pro and the page titles so when it comes to the page titles i mean there's a few tweaks that do not exist on uh in the blogger pro okay okay so let's say we want to create a brand new page here so i'm just gonna call this okay in fact let's call let's say add new and i'm going to call this page cars oh let's call it supercars okay great now i'm going to go into the builder and start building i'm going to build from scratch and again i'm just going to add an image just to this so let's add our image here and this time we're going to go for this one and save okay so i've just added an image here in fact let's add some text [Music] okay so that's going to be our text here and let's just make this top part here a heading excellent okay so now we have our text on the right and when you look at this page you can see here we have our title added in automatically for us so now i'm going to save the page and exit the visual builder right so this is my page you can see here it has a title and this is going to be consistent throughout the whole website now notice what happens when i go into um edit page i can actually come over here to the featured image like that add a featured image to the page itself and then hit update now let's view the page so you can see what has happened here look at that i now have an image in the background here on the main title of the site so this was again designed into the template so if you want to keep it simple here without any images that's fine but if you do want to have an image that shows here you can actually have that now remember i also have um a version whereby you can just use this without adding a featured image and this is fine too but if you really want this to look very different as you're designing your site just add a featured image and boom you have this featured image in the background it's super consistent and when we go to all our pages here you can see they all have a similar style to them you can see the text size here is the same and this is what makes designing with templates really really fun and amazing now i'm sure you can agree with me that just by installing this template my page headings have been designed for me my footer have been has been designed for me my header has been designed my blog pages my search results page my error 404 has all been designed now we have one problem it's not really a big problem but uh it is slightly a problem and that is we do not have presets so that means every time i want to go in and design something in here i will need to go in and design everything from scratch now this is the problem that we had last time now look at this if i want to go in and add a button like that [Music] i have to now struggle because i only have the standard button and i have to go in and because i don't have any presets here i have to go in manually and start designing this button every single time so i'll come over here to design i go to button activate this and then i'll start choosing my colors so let's say i'm going to go with this background color here now you see how many clicks i'm going through this is quite a lot of clicks now i need to choose my font and then now i have to search for for pop-ins and and then save add the link and save now this of course takes time so sometimes we can say okay we have our template so it's all good we have our header our footer all of that set up for us but as you can see we're still going to need to have our temp our style guide so let's add our style guide and then see how easy it is for now to us to continue building our website okay so i'm going to come back over here and search for my style guide in fact i'm going to go to my dashboard here i'm going to save and exit i'm going to come over here to pages i'm going to click on add new so i'm going to create a new page called style guide [Music] okay so i'm going to use the divi builder okay so now it's time to uh look for that style guide i'm gonna build this from scratch so now i'm gonna go through my hard drive and try and find it in the meantime while i am uh looking for the style guide and by the way if you're wondering what uh the divi style guide pro is this is what we used last time in our last uh live stream where i showed you how to have all these presets ready for us okay so it's time now to install it so i've just dragged and dropped it here i'm going to import the presets there's no content here so i don't have to replace anything i'm going to import it so this now is going to import our style guide and as you can see here everything has been added oops i installed the wrong i installed the wrong stuff okay let me find the uh the style guide sorry about that guys okay so this is the style guide pro double click on that here we go so we also have the color palette here and this is the style guide pro so i'm going to install that drag and drop it replace existing content and then import presets now i can hit import now i know this is going to take a while because this is a big file [Music] okay so here is the file being imported [Music] let me just check if i have any more questions here okay if you have any more questions please leave them in the comments box okay so it looks like everything has been imported here i'm going to publish the page here we go so we have our style guide pro here we have all our presets and that is really really cool so all i have to do now is to exit the visual builder by coming over here okay so that's our style guide now as i suggested before just keep this open so you can reference it so now let's say i want to design my site let's go to our pages so in fact we can create a new page so i'm going to say new page we're going to call this page mac page use div builder i'm going to build this from scratch so now i can start looking at my layout so over here on the left i'm going to start with a say a video i'll add my video like that i'm going to save and then over here i'm going to add a text module like that so now i can come to the top and look at all my presets i can use any of these presets as i am designing my site so i'm going to go with the main paragraph text boom that's already set for me save that next i'm going to add a button so i'm going to search for my button module here i'm going to select that you can see this is my default but i know i have my presets here bright button boom i have my button set and then i can just keep on uh moving on as i'm designing my site we need we're going to need a header for this so let me add a header i'm just going to go in and set this to this text to heading one like that and then over here on my presets i'm going to go to heading one and boom i have my heading one let's save that so as you can see my site now has just come alive i can pretty much start designing my website super fast now i'm gonna add some blurbs so i'm going to add my first one here add my blurb and i'm going to come to my presets and i'm going to go with in fact you know what i don't even remember how these blurbs look like so i'm now gonna come over here to my styles uh to my style guides i'm gonna look at uh the different types of blurbs that we have okay so let's say i want to go with the dark blurb okay that's the one i want and here it is just like that it's styled for me all i have to do now is to add my icon by clicking here on use icon and the first icon i'm going to use is let's go with this one here and you can see everything is styled for me i can now just duplicate this a few times drag this over to the right just like that now the most of the styling has been done for me so let's say i want to change the color of this one all i have to do is to click on this gear icon and then i can just go to the background here and change the background color just like that okay so you can change the colors but of course you need to go in and then change the the text inside but as you can see this is super easy because i have gone in and started using all my presets now over here on the sections i also have some presets so check this out if i come over here to section settings click on this drop down i can go now with my 10 padding and everything now is going to be really nice well spaced out and looking great so let's say i need to add a title i can just add a title to this so let's add our text module here and this time for this text module i'm going to come to my text settings here and we're going to go for our section description which is right here there we go and i know for my section description it has a heading so i'm just going to change this to say heading 2 and just like that i have my section description and now i can continue designing my site let's add another section and this time we're going to add a i mean some images so i'm going to add my image like that so we have a few images here i'm going to go with this one upload image i'm going to save now this time i'm going to add a background so i'm going to come over here and add a background color make this really dark and save so i'm just going to go into my row settings now and just duplicate this a few times so i can add all my images so all i have to do now now that i have all my images is to just go in and start adding my my images so let's say for example this one here needs to change to that i can just update it like that and this is super cool now we have these images they also come with styles so if i click here on this gear icon i can go to my image styles now there's a few i can go with black and white i can go with no rounded corners i can go with image with hover effect now if i select this one here it has rounded corners and it also has a hover effect okay now i know we can't really see it here i need to save it first so i also need to give this a a title so i'm just going to duplicate this and drag this all the way down and give this a section title so all i have to do now is to go in and change the colors so i'm going to go in click on this little icon here change my color to something that's easier to read and i know there's a lot of text here so i'm just going to get rid of some of this text like that [Music] there we go i'm gonna save that and also over here on my section i can see we don't have the same padding that we have here on the top so i can just go in go to my presets go with my 10 save that and now you can see that our page is really starting to take shape and it has saved me a lot of time and a website can really be designed so far so fast that it is almost unbelievable so let's say i want to change this background to maybe perhaps this color here save that all the pages i'm going to build now are going to be super super easy to build okay so i have here my main my section here i also have where my content goes so i can go in and really update this whatever i want but as you can see everything is consistent i have my footer here if at any point i decide you know what i want to start collecting emails on all my pages on my site all i have to do is to come over here go to my dashboard and then i can just go to my theme builder go to my global footer and in the global footer i can just activate this by coming over here advanced visibility deactivate that i'm going to save save one more time and now when i come over here to any of my pages on my site guess what when i scroll all the way down i now have my email opt-in which is brilliant okay now over here on the image gallery i can just go in and further customize this maybe i may want to have these images closer in fact we have a preset here i can go with uh 70 width and as you can see even my rows have presets uh which ensures that everything here is consistent i can also come over here to this one and also add my 60 width for all my descriptions and now everything is looking super amazing jerome here is asking uh is uh is this recorded yes it is recorded um i will be posting it in the facebook group and also on also in the courses okay so now i can save this now when it comes to setting up your email opt-in oh in fact before i do that let's say i want to add an image that comes over here on this mac page so all i have to do is click on edit page just in case you may just in case you may have missed that you can come over here to featured image and add your image so this time i'm going to add this this image here hit update view page and there we go i have the name of the page and i have this image here in the background so you may be thinking okay so this image here in the background how can i customize that area um to customize that you need to go to your header which is right here your global header in fact i went to the wrong one i'm going to close out of here you need to go to the header for all your web pages so it is this one here so this is where we have our main header so to customize this you can go in go into the background and this is the color that we have here in the background okay so you can customize this you can make it lighter you can make it even much darker it's pretty much up to you how you want to have this if you also want to have let's say a gradient you can just come over here on the gradient in fact let's delete this first over here on the gradient if you click on this plus button we can change this to 90 degrees okay so we can now choose our colors so let's say we want to have a solid color over here so it's easier for us to read the text or our page title we can do that and then for the second color here we can just add some transparency to it like that and i can also increase my start position here like that now let's save this and save one more time now let's take a look and see what this page looks like so i'm going to refresh and look at that now the image is darker and it's more visible over here to the right i know it's quite difficult to see but let's see if we can take a look at another one there we go so it's duck over here so you can read the title and then it shows a bit of detail over here to the right and this one here is the plain one so you can see it has nothing on it so if you don't want to add any images this is how it's going to look like so you can further customize this by adding even more colors if you wanted to but this is where you would come and customize the page titles of your pages okay so it's very um straightforward to have a look at this so if you wanted to make any changes to um to this template uh these uh this bright color here is pretty much your global so this is where you'd go in and this will update on i mean pretty much every single item that is growables like your search results page your archive pages and so on and this one over here is where it will update all the footer now i differentiated the global footer from the blog post footer because uh this one here does not have an email opt-in because we have this in the body of this already okay so now let me show you how to go in and add your or connect your email opt-in with your website because it's very important that you if you want to collect your emails you have to have this all set up okay so before i get started any more questions [Music] in fact let me just check here okay so this is uh quite interesting uh and this is from roger and roger says do you have any uh layout guide for a landing page don't want to go to the expense of russell brunson's programs right yes i i totally understand that and um uh i really struggled with that as well when it comes to our funnels so i am going to be creating some funnels in fact we have a section in the web design masterclass course where i will be talking about funnels and how to build them i will be showing you some templates and also how to use card flows as our funnel builder and show you how to set all these up for you as you build your funnels so um i think it's going to be in two weeks time where i show you how to do that um okay the next question here is how do you add additional presets to your style guide okay that's a very good question so adding additional presets uh you do it this way so let's say i'm going to refresh this and let's edit the page i'm going to use existing content so let's say i want to create a new button style so i'm going to search for my button module here like that and here's our standard button now over here is all my button presets so let's say i choose this button here right and then i decide you know what i don't really like this button because that's what i have in my presets so the the next step now is to create our own button and add it to the preset so i'm going to go into my settings here and design this button from scratch so i'm going to come over here design button and then i go through the whole process of designing my button from scratch so my text color here is going to be white and then i'm going to add my background color to be that i'm also going to go with zero for my border width and then for my radius i'm going to go with a hundred so this is a new style button that i'm creating and for my font this time i'm not going to use poppins because i know i use poppins a lot so i'm going to come over here and use monster right [Music] okay here we go let's go with that and i also want to have all caps and i also want to make this bold or semi-bold great and let me adjust the size let's bring this down to about say 16 so as you can see this button here is starting to take shape let's say i'm happy with this button here in fact let me do a few more things and that is to add a bit of padding both to the left and the right so i'm going to go with let's say 14 pixels and see what that looks like in fact i need to dial this a bit more there we go so i'm going to go with say 23 bring this down a little bit in fact let me use percentage here uh let's go with five maybe four okay so let's say this is the button now i need to add to my presets so to add this button to my presets all i have to do is to click here on this drop down and then say create new preset from current styles so i'll click that and then i'll give this button preset so now let's call this mac rounded [Music] okay and then all i have to do now is to hit save i'm going to save one more time okay now i can delete this because it is now in my presets so how do we know it's not presets if i start now to add a new button like this select that click on this drop down i have to look for mac rounded which is right here boom just like that i have i was able to update my presets just by creating one and then adding it onto the list of presets now here's the thing every time you create your presets make sure you name them in such a way that it's going to help you remember them because once you have a long list of presets it's going to be very difficult for you to remember the presets the name and what they are and that is why i usually have this reference where i take a look at the style guide itself as a reference because i'll have forgotten what these presets look like so the naming of these presets is going to be very important okay so i also have a question here how to optimize images for your website now the way i optimize my images is by using either canva or using photoshop so let's see so for photoshop let me see if i have an image in here i think i may have an image okay let's do a quick example here because that's the point uh of these q a's so let's say i go to a website here called let's go to pixels and download an image so the image i am going to download okay let's just search for let's say bmw see what comes up because i know these are going to be high-res images okay let's go for this one here so if i download this 1920 by 1279 hit download okay so now when i search for it now here it is i can see here the size is 424 kb now when i bring it into photoshop so here's photoshop i am going to just create a new page in photoshop new 1920x1080 okay great so i'm just going to drag and drop this over here so remember it was 424 kb so so what i do now is i would save this okay so you can see my quality here is down to about 60. i can actually bring this down further now you notice now i have 308 k but it's still looking good so let's say i save that and i'm now going to go to my computer and find that file oh sorry about that uh i didn't notice that okay so let me just tell you quickly what i did so i went to pixels which is this site and i downloaded this image okay so this image that i downloaded is [Music] 400 kb kilobytes so i added it on to photoshop here and then i saved it so when you save it this is where you want to come and make sure you lower the quality because when you lower the quality here you can see in the image i'm not really losing the quality here i'm just now making the size of this smaller okay so you can see here even if i go down to 40 or 40 on my quality the image here still looks great okay so let's save that and save one more time okay now i need to look for that image and when we take a look at the size you can see now is 221 from 440 i managed to bring it to 221 so this is really really amazing because i can go in and lower the quality and still maintain uh detail in my image so that is how i optimize them you can also use canva canva is also pretty good you can go into canva and really make your updates in that so if you go to say canva.com let's go with this one in fact this is a presentation not sure if that's going to work and if i drag and drop my image in here right um i can save this as a jpeg and i can also adjust my quality over here as you can see so now when i hit download i can go in and then check the size and here it is and again this is the selected one 216. so that is how you optimize your images i know it is tedious because you have to go in and do this for every image but this is how you get your websites to work faster okay uh how do you add your presets to your style guide i think i've just shown that right uh how do you feel about using a plugin like smush instead of doing them individually in photoshop okay now here's the thing the plugin will do a good job but it doesn't give you full control and in my case i have actually opted to use a plugin but you should not rely on that because picture this let's say you download you take a picture from your camera and it's a high-res image and then you take that high-res and add it onto your website you still need to resize it to about 1920 by 1280 because most of these cameras really take um massive dimensions when it comes to the um when it comes to the image itself so it might be uh 4k for example in size you want to be using those images on your site you want to make sure you bring down the size if you don't optimize it that's fine but if you bring down the size to the right dimensions and then upload it to your site then that works but if you go to a relative free website like pixels or unsplash or even use camera straight uh images straight from your camera onto your website that's a no no that's going to be a big problem because you still need to resize them and the resizing is the problem okay so that is what i would do resizing cropping yes same thing yes manuel you can do this in lightroom so a lot of photographers use lightroom it's pretty much the same process you can also do that in a lightroom right ed here also says is the style guide free for vip lifetime members and the answer to that is yes i've sent an email uh you should be getting the email right now in your inbox uh which has the link to download this um dv ultimate template now for those of you that are not vip members or you're not lifetime members and you haven't signed up for the web design masterclass i'm going to be selling this ultimate template for 97 but i have a promo going on right now because ideally i would like quite a lot of you to have access to this so this is going for 47 but i'm just gonna leave it open for six days after six days the price is going to go same applies to uh the style guide pro the style guide pro i think the offer is going to end today so after today it's going to go to 97 i sent an email out yesterday so if you missed that basically it's gone now the reason why i'm selling these templates and uh is because i do take a lot of time to design these make sure they're mobile friendly make sure you know everything is working fine with them so i start off with a discount just so that a lot of people a lot of you can get it and then later on i can just you know um up the um the price but 97 if this is gonna cut your uh design time by 50 or even 70 it's still worth it because you can use this on unlimited websites um and you can go in and customize it as much as you want you can even go and resell it i don't really um bother you know with that so that is um how this process goes as when it comes to creating these uh presets and uh these templates the templates are super super cool because they make it easy for you to go in customize them and you have all your pages all created for you your error 404 page your search results page your blog po your blog pages your footers your headers your promos all of that is designed for you so as i've just demonstrated today it is super easy to go in and design a website from scratch in fact if i'm going to be doing a tutorial again where i just go in and just start designing a website from scratch and see how easy it is to uh to use this it's going to save you a lot of time and you're always going to have consistent looking websites now the next product that i'll be releasing next week is going to be called divi super colors now dv super colors is going to be about 12 color palettes which are pretty much covering majority of the websites out there so beads corporate websites you know the the blues uh the greens and how all these colors really worked worked well together i'll be creating all these color palettes for you and also describing uh where these color palettes are best used so if you are someone who is a freelance designer you can have all these color palettes and just choose any one of these as you're designing your website and again it's going to save you a lot of time it's going to be free for vip members lifetime members and those of you that have bought the web design masterclass so this uh this is just you know great for uh choosing the right color palettes because color is the most important aspect of design not just web design but in all aspects of design color once you get that wrong you are in trouble so that's going to be the next product that's going to be pretty much the final product because these are the three main things that you need you need a style guide you need templates and you need colors to design professional looking websites and that's the process so all this is going to be in the web design master class i will be going in deep into um how to use them further this uh ultimate uh template is also going to have a mini course so i will be releasing that very very soon so this comes uh with uh the the price of 47.97 right so you get a mini course uh it also comes with a color palette it's easy to customize you can use this on unlimited websites it's a money-back guarantee in case you feel like you know what this is not working for me and i also do provide support now talking about support i'm slightly behind when it comes to responding to your messages and emails i haven't been well so am going to start um going back into my emails and making sure that i respond to every single one of you so please be patient with me i know this a lot of outstanding questions i will be going back and addressing that so uh this is how you need to design your websites now if you want to use your own template please do not design any dvd websites without a template create your own templates first your 404 pages your headers your footers that is how you're going to get a consistent looking website it's all about designing professional sites and this is the process now a lot of people out there are not really teaching you this but this is the process now there's tutorials out there which are three hours you know on how to design a website they just tell you where to click and most of what you've seen today is just using you know templates you can really make the design process much much easier for you rather than going and spending hours designing your websites from scratch this is the way forward and like i said this live masterclass a live workshop is going to be added onto our course and also it's going to be in um [Music] in our facebook group as well so we can watch it at any time when you need all right guys are there any um any more questions in fact there is a question here uh gene this is for web design master class but since you've supported me for a very long time just drop me an email and i will send you this ultimate template okay kathleen says thank you for the great video wonderful information and easy to understand thank you so much i really appreciate that right any more questions um what is wrong with the sales page uh you say the sales page is not working for you uh what is the issue with the sales page please let me know so i can get this fixed right away yes please let me know uh i think um is it joe dao dao uh he's saying the page is not working the sales page for the uh the ultimate template please let me know what is happening with the page so i can get this fixed uh please refresh the page again if it's not working jerome says i've bought the style guide already will it will i be getting the training that comes with it yes um the style guide comes with the training i sent an email out if you haven't received it just drop me an email and i will send you the training um because sometimes what is happening is a lot of you are using a different email in paypal as to the one that you are signing up on on the website so it's very difficult to try and match these so if that happens or if if that's the case please drop me an email and i will fix this problem yes the style guide is a separate cost um with the ultimate template it's separate the style guide itself is the presets and this template is uh all the sections of the websites that i've described in this so these are two separate products but like i said if you are if you're a lifetime member you get this uh for free if you're a web designer if you're in the web design master class you also get it for free if you're a vip member you also get this for free so all these products that i'm pushing out if you are part of any of these three that i've just mentioned you get all these products absolutely free but in the long run um it is better to get the lifetime uh the lifetime license because it's only 197 right now i am going to be increasing the price uh later on but as you can see just by buying these two or even the courses the lifetime membership gives you access to everything basically all the courses current and future courses any programs that i do any live training any any master classes you get access to all of that so like i said i will be increasing the price soon but this is the right time to get it uh how to become lifetime member with discount code please okay let me see if i can pull it up quickly here lifetime [Music] okay so i can see here i do not have the discount code okay so what i'm going to do is i am going to add the discount code for the lifetime membership uh in this chat so take a quick look at this even after the live stream it's going to take me about 10 minutes to create it and just keep an eye in the chat i'm not sure if that's going to work or should i send an email out for those of you that want the lifetime i mean in fact how many of you want the lifetime deal because i may send an email out and annoy quite a lot of you that are that are not interested in that so just let me know now uh how many of you are interested in that so i can add the discount code now there's a lot of training a lot of courses uh that i am planning for the future okay marquez okay so i'll send an email out um with the lifetime offer because that is definitely much better because there's going to be quite a lot of courses um following up on this courses on how to create um your online courses yourself to as a business that's something that i have in mind i'm also going to be showing you quite a lot of um all my skills that i've learned throughout throughout my uh my career and even when divi gets updated to um okay quite a lot of you are yes the website is funnels to income i can see quite a lot of you are interested in the uh in the lifetime so um excellent so what i'm going to do now is uh while you're here i'm just going to create a discount code so please ask me any more questions if you have any while i just create this discount code quickly so you can get access to this so if you have any questions please do ask your questions okay so what i'm going to do is i'm just going to update the price i think that's a quick way to do it i also have a project for all of you that are in the web design master class and lifetime members i am going to be designing a website from scratch as a project this is for a friend of mine who who um who has a farm so he wants a farm website designed which is also going to have the capacity to sell products so this is going to be fun i want all you guys to see a behind the scenes how i would how i would approach designing this website from scratch so it's going to be also very very interesting um [Music] okay so here's the link for the lifetime [Music] there we go so you can go to that link and once you sign up for the lifetime you pretty much are going to get everything um for everything on the site that includes all courses all templates all style guides um all future courses pretty much everything that goes on on funnels to income you will be able to get that for free so this is super super uh powerful and this just helps me uh invest a lot more into this um into this project in fact this style guide i mean sorry this uh ultimate template that i showed you today is going to be on my website um in about two days so i am actually promoting something that i will use myself so this is not just me pushing up products like that i did mention to quite a few people out there that my website may not look professional right now and that is because it's a working case study so every time i design something and uh recommend you guys to use i'll be using that on my website as well so you will be seeing this very very soon in the next few days this ultimate template that i've just showcased is going to be on my main website um that is strange i wonder why that is happening uh let me just check something quickly the session should not be expired you know actually what happened is i moved this website oh here we go if you uh refresh your page that should work now try and refresh your page manuel says uh already a lifetime member happy days yes that's awesome that's awesome and also guys um in the future or in fact even now do suggest any topics that you may want me to cover um in web design marketing or that kind of stuff and i will be making mini courses for that and like i said for lifetime members you'll be getting access to that absolutely free all right guys i think i've covered quite a lot um today so give it a try i am going to save this uh this training and add it on to the facebook group and then uh see how you guys get on with it so i will do another tutorial where i just quickly design a website from scratch and then after that i would like to see all your websites that you're working on okay because it's not it doesn't make sense to go through all this training and not really apply what you're learning so it's always very very good to learn the stuff that i'm teaching you but apply to your own website so in two weeks time i would like to see all your websites on the facebook group show me all your sites so we can all have a look at it and uh be sure that it's working you know i always like to see this and i can always give you some feedback as to how you guys are getting on okay so thank you very much guys uh have a great weekend and uh i will be uh adding this uh training today very very soon and then we'll just take it out from there all right guys take care thank you very much for tuning in on to this live web design workshop take care guys and i appreciate all your support and all your help thank you very much

Channel: MAK

Views: 2,504

Keywords: Augustine mak, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows tutorial, Mak, tutorLMS, online courses, create online courses, online course business, fluencrm, divi theme, elegant themes, elegant themes divi tutorial, elegant themes extra tutorials, elegant theme divi, how to make website, how to make website and earn money, how to make website on wordpress, how to make website for affiliate marketing, how to make website for business

Id: nQLDM7nMJ-k

Length: 84min 14sec (5054 seconds)

Published: Fri Sep 17 2021