August 27th, 2021  |  Victor Paredes

Creating a Page Builder in Statamic

In this tutorial I will show you how to create a simple page builder by combining the power Statamic’s Replicator fieldtype and Fieldsets. To accomplish this, we will set up a Fieldset called “Page Builder,” which will store a Replicator field containing its own Sets of Fieldsets. I know that sounds like a tongue twister, but let's see what the end result looks like visually:

Step 1: Create a Fieldset called "Page Builder" containing a Replicator Field

Click “Create Field” and select “Replicator” from the Fields list as seen below:

Step 2: Create a Fieldset called “Hero Block”

Now we have to populate our Page Builder, so we will create a Hero Block which will become the first option in our Page Builder. A hero block is a very common feature of a traditional page builder and it usually contains background image, a title, and a button. You can make yours more complicated later, but let’s start with something basic!

In this Hero Block, we will add three fields: an Asset field (for our background image), a Text field (for our title), and a Link field (for our button). Here's what it should look like:

Step 3: Link the Hero Block to the Page Builder Fieldset

In the Replicator field that we created in Step 1, click “+ Add Set” and use the “Link Existing” button to add your Hero Block Fieldset. Frankly, it’s probably easier to show visually.

To add additional blocks to your Page Builder, simply create additional Fieldsets with various content and then add these Fieldsets as Sets in your Page Builder Replicator field (see note in above example).

Step 4: Add the Page Builder Fieldset to your Blueprint

Lastly, link the new Page Builder Fieldset to any Blueprint.

Step 5 (Optional): Go back to Step 2 and add more Sets.

If you add more than one Set to your Page Builder, Statamic will give you the option of which block you would like to add:

And that’s it! You are ready to start building your content.

Meet the Author
 

Victor Paredes is a web and print designer. When not hard at work, you can find him tinkering around with code, music, artwork, and archaic poetic structures. He is based in Portland, Oregon.
 
Close