Editing in HTML mode

Looking for an on-brand template for your emails that follows best practices in email marketing? The ready-to-use templates are accessible via the template library in Campaigner.  

Editing an HTML file without coding experience can be dauting. We have divided the newsletter template into sections to make editing a breeze. It is recommended you build the newsletter in HTML mode. The guide below will outline the process of editing the newsletter in HTML mode. If you would like to learn more about using design mode please check out how to edit in design mode.

HTML basics

HTML basics & need to know

  • HTML tags normally come in pairs like <p> and </p>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, but with a forward slash inserted before the tag name
  • One wrong character in the code can cause major errors. Be very careful not to delete or add extra things by accident when formatting the code

HTML examples

  • These tags bold text.
  • These tags italicize text.

This is what the sentences above look like in HTML code:

  • <b>These tags bold text. </b>
  • <i>These tags italicize text. </i>

HTML comment tags

HTML comment tags are used to leave comments in the code without them showing up when the code is rendered. An HTML comment begins with <!-- and ends with -->. Text within these brackets will not be visible when the code is rendered.

There are several comment tags in the code to keep you organized. A "/" symbol is used in the second tag to indicate the end of a section.

<!-- Simple Article -->

<!-- Button -->

<!-- New Section - Horizontal Line -->

Visualizing code

Below is a visual guide to HTML code. On the left hand side is the raw code. The right hand side is how it will appear on your browser or mobile device. Use the highlighted sections to understand the structure of the code.

Editing articles

How to add a new article section

Each article begins with the comment tag <!-- Simple Article --> and ends with <!-- /Simple Article -->.

To add additional articles, copy the entire highlighted section. Then paste after the comment tag <!-- /Simple Article -->. To remove, make the same selection and delete.

Each article is also separated by a horizontal line. Include the horizontal line above when copying the code.

COPY THIS CODE:

<!-- New Section - horizontial line -->  
<hr>  
<!-- Simple Article -->
<h2>H2 Article Header</h2>
<p>Your paragraph text goes here. </p>
<!-- /Simple Article -->

Horizontal rule

Between each article should have a horizontal rule <hr> tag. Including the HTML comment tags will help you stay organized.

Do not add a horizontal line after the last article because the grey footer block comes right after.

The hr tag (among other tags), may include inline CSS that Campaigner auto-generated when the template was uploaded, and is ok as it won’t change the intended format. The tag may look like <hr style="-ms-text-size-adjust: 100%;border-top: 1px solid #dddddd;margin-top: 40px;margin-bottom: 25px;"/>.

Do not add a horizontal line after the last article because the grey footer block comes right after.

Line breaks and new paragraphs

What is a line break?

  • Whenever you press ENTER on your keyboard to start a new paragraph, that is a line break.

Can I use line breaks in HTML code?

  • Yes, but not by pressing ENTER. You will need to tell the code you are starting a new paragraph using the <p></p> tags.

The image on the right is the correct way to have two paragraphs.

Heading styles

Header 1 <h1> serves as the newsletter introduction headline, or the lead feature article headline. There should only be one h1 in the newsletter, below the banner image, or on top if there is no banner.  

Header 2 <h2> is designated for article headlines. 

Header 3 <h3> and header 4 <h4> are subheaders within an article. Never should an article lead with a subheader style; h3 is always nestled under h2; and h4 is always nestled under a h3.

Banner image & footer

Banner image

  • 600 pixels wide – important
  • 250 pixels high – recommended 
  • 72 DPI – minimum

To update the banner image in HTML view go to <!-- header div -->, in the image tag <img> below, update the source URL. Alternatively, in design mode select the image and right click to replace image. If the newsletter does not need the banner select the <!-- Header section --> through <!-- /header div --> and delete.

Editing social icons

The footer section contains the SFU logo, social icons, and unsubscribe text. There are three main parts to the footer code below.

  1. The social icon, which is nestled inside the <td></td> brackets
  2. The link to the social channel in the first set of quotation marks
  3. The text inside alt=" " describes which social channel this is for visually impaired people using screen readers

The code below contains 5 social channel buttons.

  • LinkedIn
  • Facebook
  • Twitter
  • Instagram
  • YouTube

To remove an icon that is not needed, remove the icon in the HTML view. Each icon is nestled between table data tags <td>, select and delete the tags and everything in between.

Text formatting

In the design view there are a few format options in the toolbar that may be used, but others will break the look and feel. For example, applying header and paragraph styles from the toolbar will over-ride the CSS formatting in the HTML. CSS is the code that formats the HTML, maintaining the look and feel. For example, there is code in the CSS section that says header one text must be red and larger than header two.

However, applying italics, bold, and links from the toolbar will not override the CSS.

Adding lists

Bullet and numbered lists need to be added in HTML to maintain the look and feel. Lists either go before or after closed paragraph tags.

Unordered list (bullets)

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The code in this image shows an unordered list with three items.

COPY THIS CODE:

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Editing buttons

Adding or removing buttons

Buttons are nestled between the <!-- Button --> <!-- /Button --> tags. To add a button, select the button’s comment tag <!-- Button --> and everything in between and paste into the desired article after a closed paragraph tag </p>.

To remove a buton, select the button's comment tag and everything in between and remove it.

COPY THIS CODE:

<!-- Button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" class="button" style="margin-left: 10px;">
<tr>
<td style="background: #CC0633; padding:10px"><a href="https://www.sfu.ca/" class="button" style="padding:10px 40px;">Button Text</a>
</td>
</tr>
</table>
<!-- / Button -->

Changing the button text and URL

Use the two images below as a guide on how to change the button text and URL.

Replace highlighted section to change the button text
Replace highlighted section with your link of choice