How to sync variables and global elements

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 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.  

To sync variables and classes:

Note: Syncing fonts is limited to Typography. Other font characteristics like color, size and weight cannot be synced.

In this example, we’ll start with a Heading atomic element.

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

Remove syncing

If you decide to separate the variables from global fonts and colors you can unlink them. 

To unlink variables:

1. Open the Variable Manager. For details, see Variables Manager.
2. Click the ellipses and select Stop syncing to global colors or Stop syncing to Global fonts.
   
3. Any Elementor 3 widgets using this variable may substitute the variable with an appropriate global color or font.