[03] Building the Design System
Вставка
- Опубліковано 2 сер 2024
- Watch the full Getting Started with Elementor course here: elemn.to/gettingstarted
In this lesson we will build our design system for our website, to simplify the building process and guide us in styling our website's elements.
This lesson will cover:
✔︎ Configuring Site Settings
✔︎ Setting up Global Colors
✔︎ Setting up Global Global Fonts
✔︎ And much more!
Global Colors and Fonts used in this lesson:
COLORS:
Primary Color (rename: Grape) - 6759AA
Secondary Color (rename: Almond) - ffffff
Text Color (rename: Basil) - 3BBA97
Accent Color (rename: Raspberry) - EC465F
FONTS:
Primary Typography
Montserrat
Size: 65px
Weight: 800
Uppercase
Letter Spacing: -1
Secondary Typography
Montserrat
Size: 30px
Weight: 200
Transform: Uppercase
Line Height: 1
Letter Spacing: -1
Text Typography (rename - Body Text)
Montserrat
Size: 16px
Weight: 400
Accent Typography (rename: Button Text)
Montserrat
Size: 20px
Weight: 300
Transform: Uppercase
Letter Spacing: 0.8
+ Add Style
New Item #1 Typography (rename: Nav Menu)
Montserrat
Size: 16px
Weight: 400
Transform: Uppercase
+ Add Style
New Item #2 Typography (rename: Menu Titles)
Montserrat
Size: 25px
Weight: 800
Transform: Uppercase
Line Height: 1.2
Don’t forget to subscribe to our channel!
Get Elementor: elementor.com
Get Elementor Pro: elementor.com/pro
See also:
Everything you need to know about a Design System:
elementor.com/blog/design-system
How To Create a Complete Web Design Style Guide (Plus Template)
elementor.com/blog/web-design...
Chapters:
00:00 - Intro
00:18 - Design System overview
3:04 - Set up Global Colors
3:55 - Set up Global Global Fonts
![[04] Website Essentials: Layout, Header & Footer](http://i.ytimg.com/vi/KKnFuAWtvk0/mqdefault.jpg)
![[04] Website Essentials: Layout, Header & Footer](/img/tr.png)
![[05] Building the Homepage in Elementor](http://i.ytimg.com/vi/LjQptEShDJo/mqdefault.jpg)
![[06] Responsive Design & Connect the Home Page](/img/n.gif)
I just got started with Elementor and am loving how clear and concise these videos are. Thank you!
Best tutorial ever i found , made me understand Elementor easily
really love the design system guide as this gives you a building block for how every section and parts of your site looks, feels and interact with the end user.. do you have a template to follow every time you build a site and can it be shared here. Thanks
I'm really enjoying the course so far. Plus Aviva's voice is super hot, which just adds to my enjoyment 😊 I've been reading the comments and I realise some people here are completely new to UI and web design and are finding it hard keeping up. It's true that the course is not 100% newbie friendly and assumes prior knowledge of a few design concepts. Sorry, guys. To design for the web you kind of need to know how to design user interfaces, in Figma, Adobe XD, Sketch, or whatever programs people use out there. Elementor is just like one of these UI design programs except that you don't need to worry about coding whatever you're designing afterwards. It does that for you. It's also easy to use if you only take some time to study its interface and at least know how to drag widgets to the content area and configure them. Just stop watching the rest of the videos first and take as much time as you need to study Elementor's interface and dragging stuff to the content area and tweaking their styles. All the best!
I thought I knew everything about Element, and I was wrong. This is a great tutorial.
Take the course on Elementor, 'how do I create a course for beginners'. You are making great strides and talking about things that a beginner does not know.
its good if elementor provide a default style guide page or a XD or Figma file to start the Design System based on Elementor Framework
Great idea, Slim P. We will pass this on to the team.
Hey Slim P, we've uploaded our first Figma to wireframe design template in the Figma Community. You'l find it here: www.figma.com/community/file/1143518282749788055. Look out for more templates in the near future.
I'm Polish. I learn it in English and German. Whew, I hope to create my own website 😅😃🖖
I see you use Uppercase in the Primary Typography but it does not have the UPPERCASE look. It looks Capitalised instead. Mine looks UPPERCASE. How did you arrive at that @ 4:08? Thanks.
Hello, and thanks for the great videos! I have two questions about lesson 3: 1) Your design system (created in Adobe XD) slides into the screen at 3:36 on the video. Is that actually being imported into Elementor, and if so, how do you do that? 2) Are you limited to the fonts available in the drop down for Global Fonts? I created my design system with some fonts that don't appear in the drop down. Thanks!
in fact, i have been stuck here for days now
I’m with you on your first question, I want to see the design system process
Why I couldn't found the monsterat font in Elementor?
How do you view the changes instantly? When I update my global colors/font it wont update until I press update, close the page, reload the page and then it will show. I solved this by following your debug in safemode thanks for that write up! Anyone has this issue for me the particular plugin causing the issue was installed by default and called "Page Optimize".
As much as I have appreciated the videos before (Thank You!) I think some users get thrown off at 1:00 with the file (I know we can use our own) but how did it get where it is. Did you add it using a widget and which widget was it?
Hi Rak, we created this file in the Adobe XD application, not in Elementor. There is a wide range of prototyping tools available, and since different people prefer different tools, we have not shown specifically how to create a prototype and design system, but rather how to implement one into Elementor, once you have one created.
How do you load the style sheet into Elementor?
It seems there are already Global styles there from somewhere after installing a theme. I assume each theme comes with its own set of global styles, and it's up to us to edit those global styles or add our own in order to design using global styles, which is the "best practice."
Hi A Train, to clarify, are you referring to a WordPress *theme* or Elementor *kit* ?
A WordPress *theme* is installed from the WordPress dashboard, and in the case of this course we use the Hello theme, which does not add global styles to your website. It is very basic and depends on Elementor for its styling.
An Elementor *kit* is installed from the Elementor Kit library and come with preset global styles. This course does not use a kit and is better suited towards creating from scratch.
If you are interested in a course that uses a kit, please check out our blog course elemn.to/blogcourse
@@Elementor my every icon in style sheet of elementor is pink not blue, why?
This is great, but now I need to learn Adobe XD? I know UX skills are valuable but geez, I just want to make my website look good.
Hi What the Heck, as mentioned in the course, you should use whichever tools you feel comfortable with. You can even use a whiteboard or pen and paper. Using a design system is a suggested best practice, and we explain how it can help structure your website and make the building process more efficient. But it's not a requirement. You should do whatever works for you.
Why does my version not have "content", "Style" and "Advanced" tabs when editing the heading? In fact, I don't have any of those style tabs when editing any of the widgets or blocks
Hi Daily, can you hop over to the Elementor Community thread for this course and post your question with screenshots there? elemn.to/gettingstartedforum
@@ElementorI just did that, thank you so much
How I can practice "Building the Design System" ?
3:34 How did you magically hold the color swatch down and turn it to grape??
Hi Mel, we clicked the color picker and pasted in the same hex code used in the XD design (which was displayed on the right side of the screen). You can of course paste in any hex code you'd like.
@@Elementor Thanks! Went by so quick it looked like you double clicked. I ended up screen shot-ing and importing your style sheet then using eyedropper. Which "magically" had already IDed all 4 colors. ( they were floating above the eyedropper cursor as choices.) Made me wonder if those colors are already in the template somewhere or if the eyedropper pre-scans a graphic somehow?)
What if my chosen font (Aviano Flare) is not available in Elementor? Is there a way to add fonts?
Hi Kerry, Elementor Pro subscribers can upload custom fonts or use the Adobe Fonts integration.
Please send all files about pictures logo
Hi. Your auto-generated subtitles are set to Vietnamese. You have a very clear voice and I think that if you set them to English, they'll be pretty clean without much editing. Then anyone can auto-translate your English subtitles into their native language and understand you, even if they don't understand English very well.
Hi טבע אנושי, we've fixed the translation issue. Thanks for letting us know about it.
🗽
Should i learn Adobe XD as well ? or will the client provide me with the design ?
i dont even know what do again
Please add a two-second intro in the beginning of each tutorial to navigate from WordPress/Elementor to how get to where you are explaining. Every day I watch one segment and I have no idea how I get to where you are explaining the next day! Even an excellent tutorial can be improved!
Thanks for your suggestion, Yu li.
Anyone else not realize we were supposed to follow her as she did the style changes? Just me? OK.
Hi Jackie, thanks for sharing. We've added a list of all the colors and font styles used in this lesson to the description to make it easier for you to follow along.
@@Elementor FYI the Nav Menu settings are missing from the description.
the CC is in vietnam please change it to english
Nice tutorial, but the Global setting specifications are not complete: the #2 Custom Style is missing in the description, also, it is better to clarify what measures you are using. For example for line-height in the Secondary Typography. It may not be obvious for starters that EM should be selected instead of PX.
Hi Carlin, thanks for pointing out the missing style. Here it is:
+ Add Style
New Item #2 Typography (rename: Menu Titles)
Montserrat
Size: 25px
Weight: 800
Transform: Uppercase
Line Height: 1.2
We will also make sure to add it to the description. Note that any options not written in the styles were left as the default setting.
My "site settings" tab does not turn blue. Not sure why!
Hi currieburgess, there have been updates to the Elementor Editor since we published this course. The tab now remains black.
How do I remove the Home, Menu and Contact Us title appearing on the page
@Veshant05, click the gear icon ⚙ (Settings), toggle Hide Title to "Yes"
Very confusing video. What widget do you bring over.
Hi Mark, thanks for your question. Only the Heading widget was used in this lesson. It's not necessary to add any widgets when setting up Global Font and Color styles, but we have used them in order to preview our settings as we applied them.
1:42 Were we psychicly supposed to know to have 4 headings ready? Or was that supposed to be a speed test to whip 4 headings into shape in a second or two? ... uh I failed
Hi Mel, we used the headings to demonstrate how Global Colors and Fonts work. There's no need for you to add these headings since they aren't used on the website, and we delete them at the end of the next lesson. If you'd prefer to add in the headings and follow along, feel free to pause the video and drag in four headings, which we learned how to do in Lesson 02.
This tutorial series was very clear until this video. It's confusing about where the sample design system comes from and how to use it with Elementor!
Hey Miguel, we created the design offline in Adobe XD to show how you can take a design created with any prototyping tool, and use it as a guide to build your design in Elementor. The main idea here was not to learn how to use prototyping software, but rather to recommend a workflow of beginning with a mockup or prototype of your website, styles, and branding before building with Elementor. It is a recommendation, not a requirement. Hope that helps clarify, and you can can produce with the course to create your website.
Why are the auto-generated subtitles for this in Vietnamese??
I was wondering that myself! And if you use the auto translate you get some really strange things.
It automatically showed up in English for me but if you click on Settings>Subtitles/CC>Auto-translate>English you should be good.
I cant see my custom colors. It not updating. Its not changing
Hi Olayinka, please try clicking Update and then refreshing the page. If that doesn't work, note that these kinds of things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? It's a great place to ask questions like this, and get solid advice from other web creators. And you can share screenshots and links there as well: facebook.com/groups/Elementors.
I like the videos but missed how you got to Edit Heading section.
Hey Georgia, which Heading? Did you mean the Header? If so, click the hamburger menu at the top left of the Elementor editor > Site Settings > Header.
No matter what I do, I don't get a blue Site Settings title and I don't get the Headlines panel on the right side. I've repeated your moves 20 times. I don't get it.
Hi Edward, these kinds of things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? We've created a special thread for questions relating to the course, and you can share screenshots there as well: elemn.to/gettingstartedforum
@@Elementor "You are not authorized to access this page" with account logged in.
Where is the "inner section"? This isn't showing.
Hi Georgia, if you have Flexbox containers enabled, you will no longer see the Inner section widget.
You lost me when you introduced the headings that you made in adobe. Now I am completely lost. Otherwise excellent tutorial, I was actually learning and building along with you till then.
same here
Me too, it was going so well up until that point
Totally confusing. Why is this not part of elementor? Also what are free options since XD requires a monthly sub after 7 days.
THAT IS WHAT I SAID STEP-BY-STEP SHOULD MEAN STEP-BY-STEP NOT GOING OFF CAMRA AND DOING ANYTHING NOTHING SHOW US WHAT YOU ARE DOING STEP BY STEP HELLO
@@sundog3944 YEAP THAT'S WHAT I SAID SO DISAPPOINTED REALLY
✔️⏰️
you could just shared a copy of the XD file
To make this tutorial better, you should have included the design template you created in Adobe XD rather just say make your own or use whatever.
Thanks for your suggestions, MartyL.
you should have shown us how you added the 4 widgets instead of adding them already and start editing them
@amrfattal3487 thanks for your suggestion. That segment was a demo of how Global styles work. We learn how to add widgets in Lesson 5: ua-cam.com/video/LjQptEShDJo/v-deo.html
Elementor is the best but in this video you said you already added a heading instead of to teach us how to add a heading please.
completely lost us in this lesson, how are we supposed to follow along ??
Hi J, which part specifically? We'd love to help you out. You can also post course questions on the Elementor Forum course thread: elemn.to/gettingstartedforum
@@Elementor I suggest beta testing these vids with real people (some beginners) and note where they start to freak out. There were numerous head scratch moments in this video ... and I'm semi-experienced.
@@seriouspipes i agree, I've had to build a few websites in my day thankfully I don't have to do them from code anymore, but I'm stumped about how she got those head elements into the right side of the global theme settings is that a page is that something we can import what is that??
These tutorials are hair pulling. I can´t understand if these are geared toward beginners or advanced.
I would think the idea is to get people hooked and loving the product.
I have been trying to APPLY what I am watching but find it difficult as a total dumbass when it comes to Elementor.
This tutorial is for beginners but it's way too fast especially on applying Global Style! I watched 2:44 over and over and still could not follow along.
Hi T Tanya, this part of the tutorial is just for demonstration of how global styles work. We actually begin to create the styles at about 03:08. All the colors, fonts, and their names are listed in the description, so you can copy them from there, if the video goes too fast.
@@Elementor Would have been nice if this were mentioned in the video...or better yet have been demoed realtime in the video. I watch a video to see/hear things being done and follow along. As it was, I was madly trying to pause at the right moment and read the typography settings.
no tutorial on this "design" you never mentioned that in the past 3 vids!!! never explained it at all!
@joem thanks for your comments. Many web creators prefer to create a prototype before building their websites, when they start from scratch. But it is a *preference*, not a requirement.
There is a wide range of prototyping tools available, and since different people prefer different tools, we have not shown specifically how to create a prototype and design system, but rather how to implement one into Elementor, if you have created one.
Suddenly we start talking about an XD file made with Adobe, then you go to the website that looks completely different from what we experienced. This is not a course for beginners.
This was supposed to be step by step then in video #3, you do a design setting in adobe something. IF I KNEW HOW TO DO DESIGN I WOULD NOT BE WASTING MY TIME WATCHING THIS WHICH I FEEL LIKE I DID ANYWAYS BECAUSE I DO NOT KNOW HOW TO DO DESIGN SETTINGS SO I AM WONDERING IF I SHOULD JUST FOLLOW ALONG ANYWAYS OR JUST GIVE UP NOW B4 I WASTE ANY MORE TIME THAT I DO NOT REALLY HAVE??? SOMEONE ANYONE, PLEASE HELP ME LEARN WEB DESIGN WITHOUT HAVING TO PAY A HUNDREDS OF DOLLARS TO LEARN!!!
You said it was for beginners but it really is not for new learners it is for someone that knows A LOT MORE THAN I DO IT IS REALLY STARTING TO MAKE ME MAD!!! STEP-BY-STEP SHOULD MEAN STEP-BY-STEP!!! Not you going off-camera and doing headers and design settings or ANYTHING for that matter STEP=BY=STEP you should show us people that are eager to learn how to do this STEP-BY-STEP. I AM GOING TO WATCH FOR A FEW MORE MINS TO SEE IF I CAN FOLLOW ALONG BUT SO FER FOR ME IT IS VERY DISAPPOINTING
The presenter is terrible. She does to much "Click Here", "Let's go ahead and do this", She needs to verbalize what she is clicking on more. She does this in every intro, but changes her approach when she is actually accessing new functions.