What’s new and cool for designers in NewZapp?

Posted on March 16, 2015 at 12:15 pm Written by

Well on the surface, not a lot; the basic code structure is virtually unchanged; email reader quirks haven’t magically disappeared so you still need a table-based structure with inline styles.

But from an Email Designer’s point of view, a myriad of small changes make a big difference. You want a completely modular structure? You got it. Nested repetition? No sweat. Need to lock everything down? We can do that too. If you’re a happy code monkey there’s a lot to be smiling about with drag and drop templates.

Let’s start with the game-changer: NewZapp drag and drop templates support cascading text styling. Set a default text style on your body tag and any text in a block will pick this up. Your design calls for several text styles? No problem, just add the styles to upper level table cells.

The upshot of this is it allows you to set a default text style for an area of your template. Any blocks added into that area will pick up this style.

Let’s quickly cover some terminology and then move on to structural flexibility.

  • A block – anything you want to repeat, delete or use again.
  • A dropzone – anywhere you can drop a block.
  • Editable text outside of a block – a text area that can be edited but not deleted entirely.

To create a block all you need to do is wrap your structure in a couple of divs. The best way to structure a block is to ensure the top-level elements are tables, as these happily stack around each other in any dimension.

Block structure

The outer div class is editor_block_area. This creates the dropzone. When you load the template into NewZapp you will be able to add any block into this area.

The inner div class is editor_block_added. This wraps the block itself. You can stack any amount of blocks within a dropzone. When you load the template into NewZapp you will be able to delete, add to or save these as Custom Blocks.

The level of flexibility is almost infinite, so it helps to think ahead a little. Let’s say you want to create a News Story block. This is a box with 20px title text and 14px body text underneath.

Example - News Story Block

You want to be able to use this block again and again, so you wrap it in the 2 structure divs and use the editable text div to create each text field. This div needs 2 classes, editor_edit and editor_text. Nice and simple, no messing about.

Whoa, what about news stories with images? A picture tells a thousand words, right? So here you have a choice: Setup an image within the structure or make part of the block into another area you can drop blocks into.

Example - News Story Block with image

The first option creates an easy style you can duplicate every time, but takes longer to do. The second is quick and easy to create and gives ultimate flexibility, but can mean your news stories look different every time.

The good news is you can do both – just setup the image within the story structure as a block within your News Story block, sitting inside another dropzone.

Block background colour
Remember earlier when I told you to ensure the top-level elements of your block are tables? Here’s another good reason: These top-level tables support editable background colours. No need for a class, just add style=“background-color:#000000;” (replacing 000000 with your chosen hex value) to set the default colour you require.

Control freak
Sometimes you’ll want a higher level of control than can be found with a dropzone – an area where people can add any block they like? Guaranteed they’ll try it out! Fortunately there’s a very simple way to limit a text block to just being editable – you can’t delete it and you can’t add any other blocks in there.

Within your table structure, wrap your text in a div with the classes editor_edit and editor_text. Generally we use this technique in headers and footers – anywhere where the design requires a little more structure.

That’s all the juicy titbits for today, fishies
If you have trouble sleeping at night or want a comprehensive rundown on template building you can download and partake of the full NewZapp Designers Guide for Drag and Drop Templates, which includes several example HTML files to help you on your way.

Need a helping hand? Get in touch and we’ll talk tables.

Get the latest Email Marketing updates & insights