Need Help with exporting Webflow code

Hello everyone,

I was wondering how straight forward the process is to export my Webflow site? When I export the files and just copy and paste the pages, css, js etc into atom and then view the sites, it does not work at all. Meaning, the layout is broken (does not look like the Webflow site) and javascript is not working at all. I did test that the css and js files are properly connected.

Is there anything extra I need to do manually to make this work? Again, in Webflow everything looks and works as I want it to be. It’s just when I export the code, that the design is broken and the interactions are no longer working.

FYI: this is just for the static page. I know that I am loosing any CMS features with exporting the code.

Thanks!

Hi @Jana90,

When you export the code it will download as a .zip file.

Extract the file so that all the html pages, css folder, js folder, images folder are all sitting in a parent folder.

Find your index.html page and double click on that. The page should open in your default browser and the site should function as per a normal website.

The only reason to open in Atom (or any code editor) would be to change or add code.

Let us know if that makes a difference.

Keiran

Hi @knk! Thanks for your prompt answer! I tried that and layout wise it is fine now, but the javascript is still not working. So any interactions I created in Webflow do not work when I export the code.

Check your paths. I suggest opening up the site in dev tools and check your console for errors.

Hi @webdev
I did that and there are quite a few of error showing up. But I don’t know what they mean. Could you maybe help me?

Here is a screenshot:

Can you provide a link to wherever your site is running? I can then take a look.

The exported site is unfortunately not live, only the Webflow staging area is live but there everything is working fine. So I can’t share a link to the exported version…

The reason why I am doing this, is that I am trying to convert my Webflow site to a WordPress theme. I tried using Pinegrow and actually really like the process and the steps you have to do to convert the site to a CMS working theme and this is all clear to me.

The issue I run in here was right at the beginning, when I just tried to get the static Webflow site (without CMS) to my local environment. Same as when I just click on the exported code, the design/layout looks fine but some of the interaction = js are not working. When I inspected this version in chrome, I am getting also errors shown (not as many as if I inspect the html files themselves) But the very last error still shows up:

Uncaught TypeError: Cannot read property ‘tagName’ of null
at t.value (typed.js@2.0.9:10)
at new t (typed.js@2.0.9:10)
at (index):213

So as no one seems to be able to help me with the Pinegrow converter and why some of my interaction don’t work on the exported WP theme, I figured I go a step earlier and just look if everything works fine on the actual exported code (before using Pinegrow at all). And since there are quite a few errors showing up here already, maybe it’s not even a Pinegrow issue after all… but I honestly don’t know what else I can do now to figure this out

I just exported a site and then loaded it into a local web server. I did not get the CORS errors you are experiencing; WHICH stop the loading of jQuery which the animations and other Webflow functions are dependent on.

Are you loading the file as a file in your browser or served from a local hosting environment? Note: debugging your local environment is not something that can be done from the forums. That needs to be done on your end.

As to Pinegrow; Same thing. All I can tell you is to follow along with the video tutorial. I don’t use Wordpress and instead convert sites over to Processwire or Statamic when I need what Webflow does not offer if I design in Webflow at all.

@webdev so after a long time experimenting with my code, I figured out know why my javascript wasn’t working when I exported and converted my Webflow website to Wordpress. And it is actually due to a specific Webflow code.

Each html page has a unique Webflow page id, shown on each html file as:

html data-wf-page=“5eb266f71471ff7a36bb2084” data-wf-site=“5ea1e0ec9c38e73c61dbc9ad” lang=“en”

When I exported the code and then converted it to wordpress, wordpress only took the data-wf-page id from my index.html but not from the other pages and that is what is causing the issues with javascript on my other pages.

My solution was to copy and paste that code, respective for each html file, to the respective wordpress file, and place it above <?php get_header(); ?>

This fixes my javascript issue, so all Webflow interactions are now working fine. However, in safari, this is causing a few layout/design issues.

Therefore my question: is there any other way to include the page id numbers in my wordpress files so that the javascript works?

Would really appreciate if someone could help me with this.

I just wrote to ask you if you had solved this solution in another part of the forum! I tried your trick and it worked, but wow! what a nuisance this is. Did you find a way to not have to do this, and did you fix your Safari issue? I’ll work on it, too!