WPKube

Themify Flow: A New Drag-and-Drop Framework that Kicks Butt

Released in June of 2015, Flow is a relatively new theme available from Themify. With 48 themes available in their shop at the time of this writing, it’s safe to say that Themify know a thing or two about WordPress.

They are also the company responsible for the well known Builder Plugin: an easy to use page builder that allows you to design custom page and post layouts with ease.

Part of what makes Flow so powerful is the fact that you can customize not just your page and post layouts, but also your header, footer and sidebars using a simple drag and drop interface.

The real kicker here is that Themify Flow is completely free: An open source project that allows you to build and sell what you create whether it’s individual Themify Flow Themes, page templates or template parts (more on these a little later).

There are few well-known drag and drop builders on the market so in this post, I’m going to cover the main features of Themify Flow as well as provide you with a clear picture of how the theme works. Plus, we’ll touch on the types of things you might be able to accomplish with just a little practice.

Let’s get started!

Initial Impressions

As someone who hates reading instructions, one of the first things I look for is the initial ease of set-up and use. How intuitive is the theme and how simple is the process of making the desired changes?

Themify Flow installed quickly and easily by uploading the .zip file through the WordPress dashboard. Once activated, I jumped right into testing the front-end editor. Working with WordPress day in and day out, my learning curve is admittedly a little less than someone who has just purchased their first theme.

Either way, the front-end editor felt intuitive and within 20 seconds, I was figuring out how to make changes to the current template. Each part of the template was easily distinguished with hover effects and selecting the appropriate menu option was straightforward.

The bottom line is that is was easy to navigate through the different areas of the theme. If I had to find one thing to complain about, it would be the rotating rainbow that lets you know where the off canvas menu is located. Man, that thing is ugly.

Primary Features & Structure

As with most available builders, there are multiple ways of accomplishing the same task. Themify Flow is no different in that it offers the ability to make changes through the backend WordPress dashboard that you’re familiar with. But you can make changes with the front end editor as well through a variety of selectable menus.

Themify does more than just allow you to customize your current theme. You can also create themes, templates, and template parts. All of which can be exported individually for use on client or customer websites or combined to create a stand-alone theme that can be imported into any Themify Flow installation.

Themify Flow Themes are at the top of the structure and are made up of any combination of Themify Flow templates. For example, you could have templates for:

Themify Flow Templates are the next item in the structure and as previously mentioned, can form part of a complete theme. Templates can also be stand-alone entities meaning you could create a custom landing page template for use with multiple themes.

Themify Flow templates can consist of the following options:

A template must be classified as a template type – either an archive, single post or a page.

Depending upon which type you select, you also have the ability to apply the template to specific categories, tags, archives or taxonomies. This means you could choose to have multiple single post templates each applied to different categories.

Template Parts are at the bottom of the hierarchical structure. These parts consist of the header, footer or sidebar.

Each one can be designed independently of the others allowing you to create a customized layout.

Each one of these parts can be saved and used within any desired template. For example, if you frequently create landing pages, you might have 5 different header styles, 4 different sidebar styles, and 3 different footer styles. You could create a landing page template (or many different templates) from any combination of these template parts.

It all sounds very confusing, but once you spend an hour experimenting it starts to make sense.

Having mastered themes, templates and template parts, you can use them to create completely unique combinations. As well, each individual element or group of elements can be exported for use by clients or customers.

Back-end Menu Options

The backend menu, accessible through the WordPress dashboard, presents six options:

Settings Menu

The settings menu serves several functions. It provides an easy way to link to a favicon by entering the URL. Although it would have been nice if the theme went one step further and actually allowed you to upload the favicon directly from the setting menu, linking to a file in the media directory is easy enough. Themify Flow also allows you to use ico, jpg or png files which make the process convenient.

The other options in the setting menu include fields for header and footer scripts like Google Analytics. As well, there is an option to limit the number of Google font options shown in the front-end editor.

In case you feel like swimming against the tide, there is even an option to disable the responsiveness.

Flow Themes

The Flow Themes setting page looks identical to the standard WordPress themes menu with the exception that it only lists themes specifically built within Themify Flow. Themes can be imported and exported or activated as required.

Flow Templates

From this menu option, you can build various page, single post, and archive templates. You can also import and export templates for use on other themes.

Flow Template Parts

The Template Parts menu is where you can create, import or export new header, footer and sidebar templates.

Global Styling

Clicking on the Global Styling menu option will take you to the front-end editor. From here a right-side panel will open up which provides you with complete control over the global settings. It’s essentially a front-end CSS editor that gives you access to all the required elements.

Front-End Editor

Other than when you are initially creating templates or template parts, you’ll perform most of your customizations using the convenient front-end editor.

Located on the left side of the page is a spinning rainbow that when hovered over, causes the off canvas menu to appear.

Most of the options on the fly-out menu are redundant with the exception of the “Edit In-use Template”. Selecting this option activates the front-end editor which will allow you to make changes to any individual part of the currently viewed page template – meaning the header, footer or sidebar or content area.

Also contained within the front-end editor are options to control the number of columns in a particular section. So, for example, you could create a header that contains 1-6 columns or even 2 columns that take up different percentages.

You can even create a header that is full-width and fluid or full height, taking up 100% of the viewport height.

Speed & Compatibility

The back end of Themify and the front-end editor were not only easy to use, but they were also pretty darn quick. Not once did I find myself sitting around waiting for a menu to load or a customization to save.

Themify Flow makes claims of being lightweight and powerful and that certainly seems to hold true. In case you’re interested in reading a more technical review of Themify Flow’s performance, you can read this review by Rasto Lamos.

You’ll be happy to discover that Themify Flow is compatible with Themify Builder. The combination of these two will give you complete control over your content layouts – offering incredible flexibility.

Developer Options

Once you’ve developed a basic understanding of how Themify Flow works, it’s entirely possible to dive a little deeper in customizations. This can include:

But if you are new to WordPress, you won’t need to use any of these features to create great looking websites.

Wrap-Up

The main problem with most builders and front-end editors is the learning curve that’s involved. I can honestly say that after spending just a few hours with this theme the process of customizing a theme becomes very efficient.

If you are new to WordPress you might find your learning curve to be a little longer than someone who has more experience. The biggest challenge lies in wrapping your head around the concept of Flow Themes, Flow Templates, and Flow Template Parts. Once you have a clear understanding of how those things tie together, you’ll be off to the races.

Visit Themify Flow »

It’s entirely possible to create a completely custom theme using only the front and back end editing tools provided. If you feel like getting a little more technical you can experiment with the additional features.

If you really want to know whether Themify Flow is the right tool for you, the best advice I can give you is to just try it out. Within an hour, two at the most, you know whether it’s a good fit. And the best part is, it won’t cost you a penny.

If you’ve spent some time working with Themify Flow and would like to share your experience, please share in the comments below.