40 Comments

Major Builder Update Equipped With Live Preview and New Features

After months of hard work at the Themify headquarters, we’re launching a major update for Themify Builder. We’ve streamlined the interface, reducing clutter and increasing the workspace, and added live preview! Now you can instantly see any changes you make as the preview is updated in real time. To see all the latest additions in our new update, watch our new Builder video and read more below.

Better User Interface

Less is More

The first thing you might notice is the new interface. It is less cluttered for a faster performance and a smoother workflow. All the tools are placed in the top toolbar, providing more working space in the preview area.

Builder new interface

Backend Interface

The backend has the same consistent-looking interface and tools. The module panel is purposely designed to have the same width as the WordPress admin sidebar. You can lock the module panel to keep it visible at all times making it easier to drag & drop modules.

Builder backend interface

Live Preview

The next feature you will notice is the live preview. As you type or make a change, it instantly updates the preview. When you drop in a new module, it generates the pre-fill content to suggest how the module works.

Builder backend interface

Column Directions

One of the nifty features we want to highlight is the column direction. It allows you to select columns to float from left-to-right, or right-to-left on all different breakpoints: desktop, tablet, and mobile. A good sample usage of column direction is to create a perfectly responsive zig-zag layout. The image below illustrates an example of an image and text block in zig-zag order. On mobile, you can see the two text blocks are stacked on top of each other, which does not flow nicely.

Example of bad responsive flow

To solve the above problem, now you can select the bottom row to float from right-to-left on mobile.

Example of good responsive flow

Responsive Grids

One of the most commonly requested support ticket items is how to change the grid row/columns on tablet and mobile. Now the responsive grid feature allows you to take full controls of grids on desktop, tablet, and mobile. The grid feature works together with column direction. With that being said, you can make responsive grids like the 6-column for desktop floating from the left, the 3-column for tablet floating from the right, and the 2-column for mobile floating from the left.

Responsive Grids

Important Upgrade Notes

  • All themes, Themify framework, Builder plugin, and all Builder addons are updated to the latest version.
  • You must upgrade all of them together (Themify theme/framework/Builder plugin and Builder addons).
  • If you see any errors or malfunctions, upgrading them to the latest version might resolve the problem.