Converting HTML Email Newsletters To Oncord
This tutorial walks you through converting an existing HTML email newsletter - hand-coded, exported from another platform, or generated by an AI assistant - into an Oncord email design and message.
Most HTML newsletters arrive as a single document built with nested layout tables and fully inlined CSS. Converting to Oncord isn't a copy-paste job, but it's simpler than it looks: Oncord generates the email-client-compatible table structure for you at send time, so most of the legacy scaffolding in your source file gets replaced by cleaner markup.
Designs and Email Messages
An email campaign in Oncord is made of two parts:
The email design contains everything that stays the same from campaign to campaign: the document structure (<!DOCTYPE
html>,
<html>, <head>, <body>), CSS, and recurring content such as a logo, header imagery,
and the footer with its unsubscribe link.
The email message contains the content of one specific campaign.
Your first task when converting a newsletter is deciding which parts belong where. If an element would repeat in every campaign you send, it likely belongs in the design. If an element is unique to a particular campaign, it belongs in the message.
Within the design, exactly one content region marks where message content will render:
<regions:content />
What to Remove From Your Source File
Typical exported newsletters contain markup that Oncord either generates automatically or doesn't need. Strip the following:
The <title> tag. Oncord generates this.
MSO conditional comments such as <!--[if mso]>...<![endif]-->. Oncord injects Outlook-specific
markup automatically where necessary at send time.
Nested layout tables. The <table><tr><td> scaffolding used to structure most HTML emails
will be replaced with Oncord UI controls (covered below). Keep any genuine data tables - pricing, schedules, product
comparisons - those are still ordinary <table> elements.
Repeated inline styles. If every paragraph in the source carries style="font-family: Arial; font-size: 16px; color:
#555;",
that styling moves into a single CSS rule in the design's <head>. Oncord automatically inlines CSS at send time, so you
write it once. Keep inline styles only where they're genuinely one-off - a specific centred paragraph, a coloured link, a border on one
image.
Building the Email Design
Create a new email design by navigating to Dashboard > Website > Designs and selecting "New Email Design". Click the SRC button to edit its source.
The <head> of your design should contain three things: the viewport meta tag, a <templates:styles /> tag, and your CSS.
The attributes of <templates:styles /> define the container widths available to sections in your design and messages. In
the example above, any <templates:section contentsize="sm"> renders content in a 640px container, and contentsize="md"
in a 775px container.
Set sectionsize-sm to match the content width of your source newsletter, 600–640px is typical. The tag also adds a "Styles"
button to the visual editor, letting admin users adjust fonts, links and section settings without touching code.
Your CSS block should define the broad typography of the newsletter - extracted from those repeated inline styles in the source
- plus standard Outlook table fixes and a mobile media query:
The <body> of the design holds your recurring content and the content region. A typical structure is a header section,
the content region, and a footer:
Two details worth noting in the footer. Every email campaign sent through Oncord must include an unsubscribe link, and Oncord provides a
system-generated unsubscribe form at /community/email/unsubscribe/. And where your source newsletter hard-codes a copyright
year, the PHP snippet 2026 keeps it current automatically.
If your newsletter includes a "view this email online" link, it can be reproduced with:
Converting Layout Tables to UI Controls
This is the bulk of the conversion work. Oncord's layout controls <templates:section>, <templates:row>
and <templates:column> parse into mobile-friendly table structures automatically at send time, replacing the hand-built
tables in your source.
Full-width bands become sections. Where your source uses a wrapper table to create a coloured band with centred content:
The Oncord equivalent is a single section, with the typography handled by the design's CSS:
Multi-column tables become rows and columns. Oncord's grid is based on 12 units, and the width values of
columns within a row must total 12. A two-column table row converts like this:
Columns stack automatically on mobile - you can delete any mobile-stacking hacks from the source.
"Bulletproof" button tables become button controls. Where the source builds a button from a padded table cell, use:
Images
You can opt to use standard html <img> tags. However, the <standard:image> UI Control offers some improvements, such as image cropping and thumbnail generation:
Upload the newsletter's images into the media library first. For design imagery (logos, header graphics), click the Media button in the left sidebar while editing the design - files land in that design's media folder and are referenced as /media/website_designs/{id}/filename.png.
For campaign-specific imagery, upload while editing the message, or simply paste the converted markup with placeholder paths and then click each image in the visual editor to upload a replacement.
If the source newsletter references images by absolute URL on a host that will remain available, those URLs can be kept as-is.
Building the Email Message
Everything campaign-specific from your source newsletter - after conversion to sections, rows, columns, buttons and images - becomes the message.
Navigate to Dashboard > Marketing > Email Marketing, create a new message, click the SRC button in the editor, and paste the converted fragment.
A message source file begins directly with content markup:
To personalise the greeting, personalisation tags can be used within message content:
<p>Dear <personalisation:firstname />,</p> Finally, click Settings in the left panel of the message editor and set the message to use your new email design.