Page Builder Track
Lesson 5

Drag and drop in the visual editor

You have got your page builder configured. You get to reap the rewards of all the hard work.

You're going to start creating a full page from start to finish, which will look like this.

  • Hero
  • Split image (Image on the right, text on the right)
  • Split image (Image on the left, text on the left)
  • Features

Here's an example of the final result of the above. (opens in a new tab)

This replicates a common content structure seen on many websites.

Create the page builder blocks on a new page

You're going to need to have data to be able to see the page builder in action. For this, create a new page in Sanity and start adding blocks to it.

If you want some quick data to get started, you can use the following.

You can click the above link to get a random image.

Drag and drop

By now you should have all the blocks with content created from above.

Here's your first editorial task: shift the features block from the very bottom of the page to the very top using the visual editor. Don't read any further than this. Try it out for yourself without looking at the next step.

It's difficult to do right?

Here's a pro-tip: whenever you're using the visual editor, you can use the shift key to zoom right out and see the entire page. This makes it a breeze to move blocks around from a bird's eye view.

Have a go again, but this time hold onto the shift key while you're dragging the block.

I bet that was a lot easier!

The finish line

You've created your page builder, wired it up to work on the frontend, and used the visual editor to move blocks around.

You have built the gold standard of editorial experience for your end users. Great job!

What remains is to learn about some of the pitfalls and challenges of using the visual editor at scale, which will be covered in the final lesson.

Lesson 4Lesson 6