The first thing were going to do is create some modules (reusable blocks of HTML) and make parts of them editable so you can change things like images, links and text.
You can use our HTML to add Taxi syntax or you can use your own.
First, lets create some modules out of our HTML. In the code weve provided there is the HTML for a logo, an image, some text and the footer content. Were going to make modules for the image and the text blocks.
Well start with the image module. In the HTML, directly above the start of the code for your image block add a <module> tag.
Navigate to this comment <!-- start of image module --> and add the <module> tag directly below it.
Give the module tag a name and a label attribute. A name is mandatory and the label is optional but recommended. The name cant have any spaces but the label can include anything you need.
<!-- start of image module --> <module name="image_module" label="Full Width Image"> <table>
And then directly below the last bit of HTML needed for this image module, close the <module> tag. Look for the closing comment that reads end of image module.
</td> </tr> </table> </module> <!-- end of image module -->
All the HTML inside of these tags will act as one module in Taxi.
Now that we have created a module we will need to make part of it editable.
In this module there is an <a> tag and an <img> tag. Were going to make this editable so youll be able to change them in Taxi.
Directly above the <a> tag, add an <editable> tag, and just like with the module, give it a name and a label.
Then directly after the closing </a> tag close the <editable> tag, so essentially wrapping the editable around this piece of HTML.
<!-- start of linked image --> <editable name="linked_image" label="Linked Image"> <a href="https://www.taxiforemail.com"> <img src="https://place-puppy.com/600x400" alt="" height="auto" width="640"> </a> </editable>
Taxi recognises the href, src, alt, height and width attributes inside the editable and automatically generates fields for those parts of the HTML, so there is no need to do anything additional to the <editable> tags. Now, whenever you make a change to one of these fields in the editor, this change will be reflected in the HTML and youll be able to update your email.
Now that we have our module and weve made and image and a link in that module editable, lets upload it to Taxi and see how it behaves. In your account go to Email Design Systems > Add new and upload or paste your HTML.
For more details on this process, check out this helpful article.
If you dont have access to Taxi just yet, then below is a video demonstrating how this Syntax will look in the editor.
Youve now completed the first lesson; lets move on to the next step in becoming a Taxi Syntax expert.