Mailchimp - 如何在图像上方添加可变文本
Mailchimp - How add variable text above image
我在 mailchimp 中创建了几个模板并导出 html 以在我的 lavarel 项目中实施。在每个电子邮件模板中,我更新代码以读取我的变量。
我的问题是:我想在 gmail 的图片上方添加可变文本。它适用于其他电子邮件客户端,但在 gmail 中不起作用。
在 gmail 中显示如下:
并且在我的客户邮件中表现良好:
我的代码:
<div class="month-center" style="position: relative; margin: 0 auto; right: 0; left: 0;">
<strong style="position: absolute; vertical-align: middle; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);left: 0; right: 0; color: white; font-size: 2em; font-family: Arial, 'Helvetica Neue', Helvetica, sans serif;">Setembro</strong>
<img align="center" alt="" src="https://gallery.mailchimp.com/a9d87c79b29239577e5d51e67/images/1ff7f4b7-c17a-498e-be89-1816b2cbf1a3.jpg" width="300" style="max-width:300px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">
</div>
我认为问题在于 Gmail 不接受的某些 CSS 属性,例如绝对位置。
我该如何解决这个问题?
你是对的,Gmail(和很多电子邮件客户端)不支持 position
。
您的问题的一个解决方案是使用背景图片而不是定位。
https://backgrounds.cm/ 是生成电子邮件友好背景图像的最佳工具。
https://www.campaignmonitor.com/css/ 是检查 CSS 多个电子邮件客户端兼容性的最佳资源。
我在 mailchimp 中创建了几个模板并导出 html 以在我的 lavarel 项目中实施。在每个电子邮件模板中,我更新代码以读取我的变量。
我的问题是:我想在 gmail 的图片上方添加可变文本。它适用于其他电子邮件客户端,但在 gmail 中不起作用。
在 gmail 中显示如下:
并且在我的客户邮件中表现良好:
我的代码:
<div class="month-center" style="position: relative; margin: 0 auto; right: 0; left: 0;">
<strong style="position: absolute; vertical-align: middle; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);left: 0; right: 0; color: white; font-size: 2em; font-family: Arial, 'Helvetica Neue', Helvetica, sans serif;">Setembro</strong>
<img align="center" alt="" src="https://gallery.mailchimp.com/a9d87c79b29239577e5d51e67/images/1ff7f4b7-c17a-498e-be89-1816b2cbf1a3.jpg" width="300" style="max-width:300px; padding-bottom: 0; display: inline !important; vertical-align: bottom;" class="mcnImage">
</div>
我认为问题在于 Gmail 不接受的某些 CSS 属性,例如绝对位置。
我该如何解决这个问题?
你是对的,Gmail(和很多电子邮件客户端)不支持 position
。
您的问题的一个解决方案是使用背景图片而不是定位。
https://backgrounds.cm/ 是生成电子邮件友好背景图像的最佳工具。
https://www.campaignmonitor.com/css/ 是检查 CSS 多个电子邮件客户端兼容性的最佳资源。