Drag & Drop elements in your Email Template

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 you to rearrange, add and delete your content without breaking the 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 Email Template Manager, go to your "Messages" tab and select "Email Template Manager".

from the messages tab, click on email template manager

On this page, you'll have three options for creating that new template.  For this, click on the "Code Using Our Theme Language" option.

choose code using our theme language

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.

you will see all drag and drop elements which you can edit as you want.

Article Elements (an optional 4 variations)

article element

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

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

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

 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

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

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

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

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

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

socieal 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, which will make that available in the template gallery to use.

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

make sure to save any changes hat you make. for further editing of the message, click on template builder

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.

Once you've saved your template you can access it in the template gallery whenever you work in our Drag & Drop Editor. For how to apply a template you created, you can view our article here.

What if I have issues designing my messages?

custom template design

AWeber offers hundreds of templates you’re welcome to use! If you would ever find yourself wanting to modify an existing template or would like a custom template built for you to reflect your branding, our Template Team would be happy to modify existing templates or design a custom template for you!

Have more questions? Submit a request
Powered by Zendesk