[Beta]{class="badge informative"}
Use temáticas de marca para el contenido de correo electrónico email-brand-themes
Con las temáticas, los diseñadores no técnicos tienen la capacidad de crear directrices de diseño de contenido de correo electrónico reutilizables que se alineen con una marca y un estilo específicos. Los temas permiten a los especialistas en marketing aprovechar correos electrónicos visualmente atractivos y coherentes con la marca de forma más rápida y con menos esfuerzo, y proporcionan opciones de personalización avanzadas para satisfacer necesidades de diseño únicas.
Directrices y limitaciones del tema themes-guidelines
Cuando trabaje con temáticas, tenga en cuenta las siguientes directrices y limitaciones:
-
Cuando crea un correo electrónico o una plantilla de correo electrónico a partir de un lienzo en blanco (diseño desde cero), puede elegir modo de tema para empezar a crear el contenido mediante un tema y aplicar un estilo específico que se ajuste a su marca y diseño. Si elige Modo manual, no podrá aplicar un tema a menos que restablezca el diseño del correo electrónico o de la plantilla de correo electrónico.
-
Los fragmentos no son compatibles entre el modo de tema y el modo manual en el contenido del correo electrónico. Para utilizar un fragmento en el contenido del correo electrónico donde se aplique un tema, el fragmento también debe crearse en Modo de tema.
-
Los cambios en una temática personalizada no se aplican en cascada automáticamente a todos los correos electrónicos o plantillas de correo electrónico que ya la utilizan. Edite el contenido de cada uno para actualizar la temática.
-
Si elimina una temática, no afecta a ningún correo electrónico ni a ninguna plantilla de correo electrónico en los que ya se haya aplicado.
Crear un tema de marca create-theme
Defina el tema de su propia marca que puede aplicar al contenido de su correo electrónico y plantilla de correo electrónico en el contenido futuro del correo electrónico.
-
Acceda a las herramientas de temáticas mediante uno de los siguientes métodos:
-
Crea una nueva plantilla de correo electrónico y haz clic en Editar plantilla de correo electrónico para iniciar la página Diseña tu plantilla.
-
Haga clic en … Más en la parte superior derecha del espacio de diseño de contenido de correo electrónico y elige Cambiar el diseño.
En el cuadro de diálogo de confirmación, haga clic en Cambiar plantilla para abrir la página de diseño.
-
-
En la página de diseño, elija Crear o editar temas.
-
Seleccione la temática predeterminada o utilice cualquiera de las temáticas de Adobe para utilizarla como punto de partida.
note note NOTE Si desea usar uno de sus temas personalizados (Mis temas) como punto de partida, puede duplicarlo y cambiar el nombre del tema cuando edite el tema. -
Haga clic en Crear.
La página Crear un tema proporciona un lienzo con los elementos existentes de todos los tipos de texto, botones y contenedores del tema inicial.
-
Utilice la navegación derecha para acceder a las diferentes pestañas de estilo de la temática y cambiar la configuración de la temática:
Los elementos visuales cambian en el lienzo a medida que define la nueva configuración del tema. Si el resultado no es el deseado, puede hacer clic en el icono Deshacer (
-
Cuando finalice la definición del tema, haz clic en Guardar.
-
Haga clic en Cerrar para volver a la página Crear un tema y, a continuación, en Cancelar para volver a la página de diseño.
A continuación, puede elegir Diseñar desde cero para abrir el espacio de diseño visual y usar el tema para el correo electrónico o la plantilla.
Configuración general
En la pestaña Configuración general, defina los parámetros básicos de su tema:
-
Escriba un nombre de tema único.
-
Ajuste la anchura de la ventanilla para el contenido del correo electrónico (cuerpo). Utilice las flechas arriba y abajo para aumentar o disminuir la anchura o introduzca el valor (en píxeles).
Colores
Seleccione la ficha Colores y use la configuración para definir la paleta de colores del tema.
-
Haga clic en Editar para mostrar la paleta de colores que incluye los colores del tema.
Elija un ajuste preestablecido para usar una combinación de colores para el tema o para ajustar cada color del conjunto. También puede utilizar una combinación de ambos.
Para el cuadrado de color seleccionado en la parte superior, puede establecer el color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.
Haga clic en la flecha Atrás para cerrar las herramientas de la paleta de colores.
-
Haga clic en Agregar variante para crear varias variantes de color, como un modo claro y oscuro, en el que cada variante tiene su propia paleta de colores y controles de matices. Puede tener hasta seis variantes.
Para cada variante, haga clic en el icono Editar (
Para cada color que desee cambiar para la variante, mueva el conmutador a la izquierda o a la derecha para desactivarlo o activarlo. Para una configuración de color habilitada, haga clic en el cuadrado de color para elegir el color.
accordion Configuración de color de variante La configuración se agrupa según el tipo:
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 Tipo Configuración Descripción General 
Esta configuración determina los colores del cuerpo, las estructuras, los contenedores, los fondos, los vínculos, las cuadrículas y los bordes. Encabezados 
Esta configuración se aplica a Headingelementos, donde puede establecer colores de texto y borde para cada uno de los seis niveles de encabezado. Expanda cada nivel de encabezado en el que desee establecer el color de la variante.Párrafos 
Esta configuración se aplica a Paragraphelementos, donde puede establecer colores de texto y borde para cada uno de los tres tipos de párrafo. Expanda cada tipo de párrafo para el que desee establecer el color de la variante.Botones 
La configuración se aplica a los elementos de botón, donde puede establecer el color de relleno, el color de borde y el color del texto para cada uno de los tres ajustes preestablecidos de botón: Principal, Secundario y Terciario.
Configuración de texto
En la ficha Configuración de texto, puede establecer los tipos de fuentes, estilos y tamaños globales que desee usar para el tema. Para un control más granular, también puede editar estos parámetros para tipos de encabezado y párrafo.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Tipo | Configuración | Descripción |
| Global |
|
Establezca Font library en Standard o Google Fonts. A continuación, elija la familia de fuentes que desea utilizar. Esta configuración de texto global se aplica en todo, a menos que establezca estilos de texto diferentes para los niveles de encabezado y los tipos de párrafo. |
| Encabezados |
|
Para el nivel de encabezado que desea establecer, seleccione H1, H2, etc. Establezca Font library en Standard o Google Fonts. A continuación, elija la familia de fuentes, el tamaño y el estilo. Elija la alineación del texto: Izquierda, Centrada, Derecha o Justificada. |
| Párrafos |
|
Para el nivel de encabezado que desea establecer, seleccione P1, HP, etc. Establezca Font library en Standard o Google Fonts. A continuación, elija la familia de fuentes, el tamaño y el estilo. Ajuste la altura de línea según sea necesario. Elija la alineación del texto: Izquierda, Centrada, Derecha o Justificada. |
Espaciado y borde
En la ficha Espaciado, puede establecer el relleno y el margen para los distintos tipos de elementos. Para Seleccionar tipo, elija el tipo de contenido. A continuación, establezca el relleno, los márgenes, las esquinas y los bordes aplicables a ese tipo de elemento.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Tipo | Configuración | Descripción |
| Márgenes |
|
Elija el icono Margin para mostrar la configuración que replica el parámetro margin de CSS, que controla el espacio fuera del borde de un componente y lo separa de otros componentes/elementos. Crea un espacio alrededor del componente para influir en su posición y el diseño del contenido circundante. Establezca los valores de los márgenes en píxeles según sus necesidades de diseño. Puede establecer el margen para todos los lados, el superior inferior, el izquierdo-derecho o cada lado del componente de forma independiente. Haga clic en los iconos Bloquear y Desbloquear para sincronizar o dessincronizar los valores de los márgenes superior-inferior e izquierdo-derecho. |
| Rellenos |
|
Elija el icono Padding para mostrar la configuración que replica el parámetro padding de CSS, que es el espacio entre el contenido de un componente o elemento y su borde. El relleno proporciona un espacio interno que puede utilizar para controlar la distancia entre el contenido y el borde del componente. Establezca los valores de relleno en píxeles según sus necesidades de diseño. Puede establecer el relleno para todos los lados, el botón superior, el lado izquierdo-derecho o cada lado del componente de forma independiente. Haga clic en los iconos Bloquear y Desbloquear para sincronizar o dessincronizar los valores de relleno superior-inferior e izquierdo-derecho. |
| Esquinas |
|
Elija el icono Esquinas para mostrar la configuración que replica el parámetro border-radius de CSS, que define el radio de las esquinas del componente o elemento. Defina el valor numérico según la curva que desee para las esquinas. Un valor de 0 (por defecto) produce una esquina cuadrada. |
Mueva el selector Borde a la derecha para habilitar las opciones de visualización de bordes y configúrelas según los criterios de diseño:
-
Para establecer el tamaño del borde (ancho de línea), haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.
-
Para establecer el estilo de borde, elija un valor de la lista de valores CSS
border-styleestándar, como Sólido, Punteado y Guiones. -
Para determinar dónde se muestra el borde, active cada casilla de verificación Posición del borde.
Botones
En la ficha Botones, puede establecer atributos diferentes (distintos del color) para elementos de botón, como el radio del borde (forma), el texto y el tamaño. Puede cambiar la configuración de cada uno de los tres ajustes preestablecidos de botón: Principal, Secundario y Terciario.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Tipo | Configuración | Descripción |
| Texto |
|
Establezca Font library en Standard o Google Fonts. A continuación, elija la familia de fuentes, el tamaño y el estilo. Elija la alineación del texto: Izquierda, Centrada, Derecha o Justificada. |
| Borde |
|
Mueva el botón de alternancia Border a la derecha para habilitar las opciones de visualización del borde del botón y configúrelas según los criterios de diseño. Establezca el tamaño del borde (ancho de línea) aumentando o disminuyendo el número de píxeles. Establezca el estilo de borde eligiendo un valor de la lista de valores CSS border-style estándar, como Sólido, Punteado y Guiones. |
| Tamaño |
|
Para la opción Altura, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. El valor predeterminado es un vacío (Automático), que ajusta el alto del botón según su contenido. Para Width, use la opción para establecer el ancho en píxeles o porcentaje. Para una anchura porcentual, utilice el control deslizante para definir el valor porcentual. El porcentaje determina el tamaño del botón en función del cuadro de contenido del bloque contenedor, que excluye el relleno y los bordes. Por ejemplo, un valor de 50 establece el ancho del botón en el 50 % del ancho del contenido del bloque que lo contiene. Para un ancho basado en píxeles, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Auto) es el valor predeterminado y ajusta el ancho del botón según su contenido. |
Divisor
En la ficha Divisor, puede establecer la configuración del estilo de línea y del contenedor para un componente divisor.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Tipo | Configuración | Descripción |
| Line |
|
Establezca el estilo de borde eligiendo un valor de la lista de valores CSS border-style estándar, como Sólido, Punteado y Guiones. |
| Tamaño de contenedor |
|
Para la opción Altura, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles del componente o elemento. Un valor vacío (Automático) es el valor predeterminado y ajusta el tamaño de la altura según su contenido (estilo de línea). Para Width, use la opción para establecer el ancho en píxeles o porcentaje. Para una anchura porcentual, utilice el control deslizante para definir el valor porcentual. El porcentaje determina el ancho del elemento en función del cuadro de contenido del bloque contenedor. Por ejemplo, un valor de 50 establece el ancho del divisor en el 50 % del ancho del contenido del bloque que lo contiene. Para un ancho basado en píxeles, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Auto) es el valor predeterminado y ajusta el ancho del divisor según su contenido. |
| Alineación |
|
Elija la alineación horizontal dentro del bloque contenedor: Izquierda, Centrada o Derecha. |
Cuadrícula
En la ficha Cuadrícula, puede controlar los huecos de columna y fila de un elemento de cuadrícula:
-
Espacio entre columnas: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles del espacio entre las columnas de la cuadrícula. O bien, puede introducir un número en el campo.
-
Espacio de filas: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles del espacio entre las filas de la cuadrícula. O bien, puede introducir un número en el campo.
Editar una temática
Puede editar una temática con el mismo flujo de trabajo y las mismas herramientas que utiliza al crearla. La diferencia es que usted selecciona la ficha Mis temas y selecciona el tema personalizado que desea cambiar.
Utilice el carril de la derecha para navegar por las diferentes pestañas y cambiar la configuración del tema:
Los elementos visuales mostrados cambian a medida que cambia la configuración. Si el resultado en el lienzo no es el deseado, puede hacer clic en el icono Deshacer (
Una vez completados los cambios del tema, haz clic en Guardar.
Administrar temáticas personalizadas
Puede administrar las temáticas personalizadas utilizando el mismo flujo de trabajo y herramientas que utiliza al crear una temática. La diferencia es que seleccionas la pestaña Mis temáticas y administras tus temáticas dentro de la lista mostrada.
Si tiene una lista grande de temáticas personalizadas, use el campo Buscar y otros filtros para reducir la lista mostrada. A medida que administra la lista de temáticas disponibles, puede editar, eliminar o duplicar una temática personalizada en cualquier momento.
Editar una temática
-
Seleccione el tema que desee cambiar y haga clic en Editar en la parte superior derecha.
-
Utilice la navegación de la derecha para utilizar las diferentes pestañas de estilo y cambiar la configuración del tema:
Los elementos visuales mostrados cambian a medida que cambia la configuración. Si el resultado en el lienzo no es el deseado, puede hacer clic en el icono Deshacer en la parte inferior del carril derecho. Haga clic en el icono Rehacer para volver a aplicar el cambio.
-
Una vez completados los cambios del tema, haz clic en Guardar.
Eliminar o duplicar una temática
Cuando encuentre el tema, haga clic en el icono Menú más (…) en la parte inferior derecha de la tarjeta del tema y elija la acción que desee realizar:
-
Duplicado: elija esta acción para duplicar el tema. El nuevo tema es idéntico a Copia de anexada al nombre del original. Puede cambiar el nombre cuando edite el tema.
-
Eliminar - Elija esta acción para eliminar el tema personalizado. En el cuadro de diálogo de confirmación, haga clic en Eliminar.
note note NOTE La eliminación de la temática no afecta a ningún correo electrónico o plantilla de correo electrónico donde ya se haya aplicado.
Uso de una temática para la creación de contenido de correo electrónico use-email-theme
Al crear un nuevo correo electrónico o plantilla de correo electrónico, puede elegir utilizar un tema de marca que optimiza el proceso de creación de contenido y garantiza que el diseño se ajuste a los estándares definidos. Para un nuevo fragmento, también puede aplicar una temática antes de guardar el fragmento. El fragmento permanecerá en modo de tema a partir de ese momento y es compatible con la adición a correos electrónicos y plantillas de correo electrónico que también están en modo de tema.
-
Seleccione una de las siguientes acciones:
-
Seleccione una plantilla de correo electrónico que incorpore un tema (creado en Modo de tema). La temática específica de cada plantilla se aplica automáticamente.
-
Use la opción Diseñar desde cero y seleccione Usar temas para comenzar con un tema de estilo predefinido.
note important IMPORTANT Si elige el modo Estilo manual, debe restablecer el diseño de correo electrónico para aplicar un tema. Si elige el modo Temas, solo los fragmentos que también se crean en el modo Temas están disponibles para agregar al contenido del correo electrónico.
-
-
En el espacio de diseño del correo electrónico, haga clic en el icono Temas (
Se muestra la temática predeterminada o la temática aplicada a la plantilla. Puede cambiar entre las variantes de color de esta temática.
-
Haga clic en la flecha situada junto a la temática mostrada para ver la lista de temáticas personalizadas y de Adobe disponibles.
-
Haz clic en Mis temas y selecciona tu tema personalizado.
-
Haga clic fuera de la lista.
La temática personalizada recién seleccionada aplica los estilos a todos los componentes de correo electrónico del lienzo. Puede alternar entre las variantes de color.
-
Si necesita anular los estilos del tema de un componente seleccionado, haga clic en el icono Desbloquear estilos del componente (
En el cuadro de diálogo de confirmación, haga clic en Desbloquear.
Seleccione la ficha Estilos en el panel derecho para cambiar la configuración del componente.
Cambiar el tema del contenido del correo electrónico
Para un correo electrónico o una plantilla de correo electrónico creados en Modo de tema, puede cambiar el tema en cualquier momento. El contenido del correo electrónico permanece sin cambios, pero los estilos se actualizan para reflejar la nueva temática.
-
Abra el correo electrónico o la plantilla de correo electrónico en el espacio de diseño.
-
Haga clic en el icono Temas (
El tema aplicado se muestra en el panel derecho.
-
Haga clic en la flecha situada junto a la temática mostrada para ver la lista de temáticas personalizadas y de Adobe disponibles.
-
Seleccione otra temática.
-
Haga clic fuera de la lista.
La temática seleccionada aplica los estilos a todos los componentes de correo electrónico del lienzo. Puede alternar entre las variantes de color.