Editing in design 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.  

The template can be edited in design mode with some care and attention. The guide below will outline the best way to tackle editing in design mode. 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. However, applying italics, bold, and links from the toolbar will not override the CSS.

Editing articles

How to add a new article section

  1. Click the end of the article paragraph text and insert a new horizontal rule. Your newsletter should now look like the image in Step 2
  2. Copy the header and paragraph text.
  3. Click below the second horizontal rule and paste your article. It should now appear above the second horizontal rule.

To remove an article, delete the article text and horizontal rule.

Step 1

Step 2

Step 3

Don't worry, the pasted article will appear between the two horizontal rules, not below.

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.

Line breaks for paragraph text

  • To start a line break for paragraph text, use the new paragraph button. If you press ENTER after paragaph text, the spacing will be wrong.

Line breaks for headers and bullet lists

  • Do not use the enter key after headers and bullet lists. We recommend editing line breaks for headers and bullets in HTML mode.
New paragraph button
WRONG: Pressing ENTER after paragraph text
CORRECT: Using the new paragraph button

Heading styles

Header 1 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 is designated for article headlines. 

Header 3 and header 4 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.

All styles are provided in the template, copy and paste to use them.

Formatting text

In Campaigner, you can apply the following styles from the toolbar safely.

  • Italics
  • Bold
  • Links

Banner and footer

Editing the banner image

Banner image dimensions

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

Replacing the banner image

  1. Click the header image
  2. Click replace image
  3. Choose from media library and upload your image to be replaced 

Editing social icons

Deleting a social icon

  1. Click the icon so that it is highlighted
  2. Click the table menu
  3. Click the delete cell button

Changing a social icon link

  1. Click the icon so that it is highlighted
  2. Click the insert link button
  3. Insert your custom social link

Editing buttons

Updating a button

Revising the call to action text and URL is tricky to do correctly in design mode because it is table within an article, which is also a table. It is advised to do the changes in HTML mode. The button is nestled between the <!-- Button --> comment tags. 

Adding or removing a button in HTML mode

Select the button’s comment tags and everything in between and paste into the desired article, after a closed paragraph tag.