To make a design work modularly, your components have to be flexible, so they can be put together in a number of ways. One way to do this is to group your components into stackable sections that provide structure. The other is as smaller, standalone elements that can be plugged into those stackable sections, among content.

DICK’S Sporting Goods emails are a good example of this in practice. Because of the large number of products they carry, using this approach allows them to turn around more emails, faster. So they can keep up with the on-going promotional efforts that all of their products demand!

Structural options

Starting with a series of sections for building the layout, each section maintains a consistent space where components can be dropped in. Their sections include:

• An intro/feature area, with option to change the background color to match the featured photo
• Various banner formats
• Single-column layouts with different sized images and different ways to present copy around the images
• Multi-column options

Library of components

With space for smaller components determined, they were then able to go through and put together a variety of them. Each component based on a specific piece of content:

• Different title sizes
• Different types of body text, like legal copy
• CTA text links
• Buttons with style variants
• Button groups for listings
• Special category labels

Dividing components this way gives you a framework to work within when designing new layout sections and smaller components. It also allows for getting very specific with your pieces of content as you are able to have a range of options you can mix and match.

Learn how DICK’S Sporting Goods used Blocks Edit to visually build their emails using their custom designed components. And find out how to make your own design editable.