Cómo utilizar el editor HTML personalizado

El editor HTML personalizado permite a los principiantes y expertos en HTML crear y enviar newsletters o boletines personalizados creados desde cero.

1. Ve a la página Campañas.

2. Haz clic en Crear campaña.

3. Elige el tipo de campaña - elige el editor HTML personalizado.

4. Ingresa una línea de asunto para tu campaña y elige habilitar las opciones de seguimiento.

5. Haz clic en Siguiente: Contenido.

6. Ve a la pestaña Empezar desde cero.

7. Al seleccionar el botón Importar HTML, puedes elegir Importar código desde URL o Importar código desde archivo.

Las variables son piezas de información incluidas en tu contenido que pueden variar según los datos disponibles. En la barra lateral debajo de la pestaña Fragmentos, encontrarás dos tipos de variables: variables de campo personalizadas y variables de enlace.

Variables de campo personalizadas

Las variables personalizadas se utilizan para orientar y personalizar mejor tu boletín informativo y mejorar la participación. Para agregar variables personalizadas a tu campaña:

1. En la barra lateral, haz clic en la pestaña Fragmentos.

2. En Campos personalizados, usa el menú desplegable para seleccionar el campo que corresponde con los datos que deseas incluir en tu campaña.

3. Haz clic en Copiar y pega la etiqueta de combinación en la sección de contenido.

Si un suscriptor no tiene un valor en el campo que corresponde con la etiqueta fucionar que agregaste a tu campaña, el espacio en el que se agregó la etiqueta fucionar aparecerá en blanco a menos que agreguse un valor predeterminado. Lee este artículo para obtener más información sobre qué variables puedes incluir en tu campaña.

Variables de enlace

Las variables de enlace generan un enlace en el que se puede hacer clic exclusivo para cada campaña individual. Aquí encontrarás tres variables de enlace:

• Enlace para cancelar la suscripción: los suscriptores son redirigidos a tu página de cancelación de la suscripción. Es obligatorio incluir un enlace de cancelación visible en todas las campañas.

• Enlace de versión web: los suscriptores pueden utilizar este enlace para ver tu campaña en sus navegadores web. Esto es particularmente útil para campañas más largas que los clientes de correo electrónico de tus lectores pueden recortar.

• Enlace de reenvío: los suscriptores pueden hacer clic para reenviar tu campaña a sus amigos mediante la función Reenviar a un amigo .

Nuestros fragmentos HTML pre escritos están diseñados para simplificar el proceso de creación de campañas para principiantes (o acelerarlo para diseñadores de correo electrónico avanzados).

Los fragmentos de HTML se pueden encontrar en la pestaña Fragmentos en Fragmentos de HTML.

Hay nueve fragmentos de HTML que puedes incluir en tu campaña:

• Base: un buen punto de partida para tu correo electrónico HTML personalizado, ya que tiene todos los elementos y la estructura necesarios para ayudarte a crear un correo electrónico completamente funcional. Si ya conoces algo de código HTML, simplemente puedes comenzar a crear tu correo electrónico a partir del fragmento Base y continuar construyendo desde allí.

• Etiquetas condicionales: te permiten agregar condiciones en las que se modificaría tu código. Por ejemplo, si una gran parte de tus suscriptores leen tu newsletter en Outlook, es posible que desees modificar partes de tu código para optimizar la legibilidad en ese cliente de correo electrónico.

• Dos columnas: este es el fragmento más valioso al crear contenido. Te permite crear fácilmente una estructura dentro de tu newsletter. Coloca las imágenes y el texto uno al lado del otro, muestra dos imágenes seguidas, agrega navegación con múltiples columnas y más.

• Botón: incluye un botón en el diseño de tu newsletter. Los botones son uno de los elementos más importantes de cualquier newsletter. Tener un CTA claro no solo aumenta las tasas de clics, sino que también deja claro al lector qué paso debe dar a continuación.

• Avance social: permite que tus suscriptores compartan tu newsletter con sus seguidores de las redes sociales con solo hacer clic en un botón.

• Espaciador: divide el contenido de tu boletín informativo insertando espacio entre los elementos.

• Etiqueta de imagen: agrega imágenes al diseño de tu newsletter. Puedes usarlo para agregar una imagen principal grande en la parte superior de tu newsletter o incluirla en tus columnas para complementar el texto de tu campaña.

• Logotipo y texto: agrega una marca consistente a tus campañas agregando el logotipo de tu empresa. Recomendamos utilizar este fragmento en la parte superior del diseño de tu newsletter.

• Pie de página: es obligatorio incluir un pie de página con información de la empresa y un enlace para cancelar la suscripción en tus newsletters electrónicos. Este fragmento te permite diseñar un pie de página personalizado para colocarlo al final de tu campaña.

Hay tres formas de implementar CSS en tu campaña:

• Inlíne (recomendado): los estilos inline te permiten anular reglas de estilo integradas o externas y se escriben directamente en una etiqueta HTML en su código.

• Integrado: los estilos integrados se aplican en la sección <head> de tu campaña.

• Externo: un estilo externo es un enlace colocado en la sección <head> de tu campaña que enlaza con un archivo separado que contiene tus reglas de estilo.

Diferentes clientes de correo electrónico digieren CSS de manera diferente e incluso pueden eliminar CSS en bloques <style> . Por ejemplo, el correo de iOS admite CSS externo, mientras que la aplicación Gmail no aceptaría la misma campaña.

Si eres nuevo en el diseño de newsletter personalizados, te recomendamos incluir tu CSS. Puedes convertir tu CSS existente a estilos en línea usando nuestro inliner:

1. En la barra lateral, haz clic en la pestaña Configuración.

2. Marca la casilla etiquetada CSS automático inline.

Esto aplicará reglas de estilo inline a todo tu CSS (excluyendo las consultas de medios).

Después de copiar y pegar varios elementos en tu newsletter, es posible que necesites limpiar tu código (por tu propia paz mental). Para ordenar tu código, simplemente haz clic en el botón Embellecer en la pestaña Contenido.

Para deshacer tu última acción o restaurar una versión anterior de tu campaña:

1. Haz clic en el icono de deshacer en la parte superior de tu editor HTML personalizado.

2. Haz clic en la pestaña Cambios recientes para deshacer los cambios recientes o haz clic en la pestaña Historial de versiones para restaurar una versión previamente guardada de tu campaña.

Para obtener una vista previa o probar tu campaña:

1. Haz clic en el botón Vista previa y prueba en la parte superior de tu editor HTML personalizado.

2. Selecciona el modo Vista previa para obtener una vista previa de tu campaña para navegador y dispositivo móvil.

3. Selecciona Enviar un correo electrónico de prueba para enviarte una versión de prueba de tu campaña o a un colaborador.

The custom HTML editor allows HTML beginners and experts to create and send custom newsletters created from scratch.

To create a campaign using the custom HTML editor:

1. Navigate to Campaigns.

2. Click Create campaign.

3. Enter a subject for your campaign followed by sender information.

4. Click Next: Content.

5. Select your code import method. You can choose either Paste in code, Import from ZIP, or Import from URL.

Variables are pieces of information included in your content that may vary depending on what data is available. In the sidebar under the Snippets tab, you will find two kinds of variables: custom field variables and link variables.

Custom field variables

Custom variables are used to better target and personalize your newsletter to improve engagement. To add custom variables to your campaign:

1. In the sidebar, click the Snippets tab.

2. Under Variables and custom fields, use the dropdown menu to select the field that corresponds with the data you want to include in your campaign.

3. Click Copy and paste the merge tag into the content section.

If a subscriber doesn’t have a value in the field that corresponds with the merge tag you added to your campaign, the space in which the merge tag was added will appear blank unless you add a default value. Read this article to learn more about what variables you can include in your campaign.

Link variables

Link variables generate a clickable link unique to each individual campaign. Here you will find three link variables:

• Unsubscribe link - Subscribers are redirected to your unsubscribe page. It’s mandatory to include a visible unsubscribe link in all campaigns.

• Web-version link - Subscribers can use this link to view your campaign in their web browser. This is particularly useful for longer campaigns that may be clipped by your readers’ email clients.

• Forward link - Subscribers can click to forward your campaign to their friends using the Forward to a friend feature.

Our pre-written HTML snippets are designed to simplify the campaign building process for beginners (or speed it up for advanced email designers).

HTML snippets can be found in the Snippets tab under HTML snippets.

There are nine HTML snippets that you can include in your campaign:

• Base - A good starting point for your custom HTML email as it has all the required elements and structure to help you create a fully functional email. If you already know some HTML code, you can simply start creating your email from the Base snippet, and continue building from there.

• Conditional tags - Allow you to add conditions in which your code would be modified. For example, if a large portion of your subscribers read their newsletter in Outlook, you may want to modify parts of your code to optimize readability in that email client.

• Two columns - This is the most valuable snippet when creating content. It allows you to easily create structure within your newsletter. Place images and text side by side, display two images in a row, add navigation with multiple columns, and more.

• Button - Include a button in your newsletter design. Buttons are one of the most important elements of any newsletter. Having a clear CTA not only increases click-through rates but also makes it clear to the reader what step they should be taking next.

• Social forward -  Let your subscribers share your newsletter with their social media followers at the click of a button.

• Spacer - Break up the content in your newsletter by inserting space between elements.

• Image tag - Add images to your newsletter design. You can use it to add a big hero image to the top of your newsletter or include it within your columns to complement your campaign copy.

• Logo and text - Add consistent branding to your campaigns by adding your company logo. We recommend using this snippet at the top of your newsletter design.

• Footer - It’s mandatory to include a footer with company information and an unsubscribe link in your email newsletters. This snippet allows you to design a custom footer to place at the end of your campaign.

There are three ways to implement CSS in your campaign:

• Inline (recommended) - Inline styles allow you to override embedded or external style rules and are written directly into an HTML tag in your code

• Embedded - Embedded styles are applied in the <head> section of your campaign

• External - An external style is a link placed in the <head> section of your campaign that links to a separate file containing your style rules

Different email clients digest CSS differently and may even strip out CSS in <style> blocks. For example, iOS mail supports external CSS while the same campaign would not be accepted by the Gmail app.

If you’re new to designing custom newsletters, we recommend inlining your CSS. You can convert your existing CSS to inline styles using our inliner:

1. In the sidebar, click the Settings tab.

2. Check the box labeled Automatic CSS inline.

This will apply inline style rules to all of your CSS (excluding media queries).

After copying and pasting multiple elements into your newsletter, you may need to clean up your code (for your own sanity). To tidy up your code, simply click Beautify button under the Content tab.

To undo your last action, or restore a previous version of your campaign:

1. Click the undo icon at the top of your custom HTML editor.

2. Click the Recent changes tab to undo recent changes or click the Version history tab to restore a previously saved version of your campaign.

To preview or test your campaign:

1. Click the Preview and test button at the top of your custom HTML editor.

2. Select Preview mode to preview your campaign for browser and mobile.

3. Select Send a test email to send a test version of your campaign to yourself or a collaborator.