More advanced documentation for Tags and Attributes for Email Builder

(0) Share

Report

Posted on by James Robe

I am looking to build out a template for my company and would like to create both an inner and outer background for the email. The documentation included here does not cover how to add this functionality, though it is implemented through the included templates. I would use these templates, but they are currently too rigid for my organization.

Note: I have updated to the early access version of the marketing builder, which includes layout functionality.

Categories:

All responses (5)

Answers (0)

LuHao 40,872 on at

Like (0)

Report

RE: More advanced documentation for Tags and Attributes for Email Builder

Hi James,

If your outer background means background color for whole marketing email page,

we just insert following tag into head tag, just as similar to we add inner background button,

<meta

type="xrm/designer/setting"

name="outer-background"

value="#ffff00"

datatype="color"

label="Outer Background">

then also add comments for body tag CSS rule

<style>

body {

background-color:

/* @outer-background */ #ffff00

/* @outer-background */

;

}

Regards,

Clofly
James Robe 60 on at

Like (0)

Report

RE: More advanced documentation for Tags and Attributes for Email Builder

Hello,

This was incredibly helpful! I have successfully implemented an inner background color.

However, I am still struggling to add an outer background color. See attached for an example of what I mean. Do you know how I might implement this?
LuHao 40,872 on at

Like (0)

Report
RE: More advanced documentation for Tags and Attributes for Email Builder

Hi Jame,

Now I want to give a supplement for my anwser:

If you want to add Inner or Outer Color button for your custom marketing email template,

please do process below:(inner background as example)

Add those tags inside head tag.

<meta

type="xrm/designer/setting"

name="version"

value="1.0">

<meta

type="xrm/designer/setting"

name="type"

value="marketing-designer-content-editor-document">

<meta

type="xrm/designer/setting"

name="inner-background"

value="#fff"

datatype="color"

label="Inner Background">

Add CSS class for your element that you want to apply inner color setting

<div

class="banner">

</div>

<style>

.banner {

height:

500px;

background-color:

/* @inner-background */

#fff /* @inner-background */;

}

</style>

Please keep two

/* @inner-background */ comments!

Then the button will appear.

Regards,

Clofly
LuHao 40,872 on at

Like (0)

Report
RE: More advanced documentation for Tags and Attributes for Email Builder

Hi Jame,

I have searched throught official document and just got the same article you posted with available customization.

Could you share me an example of your mentioned inner and outer background for the email means?

As per my understanding, if those concepts refer to some element like Hero Image, (image with text on it),unfortunately there is no design tool to achieve.

From perspective of CSS, I found that most of drag-and-drop elements are block level element, so if we want to make a marketing email with advanced layout and appearance, we may have to edit HTML source code directly.

As the doc you posted, drag-and-drop elements are identified by data-editorblocktype, my suggestion is that we don't make customization on those elements with attributes as possible(except color, padding etc.)

We could insert our Hero Image with custom CSS rules after the elements that were detected by designer editor:

Add essential elements to our custom email template,

(actually you can add them with Assis-edit button, here I just list them)

Must-have:

Unsubscription link and physical address:

<div

data-editorblocktype="Text"

style="text-align: center;">

<p

style="text-align: center;">

<span

style="font-size:18px;">

<strong>{{msdyncrm_contentsettings.msdyncrm_addressmain}}</strong>

</span>

</p>

<p

style="text-align: center;">

<span

style="font-size:18px;">

<strong>{{msdyncrm_contentsettings.msdyncrm_addressline2}}</strong>

</span>

</p>

<p>

<a

href="{{msdyncrm_contentsettings.msdyncrm_subscriptioncenter}}">Unsubscribe</a>

</p>

</div>

Better-have:

Forward to a friend, View in Browser

<div

data-editorblocktype="Text">

<p

class="header-text xsmall-text text-right link-text"

style="text-align: right;">

<a

href="{{msdyncrm_contentsettings.msdyncrm_forwardtoafriend}}">

<span

style="color:#000000;">Forward to a friend</span>

</a>

<span

style="color:#000000;"> |

</span>

<a

href="{{Message.ViewAsWebpageURL}}">

<span

style="color:#000000;">View in browser</span>

</a>

</p>

</div>

My final layout in a testing marketing email from customer journey

Now that you have updated early version, you could make a well-layout marketing email with new layout functionality.

In a word, custom CSS rule would be necessary for advanced layout.

Regards,

Clofly
Suggested answer

d_radulova 2 User Group Leader on at

Like (0)

Report

RE: More advanced documentation for Tags and Attributes for Email Builder

The Styles tab in the Toolbox on the right of the marketing email designer screen has a color pallette for the outer background as well as the inner background.

Thanks,

-DD