如何在MailChimp中使用变量内容?

时间:2015-07-09 09:49:40

标签: html templates mailchimp

我的代码问题

我在使用Mailchimp中的变体内容时遇到了一些麻烦,我无法弄清楚我是如何编写它来实现它的。 因此,如果任何人都编写了一些带有可变内容的功能模板,请在结构中展示或提供一个示例代码,以便我可以弄清楚它是如何工作的。

我实际上已经开始认为它不再可用了,因为即使MailChimp提供的示例代码也不起作用!

我在MailChimp的基本模板中复制/通过了MailChimp给出的示例代码。(我在https://blog.mailchimp.com/working-with-variant-selectors/找到了它)

(我不会把代码放在这里,它真的很长)

当我说它不起作用时,我的意思是我可以编辑,删除或复制这些块,但我无法访问允许您选择要添加的内容类型的下拉菜单。

我知道这篇文章就像5岁那么可能我改变了但这是我在互联网上发现的唯一例子...... 在这里,您可以找到关于此的唯一更新信息:http://kb.mailchimp.com/templates/code/create-editable-content-areas-with-mailchimps-template-language#Variable-Content-Area(它不是很稳固)

背后的故事:

我正在为我正在为之工作的公司编写一份可编辑的简报。

新闻通讯中会有很多不同的内容,所以我认为为每种类型的内容使用不同颜色的标题背景会很聪明。 例如,营销内容将具有蓝色标题背景,IT将为绿色等等......

事情是会有类似10种不同类型的内容,并且在一个时事通讯中只有3或4个内容。 所以我认为将10块模块放入模板会有点麻烦,而实际使用的只有3或4块。

可悲的是,在不改变原始块的情况下复制块并更改其颜色是不可能的。

所以我认为编写10个不同的变量内容会很棒,所以用户可以选择其中一个,添加它然后根据需要更改颜色。

发布更新:

我刚刚看到有关MailChimp可重复或可变内容的文章是在5天前编辑的。我猜这个选项仍然存在,如果不是,他们会删除关于可变内容的部分。

文章:http://kb.mailchimp.com/templates/basic-and-themes/repeatable-or-variable-content-blocks

感谢您的时间!

1 个答案:

答案 0 :(得分:4)

我刚刚创建了一个使用变量内容的自定义模板,在解决了一些问题之后,它们都按预期工作了。

您需要确保:

  • 每个元素的mc:repeatable属性匹配
  • 每个可重复元素彼此完全相邻
  • 每个部分的mc:edit都是唯一的(特别是如果你想改变颜色)

以下是一些对我有用的代码:

<table border="0" cellpadding="0" cellspacing="0" id="templateContainer">
<tr>
    <td align="center" valign="top" class="contentWrapper">
        <!-- BEGIN BODY // -->

        <!-- // Begin Module: Item - no top border with image \\ -->
        <table class="bodyContent" border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="siwc_600" mc:variant="content with left image - no top border">
            <tr>
                <td colspan="3" height="30"></td>
            </tr>
            <tr>
                <td align="center" valign="top">
                    <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_180.gif" style="max-width:180px;" mc:label="image" mc:edit="liwc600_image00"/>
                </td>
                <td width="20"></td>
                <td valign="top">
                    <div mc:edit="liwc600_content00">
                        <h1><a href="#" target="_blank" style="text-decoration:none">Content with no top border</a></h1>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam risus ligula, at dignissim dui condimentum ac. Proin a tortor id eros molestie pretium sit amet
                        at eros. Vivamus faucibus mauris ullamcorper arcu dignissim feugiat.<br/><br/><a href="#" target="_blank" style="font-weight:bold; text-decoration:none">Read more</a>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3" height="30"></td>
            </tr>
        </table>
        <!-- // End Module: Item - no top border with image \\ -->

        <!-- // Begin Module: Item - no top border witout image  \\ -->
        <table class="bodyContent" border="0" cellpadding="0" cellspacing="0" width="100%" mc:repeatable="siwc_600" mc:variant="content with no image - no top border">
            <tr>
                <td height="30"></td>
            </tr>
            <tr>
                <td valign="top">
                    <div mc:edit="riwc600_content00">
                        <h1><a href="#" target="_blank" style="text-decoration:none">Content with no top border</a></h1>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam risus ligula, at dignissim dui condimentum ac. Proin a tortor id eros molestie pretium sit amet
                        at eros. Vivamus faucibus mauris ullamcorper arcu dignissim feugiat. Mauris sagittis est diam, et congue erat varius vel. Integer iaculis pharetra sapien, sed varius metus
                        blandit nec.<br/><br/><a href="#" target="_blank" style="font-weight:bold; text-decoration:none">Read more</a>
                    </div>
                </td>
            </tr>
            <tr>
                <td height="30"></td>
            </tr>
        </table>
        <!-- // End Module: Item - no top border without image \\ -->

        <!-- // Begin Module: Left Image with Content \\ -->
        <table class="bodyContent" border="0" cellpadding="0" cellspacing="0" width="100%"
               mc:repeatable="siwc_600" mc:variant="content with left image">
            <tr>
                <td colspan="3" height="2" bgcolor="#ededed"></td>
            </tr>
            <tr>
                <td colspan="3" height="30"></td>
            </tr>
            <tr>
                <td align="center" valign="top">
                    <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/placeholder_180.gif" style="max-width:180px;" mc:label="image" mc:edit="liwc600_image00"/>
                </td>
                <td width="20"></td>
                <td valign="top">
                    <div mc:edit="liwc600_content01">
                        <h1><a href="#" target="_blank" style="text-decoration:none">Standard content with border</a></h1>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam risus ligula, at dignissim dui condimentum ac. Proin a tortor id eros molestie pretium sit amet
                        at eros. Vivamus faucibus mauris ullamcorper arcu dignissim feugiat. Mauris sagittis est diam, et congue erat varius vel. Integer iaculis pharetra sapien, sed varius metus
                        blandit nec.<br/><br/><a href="#" target="_blank" style="font-weight:bold; text-decoration:none">Read more</a>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="3" height="30"></td>
            </tr>
        </table>
        <!-- // End Module: Left Image with Content \\ -->

        <!-- // END BODY -->
    </td>
</tr>