Features: Using Padding Blocks in NewZapp’s Drag & Drop email editor

Posted on May 15, 2018 at 3:02 pm Written by

NewZapp’s Drag & Drop editor is something I use daily, so I know full well that:

  •   Drag & Drop is a great system.
  •   Drag & Drop has been an amazing advance.
  •   Drag & Drop is definitely the most flexible email editor we’ve ever built.

… and Drag & Drop can, at times, be right fiddly!

By that I mean, if you are feeling particularly precise about your layout there can be an aspect of adding Standard Blocks to your emails which needs a little finesse. That’s when the Padding Block comes into play.

But first let’s re-cap on the different types of Block available in the editor:

Layout Blocks

Layout Blocks

  •  The foundation of adding a content to your email, a Layout Block defines how many columns you want to add to any part of your email.

Content Blocks

  • Come in the form of a Text Block or an Image Block. They can be dropped into any drop zone or on top of a Layout or Padding Block.

Padding Block

Padding Block

  • Use this type as a sandwich filler by dropping it on top of a Layout Block before you drop in a Text or Image Block. This gives them a comfort zone within the confines of the layout block.

Custom Blocks

  • When one or more of the blocks listed above have been grouped together, we call it a Custom Block. These are usually designed by us, for you. We make them especially for you to match your brand, and fit your exact needs, as part of every Gold and Platinum email design that we create for you.

When would you need a padding block?

The best example would be when you are using standard blocks instead of your own Custom Blocks and applying a coloured background to your Layout Block. Without padding, any text placed on top will run right up to the edges of colour.

Here’s an example below of a two column layout block being added between two paragraphs.

  1. Once dropped into the email, a Cream background colour has been applied to the Layout Block so it stands out on the Orange page.
  2. A Padding Block has been dropped into the left of the two columns before a Text Block has also been dropped.
    (The text still allows the cream colour to show through the wording but it retains a border of plan cream that  stops it butting up to the edges of the layout block, thanks to the Padding Block).
  3. A Padding Block has also been dropped into the right column before an Image Block has been dropped.
    (The image now has a clear border of the cream colour around it’s four edges, due to the Padding Block underneath it).

Example where padding helps

Don’t forget your P’s and P’s

Two of the most important things to remember every time you’re creating a new email? Preview and Proof!

When working on your email in Edit Mode, blocks have a certain amount of spacing above them in order to accommodate the block tools (icons) that you see on mouse-over or select a block. This can give a misleading impression of the amount of space that will be between blocks when your email lands in the inbox. Switch from Edit mode to Preview to get an even better indication of your email’s layout. You can then see where you need more padding (the Padding Block can be use between layout blocks as well as on top of them) of if you have too much in places.

When everything’s looking good in the editor, you should always send yourself a proof copy to make sure that there are no unexpected surprises in the way your own email reader renders your new campaign on screen.

 

Follow Annette West on Twitter

Annette West

Project Manager at NewZapp

@NettyWest

Get the latest Email Marketing updates & insights