Cómo instalar MJML (con capturas de pantalla)
Kristina Lauren
18 de abril de 2022
MJML es una de las herramientas de desarrollo de correo electrónico más sencillas que tienes a tu disposición. Sin embargo, comprender cómo configurar MJML para empezar a programar tu primer correo electrónico puede no ser tan evidente. Hoy vamos a aclarar cualquier duda con una guía detallada, paso a paso, sobre cómo usar e instalar MJML. ¡Comencemos!
1 . Editor en línea de MJML
Si buscas una forma rápida y sencilla de probar código MJML o simplemente quieres familiarizarte con él, el editor en línea de MJML es un recurso excelente. Al navegar a mjml.io/pruébalo-en-vivo Deberías ver algo como la imagen de abajo.
Aquí no solo podrás codificar MJML, sino que, en la esquina superior derecha, puedes ver el diseño de tu correo electrónico en modo escritorio, modo móvil o ver el código HTML convertido. Si haces clic en "Ver HTML", puedes copiar el código para pegarlo en el ESP que prefieras o hacer clic en "Minificar HTML" a la izquierda para obtener una versión más condensada del código de tu correo electrónico.
La desventaja de usar el editor en línea es que no podrás guardar tu código. Si solo estás probando o experimentando con MJML, esto no es un gran problema, pero si trabajas en proyectos más serios y a largo plazo, podrías considerar las siguientes opciones.
2 . Aplicación de escritorio MJML
Puedes esperar que la aplicación MJML al menos se parezca al editor en línea, pero viene con muchos más beneficios en comparación.
Para descargar la aplicación, simplemente dirígete a la página de Github de MJML aquí y debería ver un botón de descarga para su sistema operativo (la aplicación actualmente es compatible con macOS, Windows y Linux).
Del https://mjmlio.github.io/mjml-app/
Bloqueo potencial en macOSDespués de descargar la aplicación e intentar abrirla en macOS, es posible que reciba un mensaje de su sistema que se niega a abrir MJML porque "no se puede verificar el desarrollador".
Esto es solo una precaución que toma macOS para garantizar que ningún malware entre en tu ordenador, pero como estás descargando la app MJML desde la fuente oficial, puedes ignorar este mensaje. Para ignorarlo, simplemente haz clic en el icono de Apple en la esquina superior derecha, ve a Preferencias del Sistema, haz clic en Seguridad y Privacidad y, finalmente, en General.
Desde allí, verás una pantalla como la de abajo con un botón para "Abrir de todas formas", que hace referencia a la aplicación MJML que acabas de descargar. Haz clic en el candado para realizar cambios y luego en el botón "Abrir de todas formas".
Después de esto, puedes hacer clic en el ícono MJML en la carpeta donde lo hayas guardado y ¡listo!
La aplicación es una buena mejora del editor en línea porque no solo puedes codificar dentro de ella, sino que también puedes guardar tus proyectos y abrir archivos MJML.
Una vez que comienza un nuevo proyecto, tiene la posibilidad de utilizar un diseño básico y crear su correo electrónico desde cero o puede navegar a la Galería y elegir entre una amplia selección de plantillas prediseñadas.
Si elige una plantilla o programa su propio correo electrónico, verá lo siguiente. Al igual que en el editor en línea, cualquier cambio que realice en el código se refleja inmediatamente en el diseño.
Desde la aplicación de escritorio MJML
El código de las plantillas ya debería estar bastante ordenado, pero si necesitas hacer algo de limpieza mientras creas tu código, presiona el botón “Embellecer” en la parte superior de la pantalla.
Cuando estés listo para exportar tu código, haz clic en la flecha hacia abajo junto a "Copiar HTML" para ver todas las opciones disponibles. Aquí verás que puedes copiar el código, exportarlo como archivo HTML a tu ordenador o incluso hacer una captura de pantalla de tu diseño en las versiones de escritorio y móvil.
Por último, también puedes enviar correos electrónicos desde la aplicación. Esto puede ser un poco molesto para la mayoría, ya que necesitas la clave API de Mailjet y el secreto de API de Mailjet, además de una dirección de correo electrónico de remitente verificada, pero siempre puedes registrarte. aquí Para empezar. Sin embargo, dado que probablemente usarás tu propio ESP para probar y enviar correos electrónicos, esta función podría no ser tan necesaria.
Aunque la aplicación MJML tiene mucho que ofrecer, quizás prefieras usar un editor de código con el que estés más familiarizado. Por suerte, MJML también se integra con algunas de las principales aplicaciones de código.
3 . Instalar un complemento
A continuación, se muestran tres complementos y paquetes que puede usar para programar MJML directamente en un editor de código. Si aún no tiene un editor de código instalado en su computadora, puede descargar cualquiera de estas aplicaciones y seguir las instrucciones de instalación de los desarrolladores en sus respectivos sitios web:
a. Código VS
El complemento de Visual Studio viene con muchas características, que incluyen actualizaciones en tiempo real, la capacidad de exportar código MJML como HTML, embellecimiento de código, señales de error en línea y muchas otras.
De
https://marketplace.visualstudio.com/items?itemName=mjmlio.vscode-mjml
Hacer clic
aquí
para instalar el complemento MJML de Visual Studio Code.
b. Átomo
Atom divide sus complementos MJML en tres paquetes:
-
language-mjml, que le permite utilizar MJML dentro de Atom.
-
linter-mjml, que es lo que te permite saber si has cometido algún error de codificación.
-
mjml-preview, que le muestra cómo se verá su correo electrónico en su forma visual.
Desde Atom.io
Hacer clic
aquí
para instalar los complementos Atom MJML.
do.
Sublime
Sublime no viene con tantas funciones como VS Code o Atom, pero hace el trabajo permitiéndote codificar MJML, brindando resaltado de sintaxis y generando sugerencias de código mientras escribes, todo lo cual es muy útil.
Del https://packagecontrol.io/packages/MJML-syntax
Hacer clic aquí para instalar el paquete Sublime MJML.
4. Usar npm
Aunque analizaremos esta opción en detalle, usar npm puede resultar un poco intimidante si no tienes experiencia en desarrollo web y de correo electrónico. Instalar npm es útil principalmente para convertir MJML a HTML, ya que permite exportar un archivo MJML como HTML desde la terminal de tu ordenador.
Si usas la aplicación de escritorio MJML o el plugin de VS Code, no tendrás que preocuparte por usar otro programa para la conversión, ya que esta función está incluida. Pero si no tienes esa opción o simplemente quieres convertir un archivo MJML a HTML sin un editor de código, instalar el motor MJML localmente te resultará muy útil.
Comience descargando la versión LTS recomendada de node.js aquí que coincida con su sistema operativo.
Una vez instalado node.js en tu ordenador, asegúrate de que npm también esté correctamente instalado. Para ello, abre la terminal de tu ordenador, escribe lo siguiente y pulsa "Intro":
Debería ver algo como la imagen a continuación, que le permitirá saber qué versión de npm tiene instalada actualmente:
b. Instalar MJML Engine. Copiar y pegar lo siguiente y pulsar Enter.
Espere unos 10 segundos mientras el terminal se configura y luego su pantalla debería verse similar a esta:
c. Conversión de MJML a HTML
Now that you’re positive both npm and MJML engine are installed, it’s finally time to build your email design (if you don’t know how to code with MJML yet, be sure to take a look at our step-by-step tutorial ).
Después de codificar el correo electrónico con tu editor de texto, guarda el archivo en tu computadora como "index.mjml". Desde ahí, abre tu terminal de nuevo y usa el comando cd para cambiar el directorio donde está guardado el archivo. Puedes simplemente copiar y pegar la ruta en tu terminal después de cambiar el directorio.
Una vez que la terminal devuelva la ruta del archivo, escriba lo siguiente y presione “enter”:
El propósito de esto es indicarle a la terminal que desea ingresar el archivo MJML y exportarlo o convertirlo a un archivo HTML. Después de presionar "Intro", revise la carpeta en su computadora donde guardó el archivo MJML; ahora también debería ver un archivo HTML dentro de esa carpeta.
Ahora que tu correo electrónico se ha convertido, puedes abrirlo en tu navegador para verlo en todo su esplendor o subirlo a tu ESP. ¡Solo asegúrate de probarlo antes del envío oficial!
¿Cómo codifico realmente mi primer correo electrónico?
Como probablemente ya te habrás dado cuenta, instalar MJML es solo el principio; ahora es momento de crear correos electrónicos. ¿Por dónde empezar? Te ayudamos:
Introducción a MJML :una publicación de blog sobre un curso intensivo de MJML en la que le enseñamos los conceptos básicos de MJML y creamos un correo electrónico con usted.
Preguntas frecuentes sobre MJML Probablemente aún tengas preguntas sobre MJML, y tenemos las respuestas. Consulta esta publicación para conocer algunos datos sobre MJML.
Hoja de trucos de MJML :Aquí encontrará los fragmentos de código MJML más comunes explicados en detalle para que pueda comprender aún mejor lo que es posible con MJML.
Pros and Cons of MJML : Just like anything else, MJML has its positives and negatives. Discover what they are for yourself to decide if MJML is right for you.
Responsive Emails and MJML : Learn all about why responsive emails are so important and how MJML can help you create them.
Still looking for more help with MJML? Feel free to reach out to us !
Podemos responder cualquier otra pregunta que tenga sobre MJML, diseño de correo electrónico, marketing por correo electrónico e incluso podemos codificar correos electrónicos personalizados para usted.
