Crear diseños con columnas y filas

Toda firma de correo electrónico se compone de dos bloques básicos: filas y columnas. Una vez que entiendes cómo funcionan juntos, puedes crear diseños cuidados y profesionales en minutos. No hace falta experiencia en diseño.

​

Piensa en ello como una tabla

Imagina una tabla sencilla, como una hoja de cálculo. Una fila se extiende horizontalmente a lo largo de la firma. Una columna divide esa fila en secciones verticales, una al lado de la otra. Al combinar filas y columnas, creas una cuadrícula. Esa cuadrícula es el esqueleto de tu firma. Todo lo que ves en una firma de correo electrónico bien diseñada (tu foto junto a tu nombre, tus iconos sociales alineados en fila, un banner que se extiende por la parte inferior) se construye sobre esta cuadrícula.

​

Cómo funcionan las filas

Una fila es un contenedor horizontal que se extiende por todo el ancho de la firma. Cada fila se apila sobre la siguiente, de arriba abajo. Piensa en las filas como en las plantas de un edificio: la planta baja está abajo y cada nueva planta se sitúa encima. En el editor de Scribe, puedes añadir una nueva fila haciendo clic en el botón Add Row. Cada fila que añades crea una nueva sección horizontal en tu firma. Usos habituales de las filas: Una firma típica tiene dos o tres filas. La primera suele contener la información principal (foto, nombre, cargo). La segunda puede incluir un separador o tus datos de contacto. Una tercera podría mostrar un banner de campaña o un aviso legal.

​

Cómo funcionan las columnas

Una columna es una división vertical dentro de una fila. Cuando añades columnas a una fila, divides esa fila en secciones contiguas. Esto es lo que te permite colocar tu foto a la izquierda y tu nombre y cargo a la derecha, por ejemplo. En el editor, selecciona una fila y haz clic en Añadir columna para dividirla. Puedes añadir hasta cuatro columnas en una misma fila. Cada columna funciona como su propio contenedor en el que puedes soltar bloques de contenido como texto, imágenes, iconos o Smartfields. Usos habituales de las columnas: El diseño más popular utiliza dos columnas en la primera fila: una columna estrecha para una foto de perfil y una columna más amplia para tu nombre, cargo, empresa y datos de contacto. Es la clásica firma de “foto a la izquierda, datos a la derecha” que ves en la mayoría de los correos profesionales.

​

Crear tu primer diseño

Aquí tienes un recorrido paso a paso para crear un diseño de firma habitual a dos columnas.

​

Patrones de diseño que funcionan

No hace falta reinventar la rueda. Estos son tres patrones de diseño que cubren la mayoría de las firmas de correo electrónico profesionales.

​

Patrón 1: dos columnas con un banner a todo el ancho

Es el diseño más habitual. La primera fila tiene dos columnas (foto a la izquierda, información de contacto a la derecha). La segunda fila ocupa todo el ancho y muestra un banner de campaña o una llamada a la acción. Funciona bien para equipos que lanzan campañas con firma, porque el banner gana máxima visibilidad justo debajo del bloque de contacto.

​

Patrón 2: tres columnas

La primera fila utiliza tres columnas: una foto de perfil a la izquierda, los datos de contacto en el centro y el logotipo de la empresa a la derecha. Este patrón encaja con empresas que quieren una presencia de marca fuerte junto a la información de contacto individual. Deja la columna central como la más ancha para que el texto respire.

​

Patrón 3: filas apiladas, una sola columna

Cada fila usa una sola columna y el contenido se apila en vertical. Tu nombre y cargo van en la primera fila. Tus datos de contacto, en la segunda. Un banner, en la tercera. Esto crea un aspecto limpio y minimalista que funciona especialmente bien en dispositivos móviles, donde el espacio horizontal es limitado.

​

Consejos para mejorar tus diseños

Limítate a dos o tres columnas. Cuatro columnas pueden funcionar, pero cuantas más añadas, más recargado se ve todo en pantallas pequeñas. Dos columnas es el punto óptimo para la mayoría de las firmas. Usa una fila por cada «sección» de tu firma. Si tu firma tiene un bloque de contacto, una barra de enlaces sociales y un banner promocional, cada uno merece su propia fila. Así todo queda organizado y las ediciones futuras resultan más fáciles. Haz que una columna sea más ancha que la otra. Cuando uses dos columnas, dale más espacio a la columna de texto que a la de la imagen. Una proporción de 30/70 o 25/75 suele quedar mejor. En el editor, puedes arrastrar el divisor de columnas para ajustar la proporción. Previsualiza en móvil. Los clientes de correo en el teléfono muestran las firmas de forma distinta a los clientes de escritorio. Usa la función de previsualización de Scribe para comprobar que tus columnas y filas siguen viéndose bien en una pantalla más pequeña. Empieza por lo sencillo e itera. Comienza con dos columnas en una sola fila. Cuando eso esté bien, añade una segunda fila para contenido adicional. Siempre puedes complicarlo después, pero empezar con demasiadas filas y columnas hace que sea más difícil afinar los detalles.

​

Qué va en cada sitio

Si dudas sobre qué contenido corresponde a cada parte de la cuadrícula, aquí tienes una referencia rápida: Primera fila (dos columnas): foto de perfil o logotipo de la empresa en la columna estrecha. Nombre completo, cargo, empresa, teléfono, correo electrónico y sitio web en la columna ancha. Segunda fila (a todo el ancho o en dos columnas): iconos de redes sociales, un enlace para reservar reuniones o una línea secundaria de datos de contacto. Tercera fila (a todo el ancho): un banner de campaña, una advertencia legal o un eslogan corporativo.

​

Siguientes pasos

Una vez que tengas el diseño listo, puedes afinar cada detalle en el editor. Ajusta tipografías, colores, espaciado y estilos de iconos para que encajen con tu marca. Si gestionas firmas para un equipo, explora Miembros del equipo para desplegar el mismo diseño a todo el mundo manteniendo única la información de contacto de cada persona mediante Smartfields.