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."
On this page, you'll have three options for creating that new template. For this, click on the "Code Using AWeber's 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, 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.
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 Email Builder. When creating or working on a message, you can apply your template as needed.
For a complete walkthrough on creating and sending a message from start to finish, see our how-to video and watch the message editor in action:
Need help designing your messages?
AWeber offers hundreds of templates for you to use. If you need modifications to an existing template or a custom template built to reflect your branding, our Template Team is here to help. We're happy to modify existing templates or design a custom template tailored to your needs.
Ready to enhance your email campaigns with stunning designs? Reach out to our Template Team today!