‘Components’ : the building blocks of email design

7 minute read

Structure will help guide your readers through your email content and using components is how you do it.

Component selection

When using the Sign-Up.to email editor, components  are the underlying design technology that allows you to freely create the structure or layout of your email. To create structure you simply select the type of component that you want for any given section of your email and drag and drop it into your layout. You can mix and match components and move and copy them as you wish. You can also nest components within each other for even greater flexibility. Once in place components are simply blocks of content; you can choose between images, text and other content types.

Creating structure with components

Entering the email editor and select a base layout to start with. Choosing one of the pre-built layouts will give you a place to start from, but don’t worry – you can modify the layout at any time. Click the ‘Components’ tab on the right hand side and the component library will appear.


Component library

You’ll find single columns with full width (great for header banners) and indented width (great if you’ve got heading type text on a coloured surround), and 2, 3, 4, 5 and 6 multiple column options. You’ll also see that the 2 column components have a 30:70 and 70:30 options. They’re great for combining content and images together in different ratios. There’s also a ‘spacer’ component which allows you to add a variable vertical padding between components. By the way if you want a handy guide to the column widths for each component type you can find it in my previous blog post.


Click the type of component block you want and drag it across into your layout. The structure will appear – the blue line shows you exactly where it will go. If you don’t like it, you can remove or move it until it’s right. Once the component is in place you’ll see the different content options for text, image, button and social share. If you added each of the component types in turn it would look a bit like this!

All components

Nesting components

For even greater layout flexibility you can nest components within other components. Build your components in the normal way, adding text or images as required.

Nesting components

Once in place you’ll see the ‘+’ icon. This allows you to add a new component inside the existing one. It’s really useful for grouping multi-column images and text together or for adding descriptive text or call to actions to the same component as an already included image.

Nesting components

Custom components

We’re continually adding new components to the library. If you have a specific need we can also create a custom component for you. One such request was a 2 column component with controllable left and right orientation. This can be used to alternate image/text and text/image variations in a newsletter type layout. Alternated text and images looks great when viewed on a desktop but would otherwise produce an unnatural image-text text-image image-text etc reordering when collapsing the content to a mobile device.

Custom components

Got an idea or a need for a custom component? Drop us a line (solutions@sign-up.to) and we can create it for you.

Responsive design

(Of course) all components created in the Sign-Up.to editor are fully responsive – that’ is they will progressively collapse as the viewing screen size becomes smaller, ultimately down to a single column for portrait orientation viewing on a smart phone screen (watch this space for more information on how responsive design works – coming soon).

Desktop and mobile devices

Other than using the responsive editor you don’t need to do anything to make this happen. However, it’s worthwhile considering how your content will be presented in a variety of desktop, tablet and mobile scenarios and designing the ‘story’ of your message accordingly.

Here are some examples that show how components can be used to create different styles of campaign. In each case the underlying component structure is shown alongside the finished design.

Single column layout

A single column layout is perfect for simple messages or those with a primary message and call to action. It’s great for mobile devices – people are generally happy to ‘thumb scroll’ linearly through email content. If you have a logical story progression through your content then single column also works well generally, on any device size.

Single column layout

2 or 3 column layouts

2 or 3 column layouts are often used for newsletter style content with headline articles or hero graphics in single column. How you layout your text and images will accentuate different parts of your content and will influence how readers navigate your content.

Newsletter layout

Multiple column layouts

Multiple column layouts are useful for product catalogue type of content. In this scenario images work particularly well to show the catalogue items and the multiple columns nicely separate the calls to action. Using the Sign-Up.to editor multiple columns will collapse nicely to a single column for mobile. This will allow readers to quickly scroll to find the products or services of interest.

Multiple column layouts

If you’d like to know more about the mechanics of email design take a look a look at our latest coffee break guide – ‘The Anatomy of an email‘. It’s free to download. 

Anatomy of an email