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.
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.
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.
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.
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.
Use this optional element if you have a consistent coupon design that you want to easily drag to your canvas.
This element is optional but it can be used to have consistent branded headlines across your email campaigns.
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.
This element is optional but can be used to code unique logo styles throughout your email campaigns.
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.
Use this element to achieve a consistent design for all products you add to your email.
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.
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.
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.
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.