Predefined Columns

The predefined columns feature allows developers to add default blocks with specific column configurations to the builder. This feature uses the registerColumns function to create blocks with fixed column sizes. Each block can contain up to 12 columns, and the sum of the column sizes must always equal 12.

This feature provides flexibility to design pre-configured blocks that can speed up the design process for end-users and ensure layouts follow certain guidelines.

We have a few pre-built blocks available with different column sizes. You can add your own blocks with custom column sizes.

How It Works

The registerColumns function accepts an array of numbers as a parameter. The array defines the column sizes for a block. Each number represents the width of a column, and the sum of these numbers must always equal 12, as the builder’s grid system is based on 12 columns.

Basic Usage

To create a custom block with predefined columns, call the unlayer.registerColumns() function and pass an array that defines the column widths.

Example: 4 Columns

In this example, we will create a block with 4 columns:

• The first and last columns will each take 2 parts of the grid (smaller).
• The two middle columns will each take 4 parts of the grid (bigger).

unlayer.registerColumns([2, 4, 4, 2]);

This results in a block with the following layout:

Example: 3 Columns

In this example, we will create a block with 3 columns:

• The first two columns will each take 3 parts of the grid.
• The last column will take 6 parts of the grid.

unlayer.registerColumns([3, 3, 6]);

This results in a block with the following layout:

Guidelines for Using registerColumns

• Grid System: The builder’s grid system is based on 12 columns. This means that the sum of the numbers in the array passed to registerColumns must always equal 12.
• Column Flexibility: You can define columns of varying sizes, but they must fit within the 12-column grid.
• Customization: Developers can use this feature to provide end-users with pre-configured layouts that suit specific use cases or design guidelines.

Practical Use Cases

Here are some scenarios where pre-defined columns in blocks can be useful:

• Standardized Layouts: Ensure that end-users follow predefined layout structures for brand consistency.
• Design Templates: Speed up the design process by providing commonly used column configurations as ready-to-use blocks.
• Responsive Design: Define column sizes that adapt well to different screen sizes, especially when targeting mobile or tablet devices.