基金会电子邮件:超过2行的图像

时间:2017-08-18 10:35:45

标签: email frameworks zurb-foundation html-email responsive

我正在使用Foundation Framework制作自定义响应式电子邮件。我想实现截图中显示的布局。关于如何实现这一点的任何建议,使用Foundation(或者甚至可以这样做?请记住,这应该适用于所有主要邮件客户端)

enter image description here

提前致谢!

2 个答案:

答案 0 :(得分:1)

如果您正在寻找HTML解决方案,那么下面是您可以使用的代码。

它粗糙,但使用你的视觉提供了一个想法。

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#17b0de" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:47px 0px; text-align:center; font-size:80px;color:#ffffff;">ROW 1</td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="55" height="190" bgcolor="#17b0de">&nbsp;</td>
        <td bgcolor="#49267c" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold;  text-align:center; font-size:80px;color:#ffffff;">VISUAL</td>
        <td width="55" bgcolor="#17b0de">&nbsp;</td>
      </tr>
    </table>
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="55" height="79" bgcolor="#d9ecf2">&nbsp;</td>
          <td bgcolor="#49267c" style="height:10px;line-height:0px; font-size:0px;"></td>
          <td width="55" bgcolor="#d9ecf2">&nbsp;</td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td bgcolor="#d9ecf2" style="font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:20px 0px; text-align:center; font-size:80px;color:#ffffff;">ROW 2</td>
  </tr>
</table>

干杯

答案 1 :(得分:0)

这完全可能,虽然不是超级微不足道的。您可以通过在上面的部分使用背景颜色来构建类似的东西,并在视觉效果的水平位置使用相同的颜色。

<row>
<row><img></row>
<row>

实施例: https://codepen.io/rafibomb/pen/oeEMbO

enter image description here

enter image description here