<!--(Por favor veja isso no Github (https://github.com/mobly-front) para ficar mais bonito)-->

# Newsletter

Lista de snippets para criar news

**Email de Teste**

[e-mail] [e-mail]
[e-mail] [e-mail]
[e-mail] [e-mail]
[e-mail] [e-mail] [e-mail]

**praticas para tracking**
- [links](#links)

# links
Se mais de um elemento na newsletter possui o mesmo link adicionar o parâmetro seguido do indice: https://mobly.com.br/?sf_map=01

# Variavel de nome
data extension engaged_list
[e-mail]
d74eec2faab4df4178e86d9108a7548c

**Components**
- [destaque](#destaque)
- [blog](#blog)
- [bannerNovoApp](#bannernovoapp)
- [bannerPerene](#bannerperene)
- [cronometro](#cronometro)
- [2columns](#2columns)
- [3columns](#3columns)

## Destaque
Geralmente usado uma imagem com um CTA.

Alguns blocos temos que mexer com certa frequência, pois eles são usados em campanhas e N1. São eles:
1. **banner+text+ctr** (Banner com texto e ctr)

<a href="https://www.mobly.com.br/campanha-ate-60-off/" style="text-decoration:none;"><table style="border-spacing: 0; font-family: sans-serif; margin: 0 auto; max-width: 600px; width: 100%;" height="auto" width="100%" background="http://image.novidades.mobly.com.br/lib/fe91137276650c7a77/m/9/0b4f9912-06da-40c9-8049-1ce4f0034e23.png">
  <tr>
    <td height="300px" style="color: #ffffff;" align="center">
      <br><br><br><p style="font-size: 34px; color: #ffffff;">Daqui Praí</p><br><br>
     <span> Vem ver nossa lista de Envio Imediato
      </span>
       <br><br><br><br>
      <span style="border-radius: 3px; background:#ff4600; padding: 13px 30px; text-transform:uppercase">Aproveitar</span>
      <br><br><br><br>
</td></tr></table></a>

## Banner Perene
**banner_perene**
banner de campanha da semana

## Banner Perene Cupom pesquisa
**banner_perene_cupom**
banner de cupom ao fazer pesquisa

## Blog
**BlogPost+img** (Banner com texto e ctr)

## Novo App Banner
**NovoAppMobly** (Banner no footer do template)

Bloco customizavel

## Cronometro

**cronometro** (countdown para campanhas)

Gerado com o [sendric](https://www.sendtric.com/)

<table width="100%" bgcolor="#ffffff">
  <tr align="center">
    <td style="padding:20px">
      <img src="http://gen.sendtric.com/countdown/p6okuff9cb" style="display: block; margin:0 auto;">
    </td>
  </tr>
</table>

## 2columns
**2columns_block** (grid de duas colunas responsiva)

<table align="center" class="outer" style="border-spacing: 0; font-family: sans-serif; margin: 0 auto; max-width: 600px; width: 100%;">
<tr>
  <td class="two-column left-sidebar" style="font-size: 0; padding: 0; text-align: center;">
   <!--[if (gte mso 9)|(IE)]>
                              <table width="100%">
                                 <tr>
                                    <td width="300">
                                       <![endif]-->
   <div class="column left columnmax" style="display: inline-block; vertical-align: middle; width: 100%;">
    <table style="border-spacing: 0; font-family: sans-serif;" width="100%">
     <tr>
      <td class="inner" style="font-size: 14px; padding: 0px; text-align: center; width: 100%;padding-bottom: 0px;">
       <a href="https://www.mobly.com.br/campanha-20191008-e6zx50p/" target="_blank" style="text-decoration: none;font-size:0;display: block;">
        <img alt="" src="http://image.novidades.mobly.com.br/lib/fe91137276650c7a77/m/9/97e8933e-596b-455e-a8ff-758459839b3c.jpg" style="width:100%;border: 0;padding-bottom: 0px;" width="300">
       </a>
      </td>
     </tr>
    </table>
   </div>
   <!--[if (gte mso 9)|(IE)]>
                                    </td>
                                    <td width="300">
                                       <![endif]-->
   <div class="column left columnmax" style="display: inline-block; vertical-align: middle; width: 100%;">
    <table style="border-spacing: 0; font-family: sans-serif;" width="100%">
     <tr>
      <td class="inner" style="font-size: 14px; padding: 0px; text-align: center; width: 100%;padding-bottom: 0px;">
       <a href="https://www.mobly.com.br/campanha-20191008-udl3ys9/" target="_blank" style="text-decoration: none;font-size:0;display: block;">
        <img alt="" src="http://image.novidades.mobly.com.br/lib/fe91137276650c7a77/m/9/7aab967d-fdbc-457b-b5c3-8e7977e5bf6e.jpg" style="width:100%;border: 0;padding-bottom: 0px;" width="300">
       </a>
      </td>
     </tr>
    </table>
   </div>
   <!--[if (gte mso 9)|(IE)]>
                                    </td>
                                 </tr>
                              </table>
                              <![endif]-->
  </td>
 </tr>
</table>

**2columns_block_reverse** (grid de duas colunas responsiva que inverte a ordem das colunas)

<table align="center" class="outer" style="border-spacing: 0; font-family: sans-serif; margin: 0 auto; max-width: 600px; width: 100%;">
  <tr>
  <td class="two-column left-sidebar" dir="rtl" style="font-size: 0; padding: 0; text-align: center;">
   <!--[if (gte mso 9)|(IE)]>
                              <table width="100%">
                                 <tr>
                                    <td width="300">
                                       <![endif]-->
   <div class="column left columnmax" dir="ltr" style="display: inline-block; vertical-align: middle; width: 100%;">
    <table style="border-spacing: 0; font-family: sans-serif;" width="100%">
     <tr>
      <td class="inner" style="font-size: 14px; padding: 0px; text-align: center; width: 100%;padding-bottom: 0px;">
       <a href="https://www.mobly.com.br/campanha-20191029-9i9oopt/" target="_blank" style="text-decoration: none;font-size:0;display: block;">
        <img alt="" src="http://image.novidades.mobly.com.br/lib/fe91137276650c7a77/m/10/f8d98050-8ee9-4ec8-92f1-d4a23f5fab6c.jpg" style="width:100%;border: 0;padding-bottom: 0px;" width="300">
       </a>
      </td>
     </tr>
    </table>
   </div>
   <!--[if (gte mso 9)|(IE)]>
                                    </td>
                                    <td width="300">
                                       <![endif]-->
   <div class="column left columnmax" dir="ltr" style="display: inline-block; vertical-align: middle; width: 100%;">
    <table style="border-spacing: 0; font-family: sans-serif;" width="100%">
     <tr>
      <td class="inner" style="font-size: 14px; padding: 0px; text-align: center; width: 100%;padding-bottom: 0px;">
       <a href="https://www.mobly.com.br/campanha-20191029-8vc2hq3/" target="_blank" style="text-decoration: none;font-size:0;display: block;">
        <img alt="" src="http://image.novidades.mobly.com.br/lib/fe91137276650c7a77/m/10/35d952fe-3131-460c-b8cf-c9ee223bc8d8.jpg" style="width:100%;border: 0;padding-bottom: 0px;" width="300">
       </a>
      </td>
     </tr>
    </table>
   </div>
   <!--[if (gte mso 9)|(IE)]>
                                    </td>
                                 </tr>
                              </table>
                              <![endif]-->
  </td>
 </tr>
</table>

**2columns_block_Image+text**(grid duas colunas imagem e texto em cada coluna)

<!-- Content Blog-->
<table style="border-spacing: 0; font-family: sans-serif; margin: 0 auto; max-width: 600px; width: 100%;" height="auto" width="100%">
  <tr>
    <td class="two-column left-sidebar" style="font-size: 0; padding: 0; text-align: center;background: #171717;">
      <!--[if (gte mso 9)|(IE)]>
         <table width="100%" height="300">
               <td width="300">
                  <![endif]-->
      <div class="column left columnmax" style="display: inline-block; vertical-align: middle; width: 100%;">
        <table style="border-spacing: 0; font-family: sans-serif;" width="100%">
          
            <tr>
                <td>
                  <!--[if gte mso 9]>
                                   <table>
                                      <tr>
                                         <td style="text-align:center;padding: 0px 20px;">
                                   <![endif]-->
                  <img src="http://image.novidades.mobly.com.br/lib/fe91137276650c7a77/m/10/02a94583-7b87-490d-b3ef-5fc0aa41fff3.jpg" alt="">
                  <!--[if gte mso 9]>
                                         </td>
                                      </tr>
                                   </table>
                               <![endif]-->
                </td>
            </tr>
            <tr bgcolor="#171717">
              <td>
                <!--[if gte mso 9]>
                                  <table>
                                    <tr>
                                        <td style="text-align:center;padding: 0px 20px;">
                                  <![endif]-->
                <span style="padding: 40px 30px;display: block;text-align: left;color: #fff;font-size: 14px;">Clique em “Minha Conta” e acesse sua conta da Mobly (caso não tenha um login, clique em “Cadastrar-se”)
<br><br></span>
                <!--[if gte mso 9]>
                                        </td>
                                    </tr>
                                  </table>
                              <![endif]-->
              </td>
            </tr>
          
        </table>
      </div>
      <!--[if (gte mso 9)|(IE)]>
               </td>
               <td width="300">
                  <![endif]-->
      <div class="column right columnmax" style="display: inline-block; max-width: 300px; vertical-align: middle; width: 100%;">
        <table style="border-spacing: 0; font-family: sans-serif;" width="100%">
          
            <tr>
              <td class="inner contents" style="font-size: 16px; padding: 0px;padding-bottom: 0px; text-align: left; width: 100%;">
                <table style="border-spacing: 0; font-family: sans-serif;" width="100%">
                  <tr>
                    <td>
                      <!--[if gte mso 9]>
                                       <table>
                                          <tr>
                                             <td style="text-align:center;padding: 0px 20px;">
                                       <![endif]-->
                      <img src="http://image.novidades.mobly.com.br/lib/fe91137276650c7a77/m/10/cd2a2c65-7099-4609-998c-5f950eab69c9.jpg" alt="">
                      <!--[if gte mso 9]>
                                             </td>
                                          </tr>
                                       </table>
                                   <![endif]-->
                    </td>
                  </tr>
                  <tr bgcolor="#171717">
              <td>
                <!--[if gte mso 9]>
                                  <table>
                                    <tr>
                                        <td style="text-align:center;padding: 0px 20px;">
                                  <![endif]-->
                <span style="padding: 40px 30px;display: block;text-align: left;color: #fff;font-size: 14px;">Salve esse ou esses produtos que gostou com a opção do “Coraçãozinho”, para favoritar
<br><br></span>
                <!--[if gte mso 9]>
                                        </td>
                                    </tr>
                                  </table>
                              <![endif]-->
              </td>
            </tr>
           
                  
                  
                </table>
              </td>
            </tr>
          
        </table>
      </div>
      <!--[if (gte mso 9)|(IE)]>
               </td>
            </tr>
         </table>
         <![endif]-->
    </td>
  </tr>
</table>
<!-- End --Content Blog-->

**2columns_block_Image+text+link**(grid duas colunas imagem e texto seguido de link)

## 3columns

**3columns_block** (grid de três colunas responsiva)

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="table-layout: fixed;" align="center">
  <tr>
    <td>
      <table cellpadding="0" cellspacing="0" border="0" width="600" align="center" class="fluid-table">
        <tr>
          <td>
            <table width="200" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">

              <!-- image -->
              <tr>
                <td width="200" align="left" bgcolor="#ffffff"><a href="#"
                    style="display:block; border:none; color:#000000; text-decoration:none;"><img
                      src="http://image.novidades.mobly.com.br/lib/fe91137276650c7a77/m/10/48b586f5-29cb-40f3-a5ce-86067d338c1c.png"
                      alt="#image" class="fluid-image"
                      style="display:block; border:none; outline:none; text-decoration:none; color:#ffffff; font-size:16px; text-align:center; font-family: Arial, Verdana, sans-serif;"
                      border="0"></a></td>
              </tr>
              <!-- image -->

            </table>

            <!-- End of first column -->

            <!--[if mso]></td><td valign="top"><![endif]-->

            <!-- Start of second column -->

            <table width="200" align="left" border="0" cellpadding="0" cellspacing="0" class="fluid-table">

              <!-- image -->
              <tr>
                <td width="200" align="center" bgcolor="#ffffff"><a href="#"
                    style="display:block; border:none; color:#000000; text-decoration:none;"><img
                      src="http://image.novidades.mobly.com.br/lib/fe91137276650c7a77/m/10/48b586f5-29cb-40f3-a5ce-86067d338c1c.png"
                      alt="#image" border="0"
                      style="display:block; border:none; outline:none; text-decoration:none; color:#ffffff; font-size:16px; text-align:center; font-family: Arial, Verdana, sans-serif;"
                      class="fluid-image"></a></td>
              </tr>

            </table>

            <!-- End of second column -->

            <!--[if mso]></td><td valign="top"><![endif]-->

            <!-- Start of third column -->

            <table width="200" align="right" border="0" cellpadding="0" cellspacing="0" class="fluid-table">

              <tr>
                <td width="200" align="right" bgcolor="#ffffff"><a href="#"
                    style="display:block; border:none; color:#000000; text-decoration:none;"><img
                      src="http://image.novidades.mobly.com.br/lib/fe91137276650c7a77/m/10/48b586f5-29cb-40f3-a5ce-86067d338c1c.png"
                      alt="#image" border="0"
                      style="display:block; border:none; outline:none; text-decoration:none; color:#ffffff; font-size:16px; text-align:center; font-family: Arial, Verdana, sans-serif;"
                      class="fluid-image"></a></td>
              </tr>

            </table>

            <!-- End of third column -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Footer Webshop transacionais

<strong>INFORMAÇÕES IMPORTANTES:</strong>
<br/>
<span><br/> Esta é uma mensagem automática. Se tiver alguma dúvida, <a href="https://bit.ly/moblyMarketingMail">clique aqui</a> ou entre em contato com a <a href="https://www.mobly.com.br/auto-atendimento/?#mobly-televendas">Casa do Cliente Mobly</a>. Nosso atendimento é de segunda a sábado, das 9h às 18h (exceto feriados nacionais). 
    <br/></span>
<br/>
<strong>Lembre-se: </strong>
<br/>
<!--Termos e condiçoes-->
<span><br/> Os Termos e Condições de vendas estão <a href="https://www.mobly.com.br/termos-de-uso-mobly/">acessíveis aqui</a>.<br/>
</span>
<br>
<span>Para informa&ccedil;&otilde;es sobre troca e devolu&ccedil;&atilde;o, acesse o nosso <a href="https://www.mobly.com.br/auto-atendimento/?post_type=trocas-e-devolucoes" style="color: #6e6e6e !important;">Autoatendimento</a>.</span>
<br>
<br/>
<strong>Nosso endereço: </strong>
<br/><span><br/> Mobly - Av. das Nações Unidas, 16737 - Várzea de Baixo - São Paulo, SP - CEP 05425-070 <br/></span>
<br/>

###### tags: `front`

## Diretrizes para Newsletters:

Botões de newsletter:

**padding top-bottom:** 10px;
**padding left-right:** 70px;

Fontes padrões para texto:

**Texto médio:** 17px;
**Texto pequeno:** 12px;
**Título:** 24px;