Using Campaigner

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.

Visualizing HTML

Below is a visual guide to HTML code. On the left is the raw code. On the right is how it will appear on your browser or mobile device. Look at the highlighted sections to understand the structure of the code and how it renders in the newsletter the recipient will see in their inbox. 

Editing articles

Adding a new article section

Each article begins with the comment tag <!-- Simple Article --> and ends with <!-- /Simple Article -->. Including the HTML comment tags will help you stay organized.

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. 

Using the horizontal rule tag

Each article should be followed by a horizontal rule <hr> tag (see the above code for an example).

Do not add a horizontal line after the last article. Instead, the grey footer block follows the last article. 

Using LINE BREAKS for NEW PARAGRAPHS

Whenever you press ENTER on your keyboard to start a new paragraph (for example in MS Word), you create a line break.

In HTML code, you create line breaks by using the <p></p> (paragraph) tags.

Using HEADING tags

Using consistent heading styles creates visual appeal and helps readers browse your email. Just as in MS Word or other word processing software, you have a hierarchy of heading styles to choose from, each with their own tag. 

using BANNER IMAGEs & FOOTER

BANNER IMAGE size requirements

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

To update the banner image:

• In HTML mode go to <!-- header div --> and update the URL within the image source tag <img src> (see below) 

• In design mode select the image and right click to replace image

If the newsletter does not need the banner, delete <!-- Header section --> through <!-- /header div -->

EDITING SOCIAL ICONS

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

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

The code below contains five social channel buttons:

• LinkedIn
• Facebook
• Twitter
• Instagram
• YouTube

To remove an icon that is not needed, remove the icon in the HTML view. Select and delete the relevant image’s <td></td> tags and everything within them.