Ajustes del editor de email

Todo lo que se puede cambiar en el panel de la derecha del editor de plantillas de email, ajuste por ajuste. El panel cambia según lo que tengas elegido en el lienzo:

Si eliges…	El panel muestra
Nada (clic en el fondo gris)	El correo: lo que vale para todo el email.
El borde o el fondo de una sección	La sección.
Un espacio vacío de una columna	La columna.
Un bloque	Ese bloque: título, texto, imagen, botón…

Arriba del panel siempre ves qué tienes elegido y dónde está: Sección · sección 3 de 10, Texto · bloque 3 de 4. Si dice Correo · Toca un bloque para editarlo, no tienes nada elegido.

Cómo se usan los controles

Los mismos seis controles se repiten en todo el panel. Si entiendes estos, entiendes todo:

Control	Cómo se ve	Cómo se usa
Botones de opción	Una fila de botones; el elegido se pinta de verde menta.	Haz clic en la opción que quieres. Solo puede haber una elegida. Ejemplo: Izquierda · Centro · Derecha.
Número	Una casilla con un número y la unidad al lado (px o %).	Escribe el número o usa las flechitas. Si escribes algo fuera del rango (por ejemplo 9999), al salir de la casilla se ajusta al máximo o al mínimo permitido.
Color	Un cuadrito de color y un código como #23FFCF.	Haz clic en el cuadrito para elegir el color con el selector, o escribe el código si ya lo sabes (por ejemplo, el de tu marca). La ✕ quita el color propio: el elemento vuelve a tomar el del correo.
Espaciado	Cuatro casillas: Arriba, Derecha, Abajo, Izquierda.	Cada casilla es el espacio de ese lado, en px. Para dejar aire solo arriba y abajo, pon por ejemplo 20 · 0 · 20 · 0.
Interruptor	Un botón que se desliza.	Verde es encendido; gris, apagado.
Avanzado	Un grupo con una flechita ▸, cerrado al principio.	Haz clic en el título para abrirlo. Ahí están los ajustes que casi nunca hacen falta.

El botón «reiniciar»

Cuando eliges un bloque, arriba a la derecha del panel aparece reiniciar. Vuelve el estilo a como empieza, sin tocar el contenido: el texto que escribiste, la imagen o el enlace se quedan; los colores, tamaños y espacios vuelven a los de un bloque nuevo. Útil cuando tocaste tanto que ya no sabes cómo volver. (Y si te arrepientes: Deshacer.)

«px» y «%»

px (píxeles) es una medida fija: 20 px son 20 px en cualquier pantalla. % es una parte del espacio disponible: 50 % es la mitad de la columna, sea grande o chica. Como referencia, el correo entero mide 600 o 700 px de ancho y un texto normal mide entre 14 y 16 px de alto.

El correo

Lo que ves cuando no tienes nada elegido. Son los ajustes generales: lo que pongas aquí vale para todo el email, salvo que una sección o un bloque diga otra cosa.

El panel del correo, con Avanzado abierto

Bandeja de entrada

Ajuste

Qué hace

Texto de vista previa

La línea gris que se lee junto al asunto en la bandeja, antes de abrir el correo (Aparece junto al asunto en la bandeja). Úsala para completar el asunto, no para repetirlo. Ejemplo: asunto Tu prueba de manejo está confirmada, vista previa Te esperamos el sábado a las 10 en la sede norte. El contador (55 / 90 caracteres) se pone amarillo pasados los 90: se puede escribir más, pero la mayoría de las bandejas cortan ahí.

Diseño

Ajuste	Qué hace	Valor de un correo nuevo
Ancho en escritorio	Cuánto mide el correo en una computadora: 600 px o 700 px. 600 px es el más compatible. En el celular siempre se ajusta al ancho del teléfono.	700 px
Fondo del correo	El color de todo el fondo, también a los lados del correo en pantallas anchas. Cada sección puede tener su propio fondo encima.	Blanco #FFFFFF
Color de enlaces	El color de las palabras con enlace dentro de los textos. Los botones tienen su propio color.	Azul #0000EE
Color del texto	El color de todos los textos y títulos que no tengan uno propio. Cambiarlo aquí es la forma rápida de cambiar todos a la vez.	Negro #000000
Subrayar los enlaces	Encendido, los enlaces van subrayados. Apagado, solo se distinguen por el color.	Encendido
Fuente	La letra de todo el correo: Helvetica, Arial, Georgia, Times New Roman, Courier New, Verdana o Tahoma. Fuentes seguras: se ven igual en cualquier cliente de correo.	Helvetica
Imagen de fondo	Una imagen detrás de todo el correo. Con Subir imagen + la eliges; con la ✕ sobre la miniatura la quitas. Con una imagen puesta aparecen tres opciones de cómo acomodarla (ver abajo).	Sin imagen

Si el color del texto y el del fondo se parecen demasiado, aparece un aviso amarillo: Con estos colores el texto no se lee. Cambia el color del texto o el del fondo. No te deja de funcionar nada, pero el correo enviado se vería igual de ilegible.

Cómo se acomoda una imagen de fondo (igual en el correo y en las secciones):

Opción	Qué hace	Cuándo
Cubrir	Agranda la imagen hasta tapar todo el espacio. Puede cortar los bordes de la imagen.	Fotos de portada. Casi siempre esta.
Contener	La muestra entera, sin cortar nada. Puede dejar franjas vacías a los lados.	Cuando no se puede perder ninguna parte de la imagen.
Repetir	La repite como baldosas, una al lado de la otra.	Texturas y patrones pequeños.

Outlook en Windows no muestra imágenes de fondo

Ponle siempre también un color de fondo parecido al tono de la imagen. Si la imagen no carga, el texto se sigue leyendo.

Avanzado

Ajuste	Qué hace
Ancho exacto	Un ancho que no sea 600 ni 700, entre 280 y 1000 px. Solo si tu marca usa una medida especial.
Título del correo	Un nombre interno del correo. No se ve en la bandeja, pero los lectores de pantalla (que usan las personas ciegas) lo anuncian primero.
Idioma	El código del idioma en que está escrito el correo: es, en, pt. Ayuda a los lectores de pantalla a pronunciarlo bien.

La sección

Para elegir una sección, haz clic en su fondo o en su borde, fuera de los bloques. Sabes que la tienes elegida porque arriba aparece la cabecera SECCIÓN 3 | alto automático con sus botones (ver Mover, duplicar y borrar).

El panel de la sección, con alto fijo y Avanzado abierto

Alto

Ajuste	Qué hace
Automático	La sección mide lo que mida su contenido. Es lo normal.
Fijo	La sección mide lo que escribas, entre 20 y 2000 px. Al elegirlo aparecen el número y Contenido.
Contenido (con alto fijo)	Dónde se ubica lo de adentro si sobra espacio: Arriba, Centro o Abajo. Para una portada con un título sobre una foto, Centro suele quedar mejor.

Si el contenido no cabe, la sección crece. Nunca se recorta. El alto fijo funciona como un mínimo: nunca vas a mandar un correo con un texto cortado por la mitad.

Fondo

Ajuste	Qué hace
Color	El fondo de la sección, a todo el ancho de la pantalla (también a los lados del correo). La ✕ lo quita y la sección deja ver el fondo del correo.
Subir imagen +	Una imagen de fondo solo para esta sección. Es la forma de hacer una portada con texto encima: imagen de fondo + alto fijo + título y botón adentro. Con la imagen puesta eliges Cubrir, Contener o Repetir (ver arriba).

Borde

Ajuste	Qué hace
Grosor	El ancho de la línea del borde, de 0 a 20 px. Con 0 no hay borde. Al subirlo aparecen Lados, el color y el Estilo.
Lados	En qué lados va la línea: Arriba, Derecha, Abajo, Izquierda. Puedes prender varios. Siempre queda al menos uno: para no tener borde, pon el grosor en 0. Una línea solo Abajo es una forma elegante de separar secciones.
Color	El color de la línea. Empieza en gris #CCCCCC.
Estilo	Continuo (una línea), Guiones (- - -) o Puntos (· · ·).
Esquinas	Redondea las esquinas, en px. En la sección funciona aunque no haya borde: redondea el fondo.

Columnas

Seis botones con el dibujo de cada reparto: Una columna, Dos mitades, Tres columnas, Un tercio y dos tercios, Dos tercios y un tercio y Un cuarto y el resto. El elegido se pinta de verde. Al cambiarlo, cada columna conserva sus bloques. Si pasas a menos columnas, nada se pierde: los bloques de las columnas que sobran se mueven al final de la última que queda. Si pasas a más, las nuevas llegan vacías.

Si arrastraste el borde entre columnas en el lienzo, ningún botón queda marcado y abajo se lee el reparto a medida, por ejemplo A medida: 58 % · 42 % (ver Cambiar el ancho de las columnas).

Avanzado

Ajuste	Qué hace	Valor de una sección nueva
Dirección de la imagen	La dirección de internet de la imagen de fondo, si ya está publicada y no quieres subirla.	Vacío
Relleno	El espacio entre el borde de la sección y su contenido, lado por lado. Más relleno = más aire alrededor.	10 px en cada lado
Fondo de las columnas	Un color solo detrás de las columnas, dentro del ancho del correo. Con Fondo pintas toda la franja de lado a lado; con este, solo la parte del correo. Combinados: franja gris de lado a lado con el contenido en una tarjeta blanca.	Sin color
Ocultar en el celular	La sección entera no aparece cuando el correo se abre en un teléfono.	Apagado
Apilar las columnas en el celular	Encendido, en el celular las columnas quedan una debajo de la otra. Apagado, siguen lado a lado aunque queden angostas. Apágalo solo con columnas de contenido muy corto, como tres íconos o tres cifras.	Encendido

La columna

Para elegir una columna, haz clic en un espacio vacío de la columna, fuera de sus bloques. El panel dice, por ejemplo, Columna · columna 2 de 2.

El panel de la columna

Ajuste	Qué hace
Fondo	Un color solo para esta columna. Sirve para destacar una de las dos mitades, por ejemplo una caja de color con un dato importante.
Borde	Igual que el de la sección: grosor, lados, color, estilo y esquinas. Una línea solo a la Derecha de la primera columna separa las dos columnas con una raya vertical.
Avanzado → Relleno	El espacio entre el borde de la columna y sus bloques. Si le pones fondo a la columna, súbele el relleno para que el texto no quede pegado al borde del color.

Los bloques

Cada bloque tiene sus ajustes arriba —los que lo hacen ser lo que es— y abajo los ajustes que comparten casi todos: alto, borde, espaciado y celular. Las imágenes de esta sección muestran solo la parte propia de cada bloque.

Título

Para los encabezados del correo. El texto se escribe en el lienzo con doble clic (ver Escribir y dar formato al texto). Un título nuevo dice Título.

Los ajustes propios del Título

Ajuste	Qué hace	Valor de un título nuevo
Nivel	H1, H2, H3 o H4: qué tan importante es el título. H1 es el título principal (uno por correo); H2, los subtítulos; H3 y H4, títulos más chicos dentro de esos. No cambia el tamaño: eso es Tamaño. Lo usan los lectores de pantalla para entender el orden del correo.	H1
Tamaño	El alto de las letras, de 8 a 120 px. Como referencia: 32 px para el título principal, 20–24 px para subtítulos.	32 px
Color	El color del título. Vacío (con la ✕), toma el Color del texto del correo, y el campo dice Hereda del correo.	El del correo
Alineación	Izquierda, Centro, Derecha o Justificado (las líneas llegan parejas a los dos bordes).	Izquierda
Interlineado	El espacio entre una línea y la siguiente: 1,2 (apretado), 1,4, 1,6 o 2,0 (muy aireado). En títulos, 1,2 queda bien.	1,2

Texto

Para párrafos: lo que el correo dice. Un texto nuevo dice Escribe tu texto aquí. Se escribe en el lienzo con doble clic, y ahí mismo se le pone negrita, cursiva, enlaces y variables.

Los ajustes propios del Texto

Ajuste	Qué hace	Valor de un texto nuevo
Tamaño	De 8 a 120 px. Para leer cómodo, entre 14 y 16 px. Menos de 12 px cuesta leerlo en el celular.	14 px
Color	Igual que en el título: vacío toma el del correo.	El del correo
Alineación	Izquierda, Centro, Derecha o Justificado. Para párrafos largos, Izquierda es lo más fácil de leer; el centro va bien para textos de una o dos líneas.	Izquierda
Interlineado	1,2, 1,4, 1,6 o 2,0. Para párrafos, 1,4 o 1,6.	1,4

Imagen

Una foto, un logo, un banner. Una imagen nueva aparece como un recuadro que dice Elige una imagen.

Los ajustes propios de la Imagen

Ajuste	Qué hace	Valor de una imagen nueva
Subir imagen + / Cambiar imagen	Elige el archivo de tu computador. Con una imagen puesta ves su miniatura; la ✕ de la miniatura la quita. Formatos y peso máximo: ver Imágenes.	Sin imagen
Texto alternativo	Lo que se lee en lugar de la imagen cuando el cliente de correo la bloquea, y lo que oyen las personas que usan lector de pantalla. Escríbelo siempre. Describe lo que se ve: Camioneta blanca en una carretera de montaña.	Vacío
Medida	Cómo se mide el ancho: Porcentaje (una parte de la columna: 100 % la llena, 50 % ocupa la mitad) o Píxeles (un ancho fijo, de 1 a 1200 px). Al cambiar de una a otra, el número vuelve a 100 % o a 300 px. Porcentaje es lo más seguro: se adapta solo al celular.	Porcentaje, 100 %
Alineación	Si la imagen es más angosta que la columna: Izquierda, Centro o Derecha.	Centro
Enlace	Una dirección para que la imagen se pueda tocar, como un botón. Se abre en una pestaña nueva. Vacío, la imagen no lleva a ningún lado.	Vacío

La imagen no tiene ajuste de Alto: su alto sale solo de su ancho, para que nunca se deforme. Tampoco tiene relleno al empezar (0 en los cuatro lados), para que las imágenes se toquen sin bordes blancos.

En Avanzado está Dirección de la imagen: para pegar la dirección de una imagen ya publicada en internet en vez de subirla.

Avanzado, en la Imagen

Botón

El llamado a la acción: Agenda tu prueba, Ver la oferta, Escríbenos. Un botón nuevo dice Ver más.

Los ajustes propios del Botón

Ajuste	Qué hace	Valor de un botón nuevo
Texto	Lo que dice el botón. Solo texto, sin formato. Corto y con un verbo: Agenda tu cita funciona mejor que Clic aquí.	Ver más
Enlace	A dónde lleva el botón. Pega la dirección completa, con https://. Un botón sin enlace no lleva a ninguna parte: revísalo siempre.	Vacío
Fondo del botón	El color del botón.	Menta #23FFCF
Texto del botón	El color de las letras del botón. Que contraste con el fondo: letras oscuras sobre colores claros y al revés.	Negro #000000
Esquinas	Qué tan redondeado es, de 0 px (cuadrado) a 60 px (una píldora).	12 px
Alineación	Izquierda, Centro o Derecha dentro de la columna.	Centro

Divisor

Una línea horizontal para separar partes del correo.

Los ajustes propios del Divisor

Ajuste	Qué hace	Valor de un divisor nuevo
Color	El color de la línea.	Gris claro #DDDFE6
Grosor	Qué tan gruesa es, de 1 a 20 px.	1 px
Ancho	Qué parte de la columna ocupa, de 1 a 100 %. Una línea corta (30 %) centrada queda más delicada que una de lado a lado.	100 %
Estilo	Continuo, Guiones o Puntos.	Continuo

Espacio

Un hueco vacío, para dar aire entre dos bloques. No se ve en el correo: solo empuja lo de abajo.

El ajuste del Espacio

Ajuste	Qué hace	Valor de un espacio nuevo
Alto	Cuánto espacio deja, de 1 a 400 px.	24 px

El Espacio no tiene borde ni el grupo Alto de los demás bloques: su alto es el bloque.

Redes

Los íconos de tus redes sociales, cada uno con el enlace a tu perfil. Un bloque nuevo dice Agrega tus redes.

Los ajustes propios de Redes

Redes — la lista de íconos del bloque:

• Cada red tiene su campo con la dirección de tu perfil (por ejemplo https://instagram.com/tumarca).
• Si una red se queda sin dirección, avisa: Sin dirección, este ícono no se envía. Ese ícono no sale en el correo.
• A la derecha de cada una: Subir, Bajar (el orden de los íconos) y la papelera para quitarla.
• En Agregar una red están las que todavía no usaste: Facebook, Instagram, X, LinkedIn, YouTube, TikTok, WhatsApp, Pinterest, Vimeo y Web (para tu sitio). Un clic y se suma a la lista.

Íconos — cómo se ven:

Ajuste	Qué hace	Valor de un bloque nuevo
Tamaño	El tamaño de cada ícono, de 16 a 64 px.	32 px
Separación	El espacio entre un ícono y otro, de 0 a 48 px.	12 px
Alineación	Izquierda, Centro o Derecha.	Centro

WhatsApp

Para WhatsApp, la dirección es https://wa.me/ seguida de tu número con código de país y sin espacios ni signos: https://wa.me/573001234567.

Menú

Una fila de enlaces de texto, como el menú de una página web: Inicio · Catálogo · Sedes · Contacto. Va bien arriba, debajo del logo, o en el pie. Un bloque nuevo dice Agrega los enlaces del menú.

Los ajustes propios del Menú

Enlaces — cada enlace del menú tiene Texto (lo que se lee) y Enlace (a dónde lleva), con sus botones para subir, bajar y borrar. Agregar enlace + suma uno nuevo al final.

Tipografía:

Ajuste	Qué hace	Valor de un menú nuevo
Disposición	En línea (uno al lado del otro) o Uno debajo del otro.	En línea
Tamaño	El tamaño de las letras, de 8 a 40 px.	14 px
Color	El color de los enlaces del menú.	Gris #606D85
Alineación	Izquierda, Centro o Derecha.	Centro
Separador (solo en línea)	El signo que va entre un enlace y otro: `	, ·, /`… Vacío no pone nada.
Color del separador (solo si hay separador)	Su color. Vacío, toma el color del menú.	El del menú
En celular, uno debajo del otro (solo en línea)	En el teléfono los enlaces se apilan, para que no queden apretados.	Encendido

HTML

Un bloque de código: para pegar algo hecho a mano que el editor no tiene, como un contador o un formato muy especial. Lo que pegas se envía tal cual.

El bloque HTML

• Escribe o pega el código en el recuadro.
• Si el bloque vino de una plantilla vieja que no se pudo convertir, arriba dice Esto venía de una plantilla que no se pudo convertir. Se conserva tal cual y no se edita por bloques, y puede estar bloqueado para escribir.

Solo si sabes lo que haces

Un error en el código puede descuadrar todo el correo, y el editor no lo puede revisar por ti. Nunca pegues scripts (los clientes de correo los borran y marcan el correo como sospechoso) ni hojas de estilo externas (no llegan). Si no sabes HTML, no lo necesitas: todo lo demás se hace con bloques.

Columnas

No es un bloque, aunque esté en la paleta: agrega una sección nueva de dos mitades. Sus ajustes son los de la sección.

Ajustes que comparten los bloques

Debajo de los ajustes propios, casi todos los bloques tienen estos cuatro grupos. En la imagen, un texto con alto fijo y una línea de borde a la izquierda:

Alto, Borde, Espaciado y En el celular

Alto

Automático (el bloque mide lo que su contenido) o Fijo, de 20 a 2000 px. Igual que en la sección, si el contenido no cabe, crece: nunca se corta. Sirve para que dos bloques en columnas vecinas midan lo mismo, por ejemplo dos tarjetas de producto con textos de distinto largo.

No está en la Imagen (su alto sale de su ancho) ni en el Espacio (su alto es el bloque).

Borde

El mismo control que en la sección: Grosor (0 a 20 px; 0 es sin borde), Lados, color, Estilo y Esquinas. En un bloque, las esquinas solo se ven si hay borde.

Una línea gruesa de color solo a la Izquierda convierte un texto en una cita destacada, como la de la imagen.

No está en el Espacio ni en el HTML.

Espaciado

El aire alrededor del bloque, en las cuatro casillas Arriba, Derecha, Abajo e Izquierda.

• Sin borde, hay un solo juego de casillas: el espacio entre el bloque y lo que lo rodea.
• Con borde, se divide en dos, porque ahora hay un adentro y un afuera:
  • Margen (afuera del borde): el espacio entre el borde y los otros bloques.
  • Relleno (adentro del borde): el espacio entre el borde y el contenido.

Piénsalo como un cuadro colgado: el margen es la pared que queda alrededor del marco; el relleno, el blanco entre el marco y la foto.

Los bloques nuevos traen 10 px de cada lado, salvo la Imagen y el Espacio, que traen 0.

En el celular

Ajuste	Qué hace
Ocultar en el celular	El bloque no aparece cuando el correo se abre en un teléfono. En la computadora se sigue viendo.
Tamaño en el celular (solo Título y Texto)	Un tamaño de letra distinto solo para el celular. Por ejemplo, un título de 40 px en la computadora puede quedar en 28 px en el teléfono para que no ocupe media pantalla.

Para comprobar cómo queda, usa Celular en la barra de arriba o la vista previa.