{"id":1711,"date":"2021-06-20T10:26:10","date_gmt":"2021-06-20T10:26:10","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1711"},"modified":"2023-02-22T09:36:50","modified_gmt":"2023-02-22T09:36:50","slug":"global-colors-fonts-creating-a-design-system-with-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/","title":{"rendered":"Global Colors &amp; Fonts: Creating a Design System"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1711\" class=\"elementor elementor-1711\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-55208735 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"55208735\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-10e2387e\" data-id=\"10e2387e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2830e4fd elementor-widget elementor-widget-video\" data-id=\"2830e4fd\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=OvETB43I7_w&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5e153599 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5e153599\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3bc74d08\" data-id=\"3bc74d08\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-14dfd706 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"14dfd706\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-3501\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-3501\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-3502\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-3502\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-3501\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-3501\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-3501\" tabindex=\"0\" hidden=\"false\"><p>Join Ziv, Elementor Educator \ud83c\udf93 for a webinar on Creating a Design System with Global Colors and Fonts with Elementor.<br \/>You&#8217;ll learn how to:<br \/>\u2713 Create a homepage step-by-step with Elementor.<br \/>\u2713 Use Elementor\u2019s free templates Library.<br \/>\u2713 Build a design system with Global Colors and Fonts, and understand how it can be applied to existing as well as new sites.<br \/>\u2713 Save the page as a template, with global styling already setup, and use it to create a contact us page.<br \/>\u2713 Learn how Theme Style &amp; Global Colors and Fonts can be used together, to create an even more streamlined design system.<br \/>\u2713 Discover how to make your designs 100% responsive.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-3502\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-3502\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-3502\" tabindex=\"0\" hidden=\"hidden\"><ol><li><strong>Intro:<\/strong><\/li><\/ol><p>\u00a0<\/p><p>Hi All, and welcome to this Special Global Colors and Fonts Webinar. I am Ziv, a web designer and Elementor\u2019s Lead Educator. And Today we will build a 2 page mini site based on a free template from the Library.<\/p><p>We will focus on Elementor\u2019s Design System features and see how to set up and apply Global Colors and Fonts.<\/p><p>As you know, Colors and Fonts are the building blocks of a web designer\u2019s work.. and are assigned to elements consistently throughout your site.\u00a0<\/p><p>Elementor\u2019s Design System features allow you to take control of your site&#8217;s colors and fonts more easily and save lots of time in the long run by creating a go-to-color palette as well as a collection of font styles, which you can assign to elements globally, and all from one place.<\/p><p>\u00a0<\/p><p>Okay so what exactly are we doing during this webinar:<\/p><p>\u00a0<\/p><p>We will:<\/p><ul><li>Create a homepage step by step, based on one of Elementor\u2019s free templates. BTW I am using Elementor&#8217;s free and lightweight Hello Theme.<\/li><li>We will see how to style the page with global colours and fonts, and understand how it works on existing as well as new sites.<\/li><li>We will save the page as a template, with global styling already setup, and use it to create the contact us page.<\/li><li>We&#8217;ll see how global fonts can be setup for mobile and tablet devices<\/li><li>We\u2019ll also check out some other global settings that come in handy<\/li><li>Lastly we will go over Theme Style and see how it can be used together with Global Colours and Fonts to create an even more streamlined design system<\/li><\/ul><p>\u00a0<\/p><p>\u00a0<\/p><p>Okay so I\u2019ll go ahead and share my screen and let\u2019s make a start<\/p><p><strong>\u00a0<\/strong><\/p><p><strong>TRANSITION TO SCREEN SHARE<\/strong><\/p><p><span style=\"text-decoration: line-through\">\u00a0<\/span><\/p><p>\u00a0<\/p><p><strong>Okay enough babbling..let\u2019s make a start! <\/strong>Feel Free to ask questions in the chat, we will try to answer all of them so don\u2019t be shy!<\/p><p>Default system colours: <strong>P<\/strong> #6EC1E4, <strong>S<\/strong> #54595F, <strong>T<\/strong> #7A7A7A, <strong>A<\/strong> #61CE70<\/p><p>\u00a0<\/p><p><strong>Fashion Insight<\/strong><\/p><p>\u00a0<\/p><ol><li>In WordPress dashboard &gt; hold down cmd or ctrl + e to open the finder &gt; type: <strong>add new page<\/strong> &gt; hold down cmd or ctrl to open it in a new tab, so the dashboard tab remains open for later use.<\/li><li>Click on the settings cog in the bottom left to enter the page settings &gt;<ol><li>Change Title: Home Page<\/li><li>Explain that we see the Site Title and Description on top<ol><li>Let\u2019s go to Site Settings &gt; Site Identity and change the site title + description<ol><li>Change to: \u201cFashion Insight\u201d | \u201cCome See Our Collection\u201d<\/li><li>You can set your site logo and favicon here as well<\/li><\/ol><\/li><li>Save + Close Site settings<\/li><li>We can hide the page title<\/li><li>But I\u2019ll\u00a0 just change the Page layout: Canvas \u2192 with no header, no footer, only elementor &#8211; because we will use a template from the library<\/li><\/ol><\/li><\/ol><\/li><li>On the page\u00a0 <strong>click<\/strong> Add template &gt; from the Pages Tab <strong>Insert<\/strong> \u2018Homepage &#8211; Restaurant &#8211; Page<\/li><\/ol><p>\u00a0<\/p><p><strong>First Section<\/strong><\/p><ol><li><strong>Click <\/strong>on Hero section &gt; Style &gt;<ol><li>Background Type &gt; Video\u00a0<\/li><li>go back to dashboard tab &gt; Media Library<\/li><li><strong>Copy<\/strong> &amp; <strong>Paste <\/strong>Video Link: <strong>hp-hero.mp4<\/strong><\/li><li>End Time &gt; <strong>Type <\/strong>20<\/li><li>Background Overlay &gt; disable<\/li><li>Border &gt; Solid: 20px Bottom<ol><li>Custom Color: #1E1E1E<\/li><li>we can also set it to be a global color &gt; demonstrate Accent then Primary &gt; we\u2019ll come back to it soon<\/li><\/ol><\/li><\/ol><\/li><\/ol><p>\u00a0<\/p><ol><li><strong>Click <\/strong>on Logo &gt; Content &gt; <strong>Click <\/strong>Choose Image &gt; Select your Image &gt; <strong>Click<\/strong> Insert Media<ol><li>Link &gt; Custom URL &gt; to link it to the home page let\u2019s first publish this page<\/li><li>Search for Home Page\u00a0 &gt; set it<\/li><li>Style &gt; Max-Width: 100%<\/li><\/ol><\/li><\/ol><p>\u00a0<\/p><p><strong>Second Section<\/strong><\/p><ol><li>Edit Section &gt; Content Width &gt; <strong>Drag to <\/strong>1220<\/li><li><strong>Click<\/strong> Heading &gt; Content &gt; <strong>Type<\/strong> New Collection<\/li><li>Style &gt; as you can see there\u2019s a custom color already set in the template \/ this could be your website before updating to Elementor v3.0\u00a0<ol><li>change it to #1E1E1E\u00a0<\/li><li>We will use this color on more elements across the site, so let\u2019s turn it into a global color<ol><li>Save as \u201cNew Accent\u201d<\/li><li>Hover over global to show it\u2019s set<\/li><\/ol><\/li><\/ol><\/li><li>Delete the Divider<\/li><li>Click on Basic Gallery<ol><li>change images: click delete icon &gt; reset<\/li><li>select 6 images <strong>SUMMER COLLECTION <\/strong>\u00a0<ol><li>create new gallery\/insert\u00a0<\/li><\/ol><\/li><li>style &gt; set border type: solid<ol><li>width: 4\u00a0<\/li><li>color: new accent (demonstrates that you can assign and use these colours anywhere throughout the site)<\/li><\/ol><\/li><li>Go back to 1st section &gt; Border &gt; assign color to New Accent<ol><li>Now all 3 elements have the same color<\/li><li>Let\u2019s go to the Global Colors via this shortcut<\/li><li>Let\u2019s change New Accent and see how it affects the site &gt; change to: E1C2B0 \u2192 cool it updates immediately<\/li><\/ol><\/li><li>we can also change our primary, secondary, text and accent colors + Give them a unique name. These are system colours and can\u2019t be deleted.<ol><li>set <strong>Secondary<\/strong> color to WHITE<\/li><li>Set <strong>Text<\/strong> to BLACK<\/li><li>Because we will be using these soon<\/li><\/ol><\/li><\/ol><\/li><\/ol><p>\u00a0<\/p><ol><li style=\"list-style-type: none\"><ol><li>Lastly, I\u2019ll set the default accent color to the same as the the New Accent color, and delete the new one<ol><li>As you can see, there\u2019s a notice explaining that all elements using this color will inherit a default one.<\/li><li>Let\u2019s delete it and see how it affects the site<\/li><li>As you can see, the elements we assigned the Global New Accent color to,.. have inherited a default color.<\/li><li>Depending on your setup .. this could be an Elementor Default color like the Primary color you see for the Heading<\/li><li>Or from an unknown source, possibly your theme, or your browser, etc.<\/li><li>I\u2019ll go ahead and set them to the Global Accent color to get them back to how I want<\/li><\/ol><\/li><\/ol><\/li><\/ol><p>\u00a0<\/p><ol><li><strong>Click<\/strong> on Text Editor &gt;\u00a0 Style<ol><li>change text to:\u00a0 Amanda is our amazing fashion designer in Fashion Insight, creating an entire new collection each season. The unique style matches the needs of women for both daily and formal use. Take a peak of our new Autumn collection.<\/li><li>set<strong> text colour<\/strong> to global: text \u2192\u00a0 the black we just added<\/li><li>Alignment &gt; <strong>Click <\/strong>Justified<\/li><\/ol><\/li><li>Just to demonstrate I\u2019ll Drag in a new Text Editor &gt; as you can see by default it\u2019s set to the system colour called <strong>text<\/strong> which we changed to black earlier &gt; this is the default behaviour and for the same reason can\u2019t delete system colours.. We can change their Color and rename them, not delete<\/li><li>Delete the text editor<\/li><\/ol><p>\u00a0<\/p><ol><li>Using the same logic as global colors, it\u2019s Time to check out <strong>global fonts<\/strong><\/li><li>Click on the Heading &gt; Style\u00a0<ol><li>Like with the custom color, this template comes with some custom typography styles<\/li><li>But we can also set them to primary, secondary, body, accent, back to primary.<\/li><li>I\u2019ll leave it on Primary, but change the style via this shortcut<\/li><li>Click manage global fonts\u00a0<ol><li>Edit Primary\u00a0<ol><li>Family: EB Garamond<\/li><li>Size 54(px)<\/li><li>Weight 500<\/li><\/ol><\/li><li>Let\u2019s also set the body text: Size 16(px) \u2192 we\u2019ll use it later on<\/li><li>Update and close<\/li><\/ol><\/li><\/ol><\/li><li><strong>Delete<\/strong> Testimonials<\/li><li><strong>Delete<\/strong> Breakfast<\/li><\/ol><p>\u00a0<\/p><p><strong>Third Section<\/strong><\/p><ol><li><strong>Click<\/strong> on Section &gt; Layout<ol><li><strong>Type<\/strong> 1220 &gt; I\u2019ll delete the value<\/li><li>Because instead of setting this manually all the time &gt; go to site settings<\/li><li>layout &gt; content width: 1220\u00a0<\/li><\/ol><\/li><li>While we are here, let&#8217;s also set the default page layout so when we create the contact page it\u2019ll automatically be set to canvas already<ol><li>page layout: canvas<\/li><li>update + close\u00a0<\/li><\/ol><\/li><li>Back In section settings &gt; Style\u00a0<ol><li>Choose Image \u2018Presenting.jpg\u2019 &gt; <strong>Click <\/strong>Insert Media<\/li><li><strong>Click<\/strong> Background Overlay &gt; <strong>Select <\/strong>Global Color \u201cAccent\u2019<\/li><\/ol><\/li><li><strong>Click<\/strong> Heading\u00a0<ol><li>Content: See Our Online Fashion Show\u00a0<\/li><li>Style<ol><li>Global Text Color &gt; <strong>Select <\/strong>Secondary\u00a0<\/li><li>Global Typography &gt; <strong>Select<\/strong> Primary<\/li><\/ol><\/li><\/ol><\/li><li><strong>Click<\/strong> on Text Editor<ol><li>content: The best way to experience our new collection, live from your browser. Our 25th unique fashion show takes place in the heart of London and will be viewed through Zoom. Contact us for more information and bookings.<\/li><li>Style &gt;<ol><li>Global Text Color &gt; <strong>Select <\/strong>Secondary &gt;<\/li><li>Global Typography &gt; <strong>Select<\/strong> Body Text<\/li><\/ol><\/li><\/ol><\/li><li><strong>Click<\/strong> on Image Carousel Widget<ol><li>Image Gallery <strong>Click <\/strong>the Reset Icon &gt; <strong>Click<\/strong> Yes &gt;<\/li><li>Add new Images: <strong>Select <\/strong>Images (<strong>6 \u2018Fs\u2019 Images<\/strong>) &gt; <strong>Click<\/strong> Create New Gallery &gt; insert<\/li><li>Slides to show: 4<\/li><\/ol><\/li><li><strong>Click <\/strong>on button &gt;<ol><li><strong>Text:<\/strong> Contact Us\u00a0<\/li><li>Link &gt; we\u2019ll add the link to the contact pager after we create it \u2192 will come back here<\/li><li>Size: medium<\/li><li>Style\u00a0<ol><li>Text color <strong>Select <\/strong>Secondary<\/li><li>Select Hover<ol><li>Text colour: Accent\u00a0<\/li><li>Background <strong>Select <\/strong>Secondary\u00a0<\/li><li>Border &gt; <strong>Select <\/strong>Secondary<\/li><\/ol><\/li><li>Add Hover animation: grow<\/li><li>Typography <strong>Select<\/strong> Accent Text<\/li><li>click on Pencil &gt; and tweak it: set to uppercase (explain that it\u2019s not global anymore) [there\u2019s a bug where uppercase doesn\u2019t work directly]<\/li><\/ol><\/li><\/ol><\/li><li><strong>Keep <\/strong>Visit Us Section<\/li><li><strong>Delete<\/strong> Image Source Section<\/li><\/ol><p>\u00a0<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>\u00a0<\/p><ol><li><strong>Click <\/strong>Update &gt; <strong>Click <\/strong>Save Option &gt; Save as Template<ol><li><strong>Type: <\/strong>Contact Page Template &gt; <strong>Hit <\/strong>Save<\/li><li>We will save this page as a template because the <strong>visit us<\/strong> and <strong>hero section<\/strong> will be reused on the contact page. After saving the template we\u2019ll delete the visit us section.<\/li><li><strong>Delete <\/strong>Visit Us Section &gt; <strong>Click <\/strong>Update &gt;<\/li><\/ol><\/li><li>Open Finder (cmd or ctrl + e)&gt; add new: page &gt; hold down cmd or ctrl to open in new tab<\/li><li>Show it&#8217;s already set to canvas &gt; let\u2019s name it: Contact<\/li><li>Insert contact page template<\/li><li><strong>Delete <\/strong>New Collection Section<\/li><li><strong>Delete <\/strong>See our Fashion Show Section<\/li><li><strong>Keep <\/strong>Hero Section &gt; Change video to: <strong>contact-hero.mp4<\/strong><\/li><li>Advanced &gt; delete padding<\/li><li>Layout &gt; min-height 50vh<\/li><\/ol><p>\u00a0<\/p><p><strong>Second Section<\/strong><\/p><ol><li>Advanced &gt; delete padding<\/li><li>Layout &gt;\u00a0 min-height: 50vh<\/li><li><strong>Click<\/strong> Heading &gt; Content<\/li><li><strong>Type<\/strong> Contact Us<\/li><li>Style\u00a0<ol><li>Global Text Color &gt; <strong>Select <\/strong>Accent\u00a0<\/li><li>Global Typography &gt; <strong>Select<\/strong> Primary<\/li><\/ol><\/li><li><strong>Delete <\/strong>Divider<\/li><li>Edit Icon List &gt; Content: delete last icon (only 3 in total)<\/li><li>Style<ol><li>Icon\u00a0<ol><li>Global Color <strong>Select <\/strong>Accent<\/li><\/ol><\/li><li>Text\u00a0\u00a0<ol><li>text color: text<\/li><li>Typography &gt; body text<ol><li>Size 17(px) &gt;Line Height 1.8 \u2192 explain it isn&#8217;t global anymore<\/li><\/ol><\/li><\/ol><\/li><\/ol><\/li><li><strong>Click<\/strong> on Maps &gt; Advanced\u00a0<ol><li>border\u00a0<ol><li>width: 5<\/li><li>color: Accent<\/li><\/ol><\/li><\/ol><\/li><li>Now that we\u2019re done with both pages, let&#8217;s go back to global colours and make some changes, see how it affects the site.<ol><li>Change Accent to: 888D85 &gt; update close &gt;<\/li><li>preview &gt; click logo to Homepage &gt; All colours are updated!<\/li><li>On Homepage &gt; add contact page link in button!<\/li><\/ol><\/li><li>Go back to globals via Site Settings &gt; Global Fonts<ol><li>Primary<ol><li>Font Family: Fredericka the Great<\/li><\/ol><\/li><\/ol><\/li><li>Preview &gt; Homepage &gt; click on contact button<\/li><\/ol><p><strong>\u00a0<\/strong><\/p><p><strong>Mobile responsive <\/strong><\/p><ol><li>On Homepage in Editor<ol><li>Change to tablet mode &gt; heading &gt; typo: shortcut to global fonts &gt; show responsive handles &gt; change size to 45px &gt; this is now set globally so all Text Elements that have this global font style will receive the 45px size in responsive tablet mode, saving lotus of time &gt; you can always tweak it for specific cases as well of course<\/li><\/ol><\/li><li>Also, just so you know, <strong>Back<\/strong> in Site Settings &gt; Layout &gt; Breakpoints &gt; you can set custom Mobile and Tablet breakpoints if you need to<\/li><li>Another cool global feature is Background\u00a0<ol><li>It allows you to set a default background style for your pages &gt; so if you have a style that repeats itself ..just set it here <strong>ONCE<\/strong> instead of styling sections and pages over and over again.<\/li><li>Choose custom color from picker &gt; Light Grey &gt; clear it<\/li><\/ol><\/li><li>Update\/Close &gt; go back to Desktop Mode<\/li><\/ol><p>\u00a0<\/p><p><strong>Theme Style and Global Colors + Fonts<\/strong><\/p><ol><li>Drag in new heading<\/li><li>As you can see this widget gets the primary color and primary heading by default. This behaviour happens behind the scenes to make sure widgets and other elements always have a certain style by default.<\/li><li>And as you\u2019ve seen during this webinar can be styled with global colors and fonts<ol><li>I can change it to another global color\u00a0<ol><li>set to accent\u00a0<\/li><\/ol><\/li><li>but when I clear the style it\u2019ll automatically go back to its default settings, as you can see by the white tick mark.<\/li><li>The same goes for typography\u00a0<ol><li>set to secondary &gt; clear it!<\/li><\/ol><\/li><\/ol><\/li><li>You can take control over this design layer using Theme Style<ol><li>But Why do it?<ol><li>Make style changes across your site without coding.<\/li><li>No need for the theme customizer. Change theme settings from within Elementor.<\/li><li>Set the default style of plugin elements and Elementor widgets<\/li><li>Maintain consistent design across the whole site, especially if you use it together with Global Colors and Fonts.. You\u2019ll see soon.<\/li><\/ol><\/li><\/ol><\/li><li>If we go to the content tab &gt; you can see that the heading widget is set to H2 by default. Once again, this is set behind the scenes, and is the widgets default setup. We can change the Headings tags for SEO purposes, but I\u2019ll leave it as H2.<\/li><li>Let\u2019s go to Site settings &gt; Theme Style<ol><li>As you can see we can control the default styling of a couple of elements: Typography, Buttons, Images and Form Fields<\/li><li>Let\u2019s focus on the Typography settings<ol><li>You\u2019ll get a notice to disable the default colors and fonts I was talking about earlier.. To make it work<\/li><li>Click on it, don\u2019t worry it opens in a new tab<ol><li>Check these 2 boxes &gt; update<\/li><\/ol><\/li><li>Refresh page \u2192 to see changes<\/li><li>Show Style: color and typo aren\u2019t set<\/li><li>As you can see the default colors and fonts aren\u2019t applied anymore &gt; giving the ability to control this with Elementor\u2019s Theme Style settings<\/li><li>Let\u2019s go there again<\/li><\/ol><\/li><li>As you can see we can setup default fallback styles for all types of text styles on your site<ol><li>Body text, links, and headings<\/li><li>Let\u2019s go to H2 &gt; since the heading widget is set to H2 by default<ol><li>We can set the typography and color<\/li><li>Set color to custom: red<\/li><li>Set typo to custom: Abril Fatface<\/li><\/ol><\/li><li>Lets update and close and see what we just did<\/li><li>The heading widget now has a new default fallback style<ol><li>Dragging in a new heading widget will come with this style by default now<\/li><li>But changing the H2 tag to H1 for example will change it, we haven\u2019t defined H1 in Theme Style so it inherits another style from a different source ..such as your browser.<\/li><li>Delete the 2 headings<\/li><\/ol><\/li><li><strong>Click<\/strong> on the main heading &gt; we can use Theme Style with Global Colors and fonts as well, giving you even more control<ol><li>Let\u2019s reset the color and typography<\/li><li>Go back to theme style<\/li><li>Instead of setting custom colors and fonts &gt; use the global ones<\/li><li>Color: accent<\/li><li>Typo: Primary [there\u2019s a bug, the font-size isn\u2019t applied]<\/li><\/ol><\/li><\/ol><\/li><\/ol><\/li><\/ol><p>\u00a0<\/p><p>\u00a0<\/p><p>[transition to big front shot]<\/p><p>\u00a0<\/p><p><strong>Outro:<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p>Okaaaaayyyyy well that\u2019s it! Now you know how Elementor\u2019s Design System features work and use them to set up and apply Global Colors and Fonts on your own site, improving your workflow and saving you lot\u2019s of time.<\/p><p>I hope you learned a lot during this Webinar, and we managed to answer all of your questions.<\/p><p>\u00a0<\/p><p>I\u2019d like to invite you to join our Facebook group for loads of helpful tips and tricks, if you haven\u2019t already.<\/p><p>And become part of our huge Elementor community full of like-minded web creators.. all helping each other become better at what they do.<\/p><p>\u00a0<\/p><p>Also, don\u2019t forget to subscribe to our Youtube channel, which is full of interesting tutorials to help you master Elementor<\/p><p>\u00a0<\/p><p>Aaaand, on our website, check out the help center for easy access to the knowledge base, FAQs, Docs, and more<\/p><p>\u00a0<\/p><p>Lastly, feel free to re-watch this webinar in your own time and create your own stunning designs.. And share them in the comments below!<\/p><p>\u00a0<\/p><p>Good luck!<\/p><p>And most of all &#8212;&#8212;&#8211;\u00a0 enjoy being creative!!<\/p><p><strong>Thanks for tuning in, ciao for now!<\/strong><\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>#####<\/p><p>which allows you to take over the global design layer normally handled by the theme..<\/p><p>This way you can set fallback styles for various (basic HTML) elements, such as, Headings, Buttons, Images and Form Fields.. No matter the theme you use.<\/p><p>\u00a0<\/p><p>These styles only come into play as a fallback, [visual: close site settings &gt; click on button, clear background colour] if no definitions were set and can be used together with Global Colours and Fonts to create an even more streamlined Design System.<\/p><p>#####<\/p><p>\u00a0<\/p><p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<\/p><p>\u00a0<\/p><p><strong>Global Setup<\/strong><\/p><p><strong>Click<\/strong> the top left Settings Menu &gt; <strong>Click <\/strong>Site Settings<\/p><p><strong>Click <\/strong>Global Fonts &gt; Edit Primary &gt; Family &gt; Select EB Garamond &gt; Size 54(px) &gt; Weight 500<\/p><p><strong>Click<\/strong> Back &gt; Edit Text &gt; Family &gt; Select Roboto &gt; Size 16(px) &gt; Weight 400<\/p><p><strong>Click<\/strong> Back &gt; Edit Accent &gt; Family &gt; Select Roboto &gt; Size 13(px) &gt; Weight 600 &gt; Line Height &gt; 1.2(em)<\/p><p><strong>Repeat <\/strong>for Secondary and Accent<\/p><p><strong>Click<\/strong> Update &gt; <strong>Click <\/strong>the back button at the top left<\/p><p>\u00a0<\/p><p><strong>Click <\/strong>Global Colors &gt; hover over the default \u2018Saved Color\u2019 and click Delete<\/p><p><strong>Click <\/strong>on \u2018Primary\u2019 color picker and type #1E1E1E<\/p><p><strong>Click <\/strong>on \u2018Secondary\u2019 color picker and type #DADADA<\/p><p><strong>Click <\/strong>on \u2018text\u2019 color picker and type #818181<\/p><p><strong>Click <\/strong>on \u2018Accent\u2019 color picker and type #000000<\/p><p><strong>Click <\/strong>Add Color, <strong>Type <\/strong>\u2018Styling\u2019 set it to #D8D8D8<\/p><p><strong>Click<\/strong> Update then <strong>click <\/strong>the X button at the top right<\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>________________________<\/strong><\/p><p><strong>Fashion Insight<\/strong><\/p><p><br \/><br \/>In WordPress dashboard &gt; Pages &gt; Add New &gt; Write A Title &gt; (right click open in new tab) Edit with Elementor<br \/>Click the bottom right icon to view the page settings &gt; Hide Title &gt; <strong>Select<\/strong> Yes &gt; Page Layout &gt; Select Elementor Canvas<br \/>On the page\u00a0 <strong>click<\/strong> Add template &gt; from the Pages Tab <strong>Insert<\/strong> \u2018Homepage &#8211; Restaurant &#8211; Page\u2019<\/p><p>\u00a0<\/p><p><strong>First Section<\/strong><\/p><p><strong>Click <\/strong>on header\u2019s section &gt; Style &gt; Background Type &gt; Video &gt; go back to dashboard tab &gt; library &gt; <strong>Paste <\/strong>Video Link<\/p><p>https:\/\/fashioninsight.elementor.cloud\/wp-content\/uploads\/2020\/09\/video.mp4<br \/>End Time &gt; <strong>Type <\/strong>20<\/p><p>Background overlay &gt; Global Color &gt; <strong>click<\/strong> Manage Global Colors &gt; <strong>Click <\/strong>Add Color &gt; <strong>Type <\/strong>\u2018Styling\u2019 set it to #D8D8D8 &gt; Click update and hit the X button. Go back to background overl0000ay &gt; <strong>select <\/strong>\u2018Styling\u2019 &gt; Opacity &gt; 0.1<\/p><p>\u00a0<\/p><p>*SO: hover over globe &gt; currently set to custom (black in picker) &gt; change to #D8D8D8, explain that we wan\u2019t to save and re-use this colour throughout the design &gt; save as global &gt; Opacity &gt; 0.1<\/p><ul><li>#D8D8D8: overlays on images and vids + dividers<\/li><\/ul><p><strong>\u00a0<\/strong><\/p><p><strong>]Click <\/strong>on Logo &gt; Content &gt; <strong>Click <\/strong>Choose Image &gt; Select your Image &gt; <strong>Click<\/strong> Insert Media &gt; Link \u2018Homepage\u2019\u2019 &gt; Style &gt; max-width &gt; <strong>delete <\/strong>the value<\/p><p>\u00a0<\/p><p><strong>Second Section<\/strong><\/p><p>Edit Section &gt; Content Width &gt; <strong>Type <\/strong>1220<\/p><p><strong>Click<\/strong> Heading &gt; Content &gt; <strong>Type<\/strong> New Collection &gt; Style &gt; Global Color &gt; <strong>click<\/strong> Manage Global Colors &gt; set Primary to #1E1E1E &gt; <strong>Update <\/strong>&gt; <strong>X <\/strong>&gt; <strong>Select <\/strong><\/p><p>\u00a0<\/p><p>*assign \u201cstyling\u201d to divider &gt; go to globals and change the color to demonstrate<\/p><p>\u00a0<\/p><p>Primary&gt; Global Typography &gt; <strong>Select<\/strong> Primary<\/p><p>\u00a0<\/p><p><strong>Click <\/strong>Divider &gt; Style &gt; Global Text Color &gt; Styling (demonstrate that you can assign and use these colours anywhere throughout the site)<\/p><p><strong>Click<\/strong> on Text Editor &gt; Write your content &gt; Style &gt; Text Color &gt; <strong>Select <\/strong>Text &gt; Typography &gt; <strong>Select<\/strong> Text &gt; Alignment &gt; <strong>Click <\/strong>Justified<\/p><p>Right <strong>Click<\/strong> on Basic Library Widget &gt; <strong>Click <\/strong>Edit &gt; Image Gallery <strong>Click <\/strong>the Reset Icon &gt; <strong>Click<\/strong> Yes<\/p><p>Add new Images &gt; <strong>Select <\/strong>your Images (<strong>6 \u2018Summer Collection\u2019<\/strong>) &gt; <strong>Click<\/strong> Create New Gallery<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>*demonstrate global fonts, same logic<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p><strong>Delete<\/strong> Testimonials<\/p><p><strong>Delete<\/strong> Breakfast<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p><strong>Third Section<\/strong><\/p><p><strong>Click<\/strong> on Section &gt; Layout &gt; <strong>Type<\/strong> 1220 <br \/>Style &gt; Choose Image \u2018Presenting.jpg\u2019 &gt; <strong>Click <\/strong>Insert Media<\/p><p><strong>Click<\/strong> Background Overlay &gt; <strong>Select <\/strong>Global Color \u2018Styling\u2019 &gt; Opacity <strong>Type <\/strong>0.75<\/p><p><strong>Drag<\/strong> Opacity handle to 0.6 &gt; Then go to Border &gt; <strong>Select <\/strong>Solid &gt; Global Color <strong>Select <\/strong>Primary &gt; Width &gt; 0, 0, 50, 0 (px)<\/p><p><strong>Click<\/strong> Heading &gt; Content &gt; <strong>Type<\/strong> New Collection &gt; Style &gt; Global Text Color &gt; <strong>Select <\/strong>Primary &gt; Global Typography &gt; <strong>Select<\/strong> Primary<\/p><p><strong>Click<\/strong> on Text Editor &gt; Write your content &gt; Style &gt; Global Text Color &gt; <strong>Select <\/strong>Accent &gt; Global Typography &gt; <strong>Select<\/strong> Text<\/p><p>Right <strong>Click<\/strong> on Image Carousel Widget &gt; <strong>Click <\/strong>Edit &gt; Image Gallery <strong>Click <\/strong>the Reset Icon &gt; <strong>Click<\/strong> Yes &gt; Add new Images &gt; <strong>Select <\/strong>your Images (<strong>6 \u2018F0\u2019 Images<\/strong>) &gt; <strong>Click<\/strong> Create New Gallery<\/p><p><strong>Click <\/strong>on button &gt; <strong>Type<\/strong> Contact Us &gt; Link &gt; <strong>Type<\/strong> \u2018\/Contact\u2019 &gt; Style &gt; Typography <strong>Select<\/strong> Accent &gt; Text color <strong>Select <\/strong>Accent &gt; Select Hover &gt; Background <strong>Select <\/strong>Primary &gt; Border &gt; <strong>Select <\/strong>Primary<\/p><p>\u00a0<\/p><p><strong>Keep <\/strong>Visit Us Section<br \/><strong>Delete<\/strong> Image Source (<strong>?<\/strong>)<\/p><p>\u00a0<\/p><p><strong>Click <\/strong>Update &gt; <strong>Click <\/strong>Save Option ?&gt; Save as Template <strong>Type <\/strong>Page Template <strong>Hit <\/strong>Save<\/p><p>\u00a0<\/p><p><strong>Delete <\/strong>Visit Us Section &gt; <strong>Click <\/strong>Update &gt; Click Top Left Menu &gt; Exit to Dashboard &gt; <strong>Click <\/strong>the Top Left WP icon &gt; Add New &gt; In the Title <strong>Type<\/strong> \u2018Contact\u2019 &gt; <strong>Click <\/strong>Edit with Elementor<\/p><p>Click Add Template &gt; My Templates &gt; <strong>Click <\/strong>Insert \u2018Page Template\u2019 <strong>Click <\/strong>Yes Import Document Settings<\/p><p><strong>Keep <\/strong>Header<\/p><p><strong>Delete <\/strong>New Collection Section<\/p><p><strong>Delete <\/strong>See our Fashion Show Section<\/p><p>Click Header\u2019s Section &gt; Advanced &gt; padding &gt; Type 100, 0, 100, 0 (px)<\/p><p>\u00a0<\/p><p><strong>Second Section<\/strong><\/p><p><strong>Click <\/strong>on Edit Section &gt; Style&gt; Border &gt; <strong>Select <\/strong>Solid &gt; Global Color <strong>Select <\/strong>Primary &gt; Width &gt; 0, 0, 50, 0 (px)<\/p><p><strong>Click<\/strong> Heading &gt; Content &gt; <strong>Type<\/strong> Contact Us&gt; Style &gt; Global Text Color &gt; <strong>Select <\/strong>Primary &gt; Global Typography &gt; <strong>Select<\/strong> Primary<\/p><p><strong>Click <\/strong>Divider &gt; Style &gt; Global Text Color &gt; Secondary<\/p><p>Edit Icon List &gt; Style &gt; Global Color &gt; <strong>Select <\/strong>Text &gt; Typography &gt; Size 17(px) &gt; Weight 300 &gt;\u00a0 Line Height 1.8<\/p><p>\u00a0<\/p><p><strong>Final Global Change<\/strong><\/p><p><strong>Click<\/strong> the top left Settings Menu Icon &gt; Site Settings &gt; Global Colors &gt; Primary &gt; #C53E74 &gt; Update &gt; Preview Changes<\/p><p>OR \/ AND<\/p><p><strong>Click<\/strong> the top left Settings Menu Icon &gt; Site Settings &gt; Global Colors &gt; Styling &gt; #B73131 &gt; Update &gt; Preview Changes<\/p><p>\u00a0<\/p><p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;<\/p><p>\u00a0<\/p><p><strong>Global Setup<\/strong><\/p><p><strong>Click<\/strong> the top left Settings Menu &gt; <strong>Click <\/strong>Site Settings<\/p><p><strong>Click <\/strong>Global Fonts &gt; Edit Primary &gt; Family &gt; Select EB Garamond &gt; Size 54(px) &gt; Weight 500<\/p><p><strong>Click<\/strong> Back &gt; Edit Text &gt; Family &gt; Select Roboto &gt; Size 16(px) &gt; Weight 400<\/p><p><strong>Click<\/strong> Back &gt; Edit Accent &gt; Family &gt; Select Roboto &gt; Size 13(px) &gt; Weight 600 &gt; Line Height &gt; 1.2(em)<\/p><p><strong>Repeat <\/strong>for Secondary and Accent<\/p><p><strong>Click<\/strong> Update &gt; <strong>Click <\/strong>the back button at the top left<\/p><p>\u00a0<\/p><p><strong>Click <\/strong>Global Colors &gt; hover over the default \u2018Saved Color\u2019 and click Delete<\/p><p><strong>Click <\/strong>on \u2018Primary\u2019 color picker and type #1E1E1E<\/p><p><strong>Click <\/strong>on \u2018Secondary\u2019 color picker and type #DADADA<\/p><p><strong>Click <\/strong>on \u2018text\u2019 color picker and type #818181<\/p><p><strong>Click <\/strong>on \u2018Accent\u2019 color picker and type #000000<\/p><p><strong>Click <\/strong>Add Color, <strong>Type <\/strong>\u2018Styling\u2019 set it to #D8D8D8<\/p><p><strong>Click<\/strong> Update then <strong>click <\/strong>the X button at the top right<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>\u00a0<\/p><p>\u00a0<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Join Ziv, Elementor Educator ? for a webinar on Creating a Design System with Global Colors and Fonts with Elementor. You\u2019ll learn how to: \u2713 Create a homepage step-by-step with Elementor. \u2713 Use Elementor\u2019s free templates Library. \u2713 Build a design system with Global Colors and Fonts, and understand how it can [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":3953,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-1711","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Global Colors &amp; Fonts: Creating a Design System - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Global Colors &amp; Fonts: Creating a Design System - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Join Ziv, Elementor Educator ? for a webinar on Creating a Design System with Global Colors and Fonts with Elementor. You\u2019ll learn how to: \u2713 Create a homepage step-by-step with Elementor. \u2713 Use Elementor\u2019s free templates Library. \u2713 Build a design system with Global Colors and Fonts, and understand how it can [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T10:26:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:36:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Global-Colors-Fonts.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Global Colors &amp; Fonts: Creating a Design System - Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/","og_locale":"en_US","og_type":"article","og_title":"Global Colors &amp; Fonts: Creating a Design System - Academy","og_description":"Overview Transcript Overview Join Ziv, Elementor Educator ? for a webinar on Creating a Design System with Global Colors and Fonts with Elementor. You\u2019ll learn how to: \u2713 Create a homepage step-by-step with Elementor. \u2713 Use Elementor\u2019s free templates Library. \u2713 Build a design system with Global Colors and Fonts, and understand how it can [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-20T10:26:10+00:00","article_modified_time":"2023-02-22T09:36:50+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Global-Colors-Fonts.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Global Colors &amp; Fonts: Creating a Design System","datePublished":"2021-06-20T10:26:10+00:00","dateModified":"2023-02-22T09:36:50+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/"},"wordCount":3933,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Global-Colors-Fonts.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/","url":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/","name":"Global Colors &amp; Fonts: Creating a Design System - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Global-Colors-Fonts.jpg","datePublished":"2021-06-20T10:26:10+00:00","dateModified":"2023-02-22T09:36:50+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Global-Colors-Fonts.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Global-Colors-Fonts.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/global-colors-fonts-creating-a-design-system-with-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"Global Colors &amp; Fonts: Creating a Design System"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1711"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1711\/revisions"}],"predecessor-version":[{"id":9577,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1711\/revisions\/9577"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/3953"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1711"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1711"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}