{"id":14227,"date":"2023-08-03T09:48:53","date_gmt":"2023-08-03T09:48:53","guid":{"rendered":"https:\/\/www.wpelemento.com\/?p=14227"},"modified":"2023-08-03T09:48:53","modified_gmt":"2023-08-03T09:48:53","slug":"elementor-global-fonts-and-colors","status":"publish","type":"post","link":"https:\/\/preview.wpelemento.com\/old_website\/elementor-global-fonts-and-colors\/","title":{"rendered":"Unleashing The Power Of Elementor Global Fonts And Colors To Elevate Your Website Design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"14227\" class=\"elementor elementor-14227\">\n\t\t\t\t        <section class=\"elementor-section elementor-top-section elementor-element elementor-element-6de294b elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"6de294b\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cfe8947 ct-column-none\" data-id=\"cfe8947\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-9a5642c elementor-widget elementor-widget-text-editor\" data-id=\"9a5642c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 26-05-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p><span style=\"font-weight: 400;\">Captivating website design plays a pivotal role in attracting and engaging users, it&#8217;s crucial to stay ahead of the curve. As a website owner or designer, you understand the significance of creating visually appealing and cohesive designs that leave a lasting impression on visitors. While there are numerous tools and platforms available to assist in this endeavor, one tool that stands out from the rest is Elementor.<\/span><\/p><p><span style=\"font-weight: 400;\">Elementor, a popular <a href=\"https:\/\/www.wpelemento.com\/wordpress-page-builder\/\" target=\"_blank\" rel=\"noopener\"><span data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;WordPress Page Builder&quot;}\" data-sheets-userformat=\"{&quot;2&quot;:1323649,&quot;3&quot;:{&quot;1&quot;:0},&quot;10&quot;:1,&quot;12&quot;:0,&quot;15&quot;:&quot;ABeeZee&quot;,&quot;16&quot;:10,&quot;21&quot;:0,&quot;23&quot;:2}\">WordPress Page Builder <\/span><\/a>plugin for WordPress, has gained a massive following for its intuitive drag-and-drop interface and extensive customization options. Among its many features, Elementor&#8217;s Global Fonts and Colors functionality has become a game-changer for web designers seeking to streamline their design process and create harmonious websites effortlessly.<\/span><\/p><p><span style=\"font-weight: 400;\">In this blog post, we will delve into the unparalleled power of Elementor Global Fonts and Colors and explore how it can elevate your website design to new heights.\u00a0<\/span><\/p><p><span style=\"font-weight: 400;\">We will walk you through Global Fonts and Colors, key benefits, and practical applications of Elementor&#8217;s Global Fonts and Colors feature. From maintaining brand consistency and improving user experience to saving time and effort in design iterations, we will explore how this powerful tool can transform your website creation process.<\/span><\/p><p><span style=\"font-weight: 400;\">So, let&#8217;s dive in and unlock the immense potential that Elementor offers to take your website design to the next level!<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-a629b7e elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"a629b7e\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8157de3 ct-column-none\" data-id=\"8157de3\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-3e60cce elementor-widget elementor-widget-heading\" data-id=\"3e60cce\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 26-05-2024 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">What Are Elementor Global Fonts And Colors?\n<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-b53e252 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"b53e252\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8a1be2e ct-column-none\" data-id=\"8a1be2e\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-d9a9b95 elementor-widget elementor-widget-text-editor\" data-id=\"d9a9b95\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Elementor Global Fonts and Colors is a powerful feature within the Elementor page builder plugin for WordPress. It allows you to define and manage typography and color schemes across your entire website from a central location, making it easy to maintain consistency and create a cohesive visual identity.<\/span><\/p><p><span style=\"font-weight: 400;\">With Global Fonts, you can select and customize fonts that will be applied globally to your website. This means that once you define a font style for headings, subheadings, paragraphs, and other text elements, those styles will be automatically applied to all instances of those elements throughout your website. Instead of manually adjusting font styles on each page or section, Global Fonts enables you to update the font settings in one place, saving you time and effort.<\/span><\/p><p><span style=\"font-weight: 400;\">Similarly, Global Colors in Elementor allow you to define a set of colors that will be used consistently across your website. You can create color palettes and assign specific colors to different elements such as backgrounds, text, buttons, links, and more. By establishing a consistent color scheme, you ensure that your website maintains a professional and visually appealing look throughout.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-0bdd41a elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"0bdd41a\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c3800b2 ct-column-none\" data-id=\"c3800b2\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-c92252f elementor-widget elementor-widget-heading\" data-id=\"c92252f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Key Benefits Of Elementor Global Fonts And Colors\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-1f7be76 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"1f7be76\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ee60681 ct-column-none\" data-id=\"ee60681\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-b9fde16 elementor-widget elementor-widget-text-editor\" data-id=\"b9fde16\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Elementor Global Fonts and Colors offer several key benefits that can greatly enhance your website design. Let&#8217;s explore them in detail:<\/span><\/p><ul><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Consistency and Cohesion:<\/b><span style=\"font-weight: 400;\"> One of the primary advantages of using Elementor Global Fonts and Colors is the ability to achieve consistency and cohesion throughout your website. By defining font styles and color schemes at a global level, you ensure that all elements across different pages and sections adhere to the same visual language. This consistency creates a harmonious <a href=\"https:\/\/www.wpelemento.com\/user-experiences\/\" target=\"_blank\" rel=\"noopener\">user experience<\/a> and strengthens your brand identity.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Time and Effort Savings:<\/b><span style=\"font-weight: 400;\"> Without Global Fonts and Colors, making design changes across your entire website can be a tedious and time-consuming task. By utilizing this feature, you can save significant time and effort. Instead of manually updating individual elements, you can modify the global settings, and the changes will automatically propagate throughout your website. This efficiency is particularly valuable when working on larger websites with numerous pages and sections.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flexibility and Adaptability:<\/b><span style=\"font-weight: 400;\"> Global Fonts and Colors empower you to experiment with different design choices and make adjustments effortlessly. If you want to test a new font or color scheme, you can modify the global settings and instantly see the impact across your entire website. This flexibility allows you to iterate and refine your design choices without the need for extensive manual adjustments.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Brand Consistency:<\/b><span style=\"font-weight: 400;\"> For businesses and organizations, maintaining brand consistency is crucial for building trust and recognition. Elementor Global Fonts and Colors enable you to establish and uphold consistent brand guidelines. You can define and apply the exact fonts and colors that align with your brand identity, ensuring that your website represents your brand accurately and professionally.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Collaboration and Teamwork:<\/b><span style=\"font-weight: 400;\"> In collaborative web design projects, where multiple team members are involved, Global Fonts and Colors foster efficient teamwork. Designers, developers, and content creators can work together seamlessly, knowing that any changes made to the global settings will be reflected consistently across the entire site. This streamlines the design process, reduces communication gaps, and improves overall project management.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Design Scalability:<\/b><span style=\"font-weight: 400;\"> As your website evolves and expands, managing design elements can become challenging. Elementor Global Fonts and Colors offer scalability by providing a centralized approach to design. Whether you&#8217;re adding new pages or sections, the global settings ensure that the new elements automatically inherit the defined fonts and colors, maintaining the overall design integrity.<\/span><\/li><li style=\"font-weight: 400;\" aria-level=\"1\"><b>Accessibility and User Experience:<\/b><span style=\"font-weight: 400;\"> Font styles and colors play a significant role in the accessibility and user experience of a website. With Elementor Global Fonts and Colors, you can ensure that your chosen fonts are legible, and your color schemes meet accessibility standards. Consistent and well-chosen typography and colors enhance readability, usability, and inclusivity for all users.<\/span><\/li><\/ul><p><span style=\"font-weight: 400;\">By leveraging these capabilities, you can enhance user experience, reinforce your brand identity, and establish a professional online presence.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-30bdc75 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"30bdc75\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e1786fb ct-column-none\" data-id=\"e1786fb\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-1ba525f elementor-widget elementor-widget-heading\" data-id=\"1ba525f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How To Set Up Elementor Global Fonts And Colors?\n<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-8ac16e9 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"8ac16e9\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1bfc73a ct-column-none\" data-id=\"1bfc73a\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-86887f6 elementor-widget elementor-widget-text-editor\" data-id=\"86887f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Setting up Elementor Global Fonts and Colors is a straightforward process that allows you to define and manage typography and color schemes across your entire website. By following a few simple steps, you can establish a cohesive design system that saves time and ensures consistency. Let&#8217;s dive into the detailed process of setting up Elementor Global Fonts and Colors.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-9dadcb9 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"9dadcb9\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fd9f511 ct-column-none\" data-id=\"fd9f511\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-da1e34e elementor-widget elementor-widget-heading\" data-id=\"da1e34e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 1: Install And Activate Elementor<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-b25d5dc elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"b25d5dc\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4c17c61 ct-column-none\" data-id=\"4c17c61\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-7b73910 elementor-widget elementor-widget-image\" data-id=\"7b73910\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 26-05-2024 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"600\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-the-elementor-plugin.png\" class=\"attachment-full size-full wp-image-14863\" alt=\"install-and-activate-the-elementor-plugin\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-the-elementor-plugin.png 1200w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-the-elementor-plugin-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-the-elementor-plugin-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-the-elementor-plugin-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-the-elementor-plugin-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-the-elementor-plugin-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/05\/install-and-activate-the-elementor-plugin-768x384.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ec07872 elementor-widget elementor-widget-text-editor\" data-id=\"ec07872\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">The first step in setting up Elementor Global Fonts and Colors is to install and activate the Elementor plugin on your WordPress website. If you haven&#8217;t installed Elementor yet, don&#8217;t worry; the process is straightforward.<\/span><\/p><p><span style=\"font-weight: 400;\">To get started, log in to your WordPress dashboard and navigate to the &#8220;Plugins&#8221; section. Once there, click on &#8220;Add New&#8221; to access the plugin installation page. In the search bar, type &#8220;Elementor&#8221; and hit the Enter key.<\/span><\/p><p><span style=\"font-weight: 400;\">WordPress will display a list of search results, and you should see the Elementor plugin at the top. Look for the Elementor page builder plugin by Elementor.com and click on the &#8220;Install Now&#8221; button next to it.<\/span><\/p><p><span style=\"font-weight: 400;\">WordPress will take a few moments to install the plugin. Once the installation is complete, the &#8220;Install Now&#8221; button will change to &#8220;Activate.&#8221; Click on the &#8220;Activate&#8221; button to activate the Elementor plugin on your website.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-3a2739f elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"3a2739f\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3c9f5b3 ct-column-none\" data-id=\"3c9f5b3\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-3fe5cc2 elementor-widget elementor-widget-heading\" data-id=\"3fe5cc2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 2: Add A New Page Or Edit An Existing One\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-61ab0ae elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"61ab0ae\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-eb7024f ct-column-none\" data-id=\"eb7024f\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-eab4952 elementor-widget elementor-widget-image\" data-id=\"eab4952\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1200\" height=\"600\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/add-a-new-page.png\" class=\"attachment-full size-full wp-image-15192\" alt=\"add-a-new-page\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/add-a-new-page.png 1200w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/add-a-new-page-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/add-a-new-page-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/add-a-new-page-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/add-a-new-page-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/add-a-new-page-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/add-a-new-page-768x384.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c78e36 elementor-widget elementor-widget-text-editor\" data-id=\"5c78e36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Once Elementor is activated, you gain access to its powerful page-building capabilities. To create a new page or edit an existing one using Elementor, simply navigate to the &#8220;Pages&#8221; section in your WordPress dashboard. There, you will find a list of all your website&#8217;s pages. Select the specific page you want to work on by clicking on its title.<\/span><\/p><p><span style=\"font-weight: 400;\">If you wish to create a new page from scratch, you can do so by clicking on the &#8220;Add New&#8221; button located near the top of the page. This will take you to the page editor where you can begin designing your new page using Elementor.<\/span><\/p><p><span style=\"font-weight: 400;\">On the other hand, if you want to edit an existing page, locate it in the list of pages and click on its title. This will open the page editor for that particular page.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a39e28 elementor-widget elementor-widget-image\" data-id=\"2a39e28\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1200\" height=\"600\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-on-edit-with-elementor.png\" class=\"attachment-full size-full wp-image-15193\" alt=\"click-on-edit-with-elementor\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-on-edit-with-elementor.png 1200w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-on-edit-with-elementor-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-on-edit-with-elementor-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-on-edit-with-elementor-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-on-edit-with-elementor-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-on-edit-with-elementor-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-on-edit-with-elementor-768x384.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b60aad elementor-widget elementor-widget-text-editor\" data-id=\"0b60aad\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Once you&#8217;re inside the page editor, you will see two options: &#8220;Edit with Elementor&#8221; and &#8220;Edit with WordPress Editor.&#8221; To utilize the full potential of Elementor and take advantage of its Global Fonts and Colors feature, click on the &#8220;Edit with Elementor&#8221; button.<\/span><\/p><p><span style=\"font-weight: 400;\">By selecting &#8220;Edit with Elementor,&#8221; you enter the Elementor interface, which provides a visual, drag-and-drop editor that simplifies the process of creating and customizing your page. You can add various elements, sections, and widgets to your page, rearrange them, and adjust their settings.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-e05bdf4 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"e05bdf4\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9fd5590 ct-column-none\" data-id=\"9fd5590\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-30c79d4 elementor-widget elementor-widget-heading\" data-id=\"30c79d4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 3: Access Elementor Global Fonts And Colors Settings\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-db79e34 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"db79e34\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5db5b56 ct-column-none\" data-id=\"5db5b56\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-6b9c18e elementor-widget elementor-widget-image\" data-id=\"6b9c18e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"600\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-here.png\" class=\"attachment-full size-full wp-image-15194\" alt=\"click-here\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-here.png 1200w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-here-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-here-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-here-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-here-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-here-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/click-here-768x384.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55973a0 elementor-widget elementor-widget-text-editor\" data-id=\"55973a0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Once you have created a new page in Elementor and are ready to access the Global Fonts and Colors settings, the first step is to navigate to the Elementor editor. Within the editor, you will notice a convenient control panel positioned on the left side of the screen. This control panel serves as your gateway to various customization options and settings.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-664c10f elementor-widget elementor-widget-image\" data-id=\"664c10f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"600\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/site-settings.png\" class=\"attachment-full size-full wp-image-15195\" alt=\"\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/site-settings.png 1200w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/site-settings-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/site-settings-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/site-settings-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/site-settings-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/site-settings-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/site-settings-768x384.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d383a52 elementor-widget elementor-widget-text-editor\" data-id=\"d383a52\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">To access the Global Fonts and Colors settings, specifically, you need to locate the &#8220;Site Settings&#8221; tab within the control panel. This tab is designed to provide you with a range of options related to your website&#8217;s overall design and appearance.<\/span><\/p><p><span style=\"font-weight: 400;\">Once you click on the &#8220;Site Settings&#8221; tab, a menu will unfold, revealing several setting options available to you. You will find a setting called &#8220;Design System&#8221; among these options. The Design System setting is the gateway to accessing and managing the Global Fonts and Colors in Elementor.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dbb5538 elementor-widget elementor-widget-image\" data-id=\"dbb5538\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"600\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/design-system.png\" class=\"attachment-full size-full wp-image-15196\" alt=\"\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/design-system.png 1200w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/design-system-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/design-system-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/design-system-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/design-system-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/design-system-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/design-system-768x384.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7eea49e elementor-widget elementor-widget-text-editor\" data-id=\"7eea49e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">By selecting the &#8220;Design System&#8221; option, you will gain entry into the Global Fonts and Colors settings. Here, you will have the ability to define and customize the fonts and colors that will be applied globally throughout your website. From selecting font styles for various text elements to establishing a consistent color palette, the Design System setting empowers you to create a cohesive visual identity for your website.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-19e953c elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"19e953c\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a6965a7 ct-column-none\" data-id=\"a6965a7\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-25b04d4 elementor-widget elementor-widget-heading\" data-id=\"25b04d4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 4: Define Global Fonts & Global Colors\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-c5fca83 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"c5fca83\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4c6cbec ct-column-none\" data-id=\"4c6cbec\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-08def7d elementor-widget elementor-widget-text-editor\" data-id=\"08def7d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Once you have accessed the Elementor Global Fonts and Colors settings, the next step is to define your Global Fonts and Global Colors. Under the &#8220;Design System&#8221; tab, you will see two options: &#8220;Global Fonts&#8221; and &#8220;Global Colors.&#8221; Let&#8217;s explore how to set them up individually.<\/span><\/p><p><b>Global Fonts:<\/b><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17c1d30 elementor-widget elementor-widget-image\" data-id=\"17c1d30\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"600\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-fonts.png\" class=\"attachment-full size-full wp-image-15200\" alt=\"\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-fonts.png 1200w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-fonts-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-fonts-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-fonts-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-fonts-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-fonts-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-fonts-768x384.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f0b6f4 elementor-widget elementor-widget-text-editor\" data-id=\"5f0b6f4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Click on &#8220;Global Fonts&#8221; to begin defining your Global Fonts. There are two sections in this section: &#8220;System Fonts&#8221; and &#8220;Custom Fonts\u201d.<\/span><\/p><p><span style=\"font-weight: 400;\">In the &#8220;System Fonts&#8221; section, you can set the font for primary, secondary, text, and accents. These options provide you with a selection of system fonts that are commonly available across various devices and browsers.<\/span><\/p><p><span style=\"font-weight: 400;\">On the other hand, the &#8220;Custom Fonts&#8221; section allows you to add and use your custom fonts. You can upload font files or use font services like Google Fonts to import custom fonts. Once added, you can style and configure these custom fonts to match your design preferences.<\/span><\/p><p><span style=\"font-weight: 400;\">To modify the settings of a font style, click on the pencil icon next to the primary, secondary, text, or accents. This will open a panel where you can make various adjustments, including font family, size, weight, transform (uppercase, lowercase, capitalize), style (normal, italic, oblique), decoration (underline, overline, line through), line height, line spacing, and word spacing. Repeat this process for each font style you want to define globally, and once you are satisfied, click on the &#8220;Update&#8221; button to save your changes.<\/span><\/p><p><b>Global Colors:\u00a0<\/b><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ffb91f elementor-widget elementor-widget-image\" data-id=\"8ffb91f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"600\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-colors.png\" class=\"attachment-full size-full wp-image-15201\" alt=\"global-colors\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-colors.png 1200w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-colors-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-colors-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-colors-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-colors-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-colors-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/global-colors-768x384.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6471c58 elementor-widget elementor-widget-text-editor\" data-id=\"6471c58\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Similarly, click on &#8220;Global Colors&#8221; to define your Global Colors. Here, you will find sections for primary, secondary, text, and accents, along with an option to add custom colors.<\/span><\/p><p><span style=\"font-weight: 400;\">Within each section, you can select colors from a color picker or enter specific color codes to define your color palette. The primary color is often associated with important elements like headings or <a href=\"https:\/\/www.wpelemento.com\/cta-button\/\" target=\"_blank\" rel=\"noopener\">CTA buttons<\/a>, while the secondary color can be used for supporting elements or accents.<\/span><\/p><p><span style=\"font-weight: 400;\">If you have specific brand colors or custom colors that you want to use, you can add them under the &#8220;Custom Colors&#8221; section. Simply click on the &#8220;Add Custom Color&#8221; button, choose your color, and give it a name for easy reference.<\/span><\/p><p><span style=\"font-weight: 400;\">Once you have selected or added the desired colors for each section, click on the &#8220;Update&#8221; button to save your global color settings.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-0b00eb1 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"0b00eb1\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c6fc79a ct-column-none\" data-id=\"c6fc79a\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-3dfcb2a elementor-widget elementor-widget-heading\" data-id=\"3dfcb2a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 5: Apply Global Fonts And Colors To Page Elements\n<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-1188661 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"1188661\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c52ce57 ct-column-none\" data-id=\"c52ce57\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-3d7eba2 elementor-widget elementor-widget-image\" data-id=\"3d7eba2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"600\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-fonts-to-the-widget.png\" class=\"attachment-full size-full wp-image-15202\" alt=\"\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-fonts-to-the-widget.png 1200w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-fonts-to-the-widget-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-fonts-to-the-widget-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-fonts-to-the-widget-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-fonts-to-the-widget-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-fonts-to-the-widget-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-fonts-to-the-widget-768x384.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d17120 elementor-widget elementor-widget-text-editor\" data-id=\"9d17120\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">After defining your Global Fonts and Colors, it&#8217;s time to apply them to specific elements on your page. To do this, simply drag and drop the desired Elementor widget onto your page or select an existing widget.<\/span><\/p><p><span style=\"font-weight: 400;\">Once the widget is added, click on it to access its settings in the left panel. In the Style tab of the widget settings, you&#8217;ll find options to customize fonts, colors, and backgrounds.<\/span><\/p><p><span style=\"font-weight: 400;\">To apply a global font style, click on the typography option (e.g., heading, paragraph) and select the corresponding global font style you defined earlier. This allows you to maintain consistency throughout your website by using the same font style across various elements.<\/span><\/p><p><span style=\"font-weight: 400;\">For example, if you define a global font style for headings as &#8220;Montserrat,&#8221; you can easily apply it to a heading widget on your page. By selecting the &#8220;Montserrat&#8221; font style from the dropdown menu, the heading text will automatically adopt the specified font. This eliminates the need to manually adjust the font style for each heading element individually, ensuring a consistent visual appearance.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b6e80f2 elementor-widget elementor-widget-image\" data-id=\"b6e80f2\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"600\" src=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-colors-to-the-widget.png\" class=\"attachment-full size-full wp-image-15203\" alt=\"apply-global-colors-to-the-widget\" srcset=\"https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-colors-to-the-widget.png 1200w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-colors-to-the-widget-600x300.png 600w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-colors-to-the-widget-64x32.png 64w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-colors-to-the-widget-300x150.png 300w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-colors-to-the-widget-1024x512.png 1024w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-colors-to-the-widget-150x75.png 150w, https:\/\/preview.wpelemento.com\/old_website\/wp-content\/uploads\/2023\/08\/apply-global-colors-to-the-widget-768x384.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" title=\"\">\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4a2a1a1 elementor-widget elementor-widget-text-editor\" data-id=\"4a2a1a1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Similarly, you can apply global colors to page elements. In the Style tab, you&#8217;ll find color options such as text color, background color, border color, etc. To use a global color, click on the color picker or input field and select the desired global color you defined earlier.<\/span><\/p><p><span style=\"font-weight: 400;\">For instance, if you establish a global color scheme with primary and secondary colors, you can easily apply these colors to various elements. Whether it&#8217;s the text color of a paragraph, the background color of a section, or the border color of a button, you can choose the appropriate global color from the options. This ensures that your chosen colors remain consistent throughout the website, enhancing its overall visual coherence.<\/span><\/p><p><span style=\"font-weight: 400;\">Applying global fonts and colors to page elements not only saves time and effort but also provides the flexibility to make design changes efficiently. If you decide to update the font style or color scheme across your website, you can modify the global settings, and the changes will automatically propagate to all elements using those global settings. This centralized control allows for quick and seamless updates, maintaining a cohesive design system.<\/span><\/p><p><span style=\"font-weight: 400;\">Furthermore, this approach allows for easy experimentation and customization. If you want to make specific adjustments to a widget&#8217;s font size, letter spacing, or color intensity, you can still do so within the widget&#8217;s settings. By combining the power of global settings with localized modifications, you can strike the right balance between consistency and tailored design.<\/span><\/p><p><span style=\"font-weight: 400;\">By leveraging Elementor&#8217;s ability to apply global fonts and colors to page elements, you ensure a unified and polished design across your entire website. Consistency in typography and color schemes enhances user experience, establishes brand identity, and creates a visually appealing website. With just a few clicks, you can apply your predefined global styles to specific elements, saving time and effort while maintaining a professional and cohesive aesthetic.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-0d73d0f elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"0d73d0f\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-51b948f ct-column-none\" data-id=\"51b948f\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-102a8df elementor-widget elementor-widget-heading\" data-id=\"102a8df\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n                <section class=\"elementor-section elementor-top-section elementor-element elementor-element-4606dc5 elementor-section-boxed elementor-section-height-default elementor-section-height-default ct-header-fixed-none ct-column-none ct-row-scroll-none ct-row-gradient--none\" data-id=\"4606dc5\" data-element_type=\"section\">\n            \n                        <div class=\"elementor-container elementor-column-gap-default \">\n                    <div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-af46fd0 ct-column-none\" data-id=\"af46fd0\" data-element_type=\"column\">\n        <div class=\"elementor-widget-wrap elementor-element-populated\">\n                    \n        \t\t<div class=\"elementor-element elementor-element-9a8aed1 elementor-widget elementor-widget-text-editor\" data-id=\"9a8aed1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In conclusion, Elementor Global Fonts and Colors are a game-changer when it comes to website design. We explored what Global Fonts and Colors are, the key benefits they offer, and how to set them up in Elementor.\u00a0<\/span><\/p><p><span style=\"font-weight: 400;\">By defining and managing typography and color schemes from a central location, you can achieve consistency, save time, and create a cohesive visual identity throughout your website. The flexibility, scalability, and collaboration they enable make them invaluable tools for designers and businesses alike. With the power of Elementor Global Fonts and Colors integrated into <a href=\"https:\/\/www.wpelemento.com\/wordpress-elementor-themes\/\" target=\"_blank\" rel=\"noopener\">WordPress Elementor themes<\/a>, you have the tools to elevate your website design and leave a lasting impression on your visitors.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t            <\/div>\n        <\/div>\n                    <\/div>\n        <\/section>\n        \t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Captivating website design plays a pivotal role in attracting and engaging users, it&#8217;s crucial to stay ahead of the curve. As a website owner or designer, you understand the significance of creating visually appealing and cohesive designs that leave a lasting impression on visitors. While there are numerous tools and platforms available to assist in [&hellip;]<\/p>\n","protected":false},"author":23,"featured_media":15253,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[78],"tags":[],"class_list":["post-14227","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wp-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/posts\/14227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/comments?post=14227"}],"version-history":[{"count":43,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/posts\/14227\/revisions"}],"predecessor-version":[{"id":15229,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/posts\/14227\/revisions\/15229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/media\/15253"}],"wp:attachment":[{"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/media?parent=14227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/categories?post=14227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview.wpelemento.com\/old_website\/wp-json\/wp\/v2\/tags?post=14227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}