Streaming live at 10am (PST)

A new easy way to convert Webflow to Wordpress

@simonosb1 I’ve got the basics working. Will try to post later this week about experiences with general template. Do you have a preference from the webflow free templates which i will explain?

4 Likes

following you Friend. anxiously waiting to read from you :smile:

Okay, so an update on my experiences of successfully getting a Webflow export via Pinegrow converted into a Wordpress theme.

Summary:

It’s not an easy process to get your static template into a dynamic Wordpress template. Pinegrow is marketed to be an alternative to webbuilders such as Webflow. But that’s only true if you fully (want to) understand HTML, CSS and a bit PHP. Only if you really need a Wordpress template after you’ve completed your design with Webflow, go with Pinegrow. Everyone else I’d advice to go for Webflow CMS over a Pinegrow migration. Every. Single. Time.


Cons:

  • Pinegrow software has a steep learning curve, you really need to get familiar with it’s user interface to get anything done. This took me about a week.
  • At first it feels like, there’s 100 things you need to figure out to get your template into Wordpress. And it stays that way with every new project.
  • Pinegrow is a stand alone web development tool. And the static HTML to Wordpress conversion is a bonus feature they have integrated later. So, you need to enable this functionality. [See also the next bullet]
  • There are somewhat difficult “must-do’s” before you can get simple things working in Pinegrow, such as enabling Wordpress functionality and configuring your template.
  • Pinegrow is designed by and for programmers, that is something you definitely “feel” using the software.
  • You should only use Pinegrow if you want to get into code. They are improving rapidly to become an easier click-and-drop software, must be said. But for now, if you don’t like code: use Webflow.

Pros

  • You can actually get your static WF-template into a Wordpress template yourself;
  • Once you know how Pinegrow works, you can do things fast. Very fast. As you can make symbols (as with Webflow) that you can re-use;
  • You can use/import current Wordpress content into your design within the software, and thus see what changes to the design will do without working on a live website;
  • You’ve got a library full of components that come well documented (and based on bootstrap);
  • There’s a bunch of tutorials that you should view and try-out before you start, that are a great help.
  • There’s only a one time fee to use PG, no monthly recurring cost.
  • There’s the possibility to connect libraries, that allow you to do well… almost nearly everything. Although this can be confusing to the novice user.

Looking back, my migration was a slow, at times painful and finally a rewarding process, that I couldn’t have done without help. In fact, I needed to start designing in a complete different way to get templates working. That has to do with the famous Wordpress Loop, which is similar to the way the Webflow CMS works with a dynamic lists.

Advice 1: If you don’t understand code, or want to go deep into tutorials, stick with Webflow

Advice 2: Please, please, please convert a template for fun first, before you even think of doing something for a client. If you know what kind of fields are required for Wordpress, you’ll design completely different in Webflow to make conversion easier.

Advice 3: If you do want to convert a Webflow export to Wordpress, follow this Pinegrow tutorial.

Hopefully this gives you guys some clarity. Let me know if you have questions.

6 Likes

Using webflow to create a design and then bring it into wordpress is something I do regularily :slight_smile: The trick is using a template with little or no styling and then pulling across the webflow html and styling as necessary to make it all work.

Would be happy to work with you guys on future projects if that is something your interested in doing. I’m very reasonable on costs :slight_smile:

2 Likes

Hi.

This sounds very interesting. Would you mind “illustrating” your process/workflow a little bit more in detail? For example when you say: “using a template”, do you refer to a WP theme or Webflow template?

Any detail is appreciated.

Hi Diu,

From your experience regarding the workflow: Webflow > Pinegrow > Wordpress, what are the key principles which you need to change when designing/developing templates for Wordpress?

Hi @olexalex, that’s not so easy to say directly. It involved getting to know Pinegrow deeply.

Keep in mind:

  1. Consider the Wordpress loop, don’t try to get any data outside the loop
  2. Give everything its own div
  3. Don’t use SPAN. Ever.
  4. Think about what Webflow has as functionality (for users, for posts) and try to design items around that in your design.

Does that help?

2 Likes

Hi Diu,

thank’s a lot for your detailed answer! I will keep those things in mind.

Thanks!

using a wordpress theme :slight_smile:

I have created a landing page with a bunch of interactions and the client is requesting me to move it to wordpress. Are there any tutorials that will show me the proper way to do this?

Has anybody tried this walkthrough on YouTube?

2 Likes

Hi Diu,

Just wondering what your thoughts are of Pinegrow a year on from this post?

I’m looking for a way of converting a Webflow design to a custom post type. If I do it with Advanced Custom Fields I can use its flexible layout functionality to create a ‘drag and drop’ of sorts.

Having come across Pinegrow I’m wondering if I would be better off doing it with that instead of ACF.

Any thoughts?

Hi @CircleWorks, in short: I gave up on Pinegrow as soon as Webflow had their CMS. Pinegrow did the job and has progressed big time in between. So now it’s even easier to get a static template converted to Wordpress.

I’m not sure how much time it takes with ACF, but there’s a steep learning curve for Pinegrow. My personal experience was that it takes a weekend, then you’re done with most of the work. If you know a bit HTML+CSS+PHP it’s doable. Otherwise, it’s a challenge.

I would still love to have an option to convert a Webflow theme to a Wordpress theme, because of all the plugins and extra options that would bring. So, if any of the @webflow team is reading along, here’s another try. :wink:

Does that answer your question?

1 Like

Hi Diu,

That’s really useful, thank you. I have done a fair bit of work with Wordpress so I am going to have a go at converting a Webflow design to Wordpress and use ACF as well. If I can get it working how I want it will be very powerful.

A built-in option to convert a Webflow design to a WP theme would be cool, but at least with the way it is at the moment it requires me to be the middle man :wink:

1 Like

That’s true. But the quality of fine design mixed with a good (content) strategy, is still worth money in my opinion.

This is the way to go man ACF is the truth!

Regarding Pinegrow… It’s about the same difficulty if you just use Pinegrow to build your theme template as it is to use Webflow. So, you might as well just build the whole WordPress theme in Pinegrow. You still need to know where to put certain WP code snippets and how they work in order to make your theme work correctly. It does make it easier than hand coding, though.

I just use my own html now and dont even use a wordpress starter template its far easier in the end. Download, chop up into header, content, footer. Create page templates and apply that template the the pages you create in wordpress. Add the wordpress loop and all done :slight_smile: Easy really

1 Like

Use this video for client’s website. It helps me to convert only front page. I had ten pages. I couldn’t figure out how to do rest of the pages. Too much coding, tight deadline so I just re-design the website in WordPress using my design in Webflow as a prototype :worried: