Ich arbeite derzeit an einer E-Mail-Vorlage, die mit den wichtigsten E-Mail-Anbietern kompatibel sein muss.Wie lege ich einen dynamischen Text auf ein Bild für verschiedene E-Mail-Anbieter? (Responsive Email)
Laut dem Client sollte ich einen Anrede Absatz oder Header auf einem Bild erstellen, also habe ich diese Lösung versucht, die gut funktioniert Browser aber definitiv nicht auf die E-Mails (getestet auf Outlook, Hotmail, Gmail und Yahoo) und keiner von ihnen liest die Eigenschaft Position: absolut (ich denke nicht sicher).
Die Vorlage muss auch reagieren, wenn ich also die Größe des Bildschirms ändere, sollte der Text in Bezug auf die Breite des Bildschirms angepasst werden. Wegen der vielen Probleme in der E-Mail musste ich zwei Tabellen ineinander erstellen, um einen Rahmen um das Bild zu erstellen, und dann die zweite Tabelle, um das Bild selbst anzuzeigen.
Der Text sollte innerhalb der rosa Roadsign sein und es ist Hi Margaret, die dann dynamisch sein wird.
Hier ist mein Code:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta charset="UTF-8">
<style type="text/css">
body {
background: #dff1f6 !important;
font-family: Arial, sans-serif;
}
.preheader {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
color: transparent !important;
height: 0 !important;
width: 0 !important;
}
@media (max-width: 376px) {
.anglianlogo {
max-width: 250px !important;
}
.anglianwellcome {
font-size: 11px !important;
}
.awvideopreview {
height: 150px;
}
.mobileresize {
width: 90% !important;
font-size: 9px;
}
}
</style>
<div style="background: #dff1f6;">
<!--Container-->
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="600">
<!--Main Table-->
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width: 600px; width: 100%; margin: 0 auto; background: white;">
<tr>
<td>
<!--Video-->
<table width="600" cellspacing="0" cellpadding="0" border="0" style="padding-bottom: 30px; padding-left:10%; padding-right:10%; width:100%;">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="center" style="text-align:center; margin: 0 auto;">
<tr>
<td style="padding: 0; border: 10px solid #72b8d1;">
<a style="margin: 0 auto; display: block;">
<!--href="{{ CustomerData.vidUrl }}"-->
<img class="awvideopreview" src="https://preview.ibb.co/gKOzsv/Videopreview.gif" width="450" border="0" align="center" style="width:100%;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--End Table-->
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
<!--End Container-->
</div>
</body>
</html>
Hallo Kumpel Ich konnte einen Teil des Codes kopieren und es hier so jetzt ist aktualisiert. Vielen Dank für Ihre Hilfe –