Drag & Drop Web Pages with the Themify Builder

Drag & Drop Web Pages with the Themify Builder

Yesterday, WPReviewLab published a review on Themify Flat. With the release of this WordPress theme, Themify also introduced its Themify Builder – a drag-and-drop Page Builder. In this post, we will explore this Themify Builder more in detail.

The Page Builder is available for pages and posts. Not only for regular WordPress posts, but for all custom post types too.

You launch the Themify Builder is by clicking the Page Builder tab in the Themify Custom Panel. You find this panel directly beneath the text editor on the Edit Post and Edit Pages screen.

Themify Builder 1 - StartCreating content with the Page Builder is a matter of dragging modules to the canvas. In its initial stage, the canvas shows a row with four columns.

Themify Builder - MenusThe left side of the row displays the row menu. This menu offers two options; delete and duplicate. At the right there is a toggle that allows us to collapse or expand a row.

You can also have one, two or three columns. Just drag the divider between two columns to the left or to the right. Do you want to add a row? Simply click the gray button with the + sign at the left just below the last row. You can add as many rows as you like.

The modules available are: Accordion, Box, Callout, Divider, Gallery, Highlight, Image, Map, Menu, Portfolio, Post, Slider, Tab, Testimonial, Text, and Video.

Outlining the Page

For our case, we are going to compose a homepage with three content rows. We will have a slider in the top row. Next, we are going to showcase our main categories in row number two – a row with three columns. And finally, we will add a video and a map in the two column row above the widgetized footer.

Themify Builder 2 - OutlineOur first step is replacing the initial four columns by one; select one of the outer dividers and drag it to the other side. Mission accomplished.

In order to add row number two, we click the gray + sign in the left corner below the last row. This delivers another row, again with four columns. Drag the most left dividers to the middle, and move the most right further to the right. Done.

Hit the + sign once more for our third row. Drag the most left divider to the middle, and then a little back to one third. The Page Builder will create the other two columns for us.

Oops! Our plan was a middle row with three columns. No problem! Place the cursor somewhere between the row menu and the toggle, and drag the last row above the second row. Done!

Assembling the Page

Themify Builder 3 - Video

Now we are going to add the modules to their destination. Let us start with a Video in the first column of the last row. Drag the blue Video button to its destination. A wizard opens as soon as the module arrives on its spot. This wizard presents a form with setting. Some required, other optional.

When you are done with the form, hit the [Save]-button twice. First to save the form, the second to save the page we are building. To complete the row, we add a Map next to the Video.

In the middle row, we add three modules of the Post type next to each other. The first from the category ‘Frameworks’, followed by ‘Plugins’, and last but not least ‘Themes’.

In order to finalize our page, we add a Slider to the top row. Okay. We are ready to evaluate our efforts.

This is what we’ve achieved:

Themify Builder 6 - final page

Front-end Editing

When you are not quite satisfied, you can either return to the back-end, or edit your page in the front-end. To start editing in what-you-see-is-what-you-get-mode, click on the Themify Builder link in the Admin Bar and select ‘Turn on Builder’.

Front-End Editing
Front-End Editing

Now you can move and delete rows and modules, add new rows, replace existing content with new modules. Clicking on a specific module adds a yellow overlay and allows you to edit, duplicate or remove the module. And all this can be done in front-end mode.

Simple, fun, effective

Although Themify introduced the Page Builder only recently with the release of Flat, all Themify themes have been updated and include the what-you-see-is-what-you-get Page Builder.

The Themify Builder is responsive, and allows you to apply shortcodes. And as mentioned earlier, you can use the Page Builder with pages and all post types – yes, including custom post types.

The Themify Builder is a great extension to already feature rich themes. This nifty Drag & Drop Page Builder; simple to operate, fun to deploy, and effective, and comes integrated with every theme.

With Themify, you have several options to obtain Drag & Drop Web Pages with the Themify Builder.

For $49 you get a Standard Package. Next to the purchased theme, you are entitled to pick a bonus theme for free -- so will get two themes for the price of one.

You can also opt for a $69 Developer Package, which adds the layered Photoshop (PSD) files to your theme and the free bonus theme.

Both Theme Packages include access to support and theme updates for one year.

Alternatively, you can become a Themify Club Member, in which case you have four options:

  • $89 Master Club – all themes + Photoshop files, addons and plugins
  • $249 Lifetime Club – as the Master Club, but without recurring fees

So besides the themes, a Club Membership gives you access to all plugins, which includes the Themify Builder plugin that works with all WordPress themes!

The Master Club membership give you access to all themes, support and updates as long as you decide to remain a Themify Member.

The Lifetime Master Membership offers the same as the Master Club Membership, except that you pay only once, and enjoy all the benefits for live – without an annual club contribution.

Disclosure: This post may contain affiliate links. When you click an affiliate link and purchase the item regarding, ThemingWP may receive a compensation.

Reader Interactions

Comments

    • Hello Greg,

      Deleted Pages, Posts and (Partial) Layouts are moved to the Trash of these post types. You can restore them from there when necessary.

      Good luck,

      Wil Ransz

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest