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]