What are the newsletter Layout Options?

This article lists all available newsletter Layout Options and appropriate values. 

The following Layout Options are required:

Name: layout

Value: true or false

This toggles the normal web page layout (logo, right rail, etc.) from showing when viewing the newsletter in a browser (false = off, true = on). You’ll likely want to set this to false.

 

Name: newsletter.width

Value: This is the width that the newsletter will be rendered. Please note that you do not use a “px” after the value. Base this value on the width of your widest ad if you have a leaderboard ad. For example: 768 

 

Name: template

Value: newsletters/newsletter_default

Using this value allows you to use the functionality of the new Layout Builder.

The following Layout Options are optional:

Name: article.image.width

Value: 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

 

Name: article.url.params

Value: 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}@

 

Name: background.color

Value: Hex color code. Change the background color of the overall newsletter

 

Name: body.top

Value: Some 3rd party trackers require content to be placed immediately after the opening body html element

 

Name: contact.link

Value: The link to your contact page

 

Name: contact.link.text

Value: Modify the text of the button

 

Name: contact.message

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

 

Name: contact.style.button

Value: Inline CSS that overrides the styles for the button link

 

Name: contact.style.button.link

Value: Inline CSS that overrides the styles for the button link

 

Name: contact.style.message

Value: Inline CSS that overrides the styles for the message

 

Name: contact.style.message.link

Value: Inline CSS that overrides the styles for the message link

 

Name: contact.bg_color

Value: Hex color code

 

Name: disable.responsive.ads

Value: true or false

When set to true, it disables ePublishing’s responsive code for ads, allowing clients to rely on their ad provider's responsive ad code. 

 

Name: facebook.url

Value: The URL of your Facebook Page

 

Name: headline.color

Value: Hex color code

 

Name: image.bg.color

Value: Hex color code. Controls the background color for images (useful when images are in portrait orientation, defaults to white).

 

Name: linkedin.url

Value: The URL of your LinkedIn Page 

 

Name: logo.background.color

Value: Hex color code. Change the background color in the header behind the logo.

 

Name: logo.padding

Value: 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.

 

Name: logo.path

Value: A file path of the header image used in the newsletter. You can see this file path in Media Manager when you upload the image file. For example: /ext/resources/newsletter_logo.png

 

Name: logo.width

Value: The width that the logo will be rendered. Please note that “px” is required after the value. For example: 422px

 

Name: menu.name

Value: If you want to include a navigation bar in your newsletter issue, set up the navigation in Editorial > Navigation and use the name you applied to the navigation menu here. Note: You must also set layout option nav.position.

 

Name: nav.position

Value: This is the position of the nav bar on your newsletter, acceptable values are top or below-header. Defaults to top if unused.

 

Name: newsletter.date

Value: If your site is using an Omail integration, you can enter the following Omeda shortcode for the value: @{mv_date_M/d/yyyy}@. If you do not add this Layout Option, the default date will be used (the date the newsletter issue was created).  If you are not using Omail you can use this Layout Option to set the date that displays in the newsletter. Add the date in the value field in this format m/d/yyyy 

 

Name: newsletter.title

Value: The title of your newsletter

 

Name: newsletter.unique.footer

Value: The value should be a blurb shortcode for a corresponding Editorial Content area that will be rendered in the footer of the newsletter (for example: [blurb name="newsletter1.unique.footer"]). Create Editorial Content that matches the name in quotes and insert your footer code in its body and publish it.

 

Name: omeda.deployment.type

Value: If your site is using an Omail integration, this will be a value provided by Omeda. 

 

Name: omeda.test.email

Value: If your site is using an Omail integration, the value is a vanity name and email address that gets included in Omail’s test sends (formatted like: "ePublishing Admin" <[email protected]>). This is handy in the event the newsletter editor is not part of the Omail test list (this way, test lists don’t have to be adjusted through Omail’s settings). 

 

Name: pre.header

Value: 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.

 

Name: pre.header.visible

Value: Optional. This is the visible Editorial Content area that will display above the header in the newsletter (unlike pre.header which is not visible). The value should be a blurb shortcode for a corresponding Editorial Content area that will be rendered in the newsletter issue (for example: [blurb name="[blurb name="newsletter1.pre.header.visible"]). Create Editorial Content that matches the name in quotes and insert your code in its body and publish it. 

 

Name: show.volume.issue

Value: true or false. When set to true, this will allow the volume and issue information to display on the newsletter issue. 

 

Name: style.font.headline

Value: Inline CSS that sets the headline font. Example: font-family: Helvetica, Arial, sans-serif; 

 

Name: style.font.teaser

Value: Inline CSS that sets the teaser font. Example: font-family: Helvetica, Arial, sans-serif; 

 

Name: style.footer.left.column

Value: true or false. Override the styles on the left column of the footer, ideal for increasing the width if the overall newsletter width has been changed.

 

Name: style.footer.right.column

Value: true or false. Override the styles on the right column of the footer, ideal for increasing the width if the overall newsletter width has been changed.

 

Name: style.title [updated 2022.12.29]

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

 

Name: twitter.url

Value: The URL of your Twitter Page 

 

Name: web.version.link

Value: This is used for a "View Web/HTML Version" link. The value should be a blurb shortcode for a corresponding Editorial Content area that will be rendered in the footer area (for example: [blurb name="newsletter1.web.version.link"]). Create Editorial Content that matches the name in quotes and insert your footer code in its body and publish it.

 

Name: youtube.url

Value: The URL of your YouTube Page 

Component-Specific Layout Options:

The following components in the Layout Builder will allow you to specify a name for the component using the Template attribute:

  • Article List
  • Event List
  • Gallery List
  • Video List
  • Table


You can assign a name to the component’s template and use additional component-specific layout options to further style the component to stand out from the rest of the newsletter.


The components mentioned above will allow you to set the following Layout Options:


Article List - when using a 1 column layout

  • tmpl.<template_name>.bg.color

  • tmpl.<template_name>.border.color

  • tmpl.<template_name>.image.bg.color

  • tmpl.<template_name>.image.align

  • tmpl.<template_name>.style.title [new 2022.12.29]

Article List - when using a 2 column layout

  • tmpl.<template_name>.bg.color

  • tmpl.<template_name>.border.color

  • tmpl.<template_name>.style.title [new 2022.12.29]

Event List

  • tmpl.<template_name>.border.color

  • tmpl.<template_name>.margin.top

Gallery List - when using a 1 column layout

  • tmpl.<template_name>.bg.color

  • tmpl.<template_name>.border.color

  • tmpl.<template_name>.image.bg.color

  • tmpl.<template_name>.image.align

Gallery List - when using a 2 column layout

  • tmpl.<template_name>.bg.color

  • tmpl.<template_name>.border.color

Video List - when using a 1 column layout

  • tmpl.<template_name>.bg.color

  • tmpl.<template_name>.border.color

  • tmpl.<template_name>.image.bg.color

  • tmpl.<template_name>.image.align

Video List - when using a 2 column layout

  • tmpl.<template_name>.bg.color

  • tmpl.<template_name>.border.color

Table (Note: this is set as white by default for max visibility)

  • tmpl.<template_name>.bg.color

  • tmpl.<template_name>.border.color


So, what does this mean? Let's say you add a single column Article List component to your newsletter and give it the name of "articles1" in the Template field in the attributes:

You can then fine-tune the styling of this component only by adding the following Layout Options:

tmpl.articles1.bg.color

tmpl.articles1.border.color

tmpl.articles1.image.bg.color

tmpl.articles1.image.align

The template name (“articles1” in this example) can also be applied to other components in the same newsletter if you have multiple components you want to style the same way. 

Value examples are as follows for the component-specific Layout Options:

  • tmpl.<template_name>.bg.color - The value in this Layout Option should be a hex color code (ex: #F0F0F0)

  • tmpl.<template_name>.border.color - The value in this Layout Option should be a hex color code (ex: #000000)

  • tmpl.<template_name>.image.align - This is the vertical alignment of the image within the component (use top, middle, or bottom for the value)

  • tmpl.<template_name>.image.bg.color - This is used when an image is in portrait orientation in the newsletter. The value in this Layout Option should be a hex color code (ex: #FFFFFF)

  • tmpl.<template_name>.margin.top - Specifically to modify the space above the Events header in the newsletter. The value is in pixels (ex: 5px) and does not need the ; after the px. [new 2022.03.01]