How do I update my Modern Editor email code? (Modern Editor)

Occasionally there are code enhancements made to Modern Editor to address rendering issues or email client changes. Only new email designs will have the updates. Current email designs, including your custom starter emails, will not be updated. Follow the steps in this support article to update your email code to the most up-to-date version.


Topics covered in this article:

Is my email code old? Learn how to confirm

Tools for updating email code

How to update your email code

Modern Editor change history

 

 

Is my email code old? Learn how to confirm

You can see your email code version by opening your email and checking the content version in the email <head>.

Example,

<head>
<meta charset="utf-8" />
<meta name="generator" content="WordFly 3.1.0" />

 

The latest version today is WordFly 3.1.0.

 

Any email templates with an earlier version are older and should be updated for the latest code the editor has to offer. For example, beta release was 3.0.0.

 

 

 

Tools for updating email code

You'll need to download a couple web applications to help with your code updates. We suggest downloading these two applications:

 

 

 

How to update your email code

Follow these steps to update your email code to the latest Modern Editor code.

 

Step 1: Download and open tools

Download DiffMerge and Atom from the internet. Open both tools on your desktop.

 

Step 2: Copy current design HTML and save it

1. Open your current designed email in Modern Editor.

2. Click on the HTML tab in the lower left corner.

3. Copy all the HTML.

4. Paste the HTML into a new plain text document, we suggest using Atom.

5. Make note of the starter email used for your email. This is found in the <head> of your email HTML.

Example,

<!-- Derived from Starter A -->

 

Step 3: Copy HTML from new Modern Editor starter email

1. Go to Emails > Email Templates.

2. Select Create a new email template.

3. Select Use Modern Editor.

4. Select the WordFly starter emails that your current designed email was derived from. Ex, A.

5. Name your email something like "Current starter A" and click continue.

6. Click Edit in WordFly to copy the HTML as you did in Step 2; or, click on View Code to copy the HTML from a new browser tab.

7. Paste the HTML into a new plain text document, we suggest using Atom.

 

Step 4: Diff the two versions and update the current design

1. Open DiffMerge on your desktop.

2. Click on the icon in the upper left nav showing two side by side files.

3. This takes you to the upload screen where you can upload the old file and the new file.

Select the files you saved in Step & 3 above. The 'old' file will be your current designed email HTML file; the 'new' file will be the Modern Editor starter email HTML file.

4. Start reviewing the code and making updates.

All red highlighted updates on the right side need to be updated on the left side. Ignore the red highlights on the left side since that's the old code. Copy the code updates and replace this code in your current email design plain text file.

 

IMPORTANT: Leave the code that applies to your custom style updates. You should notice these throughout the code, only update the code that does not apply to your custom styles.

 

Make all the red highlighted updates up to the section "<!-- Advanced styling: This is the style tag is edited by the style editor. -->". After updating that section you're done!

 

5. When you're done, copy the code from your current email design plain text file.

7. Go back to WordFly, open your current email design in Modern Editor.

8. Click on the HTML tab.

9. Select all the HTML (ctrl+A).

10. Paste your updated HTML.

11. Click Save in the editor.

Your email code will now be updated to the most recent!

 

 

 

Modern Editor change history

The following table is a change history of updates made to the editor since 3.0.0 release:

ENHANCEMENT UPGRADE CODE MORE INFO
Adjust vertical alignment of columns. Upgrade Learn more
Added code that enables media queries (stackable columns, etc.) in Gmail.
Added code that improves font-size rendering of bulleted text in Outlook.
Upgrade  
Added code to correct extra image spacing in Apple clients and devices running iOS 10. Upgrade  
Starter Email E: Added code to fix issue where you couldn't set 'all blocks' max width for heading bars. Upgrade  
Reverse stack on mobile for columns. Upgrade Learn more
Scale 2- and 3-columns blocks instead of stacking them on mobile. Upgrade

Learn more

Hide blocks on desktop. Upgrade Learn more
2- and 3-column containers can now be adjusted by clicking icons Upgrade Learn more
Hide blocks on mobile Upgrade Learn more

 

 

 

 

Have more questions? Submit a request
Powered by Zendesk