Creating and Editing Newsletter Templates

The newsletter template builder allows site administrators and list owners to create fully responsive HTML newsletter templates without HTML coding experience. LISTSERV comes with more than 75 ready-to-use HTML newsletter and announcement templates, containing a variety of layout styles, color schemes and content blocks that can be used as-is or freely modified as needed. Depending on your access level, newsletter templates can be created for the site as a whole, which can then be used by all list owners, or on a list-by-list basis, which are restricted for use only on a specific list.


Template Categories

The HTML templates are divided into two categories. Announcement Templates are simpler and contain just a single one-column content block. Newsletter Templates are more elaborate and contain a combination of multiple content blocks and layout styles. Announcement templates all begin with the A- prefix, while newsletter templates begin with the N- prefix. To narrow the list of templates shown in the pulldown menu and the index, simply select the type of templates that you want to view.


Selecting a Template

To select a newsletter template that you want to work with, simply choose it from the pulldown menu or click on the image of the newsletter in the index. To make changes to the template that you have selected, click the "Edit" button. To create a copy of the template, click the "Copy" button. The create a brand new template, click the "Create" button.


Creating a New Template

To create a new template, click the "Create" button. A new window will open, prompting you to enter the name and description for the new template. Note that the template name cannot contain spaces or special characters. Then choose whether you want to use the template builder to create the newsletter or whether you simply want to copy and paste the HTML code for the newsletter from an external source. The builder allows you to create fully responsive HTML newsletter by simply using pulldown menus and text boxes without the need for any HTML coding skills.


Editing a Template

When creating or modifying an HTML newsletter template using the builder, you are presented with several menu options, all of which can be accessed by clicking on them. The following three apply to the newsletter as whole:


Base Font

The options under the Base Font menu allow you to make changes to the font family, font sizes, font colors and link colors that apply to all sections of the newsletter. Use the "Update" button associated with each attribute if you only want to change that one attribute. Use the "Update All" button if you want to change all of the attributes. Note that any changes that you make here will overwrite any previous special settings that you may have made for individual newsletter sections.

Newsletter

The options under the Newsletter menu allow you to change settings such as the width of the newsletter, the border of the newsletter, the alignment of the newsletter and the background color and any background image that you may want to use. To use a background image for the newsletter, enter the full URL to the image that you want to use and choose how you want the background image to repeat. A value of none means that no background image is used. Note, however, that not all email clients support background images, so always use a suitable fallback background color in conjunction with a background image. To change the background color, simply use the color picker or enter the hex value of the color in the text box. The "Preview" button allows you to preview any changes that you make without saving them. Use the "Save" button in the bottom-right corner to actually save your changes.

Text

The options under the Text menu allow you to change short recurring text strings that are used throughout the newsletter, including browser, unsubscribe and content prompts. To make changes, simply use the text boxes and click the "Save" button to store your changes.


The following menu options apply to specific sections of the newsletter, and each section can be included or omitted from the newsletter depending on your specifications:


Preheader

The preheader is the top-most section of the newsletter, above the main header. The preheader is generally used to entice subscribers to open a newsletter because the first sentence in an email is usually shown below the subject line in many email clients, allowing you to provide more detail about the content than just the subject line. A "View in Browser" link is also usually placed in the preheader, which allows subscribers to open the newsletter in a browser rather than the email client. Use the "Yes/No" pulldown menus to decide whether you want these elements to be included. Use the "Text Style" and "Link Style" options to make any changes to the preheader-specific fonts, sizes, styles and colors.

Header

The header section contains all of the options to customize the main header of the newsletter. Use the "Yes/No" pulldown menus to decide what elements you want to include. To change the color of the header, use the color picker or enter the hex value of the color in the text box. If you want to use a background image for the header, enter the full URL to the image that you want to use and select how you want the background image to repeat. A value of none means that no background image is used. Note, however, that not all email clients support background images, so always use a suitable fallback background color in conjunction with a background image.

If you want to use a graphical banner for the header, enter the full URL as if you were using a background image, then select Banner under the "Background Repeat" menu. A graphical banner is universally supported by email clients and will take the place of the newsletter name, newsletter description and the logo since these are assumed to be included as part of the banner.

If you're using a either a solid background color or a background image, you can still include a logo on top of the banner. The default Logo URL of &*LOGO; allows you to insert the logo when you are sending the newsletter. If you want to include a permanent, hard-coded logo, simply replace &*LOGO; with the full URL pointing at the web location of your logo.

Issue

The optional issue section allows you to include a section right below the header where you can enter the issue number, month or any other issue-specific information associated with each newsletter that you send. Use the "Yes/No" pulldown menu to decide whether to include one, and use the "Issue" and "Text Style" options for fine-tuning.

Table of Contents

The optional table of contents sections allows you to include an automatically generated table of contents with anchor links to each item in the newsletter. Use the pulldown menu to decide whether to include one, and use the "Text Style" and "Link Style" options for fine-tuning. The table of contents can be horizontal, vertical or placed in the sidebar on newsletter templates that have been configured with a sidebar.

Block 1, Block 2 and Block 3

The template builder allows you to include three types of content blocks with each newsletter template. Use the "Yes/No" pulldown menus to decide whether to include them. Block 1 is required for all newsletters, while Block 2 and 3 and optional. Each content block is repeatable as many times as you need (or can be omitted altogether) when you send individual newsletters, so there is never any need to create and include identical content blocks. Instead, use Block 2 and 3 if you want to create a newsletter with different layout styles, for example a two-column design in the beginning and three-column design below.

Use the "Block Type" pulldown menu to select one of 11 different layout styles for each block. The options include three types of one-column designs, five types of two-column designs, two types of sidebar designs and one type of three-column design. All layout styles are fully responsive, which means that the layout will adapt and change on smaller viewports like mobile devices.

The "Headline Style", "Text Style" and "Link Style" options allow you to fine-tune the design. By using the "Background Color", "Padding" and "Border Radius" options for the links, you can turn simple links into buttons. By using the "Inner Background" and "Inner Padding" options, you can create boxed elements. See the bundled newsletter templates for inspiration.

Footer

The footer section contains all of the options to customize the footer of the newsletter. Use the "Yes/No" pulldown menus to decide what elements you want to include. Depending on your preferences, the unsubscribe details, contact details and legal information can be included either in the footer or the postfooter. As with the header, you can use a graphical banner for the footer, which will take the place of all text elements.

Postfooter

The postfooter is the bottom-most section of the newsletter, below the footer. Use the "Yes/No" pulldown menus to decide what elements, if any, you want to include.


Saving a Template

When you are done with your design, click the "Save" button to store your changes. Whenever you use the builder to create or modify a newsletter template, the system automatically generates a plain text equivalent. Use the "HTML Part" and "Text Part" links to toggle between the two. The system also automatically generates a mail template equivalent, which means that you can use the HTML newsletter design for your automatic subscribe and unsubscribe notifications as well. Use the main navigation menu and choose "Mail Templates" and then select the HTML newsletter template of your choice from the "Template Style" pulldown menu and click "Select" to use an HTML newsletter template for your automatic email notifications.


Web-Safe Fonts and Web Fonts

A number of font family options are include in the "Font Family" pulldown menus. These include "Web-Safe Fonts" and "Web Fonts". Web-safe fonts are font families that have widespread support across operating systems and email clients. These include the most common fonts, such as Arial, Tahoma and Times New Roman, but are limited in their number. Web fonts, on the other hand, are specialty fonts, which are marked with an asterisk in the pulldown menu. These fonts are retrieved from Google Fonts and inserted in the newsletter. While web fonts provide a lot more attractive design possibilities, they are not yet universally supported by today's email clients. Another consideration is that the URLs used to retrieve the fonts from Google Fonts may change in the future, so if you're using web fonts, test them to make sure that they work satisfactorily based on your target email clients and that they are still accessible from Google Fonts.

If you want to include additional web fonts from Google Fonts in this builder, use the main navigation menu and go to "Web Templates". Then enter FONTS in the filter row, which will narrow the list to OBJECT-GLOBAL-FONTSTACKS and OBJECT-GLOBAL-WEBFONTS. Open OBJECT-GLOBAL-FONTSTACKS and insert entries for the new fonts that you want to add to the pulldown menus and click "Update". Then open OBJECT-GLOBAL-WEBFONTS and insert entries for the new fonts containing the access URLs at Google Fonts and click "Update". These new fonts will now be included in the pulldown menus and will be included in the HTML code of newsletters that you create or modify in the future.


Placeholders

The newsletter templates use placeholders that allow you to populate the content when you create individual newsletters to send out. The following placeholder names are used.


&*PREHEADER; – This placeholder is used for the preheader line at the very top of the newsletter.

&*SELFLINK; – This placeholder is automatically populated with a URL to an archived browser version of the newsletter.

&*NEWSLETTER; – This placeholder is used for the name of your newsletter in the header.

&*DESC; – This placeholder is used for the description of your newsletter in the header.

&*LOGO; – This placeholder is used for a logo in the header unless a permanent logo URL is included.

&*ISSUE; – This placeholder is used for the newsletter issue details.

&*FOOTER; – This placeholder is used for a short footer for your newsletter.

&*ADDRESS; – This placeholder is used for the physical address of your company or organization.

&*PHONE; – This placeholder is used for the phone number of your company or organization.

&*CONTACT; – This placeholder is used for the contact email address of your company or organization.

&*WEBSITE; – This placeholder is used for a website URL of your company or organization.

&*LEGAL; – This placeholder is used for any legal disclaimers, company registration numbers or similar information for your newsletter.


The content blocks are made up of placeholders with the following naming convention, with prefixes and suffixes depending on the block number and the layout style of each content block.


&*Bn-HEADLINEn; – This placeholder is used for the headline of the news item.

&*Bn-IMAGEn; – This placeholder is used for an accompanying image or graphic for the news item.

&*Bn-TEXTn; – This placeholder is used for the body text of the news item.

&*Bn-URLn; – This placeholder is used for the URL to a web page if subscribers want to read more.



LISTSERV® is L-Soft's email list management software, originally developed by Eric Thomas in 1986. Visit the LISTSERV® Resource Center for more complete documentation.

LISTSERV® is a registered trademark. The trademark identifies LISTSERV® as a brand of email list management software developed by L-Soft.