Crear cuenta Mailrelay Crear cuenta Mailrelay Crear cuenta Mailrelay

Como editar uma newsletter

Publicado por Mailrelay em 20/02/2017

Diseñar newsletter

Hoje vamos ver como criar e editar  uma newsletter completa, com exemplos de códigos HTML e suas funcionalidades.

O que vamos ver neste post?

Você irá aprender alguns aspectos básicos em HTML e terá instruções para criar uma newsletter usando o editor da Mailrelay.

¡Envía hasta 75.000 emails gratis!

Como criar uma tabela

Esta tabela será usada para centralizar o conteúdo da mensagem, com estas configurações:

  •     Largura de 100% .
  •     Uma linha
  •     Uma coluna
  •     Sem bordas

Esta configuração ficaria mais ou menos como a da imagem.

diseñar una newsletter

Como criar uma tabela interior

Em seguida, vamos criar uma tabela interior, que irá dentro da outra. Isto será feito em dois passos:

  •     Novamente é uma tabela de uma coluna
  •     E uma linha, porém existem duas diferenças
  •     A largura é de 65%
  •     Alinhamento centralizado

crear newsletter

No exemplo, talvez a largura não foi a melhor, e talvez 75% ou 85% ficaria melhor visualmente.

É uma questão de testar até ver o que fica melhor para você.

Agora, sem sair desta tela, vamos clicar na aba Avançado.

Aqui vamos modificar a caixa Estilos:

  •  max-width: 500px;
  • Isto estabelece uma largura máxima, de forma que embora o cliente de email disponha  de mais largura, a newsletter não irá ultrapassar esta largura .
  • padding: 5px;
  • Com o padding o que fazemos é deixar um espaço entre a borda da tabela e o interior, de forma que se a tabela se ajustar a borda do dispositivo, fique um pouco  de espaço em branco.

Ficaria mais ou menos assim:

crear newsletter

Adicionando imagem na newsletter

E o próximo passo será adicionar uma imagem, este passo é simples, mas também é importante configurar a largura:

  •     Largura: 100%
  •     Altura: vazio

É importante deixar o campo altura vazio, pois dessa forma o sistema irá ajustar as proporsões da imagem sem problemas, ajustando a largura com a largura disponível.

Diseñar newsletter

Adicionar um botão na newsletter

No próximo passo, vamos adicionar um botão para uma chamada à ação.

É muito fácil, basta selecionar o texto e clicar no botão de link.

Em seguida, selecionar a aba Avançado e em Estilo:

  •     background-color:#18adb3;
  •     Isto irá definir a cor de fundo do botão
  •     border:2px solid #18adb3;
  •     Aqui indicamos a largura e a cor da borda
  •     color:white;
  •     A cor do texto
  •     display:block; margin:0 auto;
  •     Dois valores para que o botão seja centralizado na página
  •     padding:5px;
  •     Uma margem entre a borda e o texto
  •     width:50%;
  •     Largura do botão, para que não ocupe toda a largura do template.
  •     text-decoration: none;
  •     Para tirar o sublinhado do link

Com estes valores você poderá criar um botão visualmente atraente.

diseñar newsletter

Adicionar uma tabela com mais colunas

Se você desejar por exemplo adicionar uma tabela com mais colunas, você poderá fazê-lo desta forma:

diseñar newsletter

Definindo uma largura de 100%  e 5 colunas.

Aqui o recomendável será, que se você adicionar imagens, configurar uma largura de 100%, como vimos antes ao ver como configurar as imagens.

Por último.

Link de cancelamento

Ao criar uma newsletter, é fundamental incluir um link de cancelamento, para que os usuários que desejarem fazê-lo possam solicitar remoção da sua base de dados de forma fácil e automática.

Para fazer isto, você só deve criar um link com estes valores:

diseñar newsletter

  • Protocolo : outro
  • URL: [unsubscribe_url_click]

E a partir disso, a Mailrelay irá enviar um link de cancelamento para cada assinante.

Como ficará o template de newsletter?

Se você seguir as instruções deste tutorial corretamente, você deverá ter uma newsletter muito parecida com esta:

diseñar una newsletter

Para uma newsletter simples, já é suficiente, você não acha?

E se a newsletter for visualizada em um dispositivo móvel?

Seria exibida desta forma:

ejemplo de newsletter

Como explicado antes, talvez uma largura superior a 65% seria mais recomendável, pois neste caso pode ficar muito estreita.

Mas em geral, foi adaptada corretamente.

Porque esta newsletter é eficaz?

Porque incluye todo lo bter:ásico que queremos en una n

Porque inclui todos os aspectos básicos relevantes em uma newsletter:

  •    Cabeçalho com uma imagem para mostrar a marca
  •    O texto imprescindível
  •    Um botão e chamada à ação para que o assinante tome a ação desejada
  •    Mais imagens caso sejam necessárias
  •    Alguns links e chamadas à ação secundárias
  •    Link de cancelamento

Usualmente, é recomendável criar uma newsletter o mais simples possível, pois o objetivo da campanha é que o usuário realize alguma ação, por isso quanto menos a o design distrair, melhor será.

Na grande maioria dos casos, o objetivo da campanha será convencer o usuário a clicar no link para acessar seu site ou blog.

Não é necessário nem recomendável sobrecarregar o design da newsletter.

Não se complique!

Espero que este tutorial para editar uma newsletter seja útil.

jose argudo


El motivo principal por el que no vendes con tus emails es porque acaban en SPAM. Eso tiene solución, está en este ebook, lo puedes descargar registrándote, abajo







Acepto la política de privacidad.



Comentários

  1. IsabelG

    Hola,gracias por el tutorial.
    ¿Podrías explicar cómo añadir tu correo en la newsletter?

    Muchas gracias.

    31/05/2019 - 17:21:32 Publicar una respuesta
  2. genesis

    que se pone en bono? eso me sale al incio de crear la plantillas

    09/01/2019 - 00:30:23 Publicar una respuesta
    • Mailrelay

      ¡Hola! Elige el de por defecto, lo más probable es que si no has contratado otro bono, tengas el de por defecto.

      09/01/2019 - 07:50:55 Publicar una respuesta
  3. Javi

    Hola
    ¡Un artículo genial!
    Aunque soy un completo dummy de la programación, he podido seguirlo perfectamente.
    Tengo una pregunta: ¿cómo puedo guardar la plantilla que con tanto esfuerzo he ido creando?

    Muchas gracias

    31/10/2017 - 10:54:50 Publicar una respuesta
  4. humberto

    gracias, me gusto eso luego de dar un instructivo por escrito.

    25/07/2017 - 04:10:09 Publicar una respuesta
  5. Bruno Savron

    Hola Amigos,Agradeciando vuestra Amable Respuesta,mi pregunta es ,como se inserrta un campo de una base de datos en Mail Reñay..?
    Tengo que ir al ítem ->Campos Personalizados ? -> Suscriptores y obtener el nombre del campo a usar ,..por ej si quiero usar el nombre del suscriptosr ,debo usar [name]..?
    2.Como puedo manipular (cambiar largo ,ancho color ) de una línea horizonta insertada? (es la línea horizontal que se obtiene del tercer ítem-después/al lado izquierdo del ítem insertar Tabla del menú horizontal del editor)

    25/06/2017 - 02:52:10 Publicar una respuesta
    • Mailrelay

      ¡Hola Bruno! Eso es, debes usar el nombre del campo, por ejemplo [name] o el nombre ue le hayas dado. En cuanto a tu segunda pregunta deberás modificar el html del mismo elemento 🙂

      25/06/2017 - 08:49:14 Publicar una respuesta
  6. Ramón

    Buenas tardes!!
    Muchas gracias por la explicación me ha sido de gran ayuda,lo veo súper sencillo y muy practico
    un saludo

    02/06/2017 - 19:52:04 Publicar una respuesta
  7. Daniel

    Buenas tardes!! Yo llevo usando la plataforma mas de un año y me parece muy util. Aunque si que es verdad q a veces se desconfigura todo cuando intentas añadir mas tablas a la planilla de diseño. Muchas gracias a todo el equipo de mailrelay

    10/03/2017 - 15:12:13 Publicar una respuesta
    • Mailrelay

      ¡Hola Daniel!¡Muchas gracias por comentar! Espero que el tutorial te sea de ayuda, aunque el editor a veces sea un tanto complicado 🙂

      10/03/2017 - 15:20:35 Publicar una respuesta
  8. Alicia

    Por favor, integrad ya el sistema “Drag and Drop” para crear los boletines y dejaros de chorradas. Eso si que es sencillez. Con el sistema de MailRelay tienes que saber un mínimo de código de programación para poder manejarte y eso es un punto negativo para la plataforma.

    22/02/2017 - 14:14:51 Publicar una respuesta
    • Mailrelay

      ¡Hola Alicia! Lamento que el tutorial te haya parecido una “chorrada”, espero que otros usuarios lo encuentren útil. Con toda sinceridad, solo pensaba en facilitar el uso de la herramienta con las funcionalidades que tenemos actualmente.

      22/02/2017 - 14:18:41 Publicar una respuesta
      • Alicia

        Disculpa la expresión, tal vez no fue la más adecuada. No es el tutorial lo que no me haya gustado, sino al contrario, pero es que el editor para quién no sabe de programación es una pesadilla. Resulta muy complicado editar las plantillas que ya hay disponibles, la integración de otras plantillas creadas en otras plataformas es compleja, a veces los elementos no cuadran ni quedan como en el diseño creado originalmente, resulta prácticamente imposible añadir o eliminar más secciones por que tiras a mirar de código y te pierdes, luego se desconfiguran estilos, y un sin fin de cosas más. Me gusta MailRelay, pero hay aspectos que podrían mejorarse y facilitar así a los usuarios su tarea, sobretodo teniendo en cuenta que una gran parte de nosotros no sabemos de programación o no tenemos los conocimientos necesarios para sacarle todo el partido que podríamos a la plataforma. Un saludo y de nuevo te pido disculpas por esa parte de mi comentario.

        22/02/2017 - 16:41:18
      • Mailrelay

        ¡Hola Alicia! Sí, la verdad es que el editor puede ser complejo, y a veces es frustrante. Estamos trabajando para mejorarlo lo antes posible, y mientras tanto queremos ayudar en lo posible, como en este caso. Sabemos que no es fácil, y comprendo tu queja, me molesto la expresión sí, porque el tutorial lo hice con buena intención. Pero poniéndome en tu lugar, te comprendo, también debería haberlo pensado. A ver si los compañeros/as de desarrollo se ponen a ello y podemos tener un mejor editor.

        22/02/2017 - 17:53:46
      • Bruño Savron

        Es Verdad,este sistema debiera estar al nivel de Mailchimp o Benchmark en cuanto a diseño.

        13/06/2017 - 12:32:39
      • Mailrelay

        ¡Hola Bruño! Ambas plataformas que mencionas aplican costes mayores y reducen funcionalidades en las cuentas gratuitas en muchas casos (si es que disponen de cuentas gratuitas).

        13/06/2017 - 12:36:25
    • Vivian Francos

      A mi se me hace muy fácil ubicarme dentro de los menus de publicación e integración de vídeo con viwomail.

      22/02/2017 - 15:41:52 Publicar una respuesta
      • Mailrelay

        ¡Gracias Vivían!

        22/02/2017 - 15:47:41
  9. Emilio

    Ay!.. equivoqueme.. DDDX
    Quedote muy asturiana esa expresión.

    21/02/2017 - 19:39:39 Publicar una respuesta
    • Mailrelay

      Jajaja síii 😀 no soy de Asturias, pero me encanta 🙂 tengo muchas ganas de volver la verdad.

      22/02/2017 - 07:51:47 Publicar una respuesta
  10. Sonia

    Genial, No conocía Mail Relay, parece muy sencillito. Lo menos que quiero es perder tiempo así que si en 15 mins está listo, estupendo!

    20/02/2017 - 10:05:38 Publicar una respuesta

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *


Menu Title