Consejos
para personalizar plantillas de correo electrónico
Personalización del código fuente HTML
Codepen es una excelente herramienta gratuita para editar HTML y otros lenguajes web. Una vez que hayas creado una cuenta gratuita y hayas hecho clic en el enlace de una de las plantillas de correo electrónico, se te redirigirá a una página similar a esta:
Primero, haz clic en el botón «Fork» (Bifurcar) situado en la parte superior derecha de la ventana para crear una copia de la plantilla que puedas editar.
Deberá editar el código fuente HTML para cambiar el contenido del correo electrónico. Sin embargo, dado que todos los clientes de correo electrónico (como Gmail, Outlook y Apple Mail) tratan los correos electrónicos de forma ligeramente diferente, no debe cambiar la estructura del correo electrónico, ya que podría no funcionar. El contenido en el que debe centrarse para cambiar es eltexto, ya sea insertando el nombre de su región, su correo electrónico y otra información relevante, o traduciendo todo.
Personalizar el texto dentro del HTML es bastante sencillo, una vez que sabes cómo localizarlo. En Codepen, todo el texto que se muestra en el correo electrónico es blanco. Por ejemplo, si utiliza la plantilla que se muestra, deberá personalizar la línea en blanco aquí para reflejar el nombre de su región:
Una vez que hayas personalizado todo el texto del correo electrónico, deberás asegurarte de cambiar cualquier contenido con hipervínculos. Puedes consultar la vista previa del correo electrónico para localizarlos, que suelen ser botones y contactos de correo electrónico. En el código fuente, aparecerán como:
<a href="URL">some text</a>
Por ejemplo, el enlace resaltado a continuación debe cambiarse por la URL de una página web de confirmación de asistencia a un evento:
Y esta información de contacto debe modificarse para reflejar mi dirección de correo electrónico, así como la página web de RSVP. Tenga en cuenta que hay que cambiar dos URL diferentes en la línea resaltada:
Una vez que hayas terminado, estarás listo para exportar el HTML. Para ello, haz clic en el botón«Exportar» situado en la parte inferior derecha de la ventana y, a continuación, selecciona «Exportar .zip»:
¡Ya está! Ahora ya estás listo para probar tu correo electrónico y enviarlo.
Insertar tu HTML en el cuerpo de un correo electrónico
Insertar tu código HTML en el cuerpo de un correo electrónico
La mayoría de los clientes de correo electrónico no muestran el código HTML que se inserta directamente en el cuerpo de un correo electrónico. En su lugar, deberá abrir el correo electrónico en un navegador, copiar el contenido de la ventana del navegador y pegarlo en el correo electrónico. A continuación se explica cómo hacerlo:
Paso 1 Para abrir el HTML en su navegador, simplemente haga doble clic en el archivo HTML que ha exportado (es posible que primero tenga que descomprimir el archivo). Se abrirá automáticamente en su navegador, o bien puede hacer clic con el botón derecho del ratón y seleccionar «Abrir con», y luego seleccionar su navegador web:
Paso 2 Una vez que el HTML esté abierto en el navegador, haz clic en Editar > Seleccionar todo.
A continuación, haga clic en Editar > Copiar:
Ahora, pégalo en el cuerpo de tu correo electrónico y ¡envíalo!
Recuerda quesiempre debesprobar tu correo electrónico antes de enviarlo a tus contactos. Lo mejor es probarlo en varios clientes de correo electrónico, por lo que es posible que desees crear cuentas de prueba para este fin.
Technovation es un programa de Iridiscenteuna organización sin ánimo de lucro 501c3. Iridescent crea e imparte una potente formación en ciencia, ingeniería y tecnología para ayudar a los jóvenes desfavorecidos a desarrollar su curiosidad, creatividad y perseverancia.