This guide is for users who create their own HTML templates to use in Ometria and is written for email developers with knowledge of HTML.
You can use special attributes in email templates which mark certain elements as editable, i.e. they can be configured in the visual editor, or as blocks, which can be replicated and moved about in the template.
Blocks can contain editable regions.
Blocks
In order to support blocks a template needs two things:
- A parent 'blocks' container to insert the blocks into. Currently Ometria only supports one blocks region per template. This is marked by applying the om:blocks attribute to a tag (typically div or table). The HTML element with the om:blocks attribute should be empty and placed where you would like the block elements to be placed when in the visual editor.
- One or more 'block' elements which are the repeatable blocks inside the blocks container. These are marked by applying the om:block attribute and giving them a name, e.g. om:block="My block". Each block must have a name and it must be unique in the template.
An example of a minimum viable template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title>{{ email.subject }}</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
</head>
<body>
<div id="header">
<img src="http://www.example.com/logo.jpg" om:editable om:id="1"/>
<span om:editable om:id="2">Strapline</span>
</div>
<div om:blocks></div>
<div om:block="block type 1">
<h1 om:editable om:id="3">Hello there</h1>
<p om:editable="html" om:id="4">Some editable <i>HTML</i> content</p>
</div>
<div om:block="Product block">
{% if products %}
<h3>Lovely products</h3>
<ul>
{% for product in products%}
<a href="{{ product.url }}"><img src="{{ product.image_url }}" /></a><br />
<a href="{{ product.url }}">{{ product.title }}</a>
{{ product.price }}
{% endfor %}
</ul>
{% else %}
<h3>Sorry no products</h3>
{% endif %}
</div>
</body>
</html>
Blocks in Automation campaigns
Blocks can also be used in Automation templates.
Comments
0 comments
Please sign in to leave a comment.