Cómo crear tu propia plantilla

En Acumbamail ponemos a tu disposición un sin fin de plantillas, pero si dispones de tiempo y ganas para diseñar la tuya propia, aquí te explicamos paso a paso como hacerlo desde el principio.

En otro de nuestros post ya explicamos las características del nuevo editor, pero en este, vamos a profundizar en el proceso de creación de una plantilla desde cero, invirtiendo el menor tiempo posible y sacando el mayor partido a todas las opciones que nos proporciona el nuevo editor.

El flujo que debemos seguir para diseñar correctamente nuestra plantilla se resume en tres pasos:

  1. 1. Construir el HTML de nuestra plantilla a partir del sistema de módulos
  2. 2. Personalización general de todos los elementos a partir de la pestaña ‘Aspecto general’
  3. 3. Personalización individual de algunos de los módulos de la plantilla

Recomendamos que siempre sea este el orden que sigas para crear la plantilla, porque como explicaremos a continuación, evitarás repetir los puntos 2 y 3.

1. Construir el HTML de nuestra plantilla a partir del sistema de módulos

Una de las características más importantes del nuevo editor, es que es responsive, es decir, la plantilla que hagas, se adaptará al tamaño y resolución de tu pantalla, independientemente del dispositivo desde el que se visualice.

El funcionamiento del responsive es sencillo, consiste en conseguir pasar de un diseño multi-columna a un diseño de mono-columna. Es decir, las columnas que tengamos en nuestra plantilla, en las versiones de móvil y tablet pasarán a agolparse unas debajo de las otras, quedando en forma de una única columna.

Para crear nuestra plantilla, tenemos que tener en cuenta que existen dos tipos de módulos: verticales y horizontales.

Es importante tener claro que el editor nos permite crear plantillas desde 1 a 4 columnas y que para que nuestro diseño responsive funcione correctamente, debemos usar módulos verticales. Quedará más claro con un ejemplo:

Si tenemos dos noticias a dos columnas con imagen, título y texto de introducción y creamos este bloque a partir de un módulo horizontal de imagen (duplicado a lo ancho), y dos bloques de texto horizontales (también duplicados), al previsualizar nuestra plantilla en modo móvil o tablet, nos daremos cuenta de que no obtenemos el resultado que queremos, es decir, al recolocarse las columnas para estos dispositivos, el orden final sería, dos imagenes, dos títulos y dos textos de introducción. Lo cual no tiene mucho sentido, puesto que los bloques de las dos noticias quedarían mezclados y desordenados.

Ejemplo de plantilla mal construida

Para construir correctamente esta estructura, debemos arrastrar un bloque vertical (también duplicado a lo ancho), de tal forma, que si hacemos click en previsualizar, nos daremos cuenta que los bloques verticales se agolparán uno debajo de otro, pero respetando la estructura responsive que queremos.

Ejemplo de plantilla bien construida

2. Personalización general de todos los elementos a partir de la pestaña ‘Aspecto general’

Para personalizar todos los elementos de nuestra plantilla, disponemos de la pestaña Aspecto general.

En esta pestaña, tenemos diferentes opciones que se aplicarán a todos los elementos del mismo tipo que ya hayamos añadido a nuestra plantilla.

Por ejemplo, si aplicamos las opciones de aspecto general para los botones, estas se aplicarán a todos los botones que ya hayamos añadido, pero no a los que añadamos después, por eso es importante haber añadido todos los módulos que necesitemos y haber introducido todos los textos, imágenes y enlaces antes de personalizar generalmente nuestra plantilla.

Podemos personalizar cualquier elemento que tengamos en nuestra plantilla, desde los textos, imágenes y enlaces, hasta los separadores, líneas horizontales, cabecera, pie del email, etc. Simplemente debemos elegir las opciones que queramos y pulsar en el botón de aplicar.

3. Personalización individual de algunos de los módulos de la plantilla

Una vez que hemos añadido todos los módulos y los hemos personalizado a nuestro gusto, es muy posible que queramos que haya elementos que se diferencien del resto aunque sean del mismo tipo.

Esto no es un problema para el nuevo editor, pues simplemente debemos seleccionar el módulo que queramos personalizar y hacer click en editar. En este momento nos aparecerán las mismas opciones que tenemos en la pestaña aspecto general pero se aplicarán solamente al elemento que tenemos seleccionado.

¿A qué esperas para crear tu propia plantilla en sólo unos minutos?

Los usuarios que leyeron este post, también visitaron:

¿Te ha gustado? ¡Compártelo!Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+Email this to someone

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *