Posso obter o modelo "Customize Email Style" do Meta?

Suporte
1

Olá,

Adoro muito o layout dos e-mails de notificação do Meta, mas os meus ainda são muito simples. Como posso obter o modelo que vocês usam aqui?

Obrigado!

2

Temo que este caso tenha passado despercebido. Alguém poderia me dizer como posso obter o novo modelo de e-mail?

3

@neil, alguma ideia do que estamos fazendo aqui?

4

Aqui está o HTML e CSS para usar em Admin > Personalizar > Estilo de E-mail. Foi extraído do modelo de e-mail de resumo.

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="%{html_lang}" xml:lang="%{html_lang}">

<head>
  <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
  <title></title>
</head>

<body>

<!--[if mso]>
<style type="text/css">
body, table, td, th, h1, h2, h3 {font-family: Helvetica, Arial, sans-serif !important;}
</style>
<![endif]-->

<table class="e-header">
  <tr>
    <td>
      <a href="https://www.example.com">
        <img src="my-site-logo.png" height="40" alt="Nome do Meu Site">
      </a>
    </td>
  </tr>
</table>

<table class="e-body">
  <tr>
    <td class="e-side-spacer">
      <div class="with-accent-colors">
        <table class="spacer">
          <tbody>
            <tr>
              <td height="400px">&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
    <td class="e-middle">
      <table align="center" class="with-accent-colors">
        <tbody>
          <tr>
            <td class="with-dir e-middle-wrap">

<br/>
<center class="with-accent-colors" style="font-size:22px;font-weight:400;text-align:left;">&nbsp;</center>
<br/>

<table align="center" class="e-contents">
  <tbody>
    <tr>
      <td class="with-dir">

%{email_content}

      </td>
    </tr>
  </tbody>
</table>

<div style="background-color:#f3f3f3">
  <table class="spacer" style="padding:0;width:100%">
    <tbody><tr><td height="40" style="border-collapse:collapse!important;font-size:40px;line-height:40px;margin:0;mso-line-height-rule:exactly;padding:0;">&#xA0;</td></tr></tbody>
  </table>
</div>

            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td class="e-side-spacer">
      <!-- Fundo que desce parcialmente atrás do conteúdo -->
      <div class="with-accent-colors">
        <table class="spacer">
          <tbody>
            <tr>
              <td height="400px">&nbsp;</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tr>
</table>

<!-- Evitar manipulação do tamanho da fonte no Gmail no iOS -->
<div style="display:none;white-space:nowrap;font:15px courier;line-height:0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>

<style>
  @media only screen {
    html {
      min-height: 100%;
      background: #f3f3f3
    }
  }

  @media only screen and (max-width:900px) {
    table.body img {
      width: auto;
      height: auto
    }
    table.body center {
      min-width: 0!important;
    }
    table.body .side-spacer {
      width: 2.5%!important;
    }
    table.body .column,
    table.body .columns {
      height: auto!important;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding-left: 16px!important;
      padding-right: 16px!important
    }
    table.body .column .column,
    table.body .column .columns,
    table.body .columns .column,
    table.body .columns .columns {
      padding-left: 0!important;
      padding-right: 0!important
    }
  }
</style>

</body>
</html>

css

.e-header { background-color: white; width: 100%; }
.e-header td {
    text-align: center;
    padding: 20px 0;
}
.e-header a {
    text-decoration: none;
}
.e-header img {
    clear:both;
    display:block;
    height:40px;
    margin:auto;
    max-width:100%;
    outline:0;
}
.e-body {
    width:100%;
    background:#f3f3f3;
    padding:0;
    border-spacing:0;
    font-family:Helvetica,Arial,sans-serif;
    font-size:14px;
    font-weight:200;
    line-height:1.3;
    vertical-align:top;
}
.e-side-spacer {
    width:5%;
    vertical-align:top;
    padding:0;
}
.e-side-spacer .spacer {
    border-spacing:0;
    padding:0;
    width:100%;
}
.e-side-spacer .spacer td {
    height:200px;
    border-collapse:collapse!important;
    margin:0;
    mso-line-height-rule:exactly;
    padding:0;
}
.e-middle {
    vertical-align:top;
    padding:0;
    font-family:Helvetica,Arial,sans-serif;
}
.e-middle table {
    border-spacing:0;
    margin:0;
    padding:0;
    text-align:inherit;
    vertical-align:top;
    width:100%;
}
.e-middle .e-middle-wrap {
    border-collapse:collapse!important;
    color:#0a0a0a;
    line-height:1.3;
    margin:0;
    padding:0;
    vertical-align:top;
    word-wrap:normal;
}
.e-contents {
    border-spacing:0;
    background:#fefefe;
    margin:0;
    padding:0;
    text-align:center;
    vertical-align:top;
    width:100%;
}
.e-contents td {
    -moz-hyphens:auto;
    -webkit-hyphens:auto;
    border-collapse:collapse!important;
    color:#0a0a0a;
    hyphens:auto;
    line-height:1.3;
    margin:0;
    padding:16px;
    vertical-align:top;
    word-wrap:normal;
}
5

Show, obrigado, Neil!

6

Isso Admin > Personalizar > Estilo de E-mail será introduzido na versão 2.4?

7

Sim. Já está incluído na versão beta atual.

8

Uma pequena correção: a área de conteúdo não tinha nenhum preenchimento. Copiei este trecho de estilo dos e-mails que recebo do Meta:

<td class="with-dir" style="border-collapse:collapse!important;color:#0a0a0a;line-height:1.3;margin:0;padding:16px;vertical-align:top;word-wrap:normal;text-align:left">

%{email_content}

      </td>