How to Use Web Design Systems with Elementor

what's up everyone i'm jeffrey at lightbox and today i want to talk about improving web designs using elementor now have you ever wondered how a professionally built website it could look just so clean so just polished even if it's super minimal and simple design it just looks clean and has a professional look and feel and how other websites they can look you know well a kind of bit amateurish like something is off and maybe right now you are trying to up your game and level up your game and start designing websites that are more professional looking you know that that that higher level looking worse just clean professional designs well one of the biggest reasons for this comes down to the consistency inside the design and this has to do with typography with fonts uh with your color usage with using ui elements such as forms and buttons and having consistency through the overall spacing and padding throughout the entire design consistency in all of these areas right here is one of the key factors that makes a website look clean and polished versus one that just looks a bit off and you may not know this but elementor actually has a built-in tool to help you keep a consistent design throughout your entire website in fact it's a very similar tool to what professional designers use to build design systems and in this video i'm going to show you how to build a design system and how to use it and implement it inside elementor and guaranteed you use a design system like this what i'm about to show your designs are going to come out looking a whole lot better than what they are right now so real quick before we get into elementor we first got to have a good understanding of what a design system is and how it works a professional designer will always design in a tool such as adobe xd sketch figma before actually going in to build the website these tools right here they're the industry standard tools when it comes to professional web and ui design and we use these tools to build mock-ups mock-ups of the design and that's how the design is going to look for a website before actually building the website but before building a mock-up a professional designer will always build a design system now the design system is going to define all the elements inside the design it's going to define the typography or the font styles it's going to define what colors are going to be used the ui elements what buttons are we going to use what forms are we going to use and building this design system it doesn't take long but by building it first and taking that little bit of time to define all these firsts is actually going to speed up your workflow and make the process go a whole lot smoother and faster in the overall project and real quick i have to point this out because if you're still at the newer stages of web design if you're feeling overwhelmed please do not be overwhelmed at all this is just an introduction to design systems in fact you could always start off using a regular pen and paper just inside of a notebook and you can build your design system inside of an opa now it is highly recommended i do highly recommend getting to learn one of these tools especially if you want to level up your skills especially if you see yourself you know becoming more of a high level designer it is ideal and recommended to get to know one of these tools i think figma is a great one to start off with uh first that is free and that is good for both uh mac and pc uh you also got adobe xd which is great if you have an adobe subscription adobe xd works great and if you got a mac uh sketch works awesome i personally am a sketch fan i even got a tattoo for it you know i love it but uh i also use figma a lot too because they all have their own pros and cons we're not going to get into any of that right now and i'm not going to get a figma tattoo at least anytime soon but let's go ahead and get into the design systems first i want to start off and i want to show you a design system right here that i created and here's the design system that i've recently put together this one is actually for our new lightbox website i thought this would be a good one to show for this tutorial i start off right here with our brand colors as you can see i only have five of them the more minimal you can make your brand colors the easier it is and the cleaner your design will be the font colors i only use two font colors again keeping it really minimal by keeping these minimal it's a lot easier to keep consistent if you look down here now i got my ui elements i define my buttons it's important to keep the buttons the same throughout the website sometimes we'll look at some websites and there will be four five ten different buttons some buttons will have different border radiuses and some of them will have completely different styles that makes it harder for the user to identify an actual button on your website by keeping all the buttons the same it makes it easier for the user to know these are the buttons on this website same thing with the form i just defined the form and then here this is probably the most important right here is typography typography in itself is actually not that easy i've had to study it and take a lot of time working on typography now here what i did here was i defined the styles on it here's the extra large our large title medium small our sub header and then the body text right here and then i use only this font right here on this one helvetica i chose to use only one font and if you're new with typography and if you're learning how to improve your design i highly suggest starting with just one font possibly two but the rule of thumb is to never use more than two by keeping just one font and starting off with one clean font first is going to make it a whole lot easier for your typography to be more consistent the second thing is it's going to help out with the loading because the more fonts you put on your website the slower your website starts to become and third typography is quite advanced when it comes to design it's not one of the easier elements to learn it takes quite a bit of studying and a lot of understanding and a good place to start to learn typography is to stick with one font and get really good at it by having this right here defined in the system with this one font this is all we have now we only have these font styles and inside my design these are going to be the only font sizes that i use defined here by doing this let me see we have one two three four five six six different font styles that is it by keeping those six right there things aren't going to be all over the place they're not going to be random and they're not going to look messy a lot of the times where something just fills off with the design and you can't put your finger on it it's because some elements are just random and they're not in line with the consistency of everything else all right so that's a design system and right now if you are feeling overwhelmed please don't you don't need to have a fancy looking one like this in fact you could start off with a pen and paper you could get a notebook and you could actually write these down first you don't have to use a tool like what i'm using here but i do highly suggest and recommend starting to learn one of these tools if you want to improve your web design game and you are looking to move up and move up your level in web design learning the tool and getting really good on one of these tools is going to help you get there okay so that's the design system now we're going to take this design system right here and now we're going to put it and integrate it into elementor this is where the fun begins so let's go dive into elementor now and let's start off in the back right here so this is a clean fresh install nothing's been added in here nothing's been done except i added elementor i'm gonna clean up my dashboard because i like a clean dashboard all right and then you could go and you could see here my plugins all i have are two elementor and elementor pro now you will need the pro version in order for this to work if you don't have the pro version yet go grab it real quick there is a link in the description by using that it really helps this channel but uh definitely go get that pro version and come back so after you got your elementor and elementor pro i suggest starting with the design system first before doing anything else to start with that let's go over to our pages and these are the default pages that come with a new install of wordpress i always trash these i like to start with a clean website let me delete these permanently and now let's create a page and we're going to create our home page now the reason why we want to create that page is we got to use the editor of elementor in order to access uh our design system so click on edit with elementor over here now click on this left hamburger you'll see right here it says site settings click on site settings and here is where we implement and add in our design system and a lot of the work is going to come right here in global colors and global fonts so the global colors right here what we're going to do is we're going to add these brand colors right here into our global colors as well as our font colors and then for our global fonts we're going to add all of our typography right into these global fonts now first there's one more thing that we have to do in order for this to work let's go back to your dashboard let's go over here to elementor and go to your settings from here you have to disable elementor's default colors and disable elementor's default fonts we're going to disable these so that way we could use our fonts in our colors from our design system so let's go back over to pages to home and you can just click on edit with elementor here go back to the hamburger to the site settings and we'll start off with our global colors we'll pick our first one our brand pink color right here you can input the pink and then right here too you can change the name i like to change all the names so it's easy for me to recognize so i'll put brand color one and i'm gonna go ahead and add the rest of these and i'll be right back [Music] [Music] okay now you can see that i have everything added here i got my pink my light purple my other purple my dark purple my black and my white for my text and that's what we have here for our colors now let's go and add our typography and we're going to do is exactly the same thing first thing click on global fonts let's start off with the big one right here i'm going to zoom in here so i can see it a lot easier and here i define my font size first for my desktop then for tablet and then for mobile i have my font weight my line height and my letter spacing and then everything is going to be helvetica so let's go ahead and put this in [Music] so [Music] okay and now i have all my global colors added you can see the colors are the same as the ones in my design system and i also gave them the labels that are easy to recognize then we go to the global font same here we got the extra large title large medium small title sub header and body header and everything is set up you know if we go and take a look you can see it's helvetica the s font size the font weight line height spacing it's all set up it's good to go now if we were to go back and say add a title in here go to your style go to your text color and i could choose to make it black right there go to typography click right on here and we can make it extra large i can make it the large title all my settings are right inside here so there's no more having to go through each individual and setting it up instead after you set up your global styles you will use this little global icon right here and set it up from there makes it so much easier the problem is when every time you're setting up an element and you're going back here and styling each one of them up they're going to be different they're going to be random and they're not going to be as consistent but now all we have are these six options for all of them makes it a whole lot easier to set it up and to get it done clean and consistent there's a couple more now to go ahead and do go back to your site settings and let's go over to buttons and from here we want to style up our own button so for our typography we could keep it we could actually use the global software typography we're going to use the body text right there let's go back to our button and even our box shadow we have a style up in our box shadow to keep even the box shadows consistent this is actually really huge right here to be able to keep all your buttons the same the same border radius the same box shadow the same layout and the spacing by doing that it just makes everything look so much cleaner i can't tell you how many times i've seen a web page and it'll have five six seven eight different buttons on that page and it gets really confusing with all those so let's go ahead and style this up okay now that we got our button styled up let's take a look at how it looks and go to the front end and i'll show you how it works let's drag in the button and you can hover over it and you see now we got the button straight out of elementor is now going to be consistent throughout the site we could put in now you know more put in the text that we want to use at our links also you can see from our design system we got the purple and pink buttons we're going to use you know everything is already built you could go right in here to your style and you can change it inside here so you can just change your background color right away and go straight into your global color so your global basically anytime you see this this is your design system right here and then the last one that you could do over here is go to your settings and go ahead and add your form fields and you can style these up your form feels just like you would do your buttons just like you would have done your colors and for your typography and all of these are going to be the same and that right there is how you set up your design system for your typography for your colors and for your ui elements right inside elements where everything is after this after you've set it up it's basically automated all you all have to do is now you add in text and you just choose which text you want to use you don't have to style each one of them up and same thing with your colors you just choose what color to use this is going to minimize all the guessing and all the random stuff that's being done in your website it's going to keep things more consistent but there's still one thing that needs to be done and hopefully this will be built soon in the elementor it's not built in there now but it's something you could do right now still now with the spacing and padding what i suggest to do is when you build your your your design system right here define how much spacing and padding on the top and the bottom of each section you will have for example for all of our websites we do i either use 60 80 100 or 120 pixels top and bottom i keep the top and the bottom even so this is your text if this is your elements or whatever it is in your section these elements right here you want to keep the same spacing on top and bottom throughout your entire website take a look real quick this is another design system that i built is also for our upcoming website a bit more advanced right here i added a few more elements but this is what i mean right here you could build something again you could also do something like this right inside of the notebook but right here what i defined was in this design we're going to do we're going to have 100 pixels spacing on the top and we're going to have 100 pixels spacing on the bottom and then 12 on each side and i do 12 on each side because when i start off with 12 and you go down to mobile you have just enough spacing for a mobile device by defining this in the very beginning as well this is going to make a huge impact on your design on your website it's going to make it look a whole lot cleaner often when i'm reviewing somebody else's design and something is off this is one of the key things that's usually off usually i could spot it you know the spacing is a lot higher on the top than it is at bottom or vice versa to find this in the very beginning you're going to make your designs a whole lot cleaner a whole much more efficient and it's just going to look a lot doper your skills are going to start to go up and you're going to start looking at things a whole lot differently when you start building design systems like this and luckily using elementor that has the tools right there for us to build it in well that's it for this tutorial i hope it was helpful if you have any questions drop them in the comments i get back to everyone i really appreciate you watching if you did enjoy this and want to be notified when i put out more uh web design and elementor related content please subscribe like you know all that good youtube stuff is much appreciated and i'll be back and see you soon thank you

Channel: Lytbox

Views: 8,753

Keywords: elementor design, elementor design tutorial, elementor design systems, elementor web design systems, elementor web design, elementor design tips, elementor design tricks, elementor design ideas, elementor design website, wordpress design tutorial, wordpress design system, wordpress design tips, design systems, web design systems, web design systems tutorial, elementor tutorial 2021, elementor tutorial for beginners, elementor tutorial, elementor pro tutorial, elementor pro

Id: q1vO8UwKE9k

Length: 20min 24sec (1224 seconds)

Published: Sun Apr 25 2021