Building Your First Block

Welcome to the fun part! In this section we’ll build a simple block to give you an idea of how the block builder works and some of the things you can do with it.

Let’s build a block that looks something like this (I’ve dubbed it a resource card):

The idea is that our block will let us feature some sort of resource on our site (such as a case study or whitepaper). When we’re done, our block will let us:

• select an image for the card
• enter a title and summary
• specify a button label and link
• select an accent color

To make things easy, we’ll break this up into parts. In part one, we’ll create a basic version of our block. In part two, we’ll add a sidebar to our block and an additional feature that lets us choose an accent color for the block. In part three, we’ll see how you can use conditional logic to add CSS classes to our block. Let’s get started with part one!

Note: if you want to use the image shown in the screenshot above, you can download it here.