Occasionally there are code enhancements made to our editing tool 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.
Is my email code outdated?
You will need to access the HTML code for the email and check the content version in the email <head>. This can be done by opening your email in a web browser, right-click and Inspect Element to see the email <head> section.
Example,
<head> <meta charset="utf-8" /> <meta name="generator" content="WordFly 3.2.0" />
You may also check this within the WordFly application by opening the HTML drawer.
Or you can click the View Code button found on the email screen:
The latest version today is WordFly 3.2.0.
Any emails 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 code.
Step 1: Download and open tools
Download DiffMerge and VS Code 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 the 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 VS Code
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 starter email
1. Go to Emails > Emails
2. Select Create a new email
3. Select Use the WordFly editor
4. Select the WordFly starter emails that your current designed email was derived from
5. Name your email something like "Current starter A" and click continue
6. Click Edit 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 VS Code
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 Steps 2 & 3 above. The 'old' file will be your current designed email HTML file; the 'new' file will be the 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
6. Go back to WordFly, open your current email design in the editor
7. Click on the HTML tab
8. Select all the HTML (Ctrl+A)
9. Paste your updated HTML
10. Click Save in the editor. Your email code will now be updated to the most recent.
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 |
| Add 4+ Column block | Upgrade | Learn |
| Add 25-50-25 option to 3-column block | Upgrade | Learn |
| Adjust vertical alignment of columns | Upgrade | Learn |
| 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 |
| Scale 2- and 3-columns blocks instead of stacking them on mobile | Upgrade | |
| Hide blocks on desktop | Upgrade | Learn |
| 2- and 3-column containers can now be adjusted by clicking icons | Upgrade | Learn |
| Hide blocks on mobile | Upgrade | Learn |