Last Updated on September 13, 2023 by Spynaija
Webflow is a popular web design platform that allows you to create and publish websites without writing any code with their subdomain for free. However, if you want to get the full HTML , CSS and Javascript code for your Webflow site, you will need to pay for the subscription this will allow you to export your codes. In this article I will show you how export your code with paid plans and how to export your codes in the FREE plan without breaking the bank.
Disclaimer: This is just for educational purposes only. You should subscribe to get the code, as it is a little bit easier
Here are two ways to get the full HTML CSS and Javascript code from your Webflow site:
Paid Method: Export the code from Webflow
If you have a paid Webflow plan, you can export the code from your site directly from the Webflow Designer. To do this, follow these steps:
1. Open your Webflow project. 2. Click the **Export Code** button in the top right corner of the Designer. 3. Click the **Prepare ZIP** button. 4. Wait for the code to be prepared. 5. Click the **Download ZIP** button to download the code.
To install it
1. Go to your file manager on your hosting
2. Click the Public_html folder
3. Upload your files there
4. Extract the file into the Public_html folder.
The ZIP file will contain the Webflow HTML, CSS, and JavaScript code for your entire site.
Free Method
If you have a free Webflow plan, you can still get the full HTML and CSS code for your site by publishing it with Webflow and then extracting the source code yourself. To do this, follow these steps:
- Publish your Webflow Site.
- Download HTTrack: Httrack is a web copier application that allows you to copy live sites, then follow this guide on how to download, install and use it.
- Insert the url you published on webflow on HTtrack and follow the guide on the post
- After it has finished downloading you will need to edit the html code by navigating to the folder you downloaded it in. Be mindful you need to locate the exact folder that contain your website data in them as httrack often create its own folders. for easy identification, the folder you are looking for is named with your exact url: eg spynaija.webflow.io
When you have located your folder you will see There are Webflow Favicon, Website site description and Made by webflow overlay at the footer you will need to change
To change the favicon just navigate to the image and change the favicon to yours.
To remove the “Made by Webflow” overlay, on each pages immediately after the <Html Doctype> tag, there are some codes added automatically before the meta tags. Delete those lines and the overlay will disappear
That’s it. You have all the files you need from webflow for free.
FAQ
Yes, using the method we have discussed in this article you can export all the codes
The free option will include some things like webflow favicon, webflow overlay and some things pointing to the published sub domain but if you know a little coding knowledge you can change it
Yes, Webflow allows you to export individual pages or specific content by configuring the export settings accordingly. You can choose to export only the parts of your project that you need.
If you face any problems while exporting your Webflow project for free, refer to Webflow's official documentation or comment on this post for guidance
Yes, there are other web design tools and platforms that offer export options. Adobe XD, Figma, and Framer are popular alternatives that allow you to export your designs for development.Can I export my Webflow HTML, CSS and Javascript project for free?
What are the limitations of the free export option?
Can I export individual pages or specific content from my Webflow project?
What should I do if I encounter issues during the export process?
Are there any alternatives to Webflow for exporting web designs?
Exporting your Webflow project for free is a convenient option when you want to take your website beyond the Webflow platform. By following the step-by-step guide provided in this article, you can obtain your website’s HTML, CSS, and JavaScript code at no additional cost. Just remember that while the free export option is useful, Webflow’s paid plans offer more features and flexibility for your web development needs.