Elementor Colors Mismatch

Sometimes when you crosspost a page in Elementor which looks like this:

Elementor page example

After the crossposting it may look like this for example:

elementor page global colors broken

The only reason why this is happening is because you’re using custom global styles. These styles aren’t connected to a specific page, so we can not just crosspost them.

So I am using a custom global color in an example above:

custom global color Elementor
On the screenshot you can see two custom global colors – New Item #1 and New Item #2.

So, what are the options?

The second one is kind of tricky, because it is not enough just to add the same colors in Elementor Kit, we also have to change their IDs to match the first website.

Here is a step by step:

  1. Please proceed to the second website and create the same global color there.
  2. Then we have to find out the ID of the global kit on the first website, in order to do so, please go to Templates > Saved Templates, then click All and you will find Default Kit there (or any kit you’re using). We need only its ID, you can check it in URL.
  3. Open phpMyAdmin and go to wp_postmeta table. Search for meta key _elementor_page_settings for the ID we have just found. There should be serialized data. You can unserialize it with any online tool or just find the specific HEX code of a color you added a couple minutes ago. Nearby you wll find its id, it would be something like 4eff485.
  4. Let’s go to wp_2_postmeta table (or whatever site ID it is). Also find the ID of the Default Kit on that website, then find metadata with _elementor_page_settings key, find the same color code. But there would be a different ID! Change that.
  5. Done!

Need more help?