Purpose: Dynamically display #Tags, Take Action Pages or Posts in a consistent three or four column layout.


Add the block to your page

Adding blocks to P4

Adding Covers in the Gutenberg editor

Covers’ styles


Take Action Covers

Purpose: Display take action covers, categorized by tags or chosen manually. These covers (or cards) are the main way to navigate to engagement content, and MUST be associated to a Take Action page.

Pages: Act, Issue, Campaign

This style will pull all the Take action covers associated to Take action pages, corresponding to a tag or several you choose.

The Order of the Take Action covers is by default based on publication date / tags but it can be customized by changing the “Order” setting in the Take Action Page.

For ex, by giving 1 to the Take Action you want to appear first and 2 or 3 or higher to the others will determine the order..

Take action covers edit mode

The editor has the following fields available to edit:

There is also a preview available in the Gutenberg editor.

Covers block – Take action covers style – edit mode

Take action covers frontend

Take action covers in the frontend

Campaign Covers

Purpose: Show related campaigns based on #Tags. The shown campaigns will be #Tag pages which have the same CATEGORY.

Pages: ISSUE pages

Content: The content (Tag Name and Image) for this block is generated by, and links to, the corresponding Tag Page.

Campaign Covers edit mode

The editor has the following fields available to edit:

There is also a preview available in the Gutenberg editor.

(Remember to select the #Tags you want to be shown!)

Campaign Covers frontend


Content Covers

Purpose: Display certain kinds of posts (usually publications) in a four column layout. The web editor tells the block which kind of post to select.

Pages: Issues, Explore

four-column-content
Design and live version of the four-column block, with the portrait images automatically aligned

Content Covers edit mode

The editor has the following fields available to edit:

There is also a preview available in the Gutenberg editor.

Content Covers frontend

KEY INFOS

 

  • This block automatically pulls out the post Featured Images in a Portrait (vertical rectangle) version – more on Create Posts

Ideally, the Content Four Column can be used to dynamically pull out a set of publications related to each other, like our Greek colleagues did with their Annual Reports Page.


Manual override option

The last option of the block allows you to manually choose which content the block should display.

  • KEY INFO> To Manually choose which content, you don’t have to select #Tags   

design files are here.


Links & Resources