Ich mache eine benutzerdefinierte Responsive E-Mail mit Hilfe von Foundation Framework. Ich möchte das Layout wie im Screenshot gezeigt erreichen. Jede Beratung, wie dies zu implementieren, mit Foundation (oder ob dies wird noch möglich? In Anbetracht, dass ist, sollte in allen großen Mailclients arbeiten)Foundation E-mail: Bild über 2 Zeilen
Vielen Dank im Voraus!
Wenn Sie einen HTML-Lösung suchen, dann unten ist der Code, den Sie verwenden können.
Seine grobe aber gibt eine Idee mit Ihrem visuellen.
<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"> </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"> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="55" height="79" bgcolor="#d9ecf2"> </td>
<td bgcolor="#49267c" style="height:10px;line-height:0px; font-size:0px;"></td>
<td width="55" bgcolor="#d9ecf2"> </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>Prost
Es ist total möglich, obwohl nicht super trivial. Sie können etwas Ähnliches erstellen, indem Sie eine Hintergrundfarbe in einem Abschnitt darüber und die gleiche Farbe horizontal in der Ansicht verwenden.
<row>
<row><img></row>
<row>
Beispiel: https://codepen.io/rafibomb/pen/oeEMbO
Wir bieten Ihnen die gesamte Lösung hier nicht bauen. Versuchen Sie, daran zu arbeiten, und wenn Sie an einer Stelle in Ihrem Code feststecken, können wir Ihnen helfen, aber erwarten Sie nicht, dass Leute sitzen und Zeit für die Arbeit von Grund auf verbringen, um Ihnen fertige Build-Lösungen zu geben. Teilen Sie Ihren Code, wenn Sie etwas getan haben und Probleme damit haben. –