📚 Create Content > Blocks > Columns and Tasks

⚠️ Watch out ⚠️ there are 2 types of Columns blocks, the “Planet 4 Columns” and the default WordPress “Columns“. Keep reading to learn how to use both


Planet 4 Columns

When adding the Planet 4 Columns block, there are 4 options of styles you can choose from:

Key info > More than 4 columns is not allowed in the P4 columns block. If you need 8 columns, please insert two P4 columns blocks, one after the other. 

Style 1 – No image

Purpose: Lay out short bits of text in columns with the option to include a button to guide the user to deeper content.

The content here could be informational, or reflect different aspects; e.g. Why this matters? and The problem.

Keep it brief, approx 50-100 words for each column.

Pages: Home, Evergreen, Issues, Tags, Take Action

No image style – back end

No image style – front end


Style 2 – (Take Action) Tasks

Purpose: Insert a series of engagement opportunities visitors can pick from to create positive impact. This block makes each step easy for our supporters. Generally, we use a “Learn, do, share” approach, but the only limit is Greenpeace’s imagination.

Pages: Take Action pages

Tasks style – back end


Style 3 – Icons

Purpose: Lay out short bits of text in multiple columns with the option to include a small Icon image and a text link to guide the user to deeper content.

Pages: Home, Evergreen

Icons style – back end

Design files are here

Icons style – front end

If needed, the Static Four Column block can be used in a creative way, like in Take Action pages. See the snapshot of the “A Million Acts of Blue” Take Action page, pretty funky, uh?

The web team had an 8-step engagement journey, and rather than using the Block: Take Action Tasks (which allows up to 4, numerically ordered tasks), they opted for the Static Four column. Well done guys!


Style 4 – Images

The last Style accommodates full-width images in columns

Images style – back end

Images style – frontend

updated icons block.png

Settings

On the right side we can also find the Setting option. Here, the editor can set how many columns the block should have, as well as set the links for each column and whether to open in a new link or not.

WordPress Columns

Editors also have the option to insert in P4 pages the default WordPress columns block.

The WordPress Columns Block allows you to insert text, media, and other types of content into up to 3 columns. When used one after another, the columns create a grid effect.

Once you add the Columns Block, you can choose a variation to start with (and you can change the number or add more columns later). If you want to use the default variation (50 / 50) you can click on the Skip option.

Image showing the various columns block variations to choose from.

Video intros

A general block intro by the P4 team 👇

It is possible to add or remove columns. To do so, click outside the box, between the box and the sidebar then change the number of columns (up to six) 👇

Adding columns to the default WP columns block

Once defined the number of columns, you will want to add content to each column. The amazing thing about the columns block is that you can add other blocks into each column (media, text, etc). Check this video out 👇


Design Elements

All design files of the block are available in the P4 Design Systems > Blocks > Columns


Links & resources