We recently showed you how to create a one-off email for Marketo using the BEE Free site which is a great, easy option when you’re tired of the Marketo editor. But, what if you want to re-use one of those emails just like the pre-built Marketo email templates? Not a problem! And no, you don’t have to be an expert developer to do so—this post will show you exactly what you need to do.
If you don’t already have an editable Marketo email template, choose a template you like from BEE Free. The site is very intuitive and easy to navigate but be sure you deselect the “pro” option when sorting through the templates. This will ensure you’re only viewing the free options. Once you choose the template you would like to use simply click “get started”.
An editor will open allowing you to fully customize that template design. Now, because we plan to use this as a Marketo email template you don’t necessarily need to fill it in with real content just yet. However, you will want to edit things like background color, text box, and image locations, fonts, etc. in order to get the design exactly how you want it.
When you’re finished editing, simply click the “save” button in the top right-hand corner. This will take you to a new page offering the Pro version of their services. The Pro version offers storage so you can save your template inside the BEE Free site. For our purposes, however, we really don’t need that so you can simply click the “I just want to download it” button.
First, you’ll need to open your computer’s “downloads” folder and locate a folder that’s named “beefree” followed by some random letters and numbers. Open that folder and click on the .html file inside. This will open a webpage. Right-click anywhere on this page (except on an image) and select “view page source”. Highlight and copy ALL of the text on that page. This is the coding behind your new template.
Next, you’ll open your Marketo instance, create a new email in the design studio, click “edit code” in the editor, and replace the existing code with the new code you copied earlier. We recommend creating an email here rather than a template is because it is easier to verify the edits we’re about to make to create editable fields. This will make more sense as we move through the next steps. Once you’ve replaced all the existing code with your new code, click “save”.
Now that your email is created in Marketo, you’ll need to make it editable. To do so you simply need to add <div class=”mtkEditable” id=”section_name”> tags to each section of code. Editing code may sound scary to some at first, but it’s really not once you have a basic understanding of what HTML is.
So to start, open your new email in Marketo and get to the edit code page. In the code, your email is broken into sections. Each section is housed within <div> tags as shown below.
Also, keep in mind that the code of an email flows in the same order as your design. So if you’ve got a text block in the middle of the template you want to make editable, you’ll find the block of code for it toward the middle as well.
If you want to make an image block editable in a Marketo email template, look through the code for an <img> tag. This is noticeable by the URL linking to the image and the <img> start tag. I typically use control-F to search for the URL of the image. For example, if I know the image is titled “wine” then I search the page for that term and will be taken directly to that portion of the code. Once you have the correct image located, back up through the code and find the <div> tag that comes directly before the <img> tag.
You’ll notice that in my example this <div> tag already contains a “class=” designation. Since you can only have one of these designations per <div> tag, you’ll need to remove what’s there and replace it with class=”mktEditbale”. Also, Marketo requires every editable section to have an “id” designation. They use this as the section name in the “content" column on the right-hand side of the email editor. So you’ll need to add id=”header-image” (or whatever title makes sense for your email) directly after your new class designation.
To test to see if you added it in the correct location, click save code to get back to the Marketo editor and if when you hover over that section it highlights it or you see the section in the right-hand column, then you know it is editable and your edits to the code worked!
You’ll need to repeat the step above for every section you want editable. For text blocks, the easiest thing to do is to hit control+F and search for some of the words in the text of your email. In the example below that would be “Lorem Ipsum dolor sit…” That will take you directly to the appropriate section of code. Then you’ll again locate the <div> tag directly before the text and add class=”mktEditable” id=”section_name” like below.
Once you have all the editable areas in place and your email looks just how you want it (again actual content isn’t necessary just yet), you’re ready to save it as a Marketo email template.
Click edit email to open the email editor for your new email. Once in the editor, click the email actions drop-down in the top left corner. Choose “save as template” and set your desired location and name. Then hit save.
You now have a brand new Marketo email template ready for use. Go to your Marketing Activities and locate a program or campaign you’d like to add an email to. Create a new local asset. Choose email and you’ll now see your newest Marketo email template in the template picker.
Plus, as an added bonus, you can now say you know how to edit HTML code!
