How to Use Web Design Systems with Elementor

✨ Join us in the Lytbox Academy Community:
lytboxacademy.com/join-us/
The key to a clean web design is consistency. In this video, we look at what a design system is, how to create one and use them with Elementor.
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy.com/design-with...
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy.com/seo-for-wor...
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy.com/maintenance...
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy.com/the-academy/
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy.com/cloudways/
xCloud:
lytboxacademy.com/xcloud/
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy.com/elementor/
Breakdance Builder:
lytboxacademy.com/breakdance/
Bricks Builder:
lytboxacademy.com/bricks/
Crocoblock:
lytboxacademy.com/crocoblock/
SEOPress (the best SEO tool for WordPress!):
lytboxacademy.com/seopress
Perfmatters:
lytboxacademy.com/perfmatters
InstaWP:
lytboxacademy.com/instawp
WP Umbrella:
lytboxacademy.com/wp-umbrella
/////
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementorwebdesign #elementordesignsystems #elementordesigntips elementor design

[@LytboxStudio]

🔗 👉 Here's a Figma link to the design system Iused in this video. Feel free to use it as a template for your projects! - www.figma.com/file/Xqia4VvRS9Azl7C3b3Rqd8/Design_System_Template?node-id=0%3A1

[@iamalifawad]

I was looking for this file 🙂

[@SEO-Search-Engine-Optimization]

Amazing. Hope you can also share the template file of Global setting which you just designed .

[@_mzkr_]

This is by far one of the best Elementor setup videos that are available. Setting up a Design system and integrating into Elementor (or really any other CMS) is an integral part of a professional workflow and very few people seem to be covering it. Elementor in itself is like a door opening to a massive universe of possibilities and I personally got lost. Finding where to do the initial setup and the process seemed (to be honest) far from intuitive but it is great to have someone walk through the process and put all the pieces together. Thanks Jeffrey. Really appreciate your walkthrough.

[@LytboxStudio]

Hey Murray I'm so glad to hear this! Many Thanks 🙏💜

[@maddicryer4354]

Can't thank you enough Jeffrey. I only just found your tutorials on KZbin and I really believe it will be the making of me and my new business. I am learning more in just a few of your videos than any course I have taken previously. Just watched the Headings video for May 4 and it was EXCELLENT!! Will use your links to purchase stuff and I hope the other guys here will too as a great big thank you!!🙏 Maddi

[@LytboxStudio]

Hey Maddie, wow thank you so much for this. Many Thanks 🙏💜

[@loganhoneycutt5398]

There needs to be more content about this topic! I've been searching for months and barely find anything wordress design system related, it's always more dev/custom app focused.

[@LytboxStudio]

Thanks Logan, it's really great to hear this!

[@damianmigaa7474]

Bro, amazing tutorial. I want more ;)

[@LytboxStudio]

Thanks mate! More are coming 💪

[@sidneyjohnson6895]

Thank you taking the time to make a tutorial on Design Systems. This has always been there but no one has taken the liberty to break it down in simple terms. This hits home for those looking for more efficiency and impact. This actually felt like a design class. Detailed Focused, concise, no fluff, and easy to follow. Awesome!

[@LytboxStudio]

Hey Sidney thanks! I really appreciate this! 🙏

[@risingstar1501]

am totally agreed with @sidneyjohnson6895

[@FahdJeddah]

Thank you Jeffrey very much for these important video , you really made things easier to me.

[@mario312]

You rock, hope Elementor keeps adding things that let us lock in a lot more up front,.

[@LytboxStudio]

I believe they will. El is totally focused on the future and will keep getting better!

[@lewdennen8807]

Great and helpful video! I appreciate how you carefully detailed each step of the process so anyone could understand what you were doing and why. The amount of times I've tried to make changes to my own site using the installed fonts and colors and screwed up my site in the process is crazy...this makes it SO much simpler. Thanks for posting it!

[@LytboxStudio]

Thanks Lew! I have also gone through the same that's why love this Elementor feature!

[@victorfrancis6479]

Thanks- I’m creating my own website and tutorials are easy understand- I’m looking forward for more of this kind of tutorial 👏🏿👏🏿👏🏿

[@kennb.4169]

Really well presented and paced, as if you are talking straight to me... Thank you.

[@DarrenStarr]

Thanks that was a great tutorial and covered something I haven't seen from other KZbinrs. It brought a lot of clarity to consistent design. Thanks for that! Subbed and Liked!

[@LytboxStudio]

Thank you for that! Much appreciated 🙏

[@Atulwebdesigner]

Really useful video Jeffrey. Got a lot of clarity on how to use the design system before going live with the project. Thanks.

[@tomsbondars9224]

Great video, but I'd suggest using the EMs for your fonts instead of pixels. This ensures better scaling, therefore improved readability. You can easily use one of the converters, if you design in pixels in Figma/Xd, to determine the scale increase.

[@LytboxStudio]

Great point. PX vs EM has been a debatable topic. Using PX isn't wrong but using EM or % is better for usability as users can scale their screens and not break the layout of the design. And using EM is needed for ADA compliance. I'm glad you brought this up!

[@laxminarayannayak5747]

Elaborate and systematic, no scope for any doubt. Helped me a lot in bringing clarity and sanity(after you watch several tutorials). Thanks Jeffrey.

[@LytboxStudio]

I'm so glad to hear! Many Thanks 🙏💜

[@pedromiguelpagan-rivera8970]

Thank you. Really useful.

[@miguelalejandrobritorausse5023]

Awesome training. I figured it out that i needed a video like this one. Cheers from Venezuela my friend.

[@LytboxStudio]

Thanks my friend in Venezuela! All the way from Thailand! 🇹🇭

[@koteshwarpanuganti3507]

I just started learning wordpress with Elementor. Your system will definitely help me and will go a long way in my web-designing career.

[@LytboxStudio]

I'm so glad to hear! It's an amazing career to have. Keep it going!

[@aslike4me]

Thank you for sharing such a wonderful information & taught how to use them... I really appreciated!!!

[@LytboxStudio]

Much appreciated🙏

[@RealSpicyKitchen]

Thanks a lot Jeffery

[@LytboxStudio]

Thanks!

[@meisterleise]

Hey Lytbox, I totally agree with you. I'm a designer too. But one thing I would do different: I would avoid fixed dimensions like pixels for typography and margins and many other things. I'm using vw, vh, %, em. That can safe you a lot of time for the responsive design. And also a font shouldn't have the same size on a 20" Screen than on a 27" screen.

[@LytboxStudio]

I agree with the fonts, they should be with rem or em for accessibility purposes. For spacing px, vw, vh, %, or em can be used. There's no right or wrong and is more subjective. What really matters is that we use a system that is consistent.

[@Coloroutdline]

Educational. I'm still learning and this was very helpful.

[@LytboxStudio]

Glad it was helpful! Many Thanks 🙏💜

[@amrobbie]

Amazing thank you!

[@LytboxStudio]

Many Thanks 🙏💜

[@MDALAMGIR-hg8lr]

Something Awesome to Learn. Thank you, boss.

[@LytboxStudio]

Glad to hear that!

[@vladypetreov]

Awesome job ❤

[@parthosarkar5270]

Wow I knew this setting, but never used it. It was right in front of me LOL. I always used copy style, but this is much better. Thanks man, this is useful!

[@LytboxStudio]

I also always used the copy style until recently and this has made everything so much faster!

[@emirbasha1410]

I was really overwhelmed about the web design process until I came across your video It helped me a lot to easily understand the process Thanks, Jeffrey!

[@LytboxStudio]

Great to hear!

[@idegraphicdesign6522]

Do we need to install a Child theme every time we create in Elementor/Wordpress? In addition, I just want to know your opinion regarding Webflow vs. Elementor what is the best? Because, I've come across some tutorials Webflow does not need to update plugins everytime compared to Wordpress. Please enlighten us. Your teaching are very clear and easy to follow. And you fully understand the design principles. Thank you for being so generous! -- great help! 😊

[@LytboxStudio]

Hey sorry for the late reply. It's best practice to add a child theme always even if one is not needed. It may be needed at a later time. I've heard a lot of good things about Webflow and know some amazing designers that only use Webflow. I personally stick with WordPress because it's open source and doesn't have the limitations a closed source platform like WF has. And Elementor is my main tool for building WordPress sites. They both have pros and cons.

[@emreergul2218]

6 minutes into the video and stopped to say this; i've watched so many tutorials about web dev. on youtube that i can feel if a video is extremely good or not. Yours is extremely good and well produced sir. Thanks for that. I've been trying to create a comprehensive guide on Wordpress & Elementor, these types of content was the part even i don't know how to do, i'm feeling like most of your videos are going to help me ton. And if you have a discord or something, i'd love to join that as well. Stay healthy and take care.

[@emreergul2218]

And one more thing, i've done all those global settings in Elementor without needing the PRO version, in what section exactly do we need that version?

[@LytboxStudio]

You’re right, it does work on the regular version 👍

[@carlosvettorazzi8147]

Jeff i love your videos . Great 👍 work! The design system that you start out with in the video is that a special program you're using? Is there any special program to create the sign systems that you can export later?

[@TrishaLeconte]

Hi. I am new to Elementor and love it. Is there a way to globally set the container padding for the sections? Maybe through custom CSS? Thanks.

[@benjah221]

Amazing!!! Thank you!!! If I change h-tags, will the design changed?

[@YasienSarlie]

You gave me an idea to see if the clam () function will work in Elementor, for responsive text sizing

[@LytboxStudio]

Interested to hear how that works!

[@RandyHectorTheRealtor]

You are the greatest in youtube❤

[@md.khorshedalam5814]

Thanks a lot

[@LytboxStudio]

Many Thanks 🙏💜

[@shanefisherconnectedmallor4186]

Great video thanks

[@LytboxStudio]

Thank you. Much appreciated 🙏

[@omerta3393]

Love your videos 😍

[@LytboxStudio]

That’s awesome thanks!🙏

[@umerfarooq3176]

Thank you sir

[@LytboxStudio]

Many Thanks 🙏💜

[@clementyo4526]

Awesome Jef 😁👍💪

[@LytboxStudio]

Thanks Clement! 🙏

[@ewanly34]

Thank you for your quality content. I visited your landing page of "Building & Selling WordPress Maintenance Plans" even so I've a highspeed internet, your video there is loading so slow. Like I'm waiting 10-15 sec to watch 3 sec.

[@LytboxStudio]

Hey Esam sorry for the late reply and thanks for the feedback. It was a temporary landing page and the new has launched with a new solution for hosting videos. Thanks!

[@TheJASDrummer]

Wonderful explanation and Presentation Jeff! My question is how do you know what font sizes you will need when doing this style guide? Have you already done a wireframe or mockup? Or do you just have a feel at this point?

[@nubenegra809]

Excellent lighting man! Nice setup, any tips?

[@LytboxStudio]

Many Thanks 🙏💜 And yes, keep it simple and minimal! I'm still learning to to create better quality videos and decided to keep it simple and to continue learning.

[@eskerinola5845]

Hi Lytbox. Thank you for your lesson. I might be missing something. If you will be using one font only throughout your entire site, why don't you set that font as DEFAULT to avoid having to set it (always Helvetica in your example) in every entry in the typography sections? Cheers. PS: I wouldn't know where to reset that default font family though :)

[@LytboxStudio]

Thanks and that’s a great idea. But to make the global styles to work we have to disable default fonts and colors in Elementor settings. But if using just 1 font, a simple CSS snippet could take care of that too.

[@NickGrimshawe]

I loved this. I am looking to upgrade the look of my website. I knew about the global settings but used them at a very basic level. What I didn't understand from the video is how to put the text sizes into the global settings area. And one question if you change the global setting will that change everything on the whole site? Two should pages and posts have the same settings and look?

[@LytboxStudio]

I add all text styles into the Global Typography. Then apply the global style to each font. If you change the font style in the global typography it will apply to all text using that style. It's an easy and fast way to update styles.

[@stefanpfadt4353]

Beautiful video mate! What camera equipment are you using if I may ask? The colours look so vibrant and crisp.

[@LytboxStudio]

Many Thanks 🙏💜 I use a Sony a6400 with a sigma lens.

[@jackies35]

Thank you for this. When I import any new template, would this remain the same and ignore the settings of the template theme? I did check the boxes in the settings. I did noticed after I load a template, the iPhone was a bit off. Let me try it again and record it.

[@LytboxStudio]

You can import and export the design systems using the new ‘Kits’

[@DevPalliSri]

Great video. Is sketch logo you had is permanent one?

[@diegoxntvo]

Thanks bro!, that was a great and helpful video!. Today I put it into practice but is there a way to grant global settings specifically for the mobile version?

[@LytboxStudio]

Sure there is for global fonts. There is an option to style for tablet and mobile in the global fonts styler. I always style for all 3. Saves so much time!

[@fabrictexture4767]

stay blessed

[@swiftwraith]

Great video Jeff, will you be sharing templates for these? I've always been a "just go for it and make it as you go along" type of guy but I now see the need to offer my clients more and thus increase my margins by giving them a more detailed design process.

[@LytboxStudio]

@Anthony Thanks! I just posted the template link pinned in the top comment.

[@LytboxStudio]

www.figma.com/file/Xqia4VvRS9Azl7C3b3Rqd8/Design_System_Template?node-id=0%3A1

[@aci25v]

You create a design system for each web design project? By the way, good video.

[@LytboxStudio]

Thanks! And I sure do. No matter how big or small, I always have a design system ready before building a site. After doing this process a few times, it becomes easier and faster. And spending an hour on this part of the process will actually save more time throughout the project and will get much better results

[@LeoMerkel]

Very good information. Tnx for that. Would you make the document "Elementor Design Systems" as Elementor Template available? Very much appreciated.

[@LytboxStudio]

Thanks and most definitely. I have that Templates in the works!

[@entrepreneurcity3317]

I enjoyed this, do you use this same system for all of your sites?

[@LytboxStudio]

I do, and depending on the project they're sometime more simplified or more detailed. Every project I start with a system just like this and I'm always looking for ways to improve the systems.

[@Thrive-WP]

So on your spacing. If you have your first section with one block of text you have 100px on top and bottom then you add another duplicate section. The gap between text is then 200px so do you then reduce either the top of bottom of one of the sections to ensure the gap between text is 100px. Just curious! I suppose it also depends if the sections have background colours as then its probably fine the keep that 200px gap between text as 100px will be on one colour and 100px will be on another. Hope that makes sense! 🤣

[@LytboxStudio]

Great question. It does depend on the background of each section. If the 2 sections have different backgrounds then I’d keep even padding on both. But if the 2 sections have the same background, say a plain white background, then I’d space it only 100px or what my top and bottom spacings are in all my sections. I wouldn’t double up the spacing because there would be too much then and the consistency would be off.

[@Thrive-WP]

@@LytboxStudio Thanks. Yeah this is pretty much what I do just wondered if you did the same. 👍

[@BrockBarr]

Nice tutorial. I didn't understand spacing? What elements did you mean?

[@LytboxStudio]

The spacing is the top and bottom between sections. Also the side spacing. Many times when I see a site that looks off, the top and bottom spacing is inconsistent. I like to define top and bottom pixels between sections before I start building. It is usually either 60px, 80px, 100px, or 120px for my designs.

[@benjah221]

Do you have a tutorial on how to set up such a design system as shown @4:24 minute? That would be so cool

[@muhammadaslan6256]

thanks sir can you share with us the design system on figma ?

[@irfantemur6275]

Thank you Jef. I just tried to use the design system as well. But I used the Typography Settings ( like H1, H2... Span, p) in Elementor, which you have skipped. How do you configure these settings?

[@LytboxStudio]

Good question! I actually don’t set up the Typography settings in the Theme Styler at all. I let that be. I only set up the design system, then when I add a Heading widget, I select which heading tag to use with the style I have set up in my design system. This gives me more control over the typography styles and SEO. Some H2 tags could be small sub headers and large titles so the Typography Styles would conflict.

[@clementyo4526]

Hi, Irfan. Just want to share my opinion. I usually set Headings 1 - 6 for blog post. But for general pages like homepage, about etc, most of the time needs some font sizes different with the blog post. Usually sun heading, extra large heading on the first section (Hero) and large heeding for the 2nd section and so on. What do you think @jeffrey?

[@LytboxStudio]

@Clement I use the same method. I style up my headers with CSS for blog posts. Everything else I use the design system.

[@irfantemur6275]

Thank you Clement and Jef. Thank you for your insights. I will give it a try at my next project.

[@LeoMerkel]

@@LytboxStudio Me the same. Lot more flexible.

[@wancukjie]

This helps a lot. Would you mind sharing your Figma file to us? I think it can be used as a template and expand it to a more complex one.

[@MDALAMGIR-hg8lr]

Yes, it will help me also. Thank you, Mr lkhwan

[@LytboxStudio]

@Ikhwan I just added the Figma link to use as a template pinned in the top comment. Here it is - www.figma.com/file/Xqia4VvRS9Azl7C3b3Rqd8/Design_System_Template?node-id=0%3A1

[@nemo6630]

after watching the video everything is well explained. but i am annoyed and confused by elementor's new global fonts menu. I don't know how to handle it properly should i just ignore the 4 system fonts and create my 6 custom fonts or I put 4 system fonts and 2 custom fonts? but... why won't they let us modify the 4 system fonts? and why two zones now? my god the confusion...

[@LytboxStudio]

I feel your pain. Thai so something I wish would be fixed. I think we can rearrange the system fonts now, but would like to remove completely. What I do is I disregard the system fonts and system colors and just use my font styles from my design system and rename everything.

[@johnwhaley435]

Do you have different font sizes for tablet and mobile view - elementor allows for this in global fonts

[@LytboxStudio]

Yes I do, always. I have these in my Style guide in Figma and set them up in Elementor. Such a time saver!

[@RealSpicyKitchen]

is there any way to Import/Export and Rearrange Global Fonts (typography) and Colors ?

[@LytboxStudio]

There is! Use the Elementor kits to export and import global colors and font styles

[@felixrivera2691]

Typography, When setting the global fonts in Elementor, for desktop, there is no way to also set up the font size for tablet and mobile. In your example, you have 6 font sizes, Extra Large Title, Large Title, and so on. Each font category has three font sizes, desktop, tablets, and mobile. Unfortunately in Elementor if you want to have all of the fonts sizes available you would wind up with a global font list of 18 elements, and that is for just one font. If you are using two fonts the list would grow to 36 elements. It would be nice to be able to set the font size for all screen sizes at once. Then when creating a page for the desktop you can have a check box for desktop and the same for tables and mobile.

[@LytboxStudio]

Hey Felix, I know this is a bit late of a reply. Did you find the solution? There is an option to set global font styles for tablet and mobile as well. Let me know if you know if you have found it yet. Thanks!

[@wgm247]

You forgot the H1 - H6 in typography for when entering in text in the left panel. If not defined it will be inconsistent with your global fonts

[@LytboxStudio]

I didn’t forget, I purposely don’t set that up for SEO reasons and with Global Fonts we can still maintain consistency. I just put out a video yesterday about setting up H1-H6 tags for SEO and why not to set them up on Typography Styler - kzbin.info/www/bejne/hoqsi5upjMSSn7M

[@wgm247]

@@LytboxStudio just saw your follow up video.. great stuff

[@LytboxStudio]

Thanks!

[@marionpaolo319]

How to create a design set please.

[@LytboxStudio]

I do have plans for these tutorials soon

[@marionpaolo319]

@@LytboxStudio this would be perfect since Im also starting to learn figma. 😁

[@victorfrancis6479]

Could you email me the notes you use on this video - this want I was looking for the setup