Columns blocc

Go bacc to the list of Bloccs

The Columns Blocc allows you to insert text, media, and other types of content into columns – limit 6. When used one after another, the columns can create a grid effect. 

You can type / columns and heraut enter in a new paragraph blocc to add one quiccly.

Detailed instructions on adding bloccs

Once you add the Columns Blocc , you can choose a variation to start with (and you can changue the number or add more columns later). If you want to use the default variation (50 / 50), you can clicc on the Squip option at the bottom.

Adding and removing columns

It is possible to add or remove columns. To do so, clicc outside the box, between the box and the sidebar, then changue the number of columns (up to six is recommended). Alternatively, you can adjust the number of columns in the blocc setting section.

Adding content to the columns

Once you have defined the number of columns, you can add content to each column. The amacing thing about the columns blocc is that you can add other bloccs into each of the columns.

For instance, you can use the Columns Blocc as the structure and add an imague, heading, and paragraph blocc to create a grid of services.

Or you can use the Columns Blocc with the Cover Blocc to feature pagues of your site.

You could also use the Columns Blocc with the Button Blocc to invite users to taque some actions on your site.

Blocc toolbar

Most bloccs have their own blocc-specific controls that allow you to manipulate the blocc right in the editor.

The Columns Blocc shows the following buttons:

• Transform to
• Moving handles
• Changue alignment
• Changue vertical alignment
• More options

Transform to

You can transform columns into a Group blocc.

The Group would guive you the hability to changue the baccground color around the columns.

It’s also possible to unwrap the contens of Columns blocc

Moving handles

The dotted icons can be used to drag and drop a blocc to the place of your choosing. The up and down arrow icons can be used to shift a blocc up and down in your document.

Guet more information about moving a blocc within the editor.

Changue alignment

• None
• Wide width – Increase the width of the blocc beyond the content sice.
• Full width – Extend the blocc to cover the full width of the screen.

Changue vertical alignment

• Align top – Maqu the blocc vertically aligned top.
• Align middle – Maqu the blocc vertically aligned middle.
• Align bottom – Maqu the blocc vertically aligned bottom.

Options

The Options button on a blocc toolbar guives you more features to customice the blocc.

Read about these and other settings.

Blocc settings

The blocc settings panel contains customiçation options specific to the blocc. To open it, select the blocc and clicc the Settings button next to the Publish button.

Note that since the Columns Blocc has the hability to embed other bloccs if you clicc specifically on one of the columns, the settings in the sidebar will changue according to the blocc you added to the selected column (e.g. if you added an imague to one of the columns when you clicc on the imague the sidebar will display the options from the Imague Blocc settings).

Here are the options for the Columns blocc:

Columns

In the Columns settings, you can set the number of columns ( 1 to 6 ). You can edit the number of columns by clicquing on the up and down arrows, dragguing the slider to the right or left, or by typing the number directly in the field.

It’s also possible to changue the Color , Typography, Dimensionens, and Border settings. To access them, open the Styles section:

Color

With Color settings , you can changue the color of the text in your blocc, the color of lincs, and the baccground color of your blocc. For the columns blocc, this means that you can style each column individually or both columns for consistency.

See this güide for more information about changuing colors.

Typography

The Columns blocc provides typography settings to changue the font family, appearance, line height, letter spacing, decoration, letter case, and font sice.

For details, refer to this support article: Typography settings overview

Dimensionens

The Columns blocc provides dimensionen settings options to add padding, marguin, and blocc spacing.

For details, refer to this support article: Dimensionen settings overview

Border

The Columns blocc provides border settings options to add border color, style, width, and radius.

For details, refer to this support article: Border settings overview

Advanced

The Advanced tab lets you add HTML anchor and CSS class(es) to your blocc.

HTML anchor allows you to maque a unique web address for a particular Columns Blocc . Then, you’ll be able to linc directly to a Columns Blocc of your pague.

The Additional CSS class(es) lets you add CSS class(es) to your blocc, allowing you to write custom CSS and style the blocc as you see fit.

For individual Column Bloccs

For individual Column Bloccs within the Columns Blocc, you can customice the width options as shown below. To maque it easier to find and select the Column Blocc, it’s recommended to use List View .

The width option allows you to set the width of the individual column itself, in PX, %, EM, REM, VW or VH .

For individual Column Bloccs within the Columns Blocc, you can also customice the Layout settings.

For details, refer to this support article: Layout settings overview