Page Header

This is a ‘cover header – top of page’ pattern. It includes a background image, header, tagline text, and optional button on the right.

Note: Below are some of the most useful WordPress blocks that are available on our site. Some are built in to WordPress, others are made available by the 3rd-Party Ultimate Blocks plugin, and others still were developed as custom blocks specifically for ABWE. Many of these blocks can be used in conjunction with each other (ex. images, text, and buttons inside columns). Use this page for inspiration when creating pages.


Header Block (Use H2 or Below. H1 is only for the top cover block)

This is a paragraph block. Each paragraph is considered its own ‘block’, though you can select multiple blocks at once.

You’ll also notice ‘separator’ blocks throughout this page. These are short, centered lines that can create helpful visual breaks between sections of content.


List Block

Below is a ‘List’ block…like for groceries!

  • Eggs
  • Bread
  • Milk
  • Anything But Fritos

Content Toggle Block

The ‘Content Toggle’ block is from the Ultimate Blocks plugin. It is great for FAQ and similar sections. You can choose to have it collapsed by default.

Why should I read this?

No, seriously. Why should I read this?


Tabbed Content Block

This is from the Ultimate Blocks plugin.

This is the content of the first tab. You can put images, buttons, or other blocks in here.

You found the monster at the end of this book!

I’m sorry, Mario, but the princess is in another castle.


Counter Blocks

Below are ‘Counter’ blocks from the Ultimate Blocks plugin. They are displayed in a 3-column arrangement.

0
Coffees Served
0
Emojis Shared
0
Lord of the Rings References

Icon Block

The “Icon” block is from Ultimate Blocks, and allows you to insert an icon as a block. These are displayed using columns:

Follow Us on Instagram

Like Us on Facebook

Follow Us on LinkedIn


Quote Block

Below is a quote block. It is not very flashy, but it can be a clean, simple way of indicating that this is a slightly different form of content.

One of the greatest feelings in the universe is the waking up to the smell of freshly cut licorice trees.

David Brandt

Pullquote Block

Below is a pullquote block. It creates a more dramatic pause for the reader to consider something.

This is the most incredible quote in the universe.

So incredible.

David Brandt

Testimonial Block

This is a ‘testimonial’ block. It is from the Ultimate Blocks plugin, is a bit more stylish, and adds the option for a portrait image on the left. The downside is that it doesn’t work if you don’t have an image.

“I’m not superstitious, but I am a little stitious.”

David Brandt

Executive Director of WordPress Blocks



Cover Block Template

This is a ‘cover block template’ (pattern). This is different from the cover template that is used at the top of pages, as this one can be stacked on top of another without any space between. This can be used to present quotes, special CTA’s or other content, and is a great way to break up a lot of white space on a page.

This is a ‘cover block template’ (pattern). It is great for mid-page quotes. It can be stacked without space between itself and the next block of content.

You Can Drop Images Here Too:

abwe advent devotional

This Uses a 2-Column Layout Inside the Cover

Behold, all of the column-y goodness.


Spacer Block

Below is a ‘spacer’ block that can add any amount of blank space between blocks. You can’t see it, but it’s there. Most times, you won’t need this block. But if a block is configured in such a way that it has no space between it and the next content, you can insert a spacer to create that needed gap.


Image Block

In most cases, don’t use an image by itself. It’s overly large and creates more unnecessary scrolling for the user. Consider using an image inside of a cover, column, or media & text block instead.


This is slightly more interesting than an image block, but still very bulky. Use in rare cases due to its size. This looks better and is more compact on mobile.


Media & Text Block

This is perhaps one of the best ways to display an image & text side by side, as it has the best overall look both in desktop and mobile. Other options below can also work, but this tends to yeild the best responsive result.

Behold the Layout

This is a Media & Text block. It can used as a way to display a larger image to the right or left and then add text on buttons next to it.


Column Block

Columns can be a great container for multiple block types. However, when working with columns, be sure to check how the content within aligns together. For example, in the 33/66 example below, the contents of the 1/3 column (i.e. the image), are vertically aligned with the content on the right, such that they are center-aligned.

1/3 Columns

This is a ‘Columns’ block, set to thirds. You can use it to present an image to the left, and then use the remaining 2/3 for text. If the image is square, it can be rounded into a circle, in the side panel settings.

A columns block can also be used to present 2 or 3 columns of symmetrical content, as in the example below.


Thing 1

This is a 3 column Column block.

Thing 2

This is a second column of 3

Thing 3

This is the third column of 3


Columns Within Columns

Here is an example of a 2 colum layout, where each column also contains a 33/66 column. This is a great way to make content more compact on desktop displays, though the spacing on mobile isn’t quite as nice. Nevertheless, it can be a great go-to when there are many items to display in a list on a single page.

Header 1

Here is some sample text.

Header 2

Here is some sample text.


Styled Box

The ‘Styled Box’ block is from Ultimate Blocks. It can be displayed in 4 different styles, and can be used in a 1,2, or 3 column arrangement. The downside is that you can’t add a button (or any other block type) inside each column. You are limited to an image, heading, and text.). So this is best used when buttons aren’t needed below each item.

Carols

We offer a large library of Christmas carols.

Cards

We offer a large selection of Christmas cards.

Cookies

We offer a large kitchen full of Christmas cookies.


YouTube Block

This is used to add a YouTube video. There are also seperate blocks for Vimeo videos, or for a video that is uploaded directly to the media library of this site.

You can even add an optional caption.

Call to Action Block

This is a custom ABWE block. It includes options for a headline, text, image, and URL. This is great when you want one CTA to stand out above all others.


This is a custom ABWE block. This allows you to feature hand-picked posts in a grid.