1. Home
  2. Using Blocs
  3. Blocs
  4. Migrate a Blocs V3 Project to Blocs V4
  1. Home
  2. Getting Started
  3. Migrate a Blocs V3 Project to Blocs V4
  1. Home
  2. Tips
  3. Migrate a Blocs V3 Project to Blocs V4

Migrate a Blocs V3 Project to Blocs V4

Blocs V4 uses version 4 and 5 of the Bootstrap framework. This means Blocs v3 projects will open in Blocs v4 and may only require a small number of tweaks and changes.

Also remember Blocs V3 can run alongside Blocs V4, so if you have large sites or projects with deadlines, avoid migrating these unless you have the time to make substantial manual changes that may be required.

Back up your project

The most important thing to remember before you migrate a project from Blocs 3 to Blocs 4 is to back it up. Once a project is migrated and saved it can no longer be reverted, meaning it cannot be opened or used with Blocs V3. So please back up your projects before you continue to migrate.

Font Awesome

In Blocs V4, the Font Awesome icon set has been updated to V5. Blocs will attempt to migrate any old icon classes from Font Awesome V4 up to the new classes required for V5. However, if you have added your own custom code implementations of the Font Awesome icons then these will need to be manually updated.

You can read about which classes have changed in Font Awesome V5 and how to manually migrate the classes here.

In Blocs V4 the carousel, light box and scroll to top button use SVG icons rather than icon fonts, this means the old subclasses that were used in Blocs V3 to set the colour of the icons will no longer work. There are new subclasses that target these SVG icons.
Please note, you will no longer use font colour to set the icon colour, instead use the new SVG stroke colour styling controls in the Class Editor.

Parallax Background

The way parallax works has changed in Blocs 4, previously it used this technique which applies the class rule background-attachment: fixed;. However, this approach has one major downfall which is, it doesn’t work on mobile devices.

In Blocs V4, parallax is now powered by a Javascript solution which means it works great on desktop and mobile. There are a few downsides to this new parallax method, the main one being, backgrounds no longer seamlessly repeat if you have a number of Blocs stacked together with the same background image. A workaround for this, is to simply relocate the main rows containing the Bloc content from each individual Bloc and place them into a single Bloc with the parallax background effect turned on.

If you really need to get the classic Blocs V3 parallax effect in Blocs V4, this guide will walk you through the process of creating it manually.

Migrating a Project Blocs V2

If you are migrating a project from Blocs V2 to Blocs V4, you can find the dedicated migration guide here.

Updated on 30th January 2023

Was this article helpful?

Related Articles