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:
Click “Create Field” and select “Replicator” from the Fields list as seen below:
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:
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).
Lastly, link the new Page Builder Fieldset to any Blueprint.
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.