Advanced Divi Design Tips - LIVE

hello everyone and welcome now first of all before we begin please let me know if you can hear me loud and clear because you want to get off on a good start so welcome everyone so far I can see quite a lot of you have joined in this is fantastic now before I give some shout outs I want to talk about what will be I mean the live workshop today this is going to be about global defaults so well there's the technique I'll be showing you on how to design websites in the new way is going to be pretty much standard going forward in my opinion because it just makes the whole process of designing websites very very straightforward very very easy and this is going to be done through global defaults the global defaults feature so even if you have an existing website that you're very designed you can also apply the techniques that I'll be showing you today so I'm really excited about this because this manages your entire website so you make your settings once and then these settings translate a whole I mean across the whole website so it's really really exciting and I can't wait to show you how to create this so if you can hear me loud and clear please let me know in the comments box below before we begin right so I can here okay voice sink is out I don't think there's anything I can do about this because I'm using a crowd cast so I guess we just have to probably continue with this until I find out how to fix this all right so I'd like to welcome G Andrew Sammy we also have Hong Julie from Seoul Jody from Spain good to see you Barcelona I was there last year as well that's really awesome oh yes from Egypt oh wow I think this is the first time we've had someone from Egypt that's awesome we also have our been from Kosovo now please do forgive me if I mispronounce these names I'm just excited to have all you guys here on this livestream Addante from Germany good to see you too we also have Anissa from New York Pauline from South Africa wow that's awesome we also have Douglas from Scotland's W RMS Murcia from Florida USA awesome awesome right we also have let's have a look Feroze good to see you as well from Texas Rito from Switzerland who else do we have we also have Sami here saying loud and clear awesome right if I missed anyone whoa Monique good to see you as well good to see you Monique let's have a look so I make sure I don't miss anyone we also have Pedder from Sweden I hope I pronounced that well and Andrew from Lana awesome excellent okay so as I mentioned in the beginning we are going to take a look at global defaults now when it comes to designing websites before we used to go into our theme editor I mean our theme settings to go and set up our heading text and our font text and you know in my opinion this is like I mean this way of designing things is very very dated and you will see today that the workflow that I'll be showing you is going to be totally different in fact if you haven't tried this out this is going to change the way you design websites from today so can't wait to show you that all right so what I'm gonna do now is I'm just gonna switch over to my to my desktop so I can show you right share my screen here all right great so here I just pretty much have a DV installed website nothing much happening here and as I mentioned if you wanted to customize your fonts right from the get-go you would come over here to appearance and then you click on customize so I'm sure quite I'm sure you're all familiar with this so this is where you would come and click here on general settings you'd come to typography and this is where you would set your body text size okay now the disadvantages of this is even if you set it here is it's not I mean you can't really see what its gonna look like and also over here on the heading text you just set it up once and that's pretty much it and then over here when it comes to the header font and the body font notice here when I click here on this drop-down it gives me all these fonts right but the the problem with this is I have no idea what a amico looks like I don't even have an idea of Amiri looks like so it's just a list of fonts but I can't really tell what sort of fonts these hour they look like and so on so in my opinion this is why I say this was dated and the same applies as well to the body text so if you if I was to come over here to body text same thing it only shows me a list of all the fonts and that's pretty much it now over here on the body color we only have a few options here to set our default fonts so as you can see here the body color here is the link color is this color and the body text color is that so ideally we want to have a system that is more like a style guide in graphic design now for those of you who've done a design are you familiar with the style guide if so please let me know in the comments box by saying yes do you know what the style guide is please let me know by saying yes if there's quite a few people that know what a style guide is then I'll have to go in and explain a bit more okay awesome so I can see here quite a lot of you are saying yes yes yes Anissa Dante awesome fantastic so what we're trying to do today with Divi and in my opinion this has never been done before with any page builder we are going to build a style guide that is going to control our whole website so I'm just gonna get rid of this here now let's head over here and create a page so I'm gonna come over here click on add new so what I'm gonna do is I'm just gonna call this page style guide okay because this is the page that's got that's going to control everything on our website and by the way if you haven't bought deviate I've got a link Divi has a 20% summer sale so if you purchase TV now you get a 20% off plus I have some bonuses if you buy it using my link you also get access to my TV blueprint three courses and the Photoshop for web designers course all right so let's call this page style guide okay I'm gonna click here on use Divi builder right so here just gonna click on no we don't need to reload the last the site okay we're gonna build this from scratch right so over here I'm just gonna add some basic elements that we normally find on a website so these basic elements are pretty much headings paragraph text buttons blurbs images so you want to start these these main items so that when as we start building our website everything will have a consistent style throughout the whole website all right so let's go ahead and do that so I'm gonna click here on a single column so on this column here I'm just gonna add a basic paragraph text and by the way if you have any questions please drop your questions in the comments box below and I'll keep an eye on this and respond to your answers yes I gotta say is another word for a style guide is brand sheet yes that's absolutely right okay so I've just entered here a paragraph of text so as you can see this text here is the default text text that comes with Divi when you install a brand new Divi okay so I'm just gonna leave that as it is as our paragraph text I'm going to save that I'm going to also add this time I'm gonna add a single column and I'm gonna add a button because of course buttons are used throughout our websites a lot so if we start our button the first time he's gonna make its gonna have our buttons look consistent throughout a whole website so this is my process of designing the style guide okay so I'm gonna save this button and then I'm also going to come in and add a blurb because we also use blurbs in fact you know to save space I might as well just come in here and divide this into three so here I can add a blurb okay so this is just standard how it looks like I'm gonna save that and then I'm also going to add an image like that okay so now we have a button we have a blurb we also have an image okay right so I'm just gonna save this for now I'm just thinking what else can we have here okay we also need some headings so let me add another text module here so this is going to be our main heading so I'm just gonna say here main heading okay so for I'm just gonna highlight this and set this to heading 1 okay I'm gonna save that and then we may also want to have another set of headings here so I'm gonna add text module like that and then this one here is going to be my second heading okay so I'm just gonna say heading 2 like that and then I'm gonna highlight it and click on this drop-down and set this to heading 2 and then save okay so this process that I'm doing here is if you're building your website from scratch however you can also still do this if you've already built your website so right now I've just set some default items here I put some paragraph text that's with some heading text heading 2 over a button I've also got a blurb and also an image so now we want to apply some styles to this so that when when we start designing our website everything is pre set just like how a style guide works okay so I'm gonna start here with my paragraph text so I'm gonna click here on this gear icon now the new feature here which is the global defaults feature you'll find it when you see this icon here this globe icon I hope everyone can see on this live stream so when I click here on this globe icon notice what happens it flips over and then I can go in and set my settings which are going to apply to the whole website hence the word global settings so I'm gonna come over here to design so just like as we do it before we just come over here to design and then we can now go into our text and start styling it so here on the fonts let's choose a font I really like using pop in so I'm going to go ahead and choose Poppins for my normal font and then I can come over here to my text size let's set this to let's say 16 so that's gonna be my body text size and then over here I'm gonna set my line height I'm just gonna increase that a little bit to about 1.8 okay so that's looking great so pretty much I'm happy with that if I need to change the color as well I can in here and change my color so every time I'm going to add a paragraph or some text on my website this is going to be the color that's going to be applied to all my paragraph text now that is really really cool so over here I'm gonna save and then it says here you've made changes to the text module default settings this will affect all text modules across your entire website you wish to proceed I'm gonna say yes so now if there's any page on my website that had a paragraph text which was set to something else that has automatically changed now to this setting okay all right so moving on any questions so far before I move on and continue designing this okay I don't see any questions oh I just noticed that we also have Ahmed from Milton Keynes UK good to see you of it alright so moving on okay Andrew says sounds good fantastic I'm glad we're all on the same page now moving on let's start working on our main headers now so I'm gonna save this in fact I'm just going to drag this to the top so that he just looks nice okay but of course it doesn't have to be in this order now let's go into our headings so I'm gonna click here on this gear icon going to my settings click on design now I'm gonna click here on this globe item so I'm gonna click it and then he's gonna flip around click here on design and now on my heading text this is heading 1 so I'm gonna go ahead and style that so let's say for all my headings I want to make it all caps and I'm also going to choose my font here change it to Poppins and then I'm going to change this from regular to bold right now in regards to the actual color I want to go with this color right here and I'm pretty much happy with that so I'm gonna save this and again it's gonna ask me if I need to save this I'm gonna go ahead and save that and then save one more time now over here let's do the head - so I'm going to come over here click on this globe item design heading text heading - and I'm also going to change this to Poppins and this time I won't make it all caps but I'll just change my color here let me see I can go with right I think I'll go with this okay it's my heading color and the size I'm gonna leave the size as it is save this save one more time okay so now I have my main heading heading - I also have my body text now let's move on to the button because I want my buttons to be all consistent as I design my website so so I'm gonna click here on module settings so here on the button text we might as well just leave it at well as click here because we might want to change it to something else later on as we design our websites and also over here on the link you want to make sure that you just leave this as a blank link right so now I'm gonna click on edit global button defaults click on design and then straight away I'm going to come over here to button so this is where now you want to activate used custom styles for button in order for us to customize this button okay so let's start by adding our colors so in fact our main color here is going to be let's go with this one here now the button background color I'm gonna go with this dark color and for the border width I'm just gonna get rid of the border width completely and then I think I'm gonna change my font as well choose poppins and I think the size is okay now we may want to add a new icon but to be honest I'm pretty much happy with the way the button looks so I'm gonna go ahead and save changes right okay so let's move on to the next item now this time we're gonna take a look at the blurbs we want our blurbs to be a specific design as we enter our verbs on to our website okay so I'm going to click here on module settings so the first thing I'm going to do is to go in and customize all this and just make sure that everything is looking okay so I'm going to come over here - in fact I need to click you on this globe item okay so I want to start with a background here so I'm gonna click here on background so I want my blurbs to have a background color so the color I'm gonna go with is let me go with this okay so that it's just a new design of our blurb okay so I've got my background color I'm gonna come over here to design and then I'm gonna pick on image an icon so here we can also change our icons if we need to in fact okay so background-color just I just wanted to double-check on that alright so here on the design I'm gonna come over here to spacing because I need to give some spacing to my blurb here so I'm gonna give it padding of let's say 20 okay so I'm just adding 20 here as well okay so there we go so I have 20 all around now if I need to I could actually add a border but you know what I'm not gonna add a border so the next thing I'm gonna do is I'm also going to add in fact let's go to border I don't add some rounded corners so for my rounded corners I'm gonna add let's say it's at five for our rounded corners so our rounded corners are going to go throughout all the sides so it's five pixels so I'm just it's just smooth on the sides there alright so moving on this texture needs to be changed as well because we use pop-ins here or a paragraph text so you want to keep that consistent so I'm gonna click here on this brush tool and this is gonna take me directly to my text so I'm gonna click here change it to poppins and then I'm gonna align everything to the center I'm also gonna come over here to in fact I need to change my color make it nice and dark and then over here on my blurb text I'm gonna click it and I'm also going to align this to the center make it all caps and let me see if I yes I'm going to change the color and I'm also going to change the font weights to bold and reduce the size a little bit okay so I'm gonna go with 17 so every time I'm going to add a blurb this is what it's going to look like alright so pretty much I've added all this now he's also one cool thing that you can do here you can also add all these other features like for example you can add animations you can add transform you can add box shadows you can have hover effects so in this example I'm just gonna keep everything simple but just bear in mind that we can make all these changes okay so before I continue any questions so far Khalid says I'm AK I shall it good to see you good to see you alright so I'm so save this for now I'm going to take a look at your questions Ahmed says can you change your global setting absolutely yes so let's say you decide in fact let me bring my screen over here right Andrew says no questions so far that's good that's good so hopefully you know if I don't see a lot of questions I'm gonna see that as a good sign because we're all on the same page fantastic okay the question here is can you change your global setting absolutely so let's say you've designed your website is complete you're happy with it and then you decide you know what I'm gonna change the whole branding off my website on I change my fonts on and change all my text I'm gonna change all my colors absolutely you can just go back in change it slightly and that change gets applied to the whole website and this is the really really cool thing about Divi and you know what for those of you that have tried other page builders as I'm sure this feature here you know you've I mean all the other page page builders don't really actually have this feature this is a fantastic feature and with the future updates to the header and footer and also the theme builder once all that comes together you will see a fantastic way of building websites with Divi okay so I'm just waiting for any more questions any more questions before we move on right fuel cells are using Shopify for online shop smart the answer to that is no I don't use Shopify for that I use WooCommerce I prefer using the WooCommerce because with that I have full control of what is happening on my website whereas the Shopify everything is hosted on the Shopify platform so I used WooCommerce Amir is learning too many things from you Mack awesome I'm glad you're learning quite a lot of things here so really appreciate it all right so let's continue it looks like we don't have any more questions oh wait Monique says if you make another page now how do you apply those settings that's a great question because if I create a brand new page now everything that I'm going to add on that page will take on these settings that I'm setting up here so most of my work is going to be done on this style guide let's call this a style guide okay most of my work is going to be done here now every time I create a brand new page and I add a header this is the header that's going to be applied to that page same thing with the button same thing with the blurbs as soon as I add a brand new blurb is going to take on this design in fact that's the next step that I'm going to show you how that actually applies okay okay fantastic let me share my screen again all right so I think we're done with our settings here I'm gonna go ahead and save this now let's work on our final thing here which is the image I'm gonna click here on my image module again I'm going to go global design and all I'm going to do here on my images is to add a border ok image add rounded corners and if you recall I added five here so I'm just gonna add five for my image here now if you want to go in and add different styles filters you know you can always come over here make your images saturated you can make them you know add some colors and so on and if you want to add hover effects you can also go in and add some hover effects but you know what for the sake of this live workshop I'm just gonna keep everything basic as basic as possible so that you can understand what the process looks like alright so I'm gonna click on save I'm gonna save one more time and now we are pretty much done with our basic settings now you may be thinking okay are these global settings applying just to our modules only the answer to that is absolutely not we can also apply these settings to our section settings our rows as well now let me show you quickly how you would do that now for those of you that used to watch my website reviews you would notice that I went on and on and on about the width of the row that it's way too wide and sometimes it's just way too the way too small so in order for you to fix that you can actually come over here to your row settings and give this a size so I'm gonna come over here to design sizing in fact I need to click here on this global item okay design sizing and then over here we can start by maybe reducing our gutter width and these are also going to be our global settings so I've just changed that to two and then over here for our width I'm gonna set that to 70% oops so I'm gonna set my width to 70% and then I'm gonna save so globally now all my width is going to be set to 70% I'm gonna save this one more time now there's also 101 setting that I always do every time I add new sections to my website and that is to add padding to the top and the bottom so we're gonna do this globally as well so I'm going to come over here to my section settings click on this globe item and then I'm gonna come over here to design sizing now in fact it's spacing I need to go to so I normally add about a hundred padding to the top and the bottom and then I'm gonna save so now every time I add a section to my website it's gonna have 100 both to the top and the bottom as you can see here in this demo okay and if I come over here you'll notice that all that has changed all my sections now have been changed now with all this set let's start creating pages on our website all right so I'm gonna come over here and click on a new page in fact you know what I need just make sure I publish this and make sure everything is saved otherwise all our work won't be saved okay so we've called this page style guide I'm just gonna open a new tab here so that you can see we can bounce back and forth between this okay so I'm just gonna come back over here open a new tab and then create a brand new page right so let's call this page new page so this is pretty much how you design your website as normal you go in you give your page a name used if your builder and then once you set on used Divi builder now we can start adding all our elements so I'm gonna build this from scratch and let's start by adding let's say a single column in fact let me see if okay we've got here and the question is can this be saved in the library for future use on other projects yes you can save this to the library for and use the style guide for other projects as well yes you can all right so what I'm going to do now is I'm gonna add two columns so on the first column I'm gonna add an image so I'm gonna search for my image module and select it and then I'm just going to click here and let me choose my image okay I'm gonna go into my image library I'm gonna go with this image right here they code an image now notice right away my image has these rounded corners do you notice that I haven't even touched anything I've just added my image and right away we had rounded corners so hopefully you can see the rounded corners here on the image okay now what else have we created we also create some paragraph text so let's come over here and add some text in fact I'm gonna start with a heading here so I'm gonna say text module and then over here I'm just gonna add my heading text let me use some lorem text I prefer using Loren because I hate typing you know right so I'm just going to copy a bit of text here to use as my heading text on the delete this add my heading text and then over here I'm just gonna highlight it and change this to heading one notice what happens I've just turned it to heading one and it has my color it's all uppercase and it has the right size so as I'm building my website now I can just continue doing this and I don't even have to touch anything because everything has already been set now I'm gonna add a paragraph oh sorry text module getting overexcited all right so here I'm gonna add a text module and notice it also has my fault it has my colors it has everything so I can just come over here grab a bunch of text like that then I'm just gonna come back over here and paste my text okay so everything has my colors it has my spacing everything is all set from our style guide okay so over here let me just confirm this this is our main heading that we set up initially this is our paragraph text so as you can see as I'm adding items here everything is being added now I just want to show you quickly as well one more time do you see this button here that we created earlier on as a global item notice what happens I'm gonna add a button now so I'm gonna click here on this plus button add my button and boom my button has all my colors it's pretty much all set and ready to go all I have to do now is to say to give this button a title so I'm gonna say download now but of course you know the title can be anything the title of the button right and then I just need to add my button link here and that is done so as I'm designing my website look even my my section also has my hundred pixels here at the top and the bottom so as I'm designing my website everything is just in place right so I want to go ahead and add one more item in fact we have let's see we have these blurbs that we designed earlier on let's add those blurbs now so for those I'm gonna add a new section so I'm gonna click this plus button this is gonna be a regular section and we're gonna have three columns here okay now notice this as soon as I type in blurb I'm gonna add my blurb here and it has all my designs look at that all I have to do now is to go in and customize my text so I can just change my title here again I'm gonna come to lorem just copy some text from here for my title like that and then over here just gonna add some dummy text over here paste my dummy texting here like that and then over here now notice that we have space for an image so this is where now we can either choose to have an image or an icon so if I want to have and an icon I can just come over here and choose the icon that I need to add in here so let's say this is gonna be my icon I can come over here to design image an icon and change my icon color okay and then I can also change my icon size and pretty much I'm happy with that let me see if this is better actually I'll leave this yeah I'm gonna leave that as it is okay so I've added all that I'm gonna save now if I need to speed up the whole process now I can just duplicate this twice like that drag this into position like that and those are my blurbs notice how fast it was for me to just go in and just start adding all my my elements now you may ask okay what if I want to change this particular one in the middle here to make it stand out how do I do that well it's straightforward just because we've set everything as a global item it doesn't mean that we can't go in and change it so let me let me change this one here I'm gonna click here and right now I can actually go in and make all these changes because notice I'm not in the global in the global tab so I can come over here change the background color so let's say I'm gonna go with its really dark one and on my design here I'm gonna change my font and my font color is going to be let's go with that I'm also going to change my color here and my icon as well I only changed to that okay so notice just like that I was able to go in and change this middle one here if I want to change it and make it even bigger I can go in and make it slightly bigger but it doesn't mean that next time I add a blurb is going to have this setting why because I haven't these additions to my global settings alright let me just prove to you that one more time I'm gonna come over here click on add new row two columns and I'm gonna add a blurb okay let's edit one more time now notice it still has all my settings and this time let's say I want to add an image I can just come over here click here add my image click upload an image and boom my image is in right away but consistently I have this background I have my rounded corner as my fonts everything is all set now if we were to do this every now and again designing our websites before this feature was released I mean the amount of work that was needed to design this was just crazy absolutely crazy so now you can have consistently I mean look at these rows they are consistent everything is laid out neatly and every time I add a new item if I decide oh I wanna add a button here I can just come over here at my button and notice that it has my color you know right there in my button so this is really really really cool right any questions so far any questions so far yes this will be real for those of you that missed the first part of this it will be really recorded no questions no questions no questions that's awesome right right these there is a question here from Ian jr. I think saying isn't there CSS for this I mean to be honest you you saw what I was doing in this example why would you need to type in CSS code and all of that I mean it's unnecessary I mean if you were trying to prove you know to people that you know you're coding and all of that yes it's good and it's also good to know the CSS but if you just want to build your websites I mean I mean notice this I haven't even done any CSS no coding no custom code this was just using the Divi builder so I wouldn't really bother with CSS to be to be honest and as the page Oh in fact let me just turn this to my main screen alright so let me just bring this forward here so I can read all the questions easier so the thing of CSS is yes it's great to know how to to use CSS well if we're being back let's say two or three five years ago yes CSS was very very important but now these page builders have become so advanced that there's no really need to to master CSS but of course they may be like maybe specific things that you may want to go in and make changes to with CSS but generally I would say 95% of everything that you need to do you can just do that in your page builder and this applies to all the other page builders out there this mod really need for CSS to be honest on my websites I hardly use CSS I hardly use CSS cuz everything is just done in the Builder itself okay right Pauline says can you access can you access the global defaults without recreating a style page first yes you can and that's what I'm gonna be showing you in the next step because right now this example is for someone that's building a website from scratch so now I'm gonna show you how you would actually work on your website if you don't even have a style guide initially okay a ghonte says will the pre-made themes override the global styles right I just heard now just to be sure agon say are you asking about the pre-made themes the ones that come by default with Divi are these the ones you're referring to okay yes now the thing is the way these pre-made layouts were created the last time I tried to apply these global settings to them it didn't work mainly because I think the the styles were actually hard-coded onto these pre-made layouts so if you try to do it with the way I'm doing it now it would not override so you'd need to go in and reset everything and then set your your global items I'm hoping that this is something that's going to be changed very soon because that would make the whole process of using these pre-made layouts very very easy you just go in change the font across all the layouts change the headings change the colors and so on but at the moment you're on you're not able to do that right let me see do we have any more questions yes so you load the pre-made theme and then you can start making the changes and I'll show you how you would do that because the the the technique is similar to someone who's already designed their own website so I'm gonna show you how to do that as well okay let's have a look here any any more questions if I missed anything Rita says what is with the responsive design I'm not sure what you mean can you expand on that all right let's take a look here if we have any more questions okay so no questions so far so let's move on to the next part of our design and that is making changes to an existing website so I'm gonna save this in fact I'm going to switch over here to my website all right so let's say you have some pages on your website in fact hopefully I have some pages here I'm gonna go into my dashboard save it exit right so over here I'm gonna click on all pages now notice that I have all these pages that were that I normally use for my tutorials so what I'm gonna do is I'm going to open any of these pages and what you'll notice is if all worked well these pages will have taken on the designs or the style guide that we created earlier on so I'm just gonna open this in a new tab and take a look at it okay now here I think I hard-coded everything in as well let me find another example okay so I'm just gonna click on enable visual builder here right so for this example let's say you've already created a website and this is how it looks like how would you change all these settings to make your website look uniform so to do that all you have to do is to choose a particular item that you want to make a change to so in this case let's say this was your paragraph text but you want to change this paragraph text and make it similar across the whole website so how you would do that is you click here on this gear icon and then you can click on this item here design text and then you can change your text over here so let's say well that's strange right so I would have to come in here and make my changes this way so I'm gonna click here on text let's change the color okay let's go with this color here for our text for the size I'm just going to increase it a little bit here but this time I'm just gonna use pixels let's use let's say 16 pixels okay aligned to the left and my font here um let me change you to something different I'm going to choose open sans and then I'm also going to add a line height so here okay so let's go with 1.9 so this is the change that you're actually making to your current websites so this just assume that this is your current website so I'm going to leave this at 13.7 okay right so with that all set now what I could actually do is to click on these three little dots and then notice that we have this option here which says make styles default okay so this is where you want to click and then it will give you a notice year I would say this will affect all text modules across your entire website do you want to proceed and then if I say yes this now is going to be applied to my whole entire website okay now I'm just gonna come over here to the page that we're working on I forgot the name of the page now anyway let me save this and just make sure right what happened this text here our body text now has changed because let me close this because we've changed this to apply to the whole entire website so you can see now where I had this text it's all changed this is not the fun that we had because over here we had Poppins now let me change it so that you can change the style so you can see it clearly let me change this one more time so here instead of using open sans I'm going to use Georgia okay so that's the font I'm gonna go with means you increase the size a little bit go with let's say yeah I'm gonna go to fifteen point seven so as you can see now I've changes to Georgia now over here this is what we have on our global page but of course this could be any page on the website so notice what happens when I come over here and I say make styles default okay and I say yes now this font is going to be applied to all paragraph text on my entire website and to prove that I'm just going to refresh this page here and boom you can see now we have a different font so you need now to go through your whole entire website and do this across your website so here for the headings you can see we have different headings I have this type here and then over here we have this one so I can actually come into this one here highlight it set it to let's say heading one and then I'm gonna make some drastic changes to it as well so I'm gonna pick your own heading text and then I'm going to change this to Georgia as well and I'm gonna change this from regular to bold and the color I'm gonna change this to that and now I'm gonna click here make Styles default say yes okay great now when I come over here and i refresh my page notice that my heading text has changed and I also need to go in and customize heading to and so on so even the blurbs you need to come over here change all your blurbs so if this was your entire website you would need to go into your website and make all these changes okay so once you change all these items here this will update your entire website have you seen with this paragraph text now I hope I hope I've explained this clearly if not please add your questions here in the comments box so I can address them I would really want to make sure that you are not confused by what is happening here Brenda says will this replay be on the website yes I'm gonna add it to the members area so it's gonna be on the members area all right so Pauline here says if you've customized a page not the default settings right and then you want to change it back to the default settings is there way to override your customizations yes absolutely so let's say you've designed your page now notice here let's use this as an example here so in fact let's let's find a new page [Music] click on old pages okay let's review this let's see what it looks like okay that's not it just trying to find a which has a good example here you see every time I have a blurb the text here has also changed and this was previously on something that I worked on before okay let's take a look at this one here okay you can see here all I have here is text and my text has also updated so let's say you want to you've designed this page already and you want this design that you're working on to be the default again I'm gonna enable the visual builder here so if you want this to be the default I'm going to come over here let's make some changes to it change my font change this to Arial if I just change it something crazy you know so that you can actually see the difference okay let's go with this one yeah I know it's a crazy font but we're just gonna go with it for now okay so with that change I'm gonna click here on other settings make Styles its default and click on yes so you can see here now that my text now has taken on this I'm gonna save that and then if I come over here now to this page there we go sexier now has changed that's my paragraph text so now the one thing that you need to be careful about or not careful about but the one thing that you need to bear in mind is some of our modules here in fact let's go back in here right so when I talk or not when I set this to take the setting it took the settings of all this so this this paragraph text here had other settings that was done to it so if I come over here to design around let's see where did I make some changes I'm gonna come over here and modified styles okay in fact it's not that I'm gonna come over here let's go to modified styles oh that's strange okay anyways here on my font my my sizes and all my settings you can see here my text alignment was all justified it needed to be here on the left but let's say this setting that I've just done I'm not happy with it and I'm gonna open a brand new page so let's go to let's say color theory I'm gonna open this in a new tab and you can see here my paragraph text has changed throughout my settings here so now I can actually add a new section 7 look right I'm gonna add a new section or even a new column doesn't really matter so I'm gonna come over here click this plus button and add my text module so let's say now as I'm designing this I want to change this completely right so I'll then just come over here to click on design text and I'm going to change this to let's say Georgia change my color to that and then I want that to be applied now as my default click on save so every where where texts here for example now you can see that it's changed so all you have to do now is to go throughout your whole website find where you want to make your changes to apply the change and apply it as a global item and that will be applied to all your settings throughout your whole page so as you can see here this has been updated now as you go through your website you're going to notice that there are items that are not changed so those those items needed to be added onto your style sheet first for them to be affected like for example here we have this video it doesn't have the rounded corners so what you'd need to do is to add all your elements here on the style guide once you add all your elements there that means every time you add them on to your website they are going to be translated throughout the whole website I see this notice here that says lost video stream is that the case can everyone see me okay okay so for some of you you can't see me that's strange can you try and refresh your pages please if you are if you can't see me please try and refresh your pages right if you can't see me please refresh your pages and let me know if you can see me because some of you can see me and hear me as well okay the video is back okay fantastic right so as I was explaining now this global global defaults feature you need to make sure that you make your style guide complete with all the elements that you're going to use throughout the whole website so if it's a video if you're going to add videos you need to have your video module or styled with the button colors and everything or with your branding colors your paragraph text your buttons your blurbs images your call to actions you know all that stuff it needs to be added first and then set those as global items so once you set it as a global item that will translate throughout your whole website and every time you add it brand new item is going to change to that now for those cases where you already have a website you would need now to go into each and every item and make that change as you saw me do on on the paragraphs so if I go to a paragraph on my existing website and I want to make it a global item I can just go in right-click and then set it as a global item so that means every instance of a paragraph throughout the whole website will have that color that you've set and the size and the font as well but sometimes and this is what I find confusing when you set a paragraph text you would automatically assume that maybe that paragraph texts should also apply to the blurb paragraph absolutely not so the blurb needs to be designed on its own the call-to-action paragraph text needs to be designed on its own so all that just needs to be as its own item for this to be applied now when it comes to pre-made layouts the same thing if you and your style guide it may not apply the styles through the actual pre-made items because they have already been set the settings already been set they're not like the default settings these are new settings that have been set so you would need to go in and reset those to make sure that everything is all looking uniform I hope that's clear I hope that's clear any questions Claude says might be off topic but I have a question about image size with parallax effect size and proportion normally for my hero images I just used 1920 by 1080 for my sizes that's pretty much what I use and that normally scales anyways when you use it for maybe other you know other other areas so that's what I normally use let's have a look here all right let's see the off topic but do you know why all elements are in pixels I'm not sure about this question here do you so that Russell is I don't know why all the settings are in pixels to be honest I just apply you know whatever elements see if it's a M or vh whatever it is I only apply that when you know depending on you know what I've designed it but I'm not sure why it said two pixels that way Andrew says regarding image better to resize images for their specific purpose for example smaller images for mobile text in tablet absolutely now if you do it that way it will make your website really fast so this new feature coming out is called responsive design soon on TV in fact I'm not sure why there was a delay that should be coming out for sure maybe next week so this feature how it works is if you add an image let's say for your normal desktop design you can let's say have 1920 by 1080 covers the whole screen and let's say you go into the mobile design or let's say tablet design you can actually have a specific image size or even a different image altogether for the actual tablet science and for the mobile size you can also have a specific size for the mobile size as well so it's really really cool and this I think is where you'd apply this this scenario because at the moment there is no way of adding different sizes for different image for different screen sizes if that makes sense ok Pauline says if I add three text sections in in green in global settings okay and afterwards I customize one of one with blue with font changes if I want to change that customized text sections back to the global defaults are he green is they and apply global yes absolutely I think I I showed you in fact I could show you again how to do that you click on the three little dots on that module item and then all the way down they's is an option which says sets this to global items so if you click on that then that setting is then that that setting then changes everything to that makes that global andrew says so that will be the same as you can do with elementary at the moment yes I I think so yes absolutely Andreas this is a good advice to build a default style guide at first great to have your support here thank you very much I you know I appreciate your comment okay right so I think pretty much I've covered how these global styles would work and this is the best way first of all it's fast okay imagine trying to go to every single page in your website changing the the paragraph text and doing all of that it will take you a very long time so knowing that there's an option where you can just go in and make your change make you settings global it'll just apply to the whole website for in this applies to all your headings you paragraph text buttons blurbs images called actions and the cool thing is you can actually go in and add animations so if you want to have all animations by default you can have these animations in the actual style guide did you see what I mean so it's very very powerful what I've just shown you today is just the tip of the iceberg it's just to just give you some inspiration of on how you can actually play around with these options to to make better designs and Pauline says this has been absolutely amazing tutorial who didn't appreciate your time well thank you very much I'm glad you've learnt a lot from this tutorial and I hope you take these tips and apply them to your current designs all your future designs and this is one of the reasons why I really like using TV because these features really speed up all your I mean your workflows and it's only going to get better I mean I can't wait for the theme builder as well and if you're a member if you're a VIP member on funnels to income comm you are going to get all the templates that I'll be designing you know in the future there's a lot of work behind the scenes that I'm working on to make the membership really really cool and to be honest once the theme builder is set all the themes that I'll be creating will be accessible for members only and I will also be increasing the price because once I add all these extra courses and all these themes and templates and all of that good stuff the membership price is going to be going up so if you lock it down right now you I mean it's gonna be a great saving because I'm going to you know increase the price because this is going to be a one-stop website where you're going to get all your tutorials tips layouts and also live Q&A as we're doing today and also live workshops there oh say it says is there a way to create multiple style guides No you'd have to have one style guide per website because of course there's gonna be a lot of confusion I don't think there's a need to have multiple style guides because that will just confuse the whole the whole system one style guide for your website it works well and even outside in graphic design in most in the way style guides are used it's one style guide per brand right and I'm sure all your other guys out there who've who are designers can correct me from wrong it's one style guide per brand and that's pretty much that's pretty much it you don't have multiple style guides you know for a particular brand okay okay found one style died for one brand yes so just create a take time take your time to work on the style guide for your website change everything that you need to change and then start building your website now this is a brand new workflow and this is why for Divi blueprint for this is going to be the updated blue Divi course it's gonna have a total different way of designing websites using Divi and this is why this course is gonna be you know even two times more expensive than the Divi blueprint 3 because I'm gonna add quite a lot of things in there even things like these style guides I'm also gonna add things like building an e-commerce website on an existing website building templates and also using you know external plugins to make your website look awesome so it's gonna be really really amazing so I can't wait I can't wait to get started with that yes thank you for your calm awesome appreciate it right so for those of you that joined us midway in this tutorial only in this workshop I will download it and add it to the members area so you can you know what's the replays in fact I need to add other two replays that are I mean replays that I did the previous two weeks on to the members area so you can go ahead and watch this okay so that's all guys thank you very much for joining me today I'd really appreciate it next week we're gonna have another topic I'm not sure what its gonna be it's going to depend on the update that's going to come out next week if not there's a lot that we can talk about in terms of how to use TV to design awesome looking websites so anyway I'll look I'll give you enough time to let you know what topic will be discussing oh the world what the workshop would be about so just keep an eye on your emails or if you have any notifications on funnels to income you will get a notification of a live workshop all right guys have a great weekend thank you very much for tuning in really appreciate your time see you next week take care

Channel: MAK

Views: 4,351

Keywords:

Id: 7VBNnY9leQg

Length: 67min 8sec (4028 seconds)

Published: Sat Aug 10 2019