Cómo utilizar el editor de correo electrónico HTML personalizado

Para utilizar el editor HTML personalizado, ingresa a tu panel de control de MailerLite y ve a Crear campaña. Dale un nombre y haz clic en Siguiente. Aquí tendrás varios editores para elegir. Selecciona Editor HTML personalizado. 

Ahora, puedes optar por: 

• Pegar el código

• Importarlo desde un archivo zip

• Importarlo desde una URL

Una vez que hayas seleccionado una de estas opciones, serás redireccionado al editor HTML. Aquí puedes pegar el código o importarlo mediante el botón Importar HTML. 

Una vez importado el código, lo verás escrito en el editor de código de la derecha. Ten en cuenta que después de copiar y pegar múltiples elementos en tu newsletter, puede que necesites limpiar tu código. Para ello, haz clic en el botón Embellecer de la pestaña Contenido. 

A la izquierda, podrás ver una vista previa de tu campaña. Cada vez que hagas clic en una sección del newsletter, podrás ver el código correspondiente resaltado en el editor de la derecha. Y viceversa: si haces clic en una sección de código, te llevará a la sección correspondiente de la vista previa.

Puedes acceder al Administrador de archivos haciendo clic en el botón gris de la esquina inferior derecha. Aquí puedes subir y añadir imágenes a tu newsletter.

En Configuración, puedes optar por añadir automáticamente pre encabezados, pies de página y CSS inline.

La sección Fragmentos del editor te permite añadir rápidamente códigos fuente prescritos y reutilizables, incluidas variables y campos personalizados, y fragmentos de HTML. Esto se puede copiar y pegar en tu código y adaptarlo en consecuencia. 

Al editar tu trabajo, puedes enviarte un correo electrónico de prueba para asegurarte de que queda bien en tu bandeja de entrada, o comprobarlo a través del modo de vista previa. También puedes copiar la URL de previsualización para verla en tu navegador. Puedes utilizar la función de deshacer para restaurar versiones anteriores y, en Acciones, puedes guardar tu proyecto como plantilla para volver a utilizarlo más tarde. 

Consulta nuestro artículo sobre cómo utilizar el editor HTML personalizado para obtener más consejos paso a paso.

To use the custom HTML editor, enter your MailerLite dashboard and go to Create Campaign. Give it a name, and then click Next. Here, you’ll have a few different editors to choose from. Select Custom HTML editor. 

Now, you can opt to either: 

• Paste in the code

• Import it from a zip file

• Import it from a URL

Once you have selected one of these, you’ll be directed to the HTML editor. Here, you can paste in your code, or import it via the Import HTML button. 

Once your code is imported, you’ll see it written out in the code editor on the right. Bear in mind that after copying and pasting multiple elements into your newsletter, you may need to clean up your code. To tidy it up, simply click the Beautify button under the Content tab. 

On the left, you’ll be able to see a preview of your campaign. Whenever you click on a section of the newsletter, you’ll be able to see the corresponding code highlighted in the editor on the right. And vice versa—if you click on a section of code, it will take you to the relevant section of the preview.

You can access your File Manager by clicking on the gray button in the bottom right corner. Here, you can upload and add images to your newsletter.

Under Settings, you can opt to automatically add preheaders, footers and CSS inline.

The Snippets section of the editor allows you to quickly add pre-written, reusable source codes—including variables and custom fields, and HTML snippets. This can be copied and pasted into your code and adapted accordingly. 

When editing your work, you can send yourself a test email to make sure these look right in your inbox, or check it via the preview mode. You can also copy the preview URL to view it in your browser. You can use the undo feature to restore previous versions, and under Actions, you can save your project as a template to use again later. 

Check out our article on how to use the custom HTML editor for more step-by-step tips!