Beaver Builder is one of my all-time favorite additions to the WordPress ecosystem (see our full Beaver Builder review here, or our full review of all WordPress page builders). It’s the first drag-and-drop WordPress layout builder I can really recommend, and use without resentment on my own clients’ sites. Given how helpful a good WordPress layout builder is, that feels a bit like saying it’s the first working teleporter—a big deal.

This Quick Guide shows you how to use Beaver Builder to create good-looking layouts that combine a single, readable text column with wider breakout images—much like Medium, the famously readable content platform. You’ll also get a good general sense how to use Beaver Builder as the flexible WordPress layout builder it’s designed to be, using different row and content width configurations. If you want a Medium style WordPress theme, this is a good way of getting it without having to choose from a narrow selection of “Medium-specific” WordPress themes.

How to Create Medium-Like Layouts in Beaver Builder

1. If you don’t have it, get the Beaver Builder plugin. I can also recommend the free Understrap starter theme as a simple base to build from.
2. For a narrow text column, create a row whose content is “Fixed” to a relatively narrow width: 700px to 800px.
3. For each “breakout” image, create a new row whose content is “Fixed” to a relatively wide value, such as Beaver Builder’s default of 1100px.
4. For a fullscreen “hero” image, you’ll need to be using a template that lets you design within the entire viewport, such as Understrap’s “Empty Page Template.” Create a full-width row and give the row a background image.

Having a WordPress layout builder we actually like opens up a tremendous number of possibilities, so we’ll definitely be doing more Beaver Builder tutorials in the future. I hope this helps you understand how to start using Beaver Builder row and content widths to make the layouts you’re looking for.

Get Started with Beaver Builder