Pull out static content (with or without images) or take action tasks in columns.

This very flexible block allows you to group content in aligned, responsive and styled columns. The block allows the use of  a Title, Description, Header, Body, text link, button, icon image, and numbered tasks (and combinations of those).


  • KEY INFO >> More than 4 columns is not allowed. If you need 8 columns, please insert two blocks, one after the other. 

Gutenberg editor

Styles

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

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 – edit mode

For each image, you can edit the following fields: 

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 – edit mode

For each image, you can edit the following fields: 


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 – edit mode 

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 – edit mode
Images style – frontend
updated icons block.png

Block elements

In the first part of the block, editor can add a title and a description for the entire block. A maximum of 4 columns can be added at once for this block, by selecting Add Column. 

For each Column, the following fields can be edited:


Links & resources