Knowledge Base: Continuum Creating and Sending eNewslettersSetting up a default newsletter template

Setting up a default newsletter template

NOTE: Content shortcodes are no longer visible in Continuum. Instead layouts are primarily managed by a Drag and Drop user interface. You'll be able to drop in content originally dictated by shortcodes and edit each zone individually. All Rendering Options are now called Layout Options, but are still required to set any of those options.

Our drag and drop editor provides a simple and powerful shortcut to embed content, and when combined with our newsletter tools, you can gain a lot of control over the newsletter's layout. We recommend a basic layout right out of the box, but you can customize it much further. This article explores the building blocks for your newsletter and the options available to you.

Out of the box

The layout or structure of the template is out of the box but the components that makeup your Layout starts as a blank slate. You drag over and build what you want.

We'll start by breaking down each component, to find out how it's setup by default and then options that are available to you. Everything is controlled by Layout Options, Editorial Content, Content Zones, and the Menu Manager.

In the next few sections we'll create a layout example.

Layout Options

To access Layout Options for these next steps go to your Dashboard > Newsletter > Select the name of your newsletter > Edit Newsletter tab > Layout Options. A Sidebar will appear.

The navigation is setup by defining the name of the menu in the layout option called "menu.name". The name, or Value, of this menu will match the name of your menu in the Navigation Manager. You can modify the menu items that appear including the URLs associated with the navigation items, in the Navigation Manager.

You will first upload your logo/header to the Media Manager. Copy and paste your uploaded image's URL to the rendering option "logo.path". This URL should not include the domain name, that is handled from the template. The next Layout Option you will need to set is the "logo.width". The value should be a number followed by px.

Pre-header

The pre.header is optional and is the line of text that the user will see in their inbox beside the subject line. It does not actually appear anywhere in the body of the newsletter.

Articles

Now let's look at the drag and drop editor. We'll focus on the basic components and how to modify them to give you the custom layout you desire.

Full Article: Under the layout tab in the newsletter manager, drag the Full Article component to your your layout. You'll see this:

To assign a property, hover over the component and select the edit icon.

A panel will appear where you can associate an article ID to populate. content. You will need to enter the article ID.

The full article will take up a full column/row.

Article List: You can drag and drop this component. Once you've done this, hover over them and click on edit to make custom adjustments.

columns: Required. Divides the articles into a single column or two columns.

Limit: Required. The total number of articles this component will render.

taxonomy ID(s): Optional. If you pass a taxonomy ID to this attribute, it will group only articles by that taxonomy to this section.

template: Optional. Our default template includes the option to have a background color for any section. This is part of the design, to provide a visual change from other sections —with the goal to improve the overall readability and UX.

show images: Optional. Defaults to true. Show or hide images with a true or false value.

image width: Optional. A default value is different for the single and two column layout. Do not include "px" in the value. e.g. 320

image position: Defaults to left. Place the image to the left, right, or on top of the article content.

portrait image height: Optional. This is a set height for any portrait image, with a default value of 200. Do not include "px" in the value.

teaser: Optional. Defaults to true. Show or hide the teaser with a true or false value.

sponsor: Optional. Defaults to true. Show or hide the sponsor with a true or false value.

ad_position: Optional. The numbered position, where the advertisement will render in place of an article. Decrease the total attribute value when placing an ad. Only 1 ad per shortcode can be set.

ad_disabled: Optional. Defaults to True. Show the ad from by setting this to False. This can be useful if you want to hide the ad while you are not serving one, but do not wish to remove the supporting code for now.

title: Optional. Add a custom title at the top of articles.

To set the background color, and border color, there are two additional Layout Options you can set.

Ad Position Example:

The ad code would be placed between an opening and closing of an article in your list. Toggle the number on this control to place the ad at the top, between, or at the bottom of the article. For example, if you want the ad between articles 2 and three it needs to be in position 3, position 1 being above article 1, position 2 being between article 1 and 2, and so on.

Events

Drag and drop the Event List component to your layout and hover to get the edit icon. Click on that to customize your events list.

1. taxonomy: Add a taxonomy ID to get only events from a specific taxonomy.

2. images: True by default. False will hide images.

3. template: To customize the background and border template styles for an event section, create a template name and use that in your layout options. e.g. tmpl.webinars.bg.color and place that in your Template field.

4. limit: 3 events are displayed by default. Set this attribute with a value of the number of events you want to display.

Products

You can add a product list by dragging and dropping the product list component to your layout. Once you've done that hover over the component and click the edit button to set some options.

taxonomy: Add a taxonomy ID to get only products from a specific taxonomy.

image_width: Defaults to 230. Do not include "px" in the value.

images: True by default. False will hide images.

total: Set this attribute with a value of the number of products you want to display.

teaser: Optional. Defaults to true. Set false to hide the teaser.

title: Optional. Add a custom title at the top of products.

Galleries

You can add a gallery list by dragging and dropping the gallery list component to your layout. Once you've done that hover over the component and click the edit button to set some options.

columns: Required. Divides the galleries into a single column or two columns.

total: Required. The total number of galleries this component will render.

taxonomy: Optional. If you pass a taxonomy ID to this attribute, it will group only galleries by that taxonomy to this section. Mixing the use of shortcodes with and without this attribute requires that you manually manage the order of galleries associated with your newsletter.

template: Optional. Our default template includes the option to have a background color for any section. This is part of the design, to provide a visual change from other sections —with the goal to improve the overall readability and UX.

images: Optional. Defaults to true. Show or hide images with a true or false value.

image_width: Optional. A default value is different for the single and two column layout. Do not include "px" in the value. e.g. 320

image_position: Defaults to left. Place the image to the left, right, or on top of the article content.

portrait_image_height: Optional. This is a set height for any portrait image, with a default value of 200. Do not include "px" in the value.

teaser: Optional. Defaults to true. Show or hide the teaser with a true or false value.

ad_position: Optional. The numbered position, where the advertisement will render in place of an article. Decrease the total attribute value when placing an ad. Only 1 ad can be set.

ids: Optional. A list of image gallery ids to render. Useful for explicitly targeting specific galleries.

ad_disabled: Optional. Defaults to true. Show the ad by setting this to true. This can be useful if you want to hide the ad while maybe you are not serving one, but do not wish to remove the supporting code for now.

title: Optional. Add a custom title at the top of the image galleries.

Videos

You can add a video list by dragging and dropping the video list component to your layout. Once you've done that hover over the component and click the edit button to set some options.

columns: Required. Divides the videos into a single column or two columns.

total: Required. The total number of videos this component will render.

taxonomy: Optional. If you pass a taxonomy ID to this attribute, it will group only videos by that taxonomy to this section. Mixing the use of shortcodes with and without this attribute requires that you manually manage the order of videos associated with your newsletter.

template: Optional. Our default template includes the option to have a background color for any section. This is part of the design, to provide a visual change from other sections —with the goal to improve the overall readability and UX.

images: Optional. Defaults to true. Show or hide images with a true or false value.

image_width: Optional. A default value is different for the single and two column layout. Do not include "px" in the value. e.g. 320

image_position: Defaults to left. Place the image to the left, right, or on top of the article content.

portrait_image_height: Optional. This is a set height for any portrait image, with a default value of 200. Do not include "px" in the value.

teaser: Optional. Defaults to true. Show or hide the teaser with a true or false value.

ad_position: Optional. The numbered position, where the advertisement will render in place of an article. Decrease the total attribute value when placing an ad. Only 1 ad per component can be set.

ids: Optional. A list of video ids to render. Useful for explicitly targeting specific videos.

ad_disabled: Optional. Defaults to true. Show the ad by setting this to true. This can be useful if you want to hide the ad while maybe you are not serving one, but do not wish to remove the supporting code for now.

title: Optional. Add a custom title at the top of videos.

Advertisements

In this section, we will introduce a new component called newsletter-ad. This component only has 1 attribute, and then the ad code is placed between the opening and closing of the component.

template: There are currently two template options available: bg-white or bg-none. The former will set a white background in the template behind the ad, to make it appear within the main document. The latter will set the background the same as the document background, making it seem there's a more clear break between sections.

The purpose of this template variation is to provide some variation in the design, improving the overall readability and appeal to the user experience. We encourage you to take advantage of the variations.

disabled: Optional. Defaults to false. If you want to keep the ad code in place but temporarily hide it from rendering, set this value to true.

Side by Side Advertisements

In the event that there's a need to place 2 ads side by side, there is a component for that as well. Simply use the newsletter-table compoent.

Drag and drop the component to layout. Hover over the component and click the edit button. Change the column attribute from 1 to two.

Columns: This shortcode will support 2 columns. To set the columns, specify the attribute columns="2". This will create a responsive friendly table. The ads will be side by side on desktop view and stacked on mobile.

Padding: A boolean value of true or false. Defaults to true. A table comes with padding within the table, setting this to false will remove that padding. This may be useful if you nest another component within newsletter-table that has its own padding.

Align: This will allow you to left, right, or center-align your table.

Template: There are currently two template options available: bg-white or bg-none. The former will set a white background in the template behind the ad, to make it appear within the main document. The latter will set the background the same as the document background, making it seem there's a more clear break between sections.

Layout Options, Layout Components, & Editorial Content Zones (ECs)

Now, the glue that holds this all-together.

At the newsletter level, we have Layout Options (LOs) that allow you to configure certain aspects of the newsletter — which you are already familiar with. We will create new zones within the LOs. These are the different sections of your newsletter.

The zones begin after your logo in the design. There's a zone for each section. You can add more zones and name them zone.X, incrementing the value. The limit is currently set to 25.

The blurb Layout Option is an Editorial Content zone (EC). The reason for this is two-fold, there's a limit to how many characters can go into this LO field - allowing only simple components, and a text area like an EC provides more space to edit. You can also place more than one component into an EC.

For example, in the RO zone.1, you would edit this EC by searching for the EC named "newsletter.zone.1". We recommend sticking with this naming convention to prevent any confusion mapping the two together.

Overrides Per Issue

Should you want to override any of these zones on a per issue basis, we've made that possible. On the Edit Newsletter tab in the Newsletter Manager, create a new zone with the zone name matching the LO name that you want to override. This issue will now use this new zone instead of the one from the LOs.

Other Layout Options & Final Notes

article.image.width — When the width of the newsletter is modified it's recommended to adjust the image width for articles accordingly. Do not include "px" in the value.

image.bg.color  — This controls the background color for images.

article.url.params — Appends attributes to every article from the newsletter-articles shortcode. These are attributes that your ESP could parse. Do not begin this value with "?" or "&". e.g. email=@{user_email}@

background.color — A CSS Hex value to change the background color of the overall newsletter.

body.top — Some 3rd party trackers require content to be placed immediately after the opening body html element. Use the blurb component.

facebook.url — Your Facebook URL, when present shows an icon in the layout.

headline.color — The CSS Hex value of your headlines.

layout — This is a base setup requirement, and mostly an ePublishing internal layout option.

linked.url — Your Linkedin URL, when present shows an icon in the layout.

logo.background.color — Change the background color in the header behind the logo.

logo.padding — Overrides the default 20px padding value around the logo. Include "px" in the value field (ex: 40px). Important: If this results in a value that is greater than what's entered in the newsletter.width Layout Option this will then become the newsletter width.

newsletter.width — Use to override the width of your newsletter. The recommended and default width is 600. Do not include "px" in the value.

style.font.teaser — Inline CSS that affects the styles of all teasers.

style.font.headline — Inline CSS that affects the styles of all headlines.

style.title — Inline CSS that affects the styles of all section titles e.g. The [newsletter-articles] title and the [newsletter-article] headline.

style.footer.left.column —Override the styles on the left column of the footer, ideal for increasing the width if the overall newsletter width has been changed.

style.footer.right.column —Override the styles on the right column of the footer, ideal for increasing the width if the overall newsletter width has been changed.

template — This is a base setup requirement, and mostly an ePublishing internal rendering option. Used to choose the internal default template.

twitter.url: Your Twitter URL, when present shows an icon in the layout.

Contact Call-To-Action Component

contact.link: The link to your contact us page.

contact.link.text — Modify the text of the button.

contact.message: Change the message associated with your contact call-to-action.

contact.style.button — Override the styles for the button.

contact.style.button.link — Override the styles for the button link

contact.style.message — Override the styles for the message.

contact.style.message.link — Override the styles for the message link.

Enable by adding the word "contact" to any zone.

0 Comments

Add your comment

E-Mail me when someone replies to this comment