{"id":7679,"date":"2022-06-16T02:42:54","date_gmt":"2022-06-16T00:42:54","guid":{"rendered":"https:\/\/www.webempresa.com\/guias-mautic\/?post_type=ht_kb&p=7679"},"modified":"2022-06-16T03:09:21","modified_gmt":"2022-06-16T01:09:21","slug":"como-personalizar-emails-en-mautic","status":"publish","type":"ht_kb","link":"https:\/\/www.webempresa.com\/guias-mautic\/como-personalizar-emails-en-mautic.html","title":{"rendered":"Como personalizar emails en Mautic"},"content":{"rendered":"

En Mautic tenemos la opci\u00f3n de personalizar nuestros correos, utilizando las herramientas que tenemos a mano en nuestro propio Mautic, esta es una de las formas m\u00e1s sencillas de modificar; sin embargo, tambi\u00e9n evaluamos otra opci\u00f3n en caso de tener m\u00e1s conocimientos sobre etiquetado HTML o de necesitar modificar un c\u00f3digo ya sea por el ID, o cualquier circunstancia.<\/p>\n

Primero y principal, debemos acceder a los correos creados, para ello vamos a:<\/p>\n

Canales > Correos Electr\u00f3nicos > Seleccionamos la plantilla<\/strong> que deseamos editar.<\/p>\n

\"\"<\/p>\n

Una vez que accedemos a la edici\u00f3n de la plantilla de formulario<\/strong> hacemos clic en el bot\u00f3n de edici\u00f3n respectivo:<\/p>\n

\"\"<\/p>\n

Una vez estamos en el editor vemos la plantilla con los diversos elementos que a\u00f1adidos previamente o bien que est\u00e1n por defecto si elegimos una plantilla, como es el caso del ejemplo donde elegimos la plantilla de (Brienz).<\/p>\n

Para un mejor entendimiento de cada herramienta hacemos un repaso por cada una de las opciones de m\u00f3dulos de contenido disponible en la misma, as\u00ed como el m\u00e9todo de editar ciertos ajustes de ellas. Para ello es necesario conocer el visor de elementos de edici\u00f3n:<\/p>\n

\"\"<\/p>\n

En el editor de plantillas hay un bot\u00f3n con el icono de un pincel<\/em>, que habilita la vista de edici\u00f3n para cada elemento que se\u00f1alemos de nuestra plantilla ya activa, por ejemplo.<\/p>\n

Si necesitamos editar el bot\u00f3n de READ MORE<\/strong>, con un nuevo enlace, primero debemos hacer clic en dicho bot\u00f3n y luego en el bot\u00f3n del pincel(icono)<\/strong> en la parte superior del editor de plantillas.<\/em><\/p>\n

Una vez activo el panel de edici\u00f3n se ocultar\u00e1 el de inserci\u00f3n de m\u00f3dulos, para volver a mostrarlo simplemente lo seleccionamos en la barra superior del editor:<\/p>\n

\"\"<\/p>\n

Antes que nada un punto principal a aclarar, es que cada uno de los m\u00f3dulos que se a\u00f1adan tienen unos ajustes que podemos modificar de forma fija, es decir, no var\u00edan, estos ajustes corresponden a:<\/p>\n

\"\"<\/p>\n

Estos tres ajustes pueden variar, pero van a estar presentes en todos los m\u00f3dulos que a\u00f1adamos como parte adicional y cuentan con las siguientes opciones:<\/p>\n

Dimensi\u00f3n<\/strong>: Entre las opciones que tenemos disponibles tenemos, altura, anchura, espaciado interno, ubicaci\u00f3n vertical y tama\u00f1o de iconos en algunos casos.<\/p>\n

Tipograf\u00eda<\/strong>: En este apartado tenemos las opciones de modificar lo referente a la tipograf\u00eda en donde nos encontremos con ellas, por ejemplo en los m\u00f3dulos de texto, contenido, men\u00fas y botones.<\/p>\n

En esta pesta\u00f1a encontramos opciones de cambiar fuente, tama\u00f1o de fuente, grosor, espaciado de letras, color de la fuente, interlineado, alineaci\u00f3n del texto, decoraci\u00f3n del texto y estilo de fuente.<\/p>\n

Decoraciones<\/strong>: En esta secci\u00f3n encontramos ajustes adicionales disponibles en algunos m\u00f3dulos, como son el color de fondo del elemento, color de fondo de la secci\u00f3n, borde redondeado del elemento, borde s\u00f3lido, anchura del borde y personalizaci\u00f3n del mismo.<\/p>\n

Con esto ya explicado procedemos a ver las opciones disponibles para cada m\u00f3dulo.<\/p>\n

 <\/p>\n

<\/span>M\u00f3dulo de texto<\/span><\/h2>\n

En todos los m\u00f3dulos existe una configuraci\u00f3n inicial que corresponde a los ajustes del mismo, en este caso nos permite configurar, en el caso del m\u00f3dulo de texto dispone de la opci\u00f3n de asignar un ID y un t\u00edtulo.<\/p>\n

\"\"<\/p>\n

<\/span>M\u00f3dulo de bot\u00f3n<\/span><\/h2>\n

En su configuraci\u00f3n inicial y predeterminada para este m\u00f3dulo encontramos la posibilidad de modificar el link al que va a ir este elemento.<\/p>\n

\"\"<\/p>\n

<\/span>M\u00f3dulo de Imagen<\/span><\/h2>\n

En este m\u00f3dulo nos encontraremos con ajustes b\u00e1sicos, pero antes de iniciar con ellos, una vez agregamos bien sea una plantilla o el propio m\u00f3dulo base de im\u00e1genes, nos encontramos con la duda de, como puedo cambiar la imagen que se muestra por defecto. En este caso para hacerlo debemos hacer doble clic sobre la imagen que se encuentra configurada y nos mostrara el sistema una interfaz para poder elegir nuestra imagen o en su defecto subirla para ser seleccionada posteriormente.<\/p>\n

\"\"
\nUna vez que tenemos seleccionada la imagen podremos ver los dem\u00e1s elementos que poseen en esta configuraci\u00f3n del m\u00f3dulo, los cuales corresponden a enlace en caso de tenerlo, relaci\u00f3n que puede ser una de las conocidas en html o bien dejarse en blanco, texto alternativo y t\u00edtulo de la imagen.<\/p>\n

\"\"<\/p>\n

<\/span>M\u00f3dulo de divisor<\/span><\/h2>\n

Este m\u00f3dulo, como el nombre lo indica, no es m\u00e1s que un divisor que podemos encontrar en diversos editores de texto para poder hacer un espacio en nuestro contenido del correo con una l\u00ednea que lo represente. En este m\u00f3dulo solo tendremos opci\u00f3n a modificar el ID y el t\u00edtulo con respecto a c\u00f3digo.<\/p>\n

\"\"<\/p>\n

<\/span>M\u00f3dulo de grupo social<\/span><\/h2>\n

La configuraci\u00f3n inicial del m\u00f3dulo de grupo social la tendremos al hacer clic en los elementos propios, es decir en los iconos de las redes sociales, en ella tendremos la posibilidad de seleccionar el icono que deseamos se muestre de nuestra red social, una ruta para nosotros poder utilizar un icono que tengamos dise\u00f1ado y un enlace al cual vamos a ir una vez se haga clic en este bot\u00f3n.<\/p>\n

\"\"<\/p>\n

<\/span>M\u00f3dulo de elemento social<\/span><\/h2>\n

En este caso tendremos un m\u00f3dulo que va de la mano con otro, en este caso el elemento social, \u00fanicamente puede usarse dentro de un grupo social, b\u00e1sicamente lo que nos facilita es el poder agregar una nueva red, es decir por defecto tenemos 3 redes en el grupo social, al agregar este m\u00f3dulo hasta el \u00e1rea social agregamos uno nuevo teniendo cuatro en total, as\u00ed sucesivamente seg\u00fan los que necesitemos.<\/p>\n

Este m\u00f3dulo mantendr\u00e1 las mismas opciones de configuraci\u00f3n que los dem\u00e1s.<\/p>\n

<\/span>M\u00f3dulo espaciador<\/span><\/h2>\n

En este m\u00f3dulo encontraremos la opci\u00f3n de poder agregar un espaciador a nuestra plantilla, un espaciador no es m\u00e1s que un espacio en blanco para separar un poco los elementos que tenemos en nuestra plantilla, para este m\u00f3dulo tendremos una configuraci\u00f3n b\u00e1sica la cual incluye el ID y t\u00edtulo. En caso de necesitar modificar el alto de esta secci\u00f3n, procedemos a la pesta\u00f1a de dimensiones, recordando que todos los m\u00f3dulos tienen posibilidad de dimensiones y decoraciones.<\/p>\n

\"\"<\/p>\n

<\/span>M\u00f3dulo men\u00fa de navegaci\u00f3n (Navbar)<\/span><\/h2>\n

En este caso tendremos un men\u00fa de navegaci\u00f3n, en el cual podremos configurar individualmente cada elemento del mismo, el uso de este men\u00fa puede variar ya sea para mostrar elementos de nuestro sitio web como enlaces a archivos espec\u00edficos, en este caso vamos a ver que el ajuste principal del mismo es \u00fanicamente el link al que van dirigidos.<\/p>\n

\"\"<\/p>\n

<\/span>M\u00f3dulo elemento enlace<\/span><\/h2>\n

En este m\u00f3dulo directamente tendremos el mismo caso que con el elemento social, este m\u00f3dulo \u00fanicamente se utiliza con el m\u00f3dulo de men\u00fa de navegaci\u00f3n y funciona de la misma forma, agrega un nuevo elemento a este m\u00f3dulo, es decir, si inicialmente tendremos cuatro elementos al agregar este m\u00f3dulo tendremos cinco, y as\u00ed respectivamente.<\/p>\n

Este m\u00f3dulo mantendr\u00e1 las mismas opciones de configuraci\u00f3n que los dem\u00e1s enlaces.<\/p>\n

<\/span>M\u00f3dulo hero<\/span><\/h2>\n

Este m\u00f3dulo se puede utilizar \u00fanicamente como una secci\u00f3n, b\u00e1sicamente es una columna con un fondo que podemos modificar directamente en las decoraciones de esta columna, ya sea asign\u00e1ndole un color de fondo o bien una imagen respectivamente.<\/p>\n

Luego, al ser una columna directamente podremos agregar todos los elementos previamente mencionados, es decir, poder crear una secci\u00f3n de un fondo que trabaje como necesitamos, ya sea con un color o una imagen que necesitemos mostrar para el mismo.<\/p>\n

\"\"
\n 
\nPor \u00faltimo un breve v\u00eddeo donde tendremos m\u00e1s a detalle los m\u00f3dulos y como editar los mismos.<\/p>\n