Conceptos básicos de Litmus Builder: conozca nuestro creador de correo electrónico

Conocer cualquier aplicación de software nueva puede ser una tarea ardua. Incluso la interfaz más bien pensada y bellamente diseñada puede ser abrumadora para los principiantes, lo que hace que el proceso de comenzar sea un desafío.

Litmus Builder le permite crear y probar rápidamente los clientes de correo electrónico que más le interesan a su audiencia, y utilizar fragmentos de código HTML y CSS reutilizables y plantillas probadas previamente para reducir errores y mantener la coherencia de la marca. Es una solución ideal para personas y equipos que buscan aumentar drásticamente su productividad a lo largo del proceso de producción de correo electrónico. Está repleto de funciones y herramientas para mejorar su flujo de trabajo, y queremos asegurarnos de que se sienta cómodo con todas ellas.

Con eso en mente, comenzamos una serie de cuatro partes sobre los aspectos básicos del uso de Litmus Builder. En la Parte I (que está leyendo ahora mismo), analizaremos la creación de nuevos documentos, la configuración de preferencias y la interfaz de Builder. La Parte II y la Parte III se centrarán en codificar, probar y mejorar los flujos de trabajo del equipo con Builder. La Parte IV trata sobre las mejores prácticas para crear correos electrónicos HTML en Builder.

Comencemos y veamos cómo Litmus Builder puede ayudarlo en su propio marketing por correo electrónico.

Comenzando un nuevo documento

Cuando inicie sesión por primera vez en Litmus, verá su panel, que es donde encontrará todos sus correos electrónicos actuales en Litmus, y tendrá la opción de crear un nuevo correo electrónico. El panel de inicio tiene este aspecto:

Puede encontrar su correo electrónico usando la barra de búsqueda o las carpetas del lado izquierdo. Si originalmente creó el correo electrónico, haga clic en "Mis correos electrónicos" para limitar su búsqueda.

Hay algunas formas de iniciar un nuevo correo electrónico en Builder, incluida la importación de código o copiar y pegar HTML.

Para comenzar, haga clic en el botón verde Crear nuevo . Establezca un nombre de proyecto para identificarlo fácilmente y luego seleccione Construir. Desde esta pantalla, puede:

1. Comience con un correo electrónico en blanco para agregar su propio HTML.
2. Elija una plantilla para editar con su contenido.
3. Importe HTML desde una solución para compartir en la nube.

También puede enviar por correo electrónico una campaña existente a Builder.

En la pantalla de inicio, navegue hasta el botón Enviar en un borrador en el menú deslizante. En la siguiente pantalla, verá su dirección de correo electrónico de Litmus. Envíe su correo electrónico de su proveedor de servicios de correo electrónico (ESP) a esta dirección de prueba.

Una vez recibido, encontrará el correo electrónico en la pantalla de inicio de Litmus. Puede guardar esta dirección de correo electrónico y enviarla en cualquier momento que desee para crear un nuevo proyecto de Builder, sin tener que copiar y pegar el código manualmente.

Cuando vea su correo electrónico, coloque el cursor sobre el nombre del correo electrónico y seleccione Builder para abrir Builder y ¡manos a la obra!

Constructor de navegación

Litmus Builder contiene una serie de herramientas poderosas para acelerar el desarrollo, las pruebas y el uso compartido del correo electrónico. Digamos que creó su proyecto a partir de una plantilla. Esto es lo que verá:

El Editor visual le permite aprovechar las plantillas y los módulos de código para crear fácilmente su correo electrónico. Esta herramienta es perfecta para los miembros del equipo que pueden no tener fuertes habilidades de codificación.

Cambie a la vista de código y verá esto:

El editor de código de la izquierda es donde escribe HTML y CSS para un correo electrónico. Tiene muchas características integradas para que el desarrollo sea lo más fácil posible. Los veremos en profundidad en la próxima publicación.

El panel de vista previa a la derecha le permite ver vistas previas de su correo electrónico en más de 100 clientes de correo electrónico diferentes, ver los cambios en tiempo real mientras codifica, navegar por su código usando la Vista de cuadrícula y activar y desactivar imágenes.

También verá una barra de menú y barras de herramientas sobre el editor y el panel de vista previa. Si bien profundizaremos más en estas barras de herramientas en la próxima publicación, vamos a familiarizarnos con las diferentes opciones en la barra de menú.

La barra de menú

La barra de menú es donde puede acceder a la configuración específica de Builder, así como realizar ciertas acciones en su correo electrónico abierto y proyecto de Builder. Aquí está todo lo que puede hacer usando la barra de menú:

Visual y Code le permiten alternar entre las interfaces visual y del editor de código.

En la vista Código , verá Insertar , que ofrece varias opciones:

La opción Parcial abre la Biblioteca de parciales , que es donde puede crear, guardar y actualizar parciales de código que se pueden incorporar a cualquier campaña (disponible solo en el editor de código). Los parciales son dinámicos, por lo que si actualiza un parcial, esos cambios se propagarán a cualquier correo electrónico que utilice ese parcial. Esto es perfecto para cosas que no cambian con frecuencia y se reutilizan en campañas de correo electrónico, como encabezados y pies de página.

La opción de fragmentos abre la biblioteca de fragmentos, donde se puede crear, guardar y fragmentos de código de actualización que se pueden utilizar en cualquier campaña. A diferencia de los parciales, los fragmentos pegan el código directamente en su correo electrónico, por lo que puede personalizarlos por campaña. Los fragmentos son excelentes para cosas como botones, secciones de contenido e incluso estilos CSS.

La opción Imagen le permite cargar contenido de imagen para incluirlo en su correo electrónico.

Códigos UTM abre una pantalla simple que le permite aplicar rápida y fácilmente un código de seguimiento al enlace en su correo electrónico.

La opción de seguimiento de Litmus abre una ventana emergente que le ayuda a insertar su código de seguimiento de Litmus Email Analytics, que le brinda información sobre qué clientes y dispositivos de correo electrónico están usando sus suscriptores, en qué parte del mundo se leen sus correos electrónicos, tiempo de lectura de correo electrónico y otras métricas de participación. Email Analytics solo está disponible en los planes Plus y Enterprise.

La opción Reemplazar plantilla abre la Galería de plantillas, que le brinda más de 60 plantillas de correo electrónico creadas profesionalmente para usar como punto de partida para su campaña.

Moviéndose a lo largo de nuestro menú:

El botón Ayuda abre la documentación de ayuda de Builder en una nueva pestaña, donde puede encontrar preguntas frecuentes sobre nuestro poderoso editor de código de correo electrónico.

El botón Guardar le permite guardar su correo electrónico y su progreso.

Donde vea Último guardado con una marca de fecha y hora, al hacer clic en ese enlace, accederá a un historial de cambios en su correo electrónico, lo que le permitirá ver la evolución de su campaña de correo electrónico de un vistazo y volver a una versión anterior en caso de que algo salió mal.

Compartir le permite crear un enlace para compartir y / o enviar un correo electrónico de prueba. Cubriremos esto con más profundidad en una publicación posterior de nuestra serie Litmus Builder Essentials: Cómo los equipos pueden usar nuestro generador de correo electrónico.

Haga clic en Exportar para copiar o descargar fácilmente su HTML o sincronizar su correo electrónico con un ESP compatible. Una vez conectado, su correo electrónico se mantendrá actualizado automáticamente en su ESP cada vez que guarde en Litmus.

En la vista Visual , verá las cosas de manera un poco diferente ...

Las plantillas actúan de la misma manera que Reemplazar plantilla, y usted usa el seguimiento para insertar su código UTM y el código de Litmus Email Analytics. Para insertar fragmentos e imágenes, los agregará desde el panel Módulos. Los parciales no están disponibles en Visual Editor. Aún tiene las funciones Ayuda , Guardar y Último guardado . Sin embargo, ahora también obtiene una flecha circular en sentido antihorario para deshacer su último paso, así como una flecha circular en sentido horario para rehacer lo que acaba de rebobinar.

Ahora vayamos al lado derecho de su menú, que es el mismo para las vistas Visual y Código:

El botón Compartir ofrece la opción de compartir un enlace público a su correo electrónico o enviar un correo electrónico de prueba.

Finalmente, el botón Exportar le permite sincronizar su correo electrónico desde Builder a su ESP, copiar el HTML de su correo electrónico o descargar HTML para almacenarlo para referencia futura.

Configuración de las preferencias de Builder

Desde la vista del editor de código, verá un icono de engranaje encima del panel del editor de código. Seleccionar el icono de engranaje le permite acceder al panel de Configuración . El panel de Configuración es donde puede personalizar el editor de código de Builder a sus gustos, así como aprovechar algunas de las poderosas herramientas que Builder tiene para ofrecer.

Builder se envía con varios esquemas de color diferentes que se pueden aplicar al editor de código. Con el menú desplegable Cambiar su tema , puede elegir el esquema de color que mejor se adapte a su estilo de codificación preferido. Hay una variedad de temas claros y oscuros disponibles, siendo el clásico Space Grey el predeterminado.

El menú desplegable Tamaño de fuente le permite elegir un tamaño de fuente cómodo para el editor de texto. Si bien el tamaño predeterminado de 12 píxeles funciona para la mayoría de las personas, puede elegir un tamaño de fuente más grande (o más pequeño) para facilitar la lectura del texto al crear sus campañas de correo electrónico.

Los otros seis conmutadores le permiten activar y desactivar funciones específicas de Builder.

CSS en línea le permite separar su HTML y CSS (lo que puede facilitar el desarrollo) y compilarlo automáticamente. Veremos cómo funciona esto en el próximo artículo de la serie Litmus Builder Essentials.

Autocompletar agrega la capacidad de ver una lista de opciones para elementos HTML comunes al codificar. Puede desplazarse por la lista y seleccionar un elemento, que luego se agrega a su código.

La opción Cerrar etiquetas habilita el cierre automático de cualquier etiqueta HTML abierta dentro de su documento, asegurando que ninguna etiqueta abierta falsa afecte la representación de su campaña de correo electrónico.

Soft Wrapping ayuda a mejorar la legibilidad de su código, mientras que las opciones de Sangría y Ancho de pestaña le permiten personalizar el editor para elegir un lado en el antiguo debate de pestañas versus espacios.

La configuración del constructor es específica de la cuenta, lo que es perfecto para los equipos. Los diferentes miembros del equipo pueden guardar sus propias preferencias personales, sin temor a anular las establecidas por otros.

Compartir correos electrónicos en Builder

Litmus Builder ofrece varias formas de compartir sus campañas de correo electrónico, ya sea con un colega para su revisión, su propia cuenta de correo electrónico para pruebas o su ESP para un envío final. Todas las opciones para compartir su correo electrónico se pueden encontrar en la esquina superior derecha de Builder.

Cuando hace clic en el botón Compartir, tiene dos opciones para seleccionar: Obtener un enlace para compartir o Enviar un correo electrónico de prueba.

La opción Obtener enlace para compartir abre un cuadro de diálogo para que comparta su correo electrónico de tres formas:

• Publicar , que genera URL que puede utilizar para compartir vistas previas de correo electrónico, con o sin el HTML de su campaña. Incluso puede seleccionar qué clientes de correo electrónico mostrar en la página publicada.
• Correo electrónico , que le permite enviar una copia de la campaña por correo electrónico, lo que le brinda acceso rápido a las vistas previas en su propia bandeja de entrada. Puede seleccionar qué usuarios de Litmus lo recibirán.
• Incrustar , que le proporciona código para insertar el documento de Builder directamente en una página web.

La opción Enviar un correo electrónico de prueba simplemente le brinda acceso rápido al cuadro de diálogo Correo electrónico mencionado anteriormente.

También hay un botón Exportar con tres opciones: Sincronizar con ESP, Copiar HTML o Descargar HTML.

Con la opción Sincronizar con ESP , sincronice rápidamente su correo electrónico con cualquier ESP conectado (o agregue uno nuevo para conectarse si aún no lo ha hecho). Actualmente ofrecemos varios ESP populares con los que sincronizar, incluidos Salesforce Marketing Cloud, Mailchimp, Campaign Monitor, Acoustic Campaign, Marketo, HubSpot, Pardot y Eloqua.

ESP Sync enviará su HTML e imágenes a su ESP, escribiendo correctamente las rutas de las imágenes en el proceso, brindándole la ruta más rápida posible desde el Constructor hasta el envío final.

Desde el botón Exportar, también puede Copiar HTML, que abrirá una ventana emergente con su HTML compilado en el que puede hacer clic una vez para copiarlo instantáneamente en su portapapeles. Hay un botón para descargar el HTML compilado en un archivo zip, que es lo mismo que hacer clic en Descargar HTML en el menú Exportar.

Empiece hoy mismo con Litmus Builder

Ahora que se siente cómodo con la interfaz de Litmus Builder, ¿por qué no probarlo? Está diseñado específicamente para el marketing por correo electrónico y permite a cualquier persona, independientemente de sus habilidades de codificación, crear rápidamente correos electrónicos de marca y sin errores.

¿Ya es cliente de Litmus? Entra directamente. De lo contrario, prueba Litmus gratis y comprueba por ti mismo cómo Builder puede hacer que tu correo electrónico sea más fácil.

Litmus Builder es más que crear correos electrónicos Cree rápidamente y pruebe el control de calidad en los clientes de correo electrónico que más le interesan a su audiencia, y aproveche los módulos y plantillas de correo electrónico reutilizables para reducir errores y mantener la coherencia de la marca. Ver todas las ventajas →

Obtenga más información en nuestra serie Litmus Builder Essentials

• Usted está aquí: Conceptos básicos de Litmus Builder, Parte I: Conozca nuestro Creador de correo electrónico
• Esenciales de Litmus Builder, Parte II: Cree en nuestro Creador de correo electrónico
• Litmus Builder Essentials, Parte III: Cómo los equipos pueden usar Litmus Builder
• Litmus Builder Essentials, Parte IV: Mejores prácticas para crear plantillas de correo electrónico HTML en Builder