Layouts fail when migrating from local to staging server.

[peepshow]

I have been setting up my Elementor layouts locally and just tried to migrate everything to my staging server, but unfortunately half the layouts have fallen apart when viewed on staging.

I'm exporting the database using Migrate DB, to automate all the renaming, and it works fine for everything other than Elementor. It appears the shortcodes are being stripped out somehow, and half the content is missing.

Any help would be greatly appreciated. I'm really liking the plugin, it's been great to work with right up until this point, it's definitely the nicest page builder I've tested out so I hope this issue can be resolved.

Here are two screenshots to illustrate the difference between local and staging.

1. Local page layout

Here everything is in the right place, content structure is defined entirely by Elementor, and all separated nicely into individual modules/widgets.

2. Staging page layout

Here you can see most of the content is missing and everything left has been mashed together into one single module/widget.

LOCAL SYSTEM INFO
== Server Environment ==
Operating System: Darwin
Software: Apache/2.4.18 (Unix) PHP/5.5.36
MySQL version: 5.7.12
PHP Version: 5.5.36
PHP Max Input Vars: 1000
PHP Max Post Size: 8M
GD Installed: Yes

== WordPress Environment ==
Version: 4.5.3
Site URL: http://trees-cloudways.dev
Home URL: http://trees-cloudways.dev
WP Multisite: No
Max Upload Size: 8 MB
Memory limit: 40M
Permalink Structure: /%year%/%monthnum%/%day%/%postname%/
Language: en-NZ
Timezone: Pacific/Auckland
Debug Mode: Active

== Theme ==
Name: Tree Adventures Sage 8
Version: 8.4.2
Author: Roots
Child Theme: No

== User ==
WP Profile lang: en_NZ
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36

== Active Plugins ==
Advanced Custom Fields
Name: Advanced Custom Fields
Version: 4.4.8
Author: Elliot Condon

Advanced Custom Fields PRO
    Name: Advanced Custom Fields PRO
    Version: 5.3.9.2
    Author: Elliot Condon

Custom Post Type UI
    Name: Custom Post Type UI
    Version: 1.3.5
    Author: WebDevStudios

Duplicate Post
    Name: Duplicate Post
    Version: 2.6
    Author: Enrico Battocchi

Elementor
    Name: Elementor
    Version: 0.6.5
    Author: Elementor.com

FakerPress
    Name: FakerPress
    Version: 0.4.6
    Author: Gustavo Bordoni

Google Maps Widget
    Name: Google Maps Widget
    Version: 3.39
    Author: Web factory Ltd

Instagram Feed
    Name: Instagram Feed
    Version: 1.4.7
    Author: Smash Balloon

Jetpack by WordPress.com
    Name: Jetpack by WordPress.com
    Version: 4.1.1
    Author: Automattic

Shortcodes Ultimate
    Name: Shortcodes Ultimate
    Version: 4.9.9
    Author: Vladimir Anokhin

Simple Custom Post Order
    Name: Simple Custom Post Order
    Version: 2.3
    Author: Sameer Humagain

Soil
    Name: Soil
    Version: 3.7.0
    Author: Roots

SVG Support
    Name: SVG Support
    Version: 2.2.3.2
    Author: Benbodhi

WordPress Importer
    Name: WordPress Importer
    Version: 0.6.1
    Author: wordpressdotorg

WP Migrate DB
    Name: WP Migrate DB
    Version: 0.8
    Author: Delicious Brains

[joshmarom]

Greetings @peepshow, Thank you for your feedback.

We recommend using a migration plugin to avoid any issues associated with moving your WordPress site to a new location.
Duplicator is an excellent choice.
All-in-One WP Migration could do the trick too.

It is worth mentioning that the new version of Elementor, which will be released tomorrow, Includes the Template Library - a new exciting feature, that allows you to easily save your page designs and reuse them. this feature could probably come in handy in situations like the one you are facing.

Please do update us if your issue has been resolved.
Good luck!

[peepshow]

Hi @joshmarom

Unfortunately the issue is not resolved.

As you suggest I am already using a migration plugin and Git. I use WP Migrate DB to handle the database, then I deploy the files with Git. Like I say noting else seems to have an issue but somewhere a long the way Elementor layouts fall to pieces.

Have you or anyone else experienced anything like this?

The new Template Library sounds excellent. I look forward to taking a look.

[joshmarom]

I haven't tried WP Migrate DB with Elementor but I have used Duplicator, and it was very smooth.
I encourage you to give it a shot.

[hasansamee]

@peepshow @joshmarom
i am being encountered with the same problem
any solution ?

[joshmarom]

@hassansamee, How did you migrate your site?
Did you use duplicator?

[joshmarom]

I just want to explain what is the cause for this issue and how it can be avoided:

Elementor stores the layouts as serialized post-meta-data.
If a serialized object is altered, it can not be unserializable. this means that if you try to do a simple "search and replace" sql query on the DB, it will result in corrupting the Elementor data, thus preventing the plugin from reading it.

The way to avoid it is by using tools that unserialize the data before altering it and re-serializing it.

Duplicator is a great tool for migrating a WordPress site, as it does all the necessary changes to the DB seamlessly, in a user friendly manner.

A more straight-forward way to preform a "safe" search and replace is provided by plugins such as Search & Replace or WP Migrate DB

We are looking into ways to avoid this issue in the plugin level.

[peepshow]

Thanks @joshmarom, I was just reading up on this and was about to suggest the issue could be related to the serialized data. Thanks for clearing that up.

As I mentioned I'm already using WP Migrate DB, and still have this problem. Even though it claims to handle serialized data. I'll see if others have had similar issues with it.

Unfortunately duplicator isn't really an ideal option, it means a lot of changes to my current workflow. I far prefer to continue to deploy with Git.

Thanks for the support.
®

[joshmarom]

@peepshow I just tried it myself with Migrate DB and it worked like a charm.
I suggest you give it another try with more attention to detail.

[arielk]

We are still waiting for your update. Feel free to reopen the issue and we'll be happy to help you further.

[peepshow]

HUGE THANK YOU!

I just noticed last night that with your v0.10.0 release and the move to JSON data stores, migration should be easier. I had been managing with a workaround - exporting and importing page by page using the elementor templates - which worked but was pretty tiresome, plus all images had to be relinked one by one.

This morning I've tested a few different migration scenarios, using WP Migrate and deployment via git, and so far everything is working perfectly. 😌

I can't stress how relieved I am to discover this on a Monday morning.
Well done guys, and thanks for the great tool and your responsiveness to feedback.

Waiting patiently on the next feature release... custom widgets maybe 👌

[arielk]

@peepshow I'm glad the problem is solved!

We're working on many new things - like custom widgets :) - stay tuned.

[RobsWebDev]

I see that this issue has been closed but I am now having this same issue as well. I have used all of these methods described above, but my layout is still getting broken, as if there is no CSS being added to the page. My host does not allow Duplicator, but I have tried the WP Migrate DB plugin and it does not work. I have also tried the All-In-One- Migration plugin with the same result. I was able to create a new page on the live site and use the same template from the previous one, but it just seems like extra work to do this. Has there been any other discoveries in this regard?

[arielk]

@RobsWebDev Please read this docs: http://docs.elementor.com/article/131-replace-url-change-domain

[KBoisvert]

I'm having the same issue, using all-in-one migration, changing URL (I'm not sure if I'm doing it right : is the local url something like http://localhost/Bois_Starter_GP/wordpress/wordpress/
regenerate css... I had the problem on the local site, I've been able to get it back but I try so many things that I don't remember but I would think it has something to do with the DB. the prefixe of the database is not the same. Should I create de DB before I migrate?

[PouncingFox]

Has anyone found another solution to this issue? I am using WP Sync DB (https://github.com/wp-sync-db/wp-sync-db) which is basically the same thing as WP Migrate DB Pro, but free.

I have noticed that if I go to the page and "edit with elementor" and simply click save, it fixes everything. I am assuming it's rebuilding the serialized data when I click save? It is quite annoying to have to go to each page and click save.

[Mw1994]

Hey guys I need your help I made an website using WordPress and used elementor as plugin to build the website totally so is there will be any problem while hosting that website on online server??need your help guy's

[parthasaradhis]

Please follow below steps
1.In Elementor save it as template with any of name
2. find that template in WP Dashboard>Elementor>My Library>Export Template
3.Import that file in WP Dashboard>Elementor>My Library>Import Template
4.see this link "https://www.youtube.com/watch?v=7Spk7k69WZM" you will understand

[AdalDesign]

I solved a similar issue by going to /wp-admin/ and then under Elementor > Tools > Regenerate CSS files.

[blue928]

As a developer, I understand how this works in that many builders utilize a separate serialized data structure in a separate (options) tables.

We just created 100s of pages in a staging environment and now we have to upload them to the production server. Using solutions like Duplicator, etc is not an option.

I understand I can Edit, Save as template, import to production, create page from template, and then delete that template (because it's a page, not a template) - but c'mon - this can't be the way to do this. It's infuriatingly too slow. It literally would take longer to do the import than it did to create the pages.

Even if that is the workflow, is there a bulk way to do this? When we cannot use a database migration tool, how are we supposed to get pages from one installation to another?

[harpalsadhra]

I solved a similar issue by upgrade php version from cpanel. May be this one help .

[jpSimkins]

To even suggest a plugin for a simple DB migration is just ridiculous. Not only is that inefficient, it's not even solving the problem.

The issue here is that Elementor creates CSS files and stores them in the uploads directory. The only solution, asides from having a way to regenerate the CSS files, would be to also export the uploads directory when you sync the sites. This is why having CSS edits done by plugins is bad practice anyways.

For anyone having this issue, just sync the uploads/elementor directory and you are good to go. You should be syncing DB and uploads directory anyways for a proper stage environment.

[slavetotheweb]

So this thread is almost 3 years old from the original post - but as far as my experience goes, this remains a factor when migrating Elementor sites. I have had pages corrupt (look fine in editor, but blank or missing elements on live) when trying to move from one server to another, particularly if also changing the main URL (e.g. with dev to live migration). Regenerating CSS was not the answer in these cases.
To be clear - I am referring to the serialization of data that it seems many otherwise reputable backup or migration plugins won't treat formally, and hence will break the site. With the issue compounded by any DB search/replace operations needed to change URLs.

Could someone confirm that this remains a factor, and the recommended/official way to avoid corruption? I presume it remains as using specific plugins that adhere to serialisation methodologies - or if you're so inclined - saving out templates and re-importing them - which is understandably NOT a suitable method for many sites.
I'm being careful not to call it a 'issue' or 'bug' because I know there are real reasons why it happens - but it does make life harder than it needs to be.
Also be useful to know if the Elementor roadmap still has anything in it that might reduce/remove the impact of this?
Many thanks, Simon

[WideSmiler]

I have the same issue still with Elementor! I have found that the most reliable fixes are:

1. Regenerate CSS files in Elementor settings.
2. Change Elementor's default CSS print method from internal embed to external CSS File. If already set to external, change it to internal embed, save, refresh, then change it back.

The 2nd one is what did the trick for me most recently, but regenerate CSS has also worked in the past. It's very finicky with Elementor!

[phoshenwen]

Digging up this stone-aged post for another round.

I migrated an Elementor site yesterday, and lo and behold all inner page styles were broken (saying inner pages because the front-page remained unaffected for some reason). Using a combination of ANY of the above mentioned solutions did not help (after restoring a pre-launch db backup). When accessing a broken page via Elementor I see the same broken layout there, so can't click 'update' in hopes of restoring the styles either.

I realize that Elementor's 'replace url' feature aims at replacing some of the plugin solutions posted above. Again, none of this solved the problem and it is very time-consuming having to re-do all these pages. People have been seeing this issue for the past 4-5 years now, I would be glad to see the Elementor Devs provide an updated answer/solution for 2020...

[WideSmiler]

@phoshenwen UGH we still have this issue almost every launch as well. I may be able to help you figure it out - I've dealt with it a bunch of times on recent migrations/launches. Are you open to sharing the website URL? Or if you'd rather send it to just me, you can live chat it to me through my company's website (the live chat and contact form goes straight to me today): https://jollity.io

[phoshenwen]

@WideSmiler We manually fixed the styling right after launch, since this was a client's live page.

Rather than sending you the URL would you be able to explain your approach in how you handle this issue?

[WideSmiler]

No, I don't mind sharing at all, but it really depends on the site, the server, the migration method, etc... and my reply would be filled with a ton of "if this, then this" statements to try to address every possible scenario we've run into with Elementor site launches losing styling.

The migration method, the plugins used on the site, the existence of a child theme and/or the location of custom styles seem to have the biggest impact on what needs to be addressed.

I'm glad to hear you got it fixed quickly though.

[phoshenwen]

This was my successful workflow for another Elementor project this morning, changing the URL from staging to live only. This workflow is specific to my company's setup, so take this with a grain of salt.

point IP to new server on registrar
replace URL under Elementor -> Tools -> Replace URL
replace font URL under Elementor -> Custom Fonts -> Edit -> Edit -> enter correct URL
change URL on hoster from staging to live on host (optional depending on your setup)
run velvet blue under Tools -> Update URLs
Regen CSS under Elementor -> Tools -> Regenerate CSS

Anyone see anything worth changing?