Handy design tip – nesting components

4 minute read

Nesting components is a great way to build more complex structure and styling into your campaign layouts. It’s easy to do when you know how.

Nesting components

First – a step back. Components are the blocks of content which make up the structure of your email layout. There are lots of different component types to choose from. You can even create and save your own custom components. Once you’ve dragged your component into place you can then fill it with content – for example text, an image or a call to action button.

Say I want to add another block of single column content underneath this heading block – the obvious way is to select a new component…

Nest-2

and then drop it into place underneath the existing one.

Nesting

This results in 2 separate blocks of content that I can work with entirely independently. The small handle on the right hand side (with the 3 dots) allows me to now manipulate the original component…

Nesting

… independently of the lower component. Clicking on the 3 dots reveals the manipulation actions that you can take – like moving, duplicating and deleting.

Nesting

This means for example. that I could over-ride the global theme and create separate theming for each component. Here I’ve edited the local theme of each component to changed their background colours.

Nesting

With the second component now in place I can now add my desired content – in this case a call to action button. When it’s done it’ll look like this.

Nesting

However, there is another way – nesting.

Let’s go back to the original component. Clicking the component to expand the bar at the bottom reveals a small ‘plus’ (+) sign at the bottom right hand side..

Nesting

Clicking the (+) allows me to add additional components as a nested part of the original – I’ve added a new single column component. Note that theme change that I’ve applied here to the original component (the orange background) now also applies to the newly nested component too.

Nesting

So again if I opt to add a call to action button to the new component you can see how it nests in. It’s a component in it’s own right but it’s controlled as a part of the parent component (the handle with the 3 dots now controls both components).

Nesting

Nesting is a great way to append more complex component structure. Here, underneath the original text component I’ve dropped a new 4 column component. I can now nest another component under each of the 4 columns – to add an associated call to action for each image.

Nesting

With the images and the nested calls to action in place the finished result looks like this. Since they’re all part of one component the 4 column component containing the images and the calls to action can now be edited, themed or moved as a whole. as needed.

Nesting

Have a play to get the hang of creating structure using multiple and nested components. Like all of the actions in creating emails, it’s designed to be quick and intuitive.