Creación de fragmentos

Última actualización: 9 de abril de 2025

Después de crear un fragmento, use el editor visual para crear los componentes estructurales y de contenido en el fragmento.

Añadir estructura y contenido

  1. Para iniciar el diseño de contenido, arrastre un elemento desde Structures y suéltelo en el lienzo.

    Agregue tantos elementos de Structures como necesite y edite la configuración de cada uno en el panel de la derecha.

    TIP
    Seleccione el componente n:n column para definir el número de columnas que desee (entre tres y 10). También puede definir el ancho de cada columna moviendo las flechas debajo de la columna.

    Arrastre una estructura al lienzo y ajuste la configuración

    Cada tamaño de columna no puede ser inferior al 10 % de la anchura total del componente de estructura. Solo se pueden eliminar columnas vacías.

  2. Expanda la sección Contenido y agregue tantos elementos como necesite a uno o más componentes de estructura.

    Arrastre un elemento de contenido al lienzo y ajuste la configuración

  3. Si es necesario, puede realizar personalizaciones adicionales para cada componente en las fichas Configuración o Estilo.

    Por ejemplo, puede cambiar el estilo del texto, el relleno o el margen de cada componente.

  4. Para agregar contenido condicional y adaptar el contenido a los perfiles de destino según las reglas condicionales, seleccione un componente de contenido y haga clic en el icono Habilitar contenido condicional de la barra de herramientas de componentes.

    Para obtener más información, consulte Contenido condicional.

Añadir recursos

En el editor de contenido visual, seleccione el icono Marketo Engage Assets ( Marketo Engage Assets icon ) o el icono Experience Manager Assets ( AEM Assets ) en la barra de navegación izquierda. Desde el selector de recursos, puede seleccionar directamente los recursos almacenados en la biblioteca de origen.

NOTE
Si se le proporciona Adobe Experience Manager as a Cloud Services, tendrá acceso a los repositorios tanto para Marketo Engage Design Studio como para Adobe Experience Manager Assets as a Cloud Service cuando su cuenta de usuario tenga los permisos necesarios. Estos repositorios son independientes y no están sincronizados. Puede utilizar recursos de imagen de cualquier origen.

  • Añada un nuevo recurso arrastrando y soltando el recurso de imagen en un componente de estructura.

    Arrastre un recurso de Marketo Engage al lienzo y ajuste la configuración

  • Reemplace un recurso de imagen existente seleccionándolo en el lienzo y haciendo clic en Seleccionar un recurso en las herramientas de origen de imagen.

    Seleccione un recurso de la biblioteca de origen

Para obtener más información sobre el uso de recursos del tipo de origen, consulte Uso de recursos para la creación de contenido.

Desplazamiento por las capas, la configuración y los estilos

A medida que trabaja con el contenido en el diseñador visual, puede tener acceso a las capas, contenedores y elementos mediante el árbol Navegación. Haga clic en el icono Navegación para mostrar el árbol a la izquierda del lienzo.

Acceder a las capas de contenido

En el ejemplo siguiente se describen los pasos para ajustar el relleno y la alineación vertical dentro de un componente de estructura compuesto por columnas.

  1. Seleccione la columna en el componente de estructura directamente en el lienzo o mediante el árbol de navegación que se muestra a la izquierda.

  2. En la barra de herramientas de la columna, haga clic en la herramienta Seleccionar una columna y elija la que desee editar.

    También puede seleccionarlo en el árbol de estructura. Los parámetros editables de esa columna se muestran en las fichas Configuración y Estilos de la derecha.

    Componentes de columna mostrados en el diseñador visual

  3. Para editar las propiedades de la columna, haga clic en la ficha Estilos de la derecha y cámbielas según sus necesidades:

    • Para Background, cambie el color de fondo según sea necesario.

      Desactive la casilla de verificación para un fondo transparente. Habilite la configuración de imagen de fondo para usar una imagen como fondo en lugar de un color sólido.

    • Para Alignment, selecciona el icono Top, Middle o Bottom.

    • Para Padding, defina el relleno para todos los lados.

      Seleccione relleno diferente para cada lado si desea ajustar el relleno. Haga clic en el icono Bloquear para interrumpir la sincronización.

    • Expanda la sección Avanzado para definir estilos en línea para la columna.

    Cambiar los estilos de la columna seleccionada

  4. Si es necesario, repita estos pasos para ajustar la alineación y el relleno de las demás columnas del componente.

  5. Guarde los cambios.

Personalizar contenido

Journey Optimizer B2B edition utiliza una sintaxis simple en línea que le permite crear expresiones con contenido personalizado entre llaves dobles {}. Puede agregar varias expresiones en el mismo contenido o campo sin restricciones.

Ejemplos:

  • Hello {{profile.person.name.firstName}} {{profile.person.name.lastName}}

  • Hello {{profile.person.name.fullName}}

Al procesar el contenido, Journey Optimizer B2B edition reemplaza la expresión con los datos contenidos en la base de datos del Experience Platform. Así, el primer ejemplo se convierte en Hello John Doe.

En el siguiente ejemplo se describen los pasos para personalizar el contenido mediante atributos de cliente potencial/cuenta y tokens del sistema.

  1. Seleccione el componente de texto y haga clic en el icono Agregar personalización de la barra de herramientas.

    Haga clic en el icono Personalizar

    Esta acción abre el diálogo Editar Personalization.

  2. Haga clic en + o … para agregar un token al espacio en blanco.

    Construir texto personalizado con tokens

  3. Haga clic en Guardar.

Habilitar la personalización de fragmentos

Cuando un autor agrega un fragmento a un correo electrónico o plantilla de correo electrónico, el contenido del fragmento está bloqueado de forma predeterminada. Cualquier cambio en el fragmento publicado se propaga automáticamente a todos los recursos de contenido donde se utiliza el fragmento. Al designar un parámetro para un componente del fragmento como editable, el autor del correo electrónico o la plantilla puede especificar un valor de campo personalizado que sea específico para sus necesidades. Este indicador de personalización se limita a los componentes visuales de imagen, texto y botones.

Por ejemplo, si diseña un banner reutilizable que incluya un botón en el que se puede hacer clic, puede designar el parámetro de URL del botón como editable. Los autores de correo electrónico pueden utilizar una dirección URL más específica para su campaña de correo electrónico. Con estos campos personalizables, los especialistas en marketing pueden administrar y personalizar el contenido reutilizable sin necesidad de crear bloques de contenido completamente nuevos o interrumpir las actualizaciones heredadas del fragmento original.

  1. En el editor de contenido visual, seleccione la imagen, el texto o el elemento de botón donde desee habilitar la personalización.

  2. En los detalles del componente a la derecha, seleccione la pestaña Campos editables.

  3. Haga clic en la opción Habilitar edición y establezca los campos editables.

    Habilitar campos editables para un componente de imagen de fragmento{width="700" zoomable="yes"}

    Puede habilitar la personalización para los campos mostrados, que dependen del tipo de componente y de los parámetros definidos en el fragmento.

    Cambie el conmutador a un estado habilitado para cada campo donde desee permitir la personalización.

  4. Haga clic en Información general para revisar todos los campos editables y sus valores predeterminados.

    Revisar los campos editables y sus valores predeterminados{width="700" zoomable="yes"}

  5. Guarde los cambios.