Create a Newsletter in Version 8

Owned by Former user (Deleted)
Last updated: Jul 11, 2016
4 min read

A Newsletter Template will contain the layout and styles for the newsletter.  The most exciting update in the version 8 newsletter editor is that you can now have two columns of articles instead of just one.  In order to incorporate this template into our system, you'll need to add variables listed below, such as an article subject, article copy text, or the table of contents.

  1. Open the Newsletters folder
  2. Click Newsletter Templates
  3. Click Add Newsletter Template
  4. Insert the HTML for the template into the Source Code or create the layout using the message editor tools

  5. Insert variables into the header section

    Variable
    Description
    %%date%%Displays the date entered on the newsletter date field
    %%volume%%Displays the volume as entered on the newsletter volume field
  6. Define the article section using special tags in the HTML of the template.   (If you do not add a section such as the read more link, that information simply will be omitted. )
    1. Article

      • All of the code between the <!--cinews:contentstart--> and <!--cinews:contentend--> tags will be repeated for every article added to this newsletter

    2. Section of articles

      • The name of the section for a group of articles will appear within the <!--cinews:sectionstart--> and <!--cinews:sectionend--> tags

    3. Article content

      • The article will appear within the <!--cinews:articlestart--> and <!--cinews:articleend–>

    4. Subject (Inside of the article tags)

      • The subject will replace the %%subject%% variable inside of the  <!--cinews:subjectstart--> and <!--cinews:subjectend--> 

        1. The content (abstract) of the article will replace the %%abstract%% variable

    5. Author (inside of the article tags) 

    6. Article Abstract (inside of the article tags)

      1. The author will replace the %%author%% variable inside of the  <!--cinews:authorstart--> and <!--cinews:authorend-->

    7. Read More Link
      1. The article's "read more" link will appear within the <!--cinews:readmorestart--> and <!--cinews:readmoreend--> tags

    8. Back Link (navigation on view as webpage)

      1. The back link is only shown when subscribers click to read more and are sent to a webpage with the full article created in our system.  It will take them back to the newsletter "view as webpage" screen.  

      2. This will appear within the <!--cinews:backstart--> and <!--cinews:backend--> tags.  The back link URL will replace the %%backurl%% variable.

    9. Please look at the example below to see how these would fit together:

      Article Section
      <!--cinews:contentstart-->
 
	<!--cinews:sectionstart-->
	<!--cinews:sectionend-->
 
	<!--cinews:articlestart-->
 
		<!--cinews:subjectstart-->
		<!--cinews:subjectend-->
	
		<!--cinews:authorstart-->
		<!--cinews:authorend-->
 
		<!--cinews:readmorestart-->
		<!--cinews:readmoreend-->
 
		<!--cinews:backstart-->
		<!--cinews:backend-->
 
	<!--cinews:articleend-->
 
<!--cinews:contentend-->


       

  7. To display the article's section, subject, author, text, and read more link, insert the following variables into the appropriate sections listed above.  If you do not add one or more of these variables, that information simply will be omitted. 

    Variable
    Description
    %%sectionname%%Displays the name of the section or group where the articles are located
    %%subject%%Displays the article's subject
    %%author%%Displays the author of the article
    %%abstract%%Displays the article text
    %%articleurl%%Displays the "read more" link that will link to a specified page URL or full version of the article generated by our system
    %%linkalias%%Adds a link alias to the read more link for each article
    %%thumbnailurl%%Adds the image URL for each article
    Variables Example
    <!--cinews:contentstart-->
 
	<!--cinews:sectionstart-->
		%%sectionname%%
	<!--cinews:sectionend-->
 
	<!--cinews:articlestart-->
 
		<!--cinews:subjectstart-->
 			%%subject%%
		<!--cinews:subjectend-->
	
		<!--cinews:authorstart-->
			by %%author%%
		<!--cinews:authorend-->
	
		<img align="left" src="%%thumbnailurl%%">
		%%abstract%%
 
		<!--cinews:readmorestart-->
   			<a alias="%%linkalias%%" href="%%articleurl%%" style="font-size: 12px">[FULL STORY]</a>
		<!--cinews:readmoreend-->
 
		<!--cinews:backstart-->
			<span id="article_fullstory"><a href="%%backurl%%" style="font-size: 12px">Back</a></span>
		<!--cinews:backend-->
 
	<!--cinews:articleend-->
 
<!--cinews:contentend-->

     

     

  8. Here's an example of a styled article section with a horizontal line at the bottom to separate each article

    Example Article with Formatting
    <td style="padding: 0px 0px 24px 0px; border-bottom: 1px solid #cccccc;">
	<!--cinews:contentstart-->
		<!--cinews:sectionstart-->
			<table cellpadding="0" cellspacing="0" width="100%">
				<tbody><tr>
 					<td style="border-bottom: 1px solid #E7E7E7; padding: 0 0 6px 0;"><strong><span style="color:#336699;"><span style="font-size:18px;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:14px;">%%sectionname%%</span></span></span></span></span></strong></td>
				</tr></tbody>
			</table>
		<!--cinews:sectionend-->
 
		<!--cinews:articlestart-->
			<!--cinews:subjectstart-->
				<p><span style="padding: 3px 0px 0px 3px; margin:4px 0px 0px 0px; font-size: 15px; font-weight: bold; padding-top: 3px;font-family: Arial, Verdana; ">%%subject%%</span></p>
			<!--cinews:subjectend-->
			
			<!--cinews:authorstart-->
				<p><span style="padding: 0px 0px 0px 3px; margin:0px; font-family: Arial, Verdana; font-style: italic; color: #333; font-size: 13px">by %%author%%</span></p>
			<!--cinews:authorend-->
 
			<img align="left" alt="" height="100" src="%%thumbnailurl%%" style="float: left;" width="100">
			<span style="font-family: Arial, Verdana; color: #333333; font-size: 12px;">
				%%abstract%%
			</span>
			<!--cinews:readmorestart-->
				<p style="font-family: Arial, Verdana; font-size: 12px;">
				
					<a alias="%%linkalias%%" href="%%articleurl%%" style="font-size: 12px">[FULL STORY]</a>
				</p>
			<!--cinews:readmoreend-->
			<p style="font-family: Arial, Verdana; font-size: 12px">
				<!--cinews:backstart-->
					<span id="article_fullstory"><a href="%%backurl%%" style="font-size: 12px">Back</a></span>
				<!--cinews:backend-->
			</p>
			
			<p>&nbsp;</p>
			
		<!--cinews:articleend-->
	<!--cinews:contentend-->
</td>
 
 

  9. If you would like to automatically add a Table of Contents, define the Table of Contents section with the following HTML code inside of a table cell:

    <!--cinews:tocstart-->

	<!--cinews:tocrowstart-->
   		<a href="%%toclink%%" style="line-height: 20px; font-size: 12px">%%tocname%%</a>
	<!--cinews:tocrowend-->
    
<!--cinews:tocend-->
    VariableDescription
    %%toclink%%Link generated inside of the table of contents that will link to each article
    %%tocname%%Automatically adds each article title inside of the table of contents
    Table of Contents Example
    <td>
<p>Table of Contents</p>

	<!--cinews:tocstart-->

	<ul style="padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;font-family: Arial, Helvetica, sans-serif;"><!--cinews:tocrowstart-->
   		<li style="padding-bottom: 0px; line-height: 20px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; list-style-image: none; padding-top: 0px; font-family: Arial, Helvetica, sans-serif;"><a href="%%toclink%%" style="line-height: 20px; font-size: 12px">%%tocname%%</a></li>
<!--cinews:tocrowend--></ul>
    
	<!--cinews:tocend-->
</td>

Two Column Layout

The newsletter template will generate one or two columns of articles.  To make some or all of the articles appear in two columns, please follow these steps:

  1. Open the Newsletters folder
  2. Click Newsletter Sections
  3. Click Add Newsletter Section 
  4. Name the section
  5. Select 2 columns from the drop down column menu
  6. Click Save
  7. Navigate to the Newsletter Articles menu folder
  8. Create or open an existing Newsletter Article
  9. For the Section drop down, select the section you just made with two columns
  10. Now all articles saved with this section will be displayed in two columns instead of one
  11. Tip: when creating a newsletter with the Newsletter Creator, arrange the articles so that they're in order and grouped by section

Notes

Only add html code between the section start and end tags or the article start and end tags.  Any code added between the beginning <!--cinews:contentstart--> and <!--cinews:sectionstart--> tags or between the <!--cinews:articleend--> and <!--cinews:contentend--> tags will not be shown in the generated newsletter.

Also, if you insert an image as a divider to be repeated in between articles, this will only work for a one column layout.  If the image is the whole width of a one column article, each of the two columns will stretch to be the width of the one column layout.  So the two columns will be twice as wide as you want them to be because of the repeated image. 

 

To learn how to Add Newsletter Sections, click the button below.