Drag & Drop Elements

Defining HTML for items on the elements toolbar is a way to take your email template to the next level.

The drag and drop elements are the building blocks for users when they create messages in AWeber, and customizing them, although not required, provides ultimate consistency within your template.

How Elements Work

Using drag and drop elements (articles, coupons, etc.) is the core of using the AWeber message editor. While your template will certainly work without customizing these elements, using them provides a safer environment for your clients to rearrange, add and delete their own content without breaking their template or branding.

You can provide your own HTML for each drag and drop element. Doing so is completely optional. If you choose not to, the editor will fall back on the default definitions.

Remember, each element works a little differently, so take a look at the description and variables available for each.

Where To Define Elements

To access the Template Editor, hover over the Messages tab in AWeber's control panel, then click the Email Template Manager link.

You will then be presented with three choices:

Click on the "Code Using Our Theme Language" option.

In this mode, just as you found the Email Layout & Drop Zones for the body of your email, you will also find a place to put code for each drag and drop element.

Simply click on the element you would like to provide your own HTML for and it will expand, providing a place for you to put your code.

Don't forget to save at the bottom of the page.

Article elements (an optional 4 variations)

This is 1 of 4 optional HTML definitions you can assign to the Article element.

You can use each of these 4 definitions to define different types of articles, this allows you to have different HTML for a featured article vs. a secondary article.

Required:

<aw:content> This is a placeholder for your article paragraph or excerpt.

Optional:

<aw:title> This is a placeholder for your article title.
<aw:image> This is a placeholder for your image path.
{!aw:permalink} This is a placeholder for a URL to your article.
{!aw:read_more_text} This is a placeholder for your "Read More" text.
<table class="article">
  <tr>
    <td><aw:image></td>
    <td>
      <h1><aw:title></h1>
      <p><aw:content></p>
      <a href="{!aw:permalink}">{!aw:read_more_text}</a>
      </td>
    </tr>
</table>

Button element

This element is optional but can be used if you have a button that is frequently used in your emails. For example, something like "Buy Now" or "Read More". Using this element saves you from having to paste in the button image URL every time while still allowing you to change the URL the button actually links to when clicked.

Required:

{!aw:url} The placeholder for the URL your button points to.
<a href="{!aw:url}" class="mybutton"><img src="http://www.mysite.com/myimage.jpg"/></a>

Coupon element

Use this optional element if you have a consistent coupon design that you want to easily drag to your canvas.

Required:

<aw:content> This is a placeholder for your coupon content.

Optional:

<aw:expiration> This is a placeholder for your coupon expiration date.
<aw:disclaimer> This is a placeholder for your coupon disclaimer text.
<div class="mycoupon">
  <strong><aw:content></strong>
  <p><aw:expiration></p>
  <small><aw:disclaimer></small>
</div>

Headline element

This element is optional but it can be used to have consistent branded headlines across your email campaigns.

Required:

<aw:content> This is a placeholder for your headline content.
<h1 class="headline"><aw:content></h1>

Image element

This element is completely optional but can be used to code unique image styles throughout your email campaigns. For example, using your own HTML, a "polaroid effect" or "stack of pictures" effect can be achieved.

Required:

<aw:image> The placeholder for the URL of your image.
<div class="image"><aw:image></div>

Logo element

This element is optional but can be used to code unique logo styles throughout your email campaigns.

Optional:

<aw:image> The placeholder for the URL of your image.
<div class="logo"><aw:image></div>

Paragraph element

This element is optional but can be used to give you the flexibility to achieve a certain style for all paragraphs within your email campaign.

Required:

<aw:content> The placeholder for where paragraph content goes.
<div class="paragraph"><aw:content></div>

Product element

Use this element to achieve a consistent design for all products you add to your email.

Required:

<aw:content> This is a placeholder for your coupon content.

Optional:

<aw:image> This is a placeholder for your product image.
<aw:title> This is a placeholder for your product name.
<aw:price> This is a placeholder for your product price.
{!aw:link} This is a placeholder for the URL of your product.
<div class="product">
  <a href="{!aw:link}"><aw:image></a>
  <a href="{!aw:link}"><aw:title></a>
  <p><aw:content></p>
  <small><aw:price></small>
  <a href="{!aw:link}">Buy Now!</a>
</div>

Signature element

Use this element to have a consistent signature to use throughout your email campaign.

Note: If a signature is configured under the List Settings page, then that signature will be used instead of anything that is configured here.

Optional:

<aw:image> This is a placeholder for your headshot image.
<aw:from_text> This is a placeholder for sign off text (e.g. "Sincerely,")
<aw:from_name> This is a placeholder for your name within the signature.
<aw:from_email> This is a placeholder for your email address.
<table class="signature">
  <tr>
    <td><aw:image></td>
    <td>
      <aw:from_text>
      <aw:from_name>
      <aw:from_email>
    </td>
  </tr>
</table>

Social Media Links element

Use this to easily include consistent social media icons across your email campaigns. Note that the Facebook and Twitter variables are there for added flexibility per email. However, you may also hardcode the links to other social media pages, such as Google, Linked In, Pinterest, etc.

Optional:

{!aw:facebook_link} This is a placeholder if you would like to have the flexibility to choose from each Facebook account synced with your list.
{!aw:twitter_link} This is a placeholder if you would like to have the flexibility to choose from each Twitter account synced with your list.
<div class="social-media">
  <a href="{!aw:facebook_link}"><img src="http://www.mysite.com/image.jpg" alt="Facebook"/></a>
  <a href="{!aw:twitter_link}"><img src="http://www.mysite.com/image.jpg" alt="Twitter"/></a>
</div>

Saving Your Template

Once you've created this basic structure for your template and defined the drop zones, you have a functional template - if that's all you need, you can stop here and save the template, making it available in the template gallery for you or your client to use when creating messages.

Or, to further customize your template, click the Template Builder button at the bottom of the page.

Now you'll be able to use the AWeber message editor interface to insert any default content you'd like to have in place when the template is loaded. All the changes you make at this stage will be editable by the user.

Click Save & Exit at the bottom of the page when you're done.

Using Your Template

Once you've saved your template you can access it in the template gallery whenever you work in our Drag & Drop Editor.

To find your template click on the Templates button.

Next, click on the My Templates button.

Then click on your template as presented below:

And finally, click the Apply button.