Creación de fragmentos
Después de crear un fragmento, use el espacio de diseño visual para crear la estructura y los componentes de contenido del fragmento.
Añadir estructura y contenido design-fragment
-
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.
note tip 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. {width="800" modal="regular"}
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.
Para obtener más información acerca de cómo usar y dar formato a estos componentes, vea Componentes de estructura.
-
Expanda la sección Contenido y agregue tantos componentes de contenido como necesite a uno o más componentes de estructura.
- Contenedor
- Botón
- Texto
- Divisor
- Imagen
- Social
- Formulario (solo páginas de aterrizaje)
-
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.
-
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 add-assets
En el espacio de diseño visual, seleccione el icono Assets (
) en la barra de navegación izquierda para examinar y seleccionar recursos de imagen de la biblioteca de recursos Marketo Optimizer.
Para ver los pasos para seleccionar, reemplazar o cargar recursos de imagen, consulte Usar recursos para la creación de contenido.
Desplazamiento por las capas, la configuración y los estilos navigate-layers-settings-styles
A medida que trabaja con el contenido en el espacio de diseño visual, puede acceder a los componentes, columnas y elementos de contenido mediante el árbol de navegación. Haga clic en el icono Árbol de navegación (
) en la parte izquierda para mostrar el árbol.
{width="800" modal="regular"}
En el siguiente ejemplo se describen los pasos para ajustar el relleno y la alineación vertical dentro de un componente de estructura con columnas.
-
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.
-
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.
-
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.
-
-
Si es necesario, repita estos pasos para ajustar la alineación y el relleno de las demás columnas del componente.
-
Guarde los cambios.
Personalización del contenido personalize-content
Marketo Optimizer utiliza la sintaxis de Handlebars para la personalización. Los tokens se sustituyen en el momento del envío con valores de los datos de perfil de cada destinatario.
Para agregar personalización :
- Seleccione el componente de texto y haga clic en el icono Agregar personalización (
- En el cuadro de diálogo de personalización, examine el árbol de esquema de la izquierda y seleccione un atributo de perfil. El editor inserta la expresión Handlebars correspondiente; por ejemplo,
{{profile.firstName}}. - Agregue un valor de reserva para controlar los datos que faltan, si es necesario; por ejemplo,
{{profile.firstName | default: "there"}}. - Haga clic en Confirmar o Insertar. La expresión aparece en línea en el campo.
Para obtener más información sobre las herramientas y la sintaxis del editor de expresiones, consulte Editor de Personalization.
Editar seguimiento de URL vinculadas edit-linked-url-tracking
El panel de seguimiento de vínculos proporciona una vista centralizada en la que puede localizar fácilmente cada dirección URL en el contenido. Haga clic en el icono Vínculos (
) que aparece a la izquierda para mostrar todas las direcciones URL vinculadas en el contenido. Son los vínculos dentro de los componentes de texto, botón o imagen.
Para definir el seguimiento de un vínculo de contenido enumerado, haga clic en el icono Editar (
) y modifique el Tipo de seguimiento o Etiqueta.