{"id":166550,"date":"2026-03-30T15:23:17","date_gmt":"2026-03-30T12:23:17","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=166550"},"modified":"2026-03-31T10:38:03","modified_gmt":"2026-03-31T07:38:03","slug":"how-to-sync-variables-and-global-elements","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/","title":{"rendered":"How to sync variables and global elements"},"content":{"rendered":"\n

To sync variables between classic widgets and atomic elements, open the Variables Manager<\/strong> in the Elementor<\/strong> panel. Click the ellipses next to your chosen variable, select Sync to Global Colors<\/strong> or Sync to Global Fonts<\/strong>, and save changes. This makes atomic variables available as selectable global assets in classic widgets.<\/p>\n\n\n\n

Classic widgets use global colors and fonts to keep website design consistent. Atomic elements use classes and variables for this purpose. In order for Version 3 and 4 elements to work together, you can sync variables with global fonts and colors.  <\/p>\n\n\n\n

To sync variables and classes<\/strong>:<\/p>\n\n\n\n

[callout type=”note”]Syncing fonts is limited to Typography. Other font characteristics like color, size and weight cannot be synced.[\/callout]<\/p>\n\n\n\n

In this example, we\u2019ll start with a Heading atomic element.<\/p>\n\n\n\n

    \n
  1. Create a variable Green_bk and use it as the background for this element. For details, see Variables<\/a> and Style tab- Background<\/a>.
    \"A<\/li>\n\n\n\n
  2. Open the Variables Manager. For details, see Variables Manager<\/a>. <\/li>\n\n\n\n
  3. Click the ellipses to the right of the variable.
    \"The<\/li>\n\n\n\n
  4. Select Sync to Global Colors<\/strong> or Sync to<\/strong> Global Fonts<\/strong> from the dropdown menu.
    \"Select<\/li>\n\n\n\n
  5. Click Save Changes<\/strong>.
    \"Click<\/li>\n\n\n\n
  6. Select a color setting in a classic Elementor widget and click the global color icon.
    \"Select<\/li>\n\n\n\n
  7. The variable appears as one of the choices.
    \"The<\/li>\n\n\n\n
  8. The background is added to the widget.
    \"The<\/li>\n<\/ol>\n\n\n\n

    Remove syncing<\/h3>\n\n\n\n

    If you decide to separate the variables from global fonts and colors you can unlink them. <\/p>\n\n\n\n

    To unlink variables<\/strong>:<\/p>\n\n\n\n

      \n
    1. Open the Variable Manager. For details, see Variables Manager<\/a>.<\/li>\n\n\n\n
    2. Click the ellipses and select Stop syncing to global colors <\/strong>or Stop syncing to Global fonts<\/strong>.
      \"Select<\/li>\n\n\n\n
    3. Any Elementor 3 widgets using this variable may substitute the variable with an appropriate global color or font.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

      To sync variables between classic widgets and atomic elements, open the Variables Manager in the Elementor panel. Click the ellipses next to your chosen variable, select Sync to Global Colors or Sync to Global Fonts, and save changes. This makes atomic variables available as selectable global assets in classic widgets. Classic widgets use global colors […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[1509],"tags":[],"class_list":["post-166550","post","type-post","status-publish","format-standard","hentry","category-features"],"acf":[],"yoast_head":"\nHow to sync variables and global elements | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about How to sync variables and global elements in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\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\/help\/how-to-sync-variables-and-global-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to sync variables and global elements | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about How to sync variables and global elements in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-30T12:23:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-31T07:38:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/the-initial-screen.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2026\" \/>\n\t<meta property=\"og:image:height\" content=\"1148\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"How to sync variables and global elements\",\"datePublished\":\"2026-03-30T12:23:17+00:00\",\"dateModified\":\"2026-03-31T07:38:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/\"},\"wordCount\":287,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/the-initial-screen.png\",\"articleSection\":[\"Features\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/\",\"url\":\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/\",\"name\":\"How to sync variables and global elements | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/the-initial-screen.png\",\"datePublished\":\"2026-03-30T12:23:17+00:00\",\"dateModified\":\"2026-03-31T07:38:03+00:00\",\"description\":\"Learn everything about How to sync variables and global elements in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/the-initial-screen.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/the-initial-screen.png\",\"width\":2026,\"height\":1148,\"caption\":\"A heading widget using the green background variable\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Editor V4\",\"item\":\"https:\/\/elementor.com\/help\/v4-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Features\",\"item\":\"https:\/\/elementor.com\/help\/v4-editor\/features\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to sync variables and global elements\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to sync variables and global elements | Elementor","description":"Learn everything about How to sync variables and global elements in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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\/help\/how-to-sync-variables-and-global-elements\/","og_locale":"en_US","og_type":"article","og_title":"How to sync variables and global elements | Elementor","og_description":"Learn everything about How to sync variables and global elements in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/","og_site_name":"Help","article_published_time":"2026-03-30T12:23:17+00:00","article_modified_time":"2026-03-31T07:38:03+00:00","og_image":[{"width":2026,"height":1148,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/the-initial-screen.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Cliff Churgin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"How to sync variables and global elements","datePublished":"2026-03-30T12:23:17+00:00","dateModified":"2026-03-31T07:38:03+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/"},"wordCount":287,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/the-initial-screen.png","articleSection":["Features"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/","url":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/","name":"How to sync variables and global elements | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/the-initial-screen.png","datePublished":"2026-03-30T12:23:17+00:00","dateModified":"2026-03-31T07:38:03+00:00","description":"Learn everything about How to sync variables and global elements in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/the-initial-screen.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2026\/03\/the-initial-screen.png","width":2026,"height":1148,"caption":"A heading widget using the green background variable"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/how-to-sync-variables-and-global-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Editor V4","item":"https:\/\/elementor.com\/help\/v4-editor\/"},{"@type":"ListItem","position":3,"name":"Features","item":"https:\/\/elementor.com\/help\/v4-editor\/features\/"},{"@type":"ListItem","position":4,"name":"How to sync variables and global elements"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/166550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=166550"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/166550\/revisions"}],"predecessor-version":[{"id":166692,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/166550\/revisions\/166692"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=166550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=166550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=166550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}