Crear cuenta Mailrelay Crear cuenta Mailrelay Crear cuenta Mailrelay

How to edit a newsletter

Published by Mailrelay on February 20, 2017

Diseñar newsletter

Today we will see how to create and edit a complete newsletter, with examples of HTML codes and their usage.

What will we see in this post?

You will learn some basics in HTML and will have instructions for creating a newsletter using the Mailrelay editor.

¡Envía hasta 75.000 emails gratis!

How to create a table

This table will be used to center the message content, with these settings:

  • 100% width.
  • One line
  • One column
  • Borderless

That setting would look more or less like the one in the image.

diseñar una newsletter

How to create an inner table

Next, let ‘we will create an inner table, which will be inside the other one. We can do that in two steps:

  • Again it will be a one-column table
  • and a line, but there are two differences
  • The width is 65%
  • Centralized alignment

crear newsletter

In the example, perhaps the width was not the best, and maybe 75% or 85% would look better.

It’s a matter of testing until you see what works best for you.

Now, without leaving this screen, we will click on the Advanced tab.

Here we will modify the Styles box:

  • max-width: 500px;
  • This sets a maximum width, so that although the email client has more width, the newsletter will not exceed this width.
  • padding: 5px;
  • With padding what we do is leave a space between the table border and the inside so that if the table fits the border of the device, we will get some white space.

It would look something like that:

crear newsletter

Adding images to newsletter

And the next step is to add an image, this step is simple, but it’s also important to set the width:

  • Width: 100%
  • Height: empty

It is important to leave the field height empty, because this way the system will adjust the proportions of the image without problems, adjusting the width to the available width.

Diseñar newsletter

Adding a button in the newsletter

In the next step, we will add a button for a call to action.

It’s very easy, just select the text and click on the link button.

Then select the Advanced tab and style:

  • background-color: # 18adb3;
  • This will set the background color
  • border: 2px solid # 18adb3;
  • Here we indicate the width and color of the border
  • color: white;
  • The color of the text
  • display: block; margin: 0 auto;
  • Two values for the button to be centered
  • padding: 5px;
  • A margin between the border and the text
  • width: 50%;
  • Width of the button, so it doesn’t use the entire width of the template.
  • text-decoration: none;
  • To remove the underline from the link

With these values, you could create a visually appealing button.

diseñar newsletter

Adding a table with more columns

If for example you want to add a table with more columns, you could do it with the following settings:

diseñar newsletter

Setting a width of 100% and 5 columns.

Here we recommend that if you add images, you should set a width of 100%, as we saw before when learning how to insert the images.

Finally.

Unsubscribe link

When creating a newsletter, it is essential to include an unsubscribe link, so that users who wish to do so can request removal from your database easily and automatically.

To do that, you only have to create a link with these values:

diseñar newsletter

  • Protocol: other
  • URL: [unsubscribe_url_click]

And from that, Mailrelay will generate and send an unsubscribe link to each subscriber.

How will the newsletter template be displayed?

If you follow the instructions in this tutorial correctly, you should have a newsletter very similar to that:

diseñar una newsletter

For a simple newsletter, that’s enough, don’t you think so?

What if the newsletter is viewed on a mobile device?

It would look like that:

ejemplo de newsletter

As explained before, perhaps a width of more than 65% would be more advisable, because in this case it could be very narrow.

But in general, it has been adapted correctly.

Why is the newsletter effective?

Because it includes all the relevant basics in a newsletter:

Header with an image to show the brand

  • The essential text
  • A button and call to action for the subscriber to take the desired action
  • More images if needed
  • Some links and secundary calls to action
  • Unsubscribe link

We could insert other items, but they are not necessary.

Usually, it is recommended to create a newsletter as simple as possible, because the objective of the campaign is that the user performs some action, so it would be better to not use a distracting design.

In the vast majority of cases, the goal of the campaign will be to convince the user to click on the link to access an website or blog.

It is not necessary or recommendable to overload the newsletter design.

So the layout will not get in the way!

I hope this tutorial how to edit a newsletter will be useful.

jose argudo

Subscribe to Mailrelay's newsletter

We don't offer the typical PDF download that no one reads, just a subscription to great weekly contents

Comments

  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

Leave a comment

Your email address will not be published. Required fields are marked *


Menu Title