Block Patterns
Block patterns are pre-defined block layouts that are available for starters of more complicated block structures. When using a block pattern, do not remove the extra classes added by the pattern – these are important for styling of the group or column.
Inner content blocks can be added and removed. Be sure to remove any unused block from a pattern.
Block patterns can be accessed from the “Patterns” tab using the block inserter. Click on the pattern to insert it into the editor.
You can also select the “Explore all patterns” button for a larger pattern browsing experience.
The following block patterns are available in BirdPress:
Page Sections
The HTML versions of these patterns can be found on the Patterns Examples page.
-
Two-column Page Section
Patterns available with the image on the right or on the left of the content.
-
Featured Article
Large Image with heading and optional call-to-action button on left, content on right.
-
Full Width Group With Background Color
Group with background color. To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
-
Group with Connecting Lines
Group with background color. Connecting lines before and after using the spacer block. To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
-
Columns With Connecting Line
Content separated by a connecting line that fills in with page scroll. An example of this pattern in use can be seen on our Brand Foundations page.
The header has a large text size. To change this: select the header; go to the Styles tab in the block sidebar; then select a size under typography.
To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
-
Group With Inner Connecting Line: Top & Bottom
Patterns available with connecting line on the top or the bottom of the group.
To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
-
Two-column Section With Background
Content and image columns in a full-width group with a background color.
To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
-
Image Offset: Top & Bottom
Patterns are available to offset an image on top of the group or at the bottom.
-
Article List Offset
Pattern is for offset on the bottom of a group only.
-
Two-column Images
Images inside the columns block with borders and connecting lines.
It is best to select an aspect ratio for these images. To do this: select the image; in the block sidebar, select an aspect ratio from the dropdown; repeat for the second image. (this text is not part of the pattern)
-
Social Media Links
Add links to social media accounts within content.
Call to Actions and Sidebars
The HTML versions of these patterns can be found on the Patterns Examples page.
-
Call to Action
Call out an action item with a brightly colored background, text and button. To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
-
Announcement
Get your reader’s attention with a brightly colored background to make a site announcement. To change the background color: select the group; go to the Styles tab in the block sidebar; then select a background color.
-
Right and Left Sidebars
Styled sidebar styles are available to bring more interest to the content. You can select a left sidebar or right sidebar. To change the style of the sidebar, select the group and use the “Transform to Variation” dropdown in the block sidebar.
You can insert a variety of blocks in the sidebar. It would be best to keep it limited to text, lists, images, videos and post lists.
-
Video with transcript in sidebar
Add a transcript under a right-aligned video using a wide sidebar. This is not recommended for longer videos with large transcripts.
Content Sections
The HTML versions of these patterns can be found on the Patterns Examples page.
-
Columns With Separating Borders
Columns with a border between.
-
Columns & Rows With Separating Borders
Columns with a border between and a group with a bottom border create this pattern.
-
Photographer credits block
If there are images on the page that do not have credits in the captions, add photographer credits to the bottom of the content.
-
References
Add references to the bottom of the page. A superscript number can be used to refer to a reference1 If you would like to link to the reference block through the number, add an HTML Anchor to the reference group and link the number (2)
Article Lists
These styles will help get a styled article lists block started with recommended base options for both designs. The HTML versions of these patterns can be found on the Patterns Examples page.
-
Card Display
Large images displayed in columns with the title only.
-
Alternate Card Display
Large images displayed in columns with the title and an animated arrow.
-
List Style
Traditional blog display with a thumbnail, title and excerpt.