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

Migrate a Blocs V4 Project to Blocs V5

Blocs 4 and 5 both support building websites with version 4 and 5 of the Bootstrap framework. This means visual migration issues are very limited when moving a project up to Blocs 5. However, there are few changes in Blocs 5 that may cause some confusion or visual issues when working with your Blocs 4 project.

Back up your project

The most important thing to remember before you migrate a project from Blocs 4 to Blocs 5 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 4. So please back up your projects before you continue to migrate.

In Blocs 5 the toggle menu icon is now an inline SVG. This means it can be easily styled and customised using custom classes. However, if you previously used a custom Bric such as Easy Burger to customise the menu of your website, you may find some issues. We recommend building your menu again and removing any Brics that manipulate the menu, if you encounter issues.

Margin

Blocs 5 no longer has limited pre-set margin controls for text and images, instead Blocs has full access to the Bootstrap spacing utilities which offer a much greater experience. These allow you to apply pre-set margin and padding for any edge on any element. However, when using spacing, you may find the controls do not take effect. To flush an elements, margin or padding, hold down the option key and click the small X on the relevant edge segmented control that you would like to clear. After this you can now apply a new margin/padding value to that edge.

Colours

Blocs 5 has an entirely new colour system with many great benefits. However, due to such a big change, you may encounter some global swatches that may not work correctly in Blocs 5, when you try to assign them to an element. Simply right click the problematic swatch in the Swatch Manager and duplicate it, now remove the original and use the duplicated version.

Updated on 30th January 2023

Was this article helpful?

Related Articles