Cree una firma de correo HTML profesional

Una firma de correo (también llamada pie de email) es un bloque de información al final de cada mensaje enviado. Contiene datos de contacto, cargo, nombre de la empresa y, a menudo, un enlace al sitio web o calendario de reuniones.

El destinatario no tiene que buscar el número de teléfono en mensajes anteriores: todos los datos están disponibles de inmediato. Una firma de correo profesional también muestra que cuida los detalles y mantiene una imagen de empresa coherente en la correspondencia empresarial.

La pestaña Datos contiene todos los campos que puede rellenar. Solo dos son obligatorios: nombre y dirección de correo electrónico. Los campos restantes son opcionales y aparecerán en la firma solo cuando se rellenen.

Campos en la pestaña Datos

• Línea sobre el nombre - texto adicional que se muestra encima del nombre. Puede introducir el nombre de la empresa, eslogan o lema.
• Avatar / logotipo (URL de imagen) - URL de una foto de perfil o logotipo de empresa. La imagen debe ser cuadrada (mín. 120×120 px) y accesible públicamente online. Después de pegar la URL, aparecen opciones adicionales: Forma del avatar (redondo, redondeado o cuadrado) y Tamaño del avatar (pequeño - 40 px, mediano - 56 px, grande - 72 px).
• Nombre completo - campo obligatorio. Introduzca su nombre completo.
• Etiqueta de nombre - texto corto junto al nombre, p. ej., pronombres o título abreviado.
• Cargo - su rol en la empresa, p. ej., Director de Ventas, Especialista en Marketing.
• Nombre de la empresa - el nombre de la organización que representa.
• Línea adicional - una breve descripción de lo que hace o lo que ofrece.
• Correo electrónico - campo obligatorio. Introduzca su dirección de correo empresarial.
• Teléfono - número de contacto. Cualquier formato, p. ej., +34 600 000 000.
• Sitio web - URL completa de su sitio web, empezando por https://.
• Dirección - dirección física de la empresa (calle, ciudad, código postal).
• Datos formales - NIF, número de licencia u otros datos requeridos en su sector.

Un botón CTA (llamada a la acción) es un elemento clicable que dirige al destinatario a una página elegida. Puede ser un enlace a un calendario de reuniones, formulario de contacto u oferta. El generador permite añadir dos botones CTA.

Botón principal

1. Abra la pestaña Botones en el editor.
2. En la sección Botón principal, introduzca el texto que verá el destinatario, p. ej., Agendar una consulta gratuita.
3. En el campo Enlace CTA, pegue la URL completa. La dirección debe empezar por https://.

Botón secundario

Puede añadir un segundo botón CTA en estilo contorno (fondo transparente con borde). Rellene los campos de la sección Botón secundario de la misma forma que para el botón principal.

Redondeo de botones

En la parte inferior de la pestaña Botones encontrará la opción Redondeo de botones. Hay tres variantes disponibles: Ninguno (esquinas rectas), Ligero (ligeramente redondeado) o Completo (botón ovalado).

Si deja ambos campos vacíos, el botón no aparecerá en la firma. Si solo rellena un campo, el botón tampoco será visible: se necesitan tanto el texto como el enlace.

En la pestaña Redes sociales puede añadir enlaces a sus perfiles. El generador admite doce plataformas: LinkedIn, Instagram, Facebook, TikTok, YouTube, X (antes Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram y Pinterest.

Cómo hacerlo

1. Abra la pestaña Redes sociales en el editor.
2. Junto a cada plataforma encontrará un campo de URL. Pegue el enlace completo a su perfil, p. ej., https://www.linkedin.com/in/superfil.
3. Rellene solo los campos que necesite. Los campos vacíos no aparecerán en la firma.

Iconos de redes sociales

En la parte inferior de la pestaña Redes sociales encontrará la opción Mostrar iconos junto a los nombres de servicios. Cuando está activada, los enlaces se muestran como iconos SVG en color en lugar de solo nombres.

• Tamaño de icono - opciones: Pequeño (16 px), Mediano (20 px) o Grande (24 px).
• Color de icono - Colores de plataforma (colores predeterminados de cada plataforma), Color de acento (color de acento uniforme) o Color de texto.

En la pestaña Apariencia puede personalizar colores, fuente y otros elementos visuales de la firma.

Temas de color

En la parte superior de la pestaña encontrará cinco temas predefinidos: Oscuro, Azul, Púrpura, Verde y Gris. Al hacer clic en un tema se establece automáticamente el color de acento y el color del texto. Es la forma más rápida de conseguir una firma con un aspecto coherente.

Colores

• Color de acento - se usa en la barra lateral/superior, botón CTA y enlaces. Puede elegir cualquier color de la paleta.
• Color del texto - color de todo el texto de la firma (nombre, datos de contacto, aviso legal).
• Color de fondo - color de fondo de toda la firma. Blanco por defecto, pero puede cambiarlo.

Fuente y tamaño

• Fuente - opciones: Arial, Verdana, Tahoma, Trebuchet MS y Georgia. Todas son seguras para correo electrónico y se mostrarán correctamente para el destinatario.
• Tamaño del texto - tres opciones: Pequeño (12 px), Estándar (14 px) y Mayor (16 px).

En la pestaña Aviso legal puede añadir texto legal que aparecerá en la parte inferior de la firma en fuente más pequeña.

Cuándo añadir un aviso legal

• Correspondencia empresarial - aviso de confidencialidad y solicitud de eliminación en caso de entrega incorrecta.
• Requisitos sectoriales - algunos sectores (p. ej., legal, médico, financiero) requieren información específica en cada mensaje.
• RGPD - información sobre el tratamiento de datos personales, si la empresa es responsable del tratamiento.

Por defecto, el campo está relleno con un texto de confidencialidad de ejemplo. Puede editarlo, eliminarlo o reemplazarlo con su propio aviso legal. Si deja el campo vacío, no aparecerá ningún aviso en la firma.

Línea separadora

Debajo del campo de texto encontrará la opción Mostrar divisor entre datos de contacto y aviso legal. Actívela para añadir una línea horizontal entre los datos de contacto y el aviso legal.

Después de activar la línea, aparecen opciones de personalización adicionales:

• Estilo de línea - opciones: solida, discontinua o punteada.
• Grosor de línea - tres opciones: 1 px, 2 px o 3 px.
• Color de línea - gris por defecto (#e5e7eb). Puede elegir cualquier color de la paleta o restaurar el predeterminado haciendo clic en el botón Predeterminado.

En la pestaña Estilo de texto puede personalizar individualmente el color y tamaño de fuente de cada elemento textual de la firma.

Elementos disponibles

Solo se muestran los elementos que actualmente tienen datos rellenados. Para cada elemento puede configurar:

• Nombre completo - se muestra por defecto en el color de acento.
• Cargo - su rol en la empresa.
• Empresa - nombre de la organización.
• Datos de contacto - correo electrónico, teléfono, sitio web (etiquetas).
• Redes sociales - enlaces a perfiles.
• Aviso legal - texto legal en la parte inferior de la firma.

Cómo cambiar el color

Junto a cada elemento encontrará una fila de opciones de color. Haga clic en un cuadrado de color para seleccionarlo. También puede añadir un color personalizado haciendo clic en el cuadrado de color con el signo más: elija un color y haga clic en Guardar. Los colores personalizados (hasta 8) se comparten entre todos los elementos.

El botón con icono de reinicio restaura el color predeterminado del elemento.

Cómo cambiar el tamaño

En la segunda línea encontrará el control de tamaño con botones - y +. El valor muestra el desplazamiento respecto al tamaño de fuente base (configurado en la pestaña Apariencia). Rango: de -4 a +4 píxeles.

En la pestaña Espaciado puede controlar con precisión las distancias entre los elementos individuales de la firma.

Margen interno de la firma

En la parte superior de la pestaña encontrará la opción de margen interno, es decir, la distancia entre el contenido de la firma y sus bordes. Hay tres valores disponibles: 8 px (pequeño), 16 px (mediano) y 24 px (grande).

Espaciado entre elementos

Debajo del margen encontrará controles para los elementos individuales de la firma. Cada control tiene botones + y - para aumentar o disminuir el espaciado. Solo se muestran las opciones de los elementos que actualmente están en la firma.

• Después del nombre - espacio debajo de la línea del nombre.
• Después del cargo / empresa - espacio debajo de la línea del cargo y nombre de empresa.
• Después de la línea adicional - espacio debajo de la descripción (si está rellenada).
• Después de los datos de contacto - espacio debajo del correo, teléfono y sitio web.
• Después de las redes sociales - espacio debajo de los enlaces a perfiles.
• Después del botón CTA - espacio debajo del botón (si está activado).
• Antes del aviso legal - espacio encima del texto del aviso legal.

Si elimina los datos de un campo (p. ej., borra el teléfono), la opción de espaciado correspondiente desaparece automáticamente de la pestaña.

El generador guarda automáticamente todas las configuraciones en la memoria del navegador (localStorage). Después de actualizar la página o volver a abrir la herramienta, los datos, diseño, colores y todas las demás opciones se restaurarán.

Cómo funciona el autoguardado

Cada cambio (texto, color, diseño, espaciado) se guarda inmediatamente en la memoria del navegador. El guardado ocurre automáticamente en segundo plano, sin necesidad de hacer clic en ningún botón.

Cómo reiniciar la configuración

Debajo de la vista previa de la firma encontrará el botón Reiniciar apariencia. Al hacer clic aparecerá una ventana de confirmación. Confirmar el reinicio restaurará todos los datos y configuraciones a los valores predeterminados. Esta operación no se puede deshacer.

Exportar e importar configuración

Debajo de la vista previa de la firma encontrará dos botones adicionales: Exportar configuración e Importar configuración. La exportación guarda todos los datos, colores, diseño, espaciado y estilos de texto en un archivo JSON. La importación carga una configuración guardada previamente desde un archivo.

Esta función es especialmente útil cuando quiere transferir la configuración de la firma entre ordenadores, compartir configuraciones con compañeros o mantener una copia de seguridad de sus ajustes antes de reiniciar.

El panel de vista previa se muestra a la derecha del editor y se actualiza automáticamente con cada cambio. La vista previa está fijada a la pantalla (sticky), por lo que permanece visible incluso mientras se desplaza por las opciones de edición.

Cambio de fondo de la vista previa

Encima de la vista previa encontrará tres botones de cambio de fondo: Claro (fondo gris predeterminado), Oscuro (fondo oscuro, útil para comprobar la legibilidad en fondo oscuro) y Cuadrícula (patrón de cuadrícula, permite ver la transparencia y los bordes de la firma).

Botones de acción

Debajo de la vista previa encontrará varios botones:

• Copiar firma (Gmail / Outlook) - copia la firma como HTML formateado al portapapeles. Péguela directamente en la configuración de firma.
• Copiar código HTML - copia el código HTML sin formato al portapapeles. útil para pegar en un editor HTML o sistema CMS.
• Descargar como HTML - guarda el código de la firma como archivo .html en el disco. útil para archivar o compartir con un desarrollador.
• Mostrar código HTML - abre una ventana modal con el código fuente de la firma. Puede revisar el código y copiarlo directamente desde la ventana.
• Exportar configuración - guarda la configuración completa de la firma (datos, colores, diseño, espaciado, estilos) en un archivo JSON.
• Importar configuración - carga la configuración desde un archivo JSON. Todas las configuraciones se aplican automáticamente.
• Reiniciar apariencia - restaura todos los datos y configuraciones a los valores predeterminados (tras confirmación).