[Beta]{class="badge informative" title="Actualmente, esta función está en versión beta limitada"}
Diseño de la página de destino
Después de crear una página de aterrizaje, use el espacio de diseño visual para crear los componentes estructurales y de contenido en su página.
Añadir estructura y contenido structure-content-landing-page
-
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. 
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.
-
Expanda la sección Contenido y agregue tantos componentes de contenido como necesite a uno o más componentes de estructura.
-
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 CSS personalizado
Puede agregar su propio CSS personalizado directamente en el espacio de diseño de la página de aterrizaje. Utilice CSS personalizado para aplicar un estilo avanzado y específico, para una mayor flexibilidad y control sobre el aspecto del contenido. Se recomienda añadir este estilo de nivel superior antes de incluir componentes como imágenes, botones y texto.
Con al menos un componente de contenido en el lienzo, selecciona el componente Cuerpo en el árbol de navegación izquierdo para acceder al editor CSS personalizado.
-
En la ficha Estilos que se muestra a la derecha, haga clic en Agregar CSS personalizado.
note note NOTE El botón Agregar CSS personalizado solo está disponible cuando se selecciona el componente Cuerpo. Sin embargo, puede aplicar estilos CSS personalizados a todos sus componentes. El editor emergente Agregar CSS personalizado se muestra con comentarios de código de marcador de posición.
-
Introduzca su código CSS en el editor.
Asegúrese de que CSS personalizado es válido y sigue la sintaxis adecuada. Si el CSS introducido no es válido, se muestra un mensaje de error y no se puede guardar el CSS. Para obtener más información, consulte Validez de CSS.
-
Haga clic en Guardar para guardar el CSS personalizado.
La hoja de estilos personalizada se aplica al contenido existente. Puede comprobar que el CSS personalizado se aplica según sus necesidades. Para obtener información sobre cómo realizar cambios y ajustar la aplicación de hojas de estilos, vea Solución de problemas.
Añadir recursos
En el editor de contenido visual, seleccione el icono Marketo Engage Assets (
-
Añada un nuevo recurso arrastrando y soltando el recurso de imagen en un componente de estructura.
-
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.
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.
Añadir formularios
Un formulario es un componente reutilizable al que se puede hacer referencia en varias páginas de aterrizaje y plantillas de páginas de aterrizaje en Adobe Journey Optimizer B2B edition. Es un bloque de campos y un botón de envío que se pueden crear previamente e insertar rápidamente para que el diseño de la página sea más rápido y coherente.
En el siguiente ejemplo se describen los pasos para agregar un formulario al diseñar la página.
-
En la sección Contenido, arrastre el elemento Formulario y suéltelo en un componente estructural en el espacio de diseño de la página.
note tip TIP Para agregar el formulario de modo que ocupe todo el diseño horizontal dentro del correo electrónico, agregue una estructura de columna 1:1 y, a continuación, arrastre y suelte el formulario en él. -
Haga clic en el icono Formulario en la barra de herramientas de componentes o use las propiedades de Incrustar formulario a la derecha para seleccionar el formulario publicado.
-
Si desea anular el tipo de seguimiento predeterminado del formulario, cambie la configuración según los requisitos de la página o plantilla.
Esto también se conoce como página de agradecimiento por el formulario y esta configuración determina qué sucede cuando un visitante envía el formulario:
-
Permanecer en la página: elija esta opción para mantener al visitante en la misma página cuando se envíe el formulario.
-
Página de aterrizaje: elija esta opción para seleccionar cualquier página de aterrizaje de Journey Optimizer B2B edition o Marketo Engage como seguimiento.
-
Dirección URL externa: elija esta opción para especificar cualquier dirección URL como página de seguimiento. Una vez que el visitante envía el formulario, el explorador carga la dirección URL designada.
note tip TIP Si desea que el usuario utilice el formulario para descargar un archivo, puede especificar una URL para el archivo alojado. Con esta configuración, el botón de envío funciona como un botón de descarga.
-
-
Si desea limitar la visualización del formulario por tipo de dispositivo, cambie la configuración de Opciones de visualización:
- Mostrar solo en dispositivos de escritorio
- Mostrar solo en dispositivos móviles
- Mostrar en todos los dispositivos (predeterminado)
-
Si es necesario, seleccione la ficha Estilos en el panel derecho para establecer los márgenes del formulario dentro de la página.
Desplazamiento por las capas, la configuración y los estilos
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 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
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.
-
Seleccione el componente de texto y haga clic en el icono Agregar personalización de la barra de herramientas.
Esta acción abre el diálogo Editar Personalization.
-
Haga clic en + o … para agregar un token al espacio en blanco.
-
Haga clic en Guardar.
Editar seguimiento de URL vinculadas
-
Haga clic en el icono Vínculos (
-
Si es necesario, haz clic en el icono Editar (
También puede agregar Etiquetas para un vínculo.
Guarde el trabajo
Haga clic en Guardar en cualquier momento para guardar el borrador de la página de aterrizaje.
Puede seguir editando en la página de borrador. Cuando esté listo para mostrar la página y permitir su vinculación en un mensaje de correo electrónico o SMS, puede publicar la página.
Ver opciones
Aproveche las opciones de vista y validación de contenido disponibles en el espacio de diseño visual.
-
Acercar/alejar el contenido en las opciones de zoom preestablecidas.
-
Cambie la visualización del contenido en Escritorio, Móvil o Solo texto/Texto sin formato.
- Haz clic en el icono Ver para obtener una vista previa del contenido entre dispositivos.
- Seleccione uno de los dispositivos predeterminados o introduzca dimensiones personalizadas para obtener una vista previa del contenido.
Más opciones
En el menú Más… de la parte superior del espacio de diseño visual, puede realizar las siguientes acciones:
- Restablecer página de aterrizaje: haga clic en esta opción para borrar el lienzo de diseño visual de una pizarra en blanco y reiniciar la creación del contenido de la página.
- Cambia tu diseño - Vuelve a la página de inicio de Crear tu página de aterrizaje principal. Desde allí, puede elegir otra plantilla para reiniciar el proceso de diseño o elegir diseñar la página desde cero en un lienzo en blanco.
- Exportar HTML: descargue el contenido del lienzo visual en su sistema local en formato HTML empaquetado como archivo zip.