Zones for email and landing page templates

Templates that are used in Deliver can define zones that accept content that marketers drag into a communication that is based on the template. The template must include specific design elements to create the zones.

Zones in a template provide an area in the document where marketers can drag content from the Content Library and drop it into the document. Because zones support drag-and-drop editing, they are sometimes called droppable zones or droppable areas.

You can create a zone in a template in one of the following ways:

Include a value for the ID attribute of the element that defines the section of the template. The value you specify for the element ID becomes the label for the zone when the template is used for an email or landing page communication.
To specify only some of the elements as droppable (and the rest as static), add the class attribute droppable to the elements that you want to be able to accept dropped content.

In other words, if none of the elements are marked with the droppable class attribute, then any element with an ID attribute is a configurable zone. However, if any elements have the droppable class attribute, those elements are interpreted as zones while elements without the droppable class attribute are not.

When you design the HTML template and add zones, you choose the element type that best supports the content types that you expect to be dropped into each zone. The styles you embed in the template and the sizing attributes you specify for the elements determine the appearance and size of the zones. When designing a zone, consider the type of content that might be dropped into it.

To help ensure that HTML elements that contain the droppable class attribute display properly when previewed in the Deliver Message Editor, remove return characters from all droppable elements in email and landing page templates.

Unica Deliver supports using zones only in the body of HTML templates. You cannot create zones in HTML snippets that might be added to the template by reference or by adding them to another zone.

The following code sample uses both the ID attribute and the droppable class attribute to create five zones.

<table>
 <tbody>
  <tr>
   <td><img id="banner" class="droppable" 
    alt="Whatchamacallit"/></td>
  </tr>
  <tr>
   <td>
    <ul class="nav">
     <li>Page 1 </li>
     <li>Page 2 </li>
     <li>Page 3 </li>
     </ul>
     <img id="ad1" class="droppable" alt="ad1"/>
   </td>
   <td valign="top">
    <div id="body" class="droppable">
     <p>Lorem ipsum dolor sit amet, consectetur 
      adipiscing elit. </p>
     </div>
   </td>
   <td>
    <img id="ad2" class="droppable" alt="ad2"/>
    <img id="ad3" class="droppable" alt="ad3"/> 
   </td>
  </tr>
 </tbody>
</table>

The following code sample creates the same five zones, but without using the droppable class attribute:

<table>
 <tbody>
  <tr>
   <td><img id="banner" alt="Whatchamacallit"/></td>
  </tr>
  <tr>
   <td>
    <ul class="nav">
     <li>Page 1 </li>
     <li>Page 2 </li>
     <li>Page 3 </li>
    </ul>
    <img id="ad1" alt="ad1"/>
   </td>
   <td valign="top">
    <div id="body">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. </p>
    </div>
   </td>
   <td>
    <img id="ad2" alt="ad2"/>
    <img id="ad3" alt="ad3"/> 
   </td>
  </tr>
 </tbody>
</table>

However, to create a template that defines areas that should not be modified, you must use the droppable class attribute to specify which elements are droppable areas and which are not.

The following example defines a zone for a banner ad and includes a default image file:

<td style="background-color: rgb(255, 255, 255);">
<img id="banner" class="droppable" alt="Banner" 
src="http://your-images.yourcompany.com/images/CrossSellBannerImage.png"/> <br/>
</td>

If the person using the template does not replace the image in this zone, the default image file is used for the communication.

The following example uses text in the zone to show the location of the area to the people who use the template:

<span id="centerContent1" class="droppable">Drop Zone #1</span>
<br/>
<br/>
<span id="centerContent2" class="droppable">Drop Zone #2</span>

It is helpful to indicate both location and purpose with the default text for a zone. For example, if your template is designed to use a personalization field that represents the recipient's first name, you can name the zone "First Name." The Deliver Message Editor identifies zones using graphical pushpins. For more information about how to find zones when using the Message Editor, see Viewing zone contents.