Exporting Code from Webflow for Use in Drupal

Hi all,

Does anyone know if it’s possible to export code from Webflow for use in Drupal? I can do it with HTML but not sure what to do about CSS and JS.

Thanks,

Niall

1 Like

The answer is yes, but I think you need to look for the details and guidance in another place.

Webflow will export a flat structure of HTML, CSS, JS and resources. With that, you need to build a Drupal Theme. Theming in Drupal is a complex thing, there’s a lot of possibilities, but digging in the code is mandatory.

So you have to find a Drupal theming forum or help resources, where people are used to render HTML templates dynamic for Drupal.

4 Likes

Hi @Niall_Mc_Dermott,

As an (ex-)Drupal specialist, I can confirm that @vincent is correct (he often is!).

The issue is not so much on the Webflow side. You can design your pages in Webflow with ease, then export the complete code and assets (provided you have a plan that is compatible with this feature).
You will lose the CMS/e-Commerce and forms dynamic links of course, since the receiving platform is not compatible. They will therefore be exported as static UI.

I am writing “not so much”, because Drupal’s view of a template is very different from Webflow’s.

In Webflow, templates are merely ready made pages (physical items with possible configurations and UI in them). They act more like accelerators to get quicker to the final design, but they are not a “theme” which you can transport from site to site and switch on/off.

In Drupal, a template is a proper logical structure, made of global + mini layouts, controllers, and models (you may be interested in learning more about MVC), all organised in folders and relevant scripts and assets, so that you can plug that into the CMS and Drupal knows what to do with all the bits and pieces, all the way down to blog posts, e-commerce items, and forms.

Since Webflow would give you flat files, one for each page of your designed website, you will need a Drupal dev or front-end dev to slice this into a Drupal template for you. Hence Vince’s suggestion.

Usually, since the Drupal theming is complex, the approach is to modify an existing ready made one to match your design.

You can look at the following resources to assist you:

This is rarely cheap to get the job done well, but you may find someone who can do it on the Drupal communities.

Please note that, from that moment on, your Drupal template would exist in isolation from Webflow, and no updates in the Webflow UI will reflect in Drupal dynamically. Updates would have to be done in Drupal from then on.

There are some Design to HTML services out there that can help you:

I hope this helps.
Toff.

2 Likes

Thanks both for the info. Much appreciated. I’m looking to make updates to an existing Drupal site rather than create a new theme. It looks like I need a deep knowledge of HTML which I don’t have unfortunately.

Hey I just figured out how to serve a landing page built in Webflow inside of a Drupal installation. This doesn’t factor in your Nav/Footers from Drupal though… but it would allow you to create landing pages or certain pages in Webflow and use them on your Drupal site… in a way.

Steps are essentially this:
1) Use FTP to create a directory for your Webflow content inside of Drupal’s root directory. (ex: create a folder titled “webflow-page”.
2) Upload your files to that directory/folder using your FTP client.
3) Create and upload an .htaccess file inside the directory/folder containing this code:

`DirectoryIndex index.html index.htm

RewriteEngine On
RewriteRule ^index.html$ / [R=301,L]
RewriteRule ^(.*)/index.html$ /$1/ [R=301,L]`

The first part tells Drupal to look for and accept/render HTML files. Whereas the second part tells drupal to strip index.html off the end of the URL structure of the page.

4) Navigate to yoursite.com/webflow-page/ :blush:

You could in Step 1 create subdirectories inside that root… for example /webflow-page/awesomepage

Hoping maybe that helps in some level.

2 Likes