Blog

Themify v7 Official Release – Faster & Better

Themify v7 Official Release – Faster & Better

Today we are proud to announce the long anticipated v7 release! Since our last major update (v5), we've been planning to further improve the pagespeed and performance of our themes and the Builder. The v5 update focused on the frontend pagespeed, whereas v7 is for the backend performance. The main goal is to make our themes faster and with better stability. We've re-coded many components in the backend to optimize the overall code — less database queries and lighter code (PHP/Javascript/CSS). We are happy to see many of our user sites getting A+ score on Google Pagespeed Insights (see some of our featured user sites and showcase). This update will make our themes much faster and better!

A significant frontend change in v7 is the Builder row grid system. We've replaced the old CSS flexbox to CSS grid to handle the Builder grid system. Using the CSS grid gives more layout possibilities such as adding unlimited columns, column re-ordering, and creating tiled-like grids.

This is a big update, so we jumped from version 5 to 7. Due to the data structure and grid system changes, we highly recommend not to downgrade your theme once it is upgraded to v7 (read the important notes at the end of this post for more details). Please be advised that all Builder addons and Builder Pro must be updated as well in order to use with v7. Testing the theme update on a development/staging site is recommended.

AFTER UPDATE: If you have any cache plugin or server-side cache and CDN tools (eg. Cloudflare), please remember to clear their cache. If you have Cloudflare Rocket Loader, server cache and mod_pagespeed enabled and experiencing issues, try to disable them.

Unlimited Columns

Themify Builder is no longer limited to 6 columns. Now you can add as many columns as you want.

Add unlimited columns

Responsive Column Order

You can move columns to any order or to another row as you like. The old version could only display the columns in left-to-right 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.

Column re-ordering

Responsive Gutter Size Control

Now you can set global column gutter width at Themify > Settings > Themify Builder Options. On each Builder row, you can also enter custom gutter width to override the global setting. The gutter sizing is also responsive. You can select/enter different gutter spacing for desktop, tablet and mobile.

Custom gutter width

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 column resize

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.

Responsive background mode

Layout Demo Image Import

When you import a predesigned layout or skin demo, our framework can download the demo layout 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.

Responsive background mode

Row Frame Animation

We've added a little nice touch to the row frame. You can enable animation on the row frame to make it scroll in forward or reverse direction.

Table of Content

Download Google Fonts for GDPR Purpose

Due to the GDPR laws, a lot of European users are concerned with using Google Fonts because Google uses cookies to track the font usages. So we've added a feature to download the in-use Google Fonts to your local server. To enable this feature: go to Themify > Settings > General > Google Fonts, check "Download Google Fonts to Local". Once you enable it, our framework will download the Google Fonts that are called in the theme, the Builder and the Customizer.

Download Google Fonts to Local

Gallery - Drag to Sort

On the Gallery module, now you can drag the gallery preview items to sort them without having to go back to the media lightbox. You can also click on the "X" icon to remove the image in the gallery.

Gallery - drag to sort

Video - Hover to Play

If you have a mp4 video in the Video module, you will see the additional "Play on Hover" option. Basically it plays the video when the cursor hovers on it. The "Play on Hover" can be combined with the "Overlay Image" option. When the user hovers the image, it will play the video. This feature is not available for third party video embeds such as YouTube and Vimeo.

Video - Hover to Play

Low Power Mode Video Background

As you may know that mobile devices (iPhone and Android) don't allow auto-play videos when low power mode is enabled. That means the video background will not work on low power mode. We've solved this problem in v7. When the user makes an interaction (tap or scroll) on the page, it will trigger the video background. This feature only available for mp4 video background (not for YouTube and Vimeo).

Video Background - Low Power Mode

New Modules

There are several new modules added in the core Builder and Builder Pro.

Table of Content

The new Table of Content module is very useful for creating documentation and tutorial posts. The module is very easy to use. You just need to select the headings (eg. h3, h4) and it will generate a table of content automatically. It has the built-in scrollTo feature which allows users to copy the anchor URL and share it.

Table of Content module

Rating Star

Rating Star is a simple module for display rating stars with full customizations. You can select custom star icon, add text before, text after, set the number of stars, spacing, font, color, etc. The similar rating star feature is added in the Testimonials module as well.

Rating Star module

Code

For the coders out there, you would love the new Code module. If you post a lot of code snippets/tutorials on your site, this Code module is extremely useful. Simply paste your code and it will convert the HTML entities such as '<' and '>'. It even has code syntax highlights for various programming languages. You can select a large range of color schemes from light to dark.

Code module

Taxonomy

The Taxonomy module has been requested a few times in the past and we are happy to include it in Builder Pro. It lets you display any custom taxonomy along with the cover image and the recent posts of the terms.

Taxonomy module

Reading Time

Reading Time is another new module added in Builder Pro. It is for editorial sites to display the reading time of the posts. It scans the length of your post content and estimate the reading time. You can use Reading Time in both archive and single post templates.

Reading Time module

Important Changes & Notes

  • 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 before you upgrade it.
  • Body and Column Classes Removal
    Some of the body classes (eg. page-loaded, tb_responsive_mode) and column classes (eg. second, third, 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.
  • Fixed Position on Column
    Due to how CSS grid works, if you have custom CSS that set column to be position:fixed, it will affect the column width and the grid. Contact us if you need assistance to fix this.
  • 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 values, 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.

Upcoming Features

Below are the upcoming features we've planned for the next main update. If you would like to suggest new features, please post on this post's comment form.

  • Lottie Animation
  • Paypal Module
  • Touch device support (edit Builder content on touch devices such as tablet and mobile)

56 Comments

  1. Paulo
    Dec 07, 2022 @ 01:36

    Thank you!

    Upgraded my site (no fear!) and everything is fine.

    I think this is an amazing upgrade.

    Nice work, indeed!

    Reply

  2. Fernando
    Dec 07, 2022 @ 01:55

    YAY!

    Reply

  3. Jose Lozano
    Dec 07, 2022 @ 02:06

    broke down all sites… how can I return to previous version?? :(

    Reply

    • Nick @ Themify
      Dec 07, 2022 @ 02:58

      Please refer to the ticket: https://themify.me/forum/topic/rollback-to-previous-version

      The issue is likely caused by WP Rocket. Can you try to disable that plugin or any cache/minify plugin you have?

      Reply

      • LEE
        Dec 07, 2022 @ 15:55

        Just updated Nick, Well done buddy and your team!

        Smooth as butter with ULTRA.
        Did plugins first, then theme.
        Siteground security plugin and Optimised Plugin all working smoothly.
        No problems.

        Straight 100 across the board on Light house!!!
        Im seeing the real difference on lighthouse when testing mobile.
        And 100% with a load time of 0.532 seconds on GTMetrix.

        NICE!

        Reply

  4. Cristián Uribe
    Dec 07, 2022 @ 07:53

    Reordering columns on responsive layouts wasn’t going to be a feature?

    Reply

  5. Andrei
    Dec 07, 2022 @ 08:56

    Awesome! I hope will get Green Score on the mobile version too!

    Reply

  6. Gregory
    Dec 07, 2022 @ 13:08

    It’s been a long time since we got new modules or builder addons. There’s so many new features showing up in competing theme systems out there.

    I would love to see things particles, tilt, animated text, gradient text, etc…

    I mean go out there and see what the “other guys” have and bring some of that love to Themify.

    Reply

    • Fernando
      Dec 07, 2022 @ 14:00

      You can do all this already.

      Except animated text. I know particles you can do but not natively.

      Reply

  7. Puspal
    Dec 07, 2022 @ 14:32

    Great ! Rewriting things from ground-up is requires stamina, patience and guts. You need to get the whole team on it. Is this the fourth time Themify is doing it?

    I hope Slider Pro too get updated with more animations in the future.

    Reply

  8. Jorge
    Dec 07, 2022 @ 14:49

    I installed the update in a staging site. Looks great! However I had two issues:

    1. I still use Themify Shortcodes –to add icons, mostly– and I found out that if I edit a page/post with the Builder, the shortcodes dissapear after saving.

    2. Wherever I added a Social Share module it doesn’t load completely. It keeps showing the three loading dots.

    Reply

    • Jorge
      Dec 07, 2022 @ 21:25

      OK, forget number 1. It was a styling problem, but number 2 is still an issue 😓

      Reply

  9. Jörg Spieler
    Dec 07, 2022 @ 14:58

    Hi, i can’t see the v7-update of the builder-plugin?

    Reply

  10. Kevin D.
    Dec 07, 2022 @ 15:22

    I noticed that accordions’ style has been stripped away when I upgraded. Also, when I try to apply background color to an accordion’s title, that background color is applied throughout the content area.

    Reply

    • Nick @ Themify
      Dec 08, 2022 @ 01:37

      The Accordion title issue has been fixed in the latest update.

      Reply

      • duranduran
        Dec 11, 2022 @ 10:49

        Just wanted to report similar thing, yesterday I just updated to Themify Ultra 7.0.2 and just now I updated to Themify Ultra 7.0.3 but the problem still persists.

        On the accordion “Title” styling tab, the HEX code is written on “Background Image” instead of “Background Color”.

        So far as temporary fix, I’m using CSS code to apply one background colour. I used various colour for that as I got plenty of accordions on my website pages.

        Reply

      • Kevin D.
        Dec 12, 2022 @ 16:16

        I upgraded to the latest version 7.0.4 and am still having the same accordion issue. More specifically, within the accordion element, the style that have been set are:

        Title > Background color > value missing from this field and placed in the ‘background image’ field.

        When I place color hex code in the background color field, it becomes the background color for the entire accordion element (title area and content area)

        Reply

  11. Eric van der Wal
    Dec 07, 2022 @ 15:48

    I did v7-updates on a few more-or-less basic websites and it went good. Sometimes a page refresh was needed. The user interface backoffice feels fresh and fast!
    No problems so far. Good job!

    Reply

  12. Ryan Rantz
    Dec 07, 2022 @ 20:18

    Updated smoothly for me, thanks Themify!

    Reply

  13. Tony
    Dec 08, 2022 @ 03:45

    Best theme ever. You always update what’s best for users. Very glad I bought it.

    Reply

  14. Branko
    Dec 08, 2022 @ 10:06

    Finally – grid! Nothing could have made me happier. Keep up the excellent work!

    Reply

  15. Marcus
    Dec 09, 2022 @ 00:33

    Go Themify Team!

    Great job! :D

    Reply

  16. thesoulscholar
    Dec 09, 2022 @ 05:18

    I updated my theme (Music) and all plugins, including addons, but I cannot see them in the Builder. Some of them, I can only access on the backend builder.

    Reply

  17. Vikash Dewchand
    Dec 09, 2022 @ 11:34

    Hi

    Did the update yesterday on my word press woo commerce website.

    Everything works fine apart from my mobile menu?

    Can someone please advice what to do?

    It does not work on my samsung android device.

    Reply

  18. wolfslayer
    Dec 09, 2022 @ 14:18

    The Events plugin does not work with the new version.

    Reply

  19. Atif Rehmani
    Dec 09, 2022 @ 14:19

    Great Job!
    Waiting for a long time for this fantastic release :-)

    Thanks to the Themify team.

    Reply

  20. Eduardo
    Dec 09, 2022 @ 15:25

    Amazing Update!!! Thank you Themify team!!!

    It would be amazing to have more WooCommerce modules available in order to customize Profile page, Checkout, and payment pages, just as we are able to modify product pages with Builder Pro :)

    Reply

  21. nengerman
    Dec 10, 2022 @ 09:06

    I updated everything, and the website was destroyed.
    That’s how it should be, https://www.sandrapersonaltraining.nl
    So it is after the update, please browse the menu. https://www.sandrapersonaltraining.nl/test/

    Wim Nengerman

    Reply

    • Nick @ Themify
      Dec 10, 2022 @ 10:19

      Just checked the site you mentioned. It looks fine. Could you give more details of the issue?

      Reply

  22. Wim Nengerman
    Dec 10, 2022 @ 11:15

    The correct website is https://www.sandrapersonaltraining.nl/
    Click on review in the menu and see what the page looks like.
    Go to https://www.sandrapersonaltraining.nl/test/
    Click in the menu what the page looks like there.
    That doesn’t look like it should.
    That is also with blog, gift card, contact form, collaboration

    Wim Nengerman

    Reply

    • Nick @ Themify
      Dec 11, 2022 @ 02:50

      Thanks for reporting this. Will log it. The issue is zoom scrolling background image not covering the row container. Meanwhile on mobile breakpoint, you can change the background mode to Fullcover or Parallax Scrolling.

      Reply

  23. Daniel
    Dec 10, 2022 @ 21:39

    Great additions! Love the new modules. GJ Themify!

    Reply

  24. Gabriele
    Dec 12, 2022 @ 23:45

    Very interesting update! I appreciate the option to download locally the Google fonts to follow GDPR rules, and for the same reason I hope you will add not Google related captcha (as I suggested in the forum, eg. Cloudflare Turnstile).

    Tomorrow I’l update 2 websites and see if everything will render fast and fine :-)

    Reply

  25. Kasia's fotogalerie
    Dec 14, 2022 @ 20:43

    I really love this update. Keep up the good work guys!

    Reply

  26. Jamie L
    Dec 15, 2022 @ 01:06

    Gotta say this is an impressive update. Updated it on 2 of my client sites, the pagespeed quickly boosted to 95 on desktop, and 91 on mobile (due to DNA, can’t share URLs). Good job guys! Keep up the fantastic work. Got more client referrals because I can get their sites to get high pagespeed. Thanks.

    Reply

  27. Alfred
    Dec 19, 2022 @ 22:18

    I was a long time Themify user, then switched to Elementor+Astra, but couldn’t get high Pagespeed Insights and GTmetrix. So recently I switched back to Themify. Now I’m getting 98 on desktop and 91 on mobile. Will see if I can optimize my content for mobile to get 95+ and submit to the showcase gallery. Thanks for the v7 update. It is faster than before. I like the little details you guys added such as that notification bar. Kudo!

    Reply

  28. wilcochris
    Dec 22, 2022 @ 14:47

    Hi, loving the updates as always but I must be missing something as I cannot see Taxonomy or Reading Time in the builder modules and I can’t see a step by step guide on how to use them.

    Any pointers would be much appreciated

    Reply

    • Nick @ Themify
      Dec 22, 2022 @ 16:56

      The Taxonomy and Reading Time module is in Builder Pro. You can use them in Pro archive and single template or Builder content.

      Reply

  29. Adauto Silva
    Dec 23, 2022 @ 14:45

    All my sites are on version older than (V.7). Am I at risk of my website designs breaking?

    CSS not working?

    Reply

    • Nick @ Themify
      Dec 23, 2022 @ 21:44

      V7 would consider stable at this moment. We would recommend to update the theme on a staging site first.

      Reply

  30. duranduran
    Dec 27, 2022 @ 11:14

    Since updated to v7 (Themify Ultra) all of my websites’ Google PageSpeed dropped from 70+ to 90+.

    Reply

  31. Ruth
    Jan 02, 2023 @ 22:38

    I also switched back from Elementor for the pagespeed concern. Did a quick test run on my site. I’m getting 93 pagespeed compared 85 before. Now time to redesign my layout for the new 2023. Keep up the good work.

    Reply

  32. Atizaz Ahsan
    Jan 05, 2023 @ 13:30

    Hi , excellent work.

    Please work on mobile menu, when you click it takes few seconds to show you, wired.

    If you fix this issue, I can say themify is one of the best

    Reply

    • Nick @ Themify
      Jan 06, 2023 @ 17:05

      This doesn’t sound normal. Could you provide the site URL so we can inspect it?

      Reply

  33. ourbgcc
    Jan 09, 2023 @ 18:18

    After upgrading to Themify v7.1.1, Accordion Title backgrounds now show same default colour as fonts, instead of specified colour #497383. How do I fix this? Thanks.

    Reply

    • Nick @ Themify
      Jan 13, 2023 @ 04:20

      It might be related to the wrong styling ID in the previous versions. Could you try to redo the color again?

      Reply

  34. Paul Mak
    Jan 14, 2023 @ 04:04

    Module Title Background Colour was set to #497383 before installing the latest release. It still shows the same entry even though white background is displayed.

    I have just changed it to a different colour, but the title background colour is still white.
    I then changed it back to our stadardized colour #497383, but the title background is still white.

    So the latest release overrides whatever value I enter into Module Title Background Colour.

    Reply

  35. Paul Mak
    Jan 15, 2023 @ 22:35

    Never mind, I figured it out: set Background Colour for Title, not Module Title. Thanks.
    Paul

    Reply

Reply