Blog

11 Aug 2022

Themify v7 Beta Release

Development / 41 Comments

We might seem quiet lately, but we are actually working very hard on a major framework update. It is so BIG that we had to skip a version. We've jumped from version 5 to 7. The reason we skipped a version is because we don't recommend downgrading your Themify themes after upgrading to v7. For this reason, we are releasing a beta version so you can try it before updating your themes.

The last v5 update focused on the frontend performance and we are happy to see many of our users' sites getting A+ score on Google Pagespeed Insights. In this v7 update, we re-coded a lot of components in the backend to optimize the framework and Builder's performance. Another significant change in v7 is the Builder row grid. We've changed the Builder row to use CSS grid in replacement of flexbox in the old version. Using the CSS grid gives more layout possibilities such as adding unlimited columns, column reordering, and creating tiled grids.

The Beta theme is based on Ultra using the latest v7 framework. Please help us test it on your staging/development sites (do not use it on any live site). As a friendly reminder, the Beta theme doesn't work with any of the current Builder addons and Builder Pro yet (please disable them prior to your test). Have fun with the beta version and let us know what you find.

Download v7 Beta and Install

• Download themify-beta.zip (don't extract the zip file)
• With any of your test/dev WordPress sites (please don't install Beta version on live sites): go to Appearance > Themes, click "Add New" > click "Upload Theme", then upload the themify-beta.zip and activate the theme. If you already have Themify Beta installed previously, you can use Themify Updater plugin to auto update (you should see the update notification on the admin area if you have Themify Updater activated).
• NOTE: The Beta version doesn't work with the current Builder addons and Builder Pro. Please deactivate them prior to testing the Beta version.

New Features

You might not notice major changes visually with the new version, but there are many new hidden features & improvements particularly the Builder's performance.

Unlimited Columns

In the previous version, the grid was limited to 6 columns. Now you can add as many columns as you want.

Column Order

Aside from the unlimited column feature, you can move columns to any order or to another different row as you like. The old version was limited to left-to-right column order or right-to-left on responsive mode. The new version allows you to position columns in any order for desktop, tablet and mobile. That means you can move the last column to the second on the tablet and move first column to the third on mobile.

Gutter Size Control

For the column gutter spacing, now you can set global gutter width at Themify > Settings > Themify Builder Options. On each Builder row, you can enter custom gutter width to override the global setting. Also, you can select/enter different gutter spacing individually for desktop, tablet and mobile (which you couldn't do with the previous versions).

Responsive Column Resize

One of the handy grid features is being able to resize the column width by resizing the column divider. We've improved the feature to allow you to resize the column width differently for desktop, tablet and mobile.

Responsive Background Mode

The background mode now can be responsive. Basically it allows you to select a different background mode for desktop, tablet and mobile. For example: you can have a parallax background image on desktop, zoom on tablet, and then fullcover for mobile.

Layout Demo Image Import

When you import a predesigned layout and save it, the Builder will download the demo images to your site. This will prevent broken or not found image errors when our server is down or the image files are removed on our server.

Important Changes

• CSS Grid and Column "%" Padding Change
  The previous versions used CSS flexbox to handle the row grid. Now it has been changed to CSS grid. This affects how the browser calculates the column padding with "%" unit measurement ("px" and "em" column padding is fine). When you upgrade the theme and turn on the Builder, it will convert the old column "%" padding to a new value that matches your layout. This is the expected behavior (don't worry). Due to the changes, we highly advise not to downgrade the theme after the upgrade. Test the new version on a staging/development site first before you upgrade it.
• Body and Column Classes Removal
  Some of the body classes (eg. tb_responsive_mode) and column classes (eg. first, second, last, etc.) are removed. If you have existing custom CSS that targets those CSS classes, they will no longer work. Please contact us or post on our support forum if you need any assistance to update your CSS for the new version.
• Removed Click Mode
  Since most users prefer to use hover mode, we've decided to remove the click mode to simplify the Builder UI.
• Avoid Downgrades
  Once you upgrade to v7, please avoid downgrading to the previous versions as it might affect your layouts. If you update the theme, edit the Builder layout, then downgrade the theme to the previous versions, the following might/will be affected:
• Column "%" padding: Since the new version converts the column "%" padding to new value, the padding will look different if you downgrade to the old versions.
• Column direction, auto column height, and column alignment: The old version doesn't have responsive column direction, auto column height, and column alignment. If you downgrade the theme, they will be reset back to default.
• Column gutter: The old version doesn't have responsive and custom gutter width. If you enter/select the custom gutter width, downgrading the theme will reset them back to default.
• Custom column size: The new version allows you to resize column width for responsiveness. Downgrading the theme will reset them as well.
• More than 6-columns: If you add more than 6 columns with v7, downgrading to the old versions will reset the grid.

Changelogs (In-Progress)

Below are the in-progress changelogs in v7. We will update the changelogs on the final release.

• New: Builder: Can add unlimited columns
• New: Builder: Column order can be responsive
• New: Builder: Custom row gutter control per row & responsive
• New: Builder: Resize column width on responsive mode
• New: Builder: Different background mode (video, parallax, fullcover) can be selected for responsive
• New: Builder: Layout images will download to user site when importing layouts
• Change: Builder: Grid has changed to use CSS grid
• Change: Builder: Removed click mode
• Change: Builder: When a module is disabled or not available, shows notification message
• Change: Builder: Some column classes are removed (eg. first, second, last, etc)
• Change: Builder: Some Builder body classes are removed (eg. tb_responsive_mode)
• Fix: Builder: Responsive column has render delay
• Fix: Builder: Social Icons widget css not loaded on Builder mode
• Fix: Builder: Page Break module missing "X" delete button
• Fix: Builder: Empty column gradient styling breaks module styling
• Fix: Builder: Inline edit the HTML/Text code will remove the html code
• Fix: Builder: Image Module: image width and height doesn't match on Builder mode
• Fix: Builder: Masonry doesn't re-render when window size change on Builder mode
• Fix: Builder: Text Module: Responsive "Multi-Columns" option for Text module doesn't work
• Fix: Builder: When importing row/module, it adds -2 on the custom ID name
• Fix: Framework: If you purge page cache and then purge all cache, it redirects to 404 page
• Change: All Themes: Group sidebar, content width and section scroll into 1 field

Comments & Bug Reports

We are very excited for this new version. Please help us test it and provide your feedback. If you have any comments or notice any bugs, feel free to post on this post's comment form or contact us.