Sendgrid 在我的模板代码上方添加额外的 HTML 和 CSS

问题描述 投票：0回答：2

我正在努力创建一个动态模板，其中包含一个非常简单的表格和 Sendgrid 中的一些文本。这封电子邮件将发送给几乎完全在 Outlook 桌面上查看的内部员工，因此我不太担心一致性或兼容性。在我所有的测试电子邮件中，正文都居中，而不是一直向左。我查看了源代码并进行了尝试，直到我最终意识到我的内容上方有一个表格，其样式为 

max-width:600px;
，这导致它变小并居中。一旦我删除了那个样式，它就会像我想要的那样将我的身体一直推向左侧。

所以我想弄清楚如何删除 Sendgrid 添加到源中的所有垃圾 HTML 和 CSS。或者至少删除 600px 的最大宽度。

以下是一些示例代码，会自动添加到发送的所有电子邮件中：

<body>
      <center class="wrapper" data-link-color="#1188E6" data-body-style="font-size:14px; font-family:arial,helvetica,sans-serif; color:#000000; background-color:#FFFFFF;">
        <div class="webkit">
          <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#FFFFFF">
            <tr>
              <td valign="top" bgcolor="#FFFFFF" width="100%">
                <table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">
                  <tr>
                    <td width="100%">
                      <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td>
                            <!--[if mso]>
    <center>
    <table><tr><td width="600">
  <![endif]-->
                                    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:600px;" align="center">

我真的不明白为什么电子邮件需要至少有4个嵌套表！最后一个表格标签是最大宽度所在的位置。

据我所知，没有其他设置。这是我在编辑器中的代码的屏幕截图：

添加有关正在发生的情况的视觉表示以更好地提供帮助。

电子邮件正文居中，我只是希望它保持两端对齐。

html css sendgrid
2个回答
0
投票

我过去使用 SendGrid 和 ROR 构建新闻通讯，我发现代码被转换为内联，因此可以在许多其他电子邮件提供商中阅读，我们发现这个名为 amp 的产品实际上可以让我们使用非内联样式CSS。

我建议采用这种方法，或者编写内联样式 max-with:600px;根据偏好的宽度并在不同的提供商、Gmail、outlook、Ios 等上运行多个测试。

正如您所提到的，时事通讯创建者不会发送发送时事通讯所需的代码，而是将内容转换为内联。

放大器链接

示范

    <html ⚡4email data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <!--[if (gte mso 9)|(IE)]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Mexdev - Newsletter service</title>

    <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>


<body style="background-color:#F5F5F5; overflow: auto;">
<div>
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed; background-color:#F5F5F5;" id="bodyTable">
            <tbody><tr>
                <td align="center" valign="top" id="bodyCell">
                <!--[if (gte mso 9)|(IE)]><table align="center" border="0" cellspacing="0" cellpadding="0" style="width:620px;" width="620"><tr><td align="center" valign="top"><![endif]-->
                <table border="0" cellpadding="0" cellspacing="0" style="max-width:480px;" width="100%" class="wrapperTable">
                <tbody>
                    <tr>
                        <td align="center" valign="top" class="wrapperCell">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapperPreHeader">
                                <tbody>
                                <tr>
                                    <td align="center" valign="top" style="padding-left:10px;padding-right:10px;">
                                    <!-- Email PreHeader Open //-->
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="emailPreHeader">
                                        <tbody><tr>
                                            <td align="right" valign="top" style="padding: 20px;">
                                            </td>
                                        </tr>
                                    </tbody></table>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapperHeader">
                                <tbody>
                                <tr>
                                    <td align="center" valign="top" >

    <!-- Email der Open //-->
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="emailHeader" style="border-radius: 10px; background: white; margin-bottom: 20px;">
                                        <tbody>
                                            <tr>
                                                <td align="center" valign="middle" style="padding: 40px 20px 20px;" class="emailLogo">
                                                <!-- Logo and Link  // -->
                                                <a href="#" target="_blank" style="text-decoration:none;">
                                                    <img src="https://firebasestorage.googleapis.com/v0/b/mexdev-40fff.appspot.com/o/logos%2Ffavicon%20-%20Copy.png?alt=media&token=83158426-51b5-40c2-9423-9756710c79f0" alt="" width="80" >
                                                </a><br>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="middle" style="padding-bottom: 5px; padding-left: 20px; padding-right: 20px;" class="emailTitle">
                                                <!-- Email Header Title  // -->
                                                <p class="bigText" style="color:#A5A5A5; font-family: 'Poppins'; font-size:30px; font-weight:400; font-style:normal; letter-spacing:normal; line-height:32px; text-transform:none; text-align:center; padding:0; margin:0;">
                                                Mexdev - Newsletter service
                                                </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" valign="middle" style="padding-bottom: 40px; padding-left: 20px; padding-right: 20px;" class="emailTimeStamp">

    <!-- Cool Bar -->         <div style="height: 1.5px; margin-top: 20px; margin-right: 20px; margin-left: 20px; border-radius: 3px; background-image: linear-gradient(200deg, #00a8ff 10%, #7460c5 39%, #02d0ff 80%);"></div>
                          <br><br><br>
                                            <!-- Email Time Stamp  // -->
                                                <p class="smlText" style=" color:#999999; font-family: 'Poppins'; font-size:11px; font-weight:400; line-height:20px; font-style:normal; letter-spacing:normal; text-transform:none; text-align:center; margin:0; padding:0;">
                                                
</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>


</div>

</body>
</html>

只是分享我的经验，希望能帮助你按计划进行造型。

0
投票

@philnash 是对的。您必须使用 sendgrid 的代码编辑器。一旦您访问外部 html，您就可以左对齐您的内容。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.