DocumentaciónJourney OptimizerGuía de Journey Optimizer

Uso de los componentes de contenido del diseñador de correo electrónico content-components

Última actualización: 5 de octubre de 2026

Creado para:

  • Intermedio
  • Principiante
  • Usuario

En esta página: Aprenda a agregar y configurar componentes de contenido de Designer de correo electrónico como botones, texto, imágenes, divisores, HTML, vínculos sociales, decisiones de ofertas, cuadrículas y tablas para crear el contenido de correo electrónico.

style
shade-box

Al crear el contenido del correo electrónico, Componentes de contenido le permite personalizar aún más el correo electrónico con componentes sin procesar que puede editar una vez colocados en un correo electrónico.

Puede añadir tantos componentes de contenido como necesite dentro de uno o más componentes de estructura, que definen el diseño del correo electrónico.

NOTE
La Ley de accesibilidad europea estipula que todas las comunicaciones digitales deben ser accesibles. Asegúrese de seguir las directrices específicas que se enumeran en esta página al aprovechar los componentes de contenido para diseñar correos electrónicos en Journey Optimizer, como el uso de fuentes accesibles, formatos legibles y proporcionar texto alternativo para imágenes.

Añadir componentes de contenido add-content-components

Para añadir componentes de contenido al correo electrónico y ajustarlos a sus necesidades, siga los pasos a continuación.

  1. En el Diseñador de correo electrónico, utilice un contenido existente o arrastre y suelte Componentes de estructura en el contenido vacío para definir el diseño del correo electrónico. Descubra cómo

  2. Para acceder a la sección de Componentes de contenido, seleccione el botón correspondiente en el panel izquierdo del Diseñador de correo electrónico.

    Panel de componentes de contenido en el correo electrónico Designer

  3. Arrastre y suelte los componentes de contenido que desee dentro de los componentes de estructura relevantes.

    Arrastrando componentes de contenido a una estructura

    note
    NOTE
    Puede añadir varios componentes en un único componente de estructura y en cada columna de un componente de estructura.

  4. Seleccione el componente recién añadido.

  5. Ajuste los atributos y el estilo de cada componente mediante las fichas Configuración y Estilo de la derecha. Por ejemplo, puede cambiar el estilo, el relleno o el margen del texto de cada componente. Obtenga más información sobre la alineación y el relleno

    Configuración del componente de contenido y fichas de estilo

  6. Desde el menú avanzado de su componente de contenido, puede eliminar o duplicar fácilmente cualquier componente de contenido según sea necesario.

    Menú avanzado para acciones de componentes de contenido

Contenedor container

Para aplicar un estilo específico a un grupo de componentes de contenido, puede agregar un componente Contenedor y, a continuación, agregar los componentes de contenido que desee dentro de él. Esto permite aplicar un estilo distinto al contenedor, que será diferente del estilo aplicado a los componentes de contenido dentro de.

Por ejemplo, agregue el componente Contenedor y el componente Botón dentro de ese contenedor. Puede utilizar un fondo específico para el contenedor y otro para el botón.

El componente de contenedor seleccionado muestra su configuración de estilo en el correo electrónico Designer

Botón button

Utilice el componente Botón para insertar uno o varios botones en el correo electrónico y redirigir el público de correo electrónico a otra página.

  1. Haga clic en el botón recién agregado para personalizar el texto y tener acceso a las pestañas Configuración y Estilos del panel derecho de Designer de correo electrónico.

    Componente de botón seleccionado con la pestaña Configuración abierta en el correo electrónico Designer

  2. En el menú Vínculo, agregue la dirección URL a la que desee redirigir al hacer clic en el botón.

  3. Elige cómo se redirigirá tu audiencia con la lista desplegable Target:

    • Ninguna: abre el vínculo en el mismo marco en el que se hizo clic (predeterminado).
    • En blanco: abre el vínculo en una nueva ventana o pestaña.
    • Propio: abre el vínculo en el mismo marco en el que se hizo clic.
    • Principal: abre el vínculo en el marco principal.
    • Superior: abre el vínculo en todo el cuerpo de la ventana.

    Opciones de lista desplegable de destino para el componente Botón

  4. Puede personalizar aún más el botón cambiando atributos de estilo como Borde, Tamaño, Margen, etc. del panel Configuración de componentes.

Texto text

Use el componente Texto para insertar texto en el correo electrónico y ajustar el estilo (borde, tamaño, relleno, etc.) usando la ficha Estilos.

Componente de texto agregado en el Designer de correo electrónico con las pestañas Configuración y Estilos resaltadas

  1. Haga clic en el componente que acaba de agregar para personalizar el texto y tener acceso a las pestañas Configuración y Estilos en el panel derecho del Designer de correo electrónico.

  2. Cambie el texto con las siguientes opciones disponibles en la barra de herramientas:

    Barra de herramientas de formato de texto en el Designer de correo electrónico

    • Cambiar estilo de texto: aplicar negrita, cursiva, subrayado o tachado al texto.
    • Cambiar alineación: elegir entre alineación izquierda, derecha, centro o justificada para el texto.
    • Crear lista: añadir viñetas o listas numéricas al texto.
    • Definir encabezado: añadir hasta seis niveles de encabezado al texto.
    • Tamaño de fuente: seleccionar el tamaño de fuente del texto en píxeles.
    • Cambiar color de fuente: elija el color de la fuente.
    • Insertar vínculo: agregue cualquier tipo de vínculo al contenido.
    • Editar imagen: añadir una imagen o un recurso al componente de texto. Más información acerca de la administración de recursos
    • Cambiar color de fuente: elija el color de la fuente.
    • Añadir personalización: añadir campos de personalización para personalizar el contenido de los datos de perfiles. Más información sobre la personalización de contenido
    • Mostrar el código fuente: mostrar el código fuente del texto. No se puede modificar.
    • Habilitar contenido condicional: agregue contenido condicional para adaptar el contenido del componente a los perfiles de destino. Más información sobre el contenido dinámico
    • Duplicar: añadir una copia del componente de texto.
    • Eliminar: eliminar el componente de texto seleccionado del correo electrónico.

  3. Ajuste otros atributos de estilo, como el color del texto, la familia de fuentes, el borde, el relleno, el margen, etc., en la ficha Estilos.

    Pestaña Estilos del componente Texto que muestra las opciones de fuente y fondo

Divisor divider

Utilice el componente Divisor para insertar una línea divisoria y organizar el diseño y el contenido del correo electrónico.

Puede ajustar los atributos de estilo, como el color de la línea, el estilo y la altura desde las pestañas Configuración y Estilos.

Componente divisor seleccionado con su configuración de estilo en el correo electrónico Designer

Html Html

Use el componente Html para copiar y pegar las diferentes partes de su HTML existente. Esto le permite crear componentes de HTML modulares gratuitos para reutilizar contenido externo.

  1. Haga clic en el componente recién agregado y, a continuación, seleccione Mostrar el código fuente de la barra de herramientas contextual para añadir el HTML.

    Componente HTML seleccionado con la opción Mostrar código fuente resaltada

  2. Copie y pegue el código de HTML que desee agregar a su correo electrónico y haga clic en Guardar.

    Cuadro de diálogo Editar HTML que muestra el editor de código y la opción Guardar

NOTE
Para hacer que un contenido externo sea compatible con el Diseñador de correo electrónico, Adobe recomienda crear un mensaje desde cero y copiar el contenido del correo electrónico existente en los componentes.

Plantilla de Dynamic Media dynamic-media-template

Use el componente Plantilla de Dynamic Media para aprovechar medios dinámicos personalizados e interactivos en sus correos electrónicos.

Utilice este componente para insertar una plantilla de Dynamic Media de Adobe Experience Manager en el contenido del correo electrónico y editarla directamente en el editor de plantillas de Dynamic Media, sin salir de la Designer de correo electrónico. También puede cargar un archivo de PSD (Photoshop) y editarlo de forma similar a una plantilla de Dynamic Media. Más información

Componente de plantilla de Dynamic Media resaltado con la zona desplegable Agregar plantilla de Dynamic Media en el Designer de correo electrónico

Imagen image

Utilice el componente Image para insertar un archivo de imagen del equipo en el contenido del correo electrónico.

Se agregó componente de imagen con las opciones Examinar e Importar medios en el correo electrónico Designer

  1. Seleccione el componente recién añadido.

  2. En la pestaña Configuración, haga clic en Examinar para elegir un archivo de imagen de sus recursos o en Importar medios para cargar un recurso en Adobe Experience Manager Assets.

    Para obtener más información sobre Adobe Experience Manager Assets, consulte Documentación de Adobe Experience Manager Assets.

    note
    NOTE
    Para garantizar que los vínculos permanezcan activos y evitar problemas de caducidad, se recomienda utilizar Adobe Assets en lugar de depender de una dirección URL de origen para las imágenes.

  3. También puedes buscar directamente en Adobe Stock con la opción Buscar fotos de Adobe Stock.

  4. Haga clic en el componente recién agregado y configure las propiedades de la imagen:

    • Título de la imagen permite definir un título para la imagen.
    • Texto alternativo permite definir el pie de ilustración vinculado a la imagen. Esto corresponde al atributo HTML alt. Más información

    Campos de título de imagen y texto alternativo en la ficha Configuración del componente Imagen

  5. También puedes elegir Buscar fotos similares de Stock. Más información

  6. En la ficha Estilos, ajuste los demás atributos de estilo, como margen, borde, etc., o agregue un vínculo para redirigir la audiencia a otro contenido desde el panel Configuración de componentes.

Social social

Utilice el componente Social para insertar vínculos a páginas de redes sociales en el contenido del correo electrónico.

  1. Seleccione el componente recién agregado. En el campo Social de la pestaña Configuración, elija los medios sociales que desea agregar o quitar.

    Lista desplegable de selección de medios sociales para el componente Social

  2. Elija el tamaño de los iconos en el campo dedicado.

  3. Haga clic en cada uno de los iconos de medios sociales para configurar la URL a la que se redirigirá la audiencia.

    Campos de texto URL y Alt para un icono de medios sociales en el componente Social

  4. También puede cambiar los iconos de cada uno de sus medios sociales si es necesario desde su Assets.

  5. Ajuste los demás atributos de estilo, como estilo, margen, borde, etc., en la ficha Estilos.

Decisión de oferta offer-decision

Utilice el componente Decisión de oferta para insertar ofertas en los mensajes. El motor gestión de decisiones elegirá la mejor oferta para entregarla a tus clientes.

  1. Seleccione el componente recién agregado y haga clic en Agregar para seleccionar su decisión de oferta.

    Componente de decisión de oferta con el botón Agregar del correo electrónico Designer

  2. En la lista desplegable, seleccione sus ubicaciones.

  3. A continuación, seleccione la decisión de oferta que desee agregar al contenido y haga clic en Agregar.

    Cuadro de diálogo Seleccionar decisión de oferta con ubicaciones y lista de ofertas

  4. Desde la pestaña Decisión de oferta, puede obtener una vista previa de la oferta insertada o cambiarla.

Aprenda a agregar ofertas personalizadas a un correo electrónico en esta sección.

IMPORTANT
Si se realizan cambios en una decisión de oferta que se utiliza en el mensaje de un recorrido, se debe cancelar la publicación del recorrido y volver a publicarlo. Esto garantizará que los cambios se incorporen al mensaje del recorrido y que el mensaje sea coherente con las últimas actualizaciones.

Cuadrícula grid

Utilice el componente Grid para organizar el contenido en una estructura compuesta de filas y columnas, donde cada celda puede contener otros componentes de contenido.

Se agregó componente de cuadrícula con celdas vacías listas para contenido en el correo electrónico Designer {width="90%"}

  1. Al igual que el componente Contenedor, arrastre y suelte otros componentes de contenido en cada celda de la cuadrícula.

    Por ejemplo, puede agregar un componente Texto, un componente Imagen y dos componentes Botón. A continuación, puede añadir una imagen y editar el contenido de cada componente individualmente.

    Componentes de texto, imagen y botón agregados dentro de celdas de cuadrícula {width="90%"}

  2. Para ajustar la estructura de la cuadrícula, selecciónela y vaya a la pestaña Configuración del panel derecho de Designer de correo electrónico.

    La ficha Configuración de cuadrícula muestra el número de columnas, filas y opciones de espaciado {width="90%"}

  3. Puede definir cuántas columnas y filas contiene la cuadrícula, editar el espaciado entre columnas y filas y cambiar el ancho de cada columna individual en porcentaje.

    note
    NOTE
    Use la opción No apilar columnas en dispositivos móviles para conservar el diseño de la cuadrícula en dispositivos móviles en lugar de apilar columnas verticalmente.

  4. Coloque otros componentes de contenido en cada celda según sea necesario y ajuste el estilo desde la pestaña Estilos de cada componente.

Tabla table

Utilice el componente Table para estructurar el contenido en filas y columnas directamente dentro del correo electrónico, creando diseños claros y organizados sin depender de HTML personalizado.

Componente de tabla agregado debajo de una imagen en el correo electrónico Designer {width="90%"}

  1. Una vez agregado, haga clic en el componente y seleccione la pestaña Configuración en el panel derecho de Designer de correo electrónico.

  2. Desde allí, puede ajustar el número de filas y columnas de la tabla.

    La pestaña Configuración de tabla muestra las opciones de columnas, filas y filas de encabezado

  3. Use la opción Incluir fila de encabezado (habilitada de forma predeterminada) para agregar una fila de encabezado a la tabla y active la opción filas de Stripe para aplicar colores de fila alternos para mejorar la legibilidad.

  4. También puede hacer clic en las flechas correspondientes a una columna o fila directamente en la tabla y utilizar el menú contextual para agregar o eliminar una fila o columna.

    Menú contextual para agregar o eliminar filas y columnas en una tabla

  5. Ajuste otros atributos de estilo, como el color de celda, el tamaño de fuente, la alineación del texto o el color de fuente, en la ficha Estilos.

recommendation-more-help
journey-optimizer-help