Skip to main content

Types of Content Blocks

Build pages with Craft's content blocks

Each page of the website is built using content blocks, which are exactly what they sound like: "building blocks" used to make web pages.

Different types of content blocks display different types of content: Full-width photos and buttons, text, resource links, and so forth.

In this tutorial, we'll examine the most commonly used content blocks using examples of the blocks themselves. We'll start with the Resources Links block—click any of these resource links to skip to the content block you want to learn more about.

Adding content blocks 

Clicking the +Add a block button shows the types of content blocks you can add to a page.

First of all, here's how you add a content block:

Clicking the + Add a block button shows the types of content blocks you can add to a page.

Let's have a look at what the rest of the content blocks do, starting with the one at the very top of the page:

Every page must have a page header, unless there's a really good reason why not. ("I don't like how it looks" is not a good enough reason.) Why are they so important?

  1. The Page Header block contains the page's H1 tag, which is crucial both to ADA Accessibility and search engine optimization (SEO).
  2. They're a crucial part of our site design.

The page header block contains a large photo and the page name. By default, the page header block displays the same image in this page's header. If you'd like to add a custom photo, you're welcome to do so. But! Make sure the photo is sized correctly. 

Page header photos should be 1200 pixels wide by 400 pixels high.

As with all photos, make sure you save your header photos in your area's subfolder.

— top —

Text Blocks

The very words you're reading right now live in a Text Block. There are two ways to present text in a text block. The first is the Text Content, which looks like this. This is what you'll want to use most of the time.

However, from time to time you may find you have a large amount of information that you need to display on a single page. For cases like this, we fortunately have:

The Collapsible Text Area

Normally you'd have much more text in this area.

Maybe. I dunno. Look, close the block and keep reading.

After adding a Text Area block, click either +Text Content or Collapsible to add the corresponding area to your Text Area block.

Here's a good concept to understand: A single Text Area block can contain multiple, separate Text Content and Collapsible areas. In other words, you don't need to start a new Text Area block if you want to add more text—just click either of these options to create more space for text.

Other blocks

Now that we've seen the basic content blocks, we'll demonstrate the more involved types by showing them on this page.

— top —

Full-Width Image Block

Below is the block of the same name. There are two ways you can use a Full-Width Image block. The first is shown just below: An image that stretches across the page. The second follows immediately after:

The pool at Cokesbury Court apartments.

The second way to use the Full-Width Image block is as a backdrop with text overlaid. When you use a Full-Width Image block in this way, it's more a method of breaking up a dull page than of highlighting a particular photo.

The text overlay gives you some basic text-editing tools to work with: Paragraph styles, bold/italic, alignment, and linking.

— top —

Sometimes you want to link an entire image to a page. That's definitely what the full-width image link is for.

Leadership Square, in downtown Oklahoma City

Button Callout Block

This block exists to highlight any kind of "call to action" your page has. For example, if you're trying to get someone to enroll in a program or learn more about a topic, a Button Callout block is a great way to do it.

You can link the button to a page on the site, an email address, or a custom URL.

Learn More

Button callout blocks are available in standard blue, light blue, and white varieties. Free of charge.

Learn Less

You may recognize these from pages such as: The university home page! And many others. We like these because they're visual elements. They're a great way to dress up a section's home page and link to important subpages. There's also a nice rollover feature that lets you include extra information that's visible when users mouse over the Image Link block.

Image Gallery

Finally, a way to showcase a bunch of images! In a gallery sort of way!