Email Layout Builder from Milliner

Milliner now has an amazing new way to build emails. We call it Layout Builder.

Creating email layouts with Milliner has always been easy, but after using it to create a number of different templates we came to the realisation behind today's big new feature release on Milliner.

Email layout should be separate to email design.

Once we'd arrived at that gem we knew we were onto something and we immediately started work on what would become the Milliner Layout Builder.

This is immediately available for all users of Milliner. Here's how to use it.

First go to your list of emails. You can see we've added a new demo email called "Demo Email Debon Airways". Click "Open in Designer".

Here we've added a toggle button in the menu for Content and Layout. 

Content is the default view and remains unchanged with this update. Click Layout to see the new Layout builder.

In the Layout Builder all the elements of the email have been "exploded" to make it very clear how the email is laid out.

At the top in grey we have the root column which wraps the whole email and we show the currently displayed width of the email.

After that you'll see a number of rows, highlighted in green containing columns highlighted in blue. The columns also contain a number of content items (Images, text, space etc). These represent the Images and text which you can see in more detail in the content view.

Clicking on a row or column in the layout builder will show you its layout settings. Click around the demo email's rows and columns to see how it's put together. 

To explore the layout builder's capabilities we're going to add a new row at the top of the email by dragging it in from the insert panel.

As you can see rows always take up the full width of the email.

With the row selected we can change the way columns are laid out. 

Fill
Sets the columns to fill the entire width of the row.

Center 
Center columns will take up the width they have been set to while remaining centered as a group within the row.

Gutters can be added between columns and either side of them.

You can also easily set and preview stacking for the columns.

Selecting one of the columns allows us to change the settings for that individual column. There are three settings for width type:

Auto
Auto columns will take up all the remaining space. If the row is set to Fill that will be the rest of the row. If the row is set to Center the auto column will be the same size as the large column gutters on either side of the row. Note that the remaining space will be divided evenly between all auto columns and column gutters.

Grow to Size
The default - this will make the columns grow up to a maximum of the pixel or percent width set. You can clearly see this if you resize the canvas down the Grow to Size column will start reducing in size before the fixed columns.

Fixed 
Fairly obviously will keep the column to a fixed pixel or percentage width.

The best thing to do to get to grips with it is to have a play around with the different settings. With so many possibilities for email layouts we can't wait to see what you create!

A few final pointers then to round off this post:

  • You can drag the column handles to reorder them
  • Add and remove columns in the layout builder by using the buttons in the inspector
  • You can drag content items into the columns in the Layout builder
  • Of course layout builder works well in dark mode

Please let us know your thoughts via support@milliner.app.