Trabajar con el diseñador web

Última actualización: 29 de octubre de 2024
  • Temas:

Creado para:

  • Principiante
  • Usuario

En Journey Optimizer, la creación web visual funciona con la extensión de explorador Adobe Experience Cloud Visual Helper Chrome. Más información

CAUTION
Para poder tener acceso y crear páginas web en la interfaz de usuario de Journey Optimizer, asegúrese de cumplir los requisitos previos enumerados en esta sección.

Comience a crear su experiencia web

Para empezar a crear la experiencia web con el diseñador web visual, siga los pasos a continuación.

CAUTION
El SDK web de Adobe Experience Platform debe incluirse en la página web. Más información

  1. En la pantalla Editar contenido, haga clic en Editar página web para abrir el diseñador web.

    NOTE
    Si intenta cargar un sitio web que no se puede cargar, aparece un mensaje sugiriendo que instale la extensión de explorador Ayuda de edición visual. Vea algunas sugerencias para solucionar problemas en esta sección.
    También puede editar el contenido web sin cargar el editor visual. Para ello, anule la selección de la opción Editor visual para usar el modo de edición no visual en su lugar. Más información

  2. Una vez en el diseñador web, seleccione cualquier elemento del lienzo, como imagen, botón, párrafo, texto, contenedor, encabezado, vínculo, etc. Más información

  3. Para editar un elemento, puede utilizar:

    • Menú contextual para editar su contenido, diseño, inserción de vínculos o personalización, etc.

    • Los iconos de la parte superior del panel derecho para editar, duplicar, eliminar u ocultar cada elemento.

    • Panel derecho que cambia dinámicamente según el elemento seleccionado. Por ejemplo, puede editar el fondo, la tipografía, el borde, el tamaño, la posición, el espaciado, los efectos o los estilos en línea de un elemento.

NOTE
El diseñador de contenido web es similar al diseñador de correo electrónico. Más información sobre diseñar contenido con Journey Optimizer.

Una vez editado el contenido web, puede administrar las modificaciones. Más información

Uso de componentes

  1. En el panel Componentes de la izquierda, seleccione un elemento. Puede añadir los siguientes componentes a la página web y editarlos según sea necesario:

    • Divisor
    • HTML
    • Imagen
    • Encabezado: El uso de este componente es similar al uso del componente Text en el diseñador de correo electrónico. Más información
    • Párrafo: el uso de este componente es similar al uso del componente Texto en el diseñador de correo electrónico. Más información
    • Vínculo

  2. Pase el ratón sobre la página y haga clic en el botón Insertar antes o Insertar después para anexar el componente a un elemento existente de la página.

    NOTE
    Para anular la selección de un componente, haga clic en el botón ESC en el titular azul contextual que se muestra en la parte superior del lienzo.

  3. Edite el componente según sea necesario directamente en el contenido de la página.

  4. Ajuste los estilos que se muestran en el panel contextual de la derecha, como fondo, color del texto, borde, tamaño, posición, etc. - según el componente seleccionado.

Adición de personalización

Para añadir personalización, seleccione un contenedor y seleccione el icono de personalización de la barra de menús contextual que se muestra. Añada los cambios con el editor de personalización. Más información

En esta sección se detallan las distintas formas de desplazarse por el diseñador web. Para ver y administrar las modificaciones agregadas a su experiencia web, vea esta sección.

  1. Seleccione cualquier elemento del lienzo.

  2. Haga clic en el botón Expandir/contraer rutas en la parte inferior izquierda de la pantalla para mostrar rápidamente información sobre el elemento seleccionado.

  3. Cuando pasa el ratón por encima de las rutas de exploración, el elemento correspondiente se resalta en el editor.

  4. Puede navegar fácilmente a cualquier elemento principal, del mismo nivel o secundario dentro del editor visual.

Cambiar al modo Examinar

Puede cambiar del modo predeterminado Diseño al modo Examinar con el botón dedicado.

Desde el modo Examinar, puede navegar a la página exacta desde la configuración seleccionada que desee personalizar.

Resulta especialmente útil cuando se tratan páginas que están detrás de la autenticación o que no están disponibles desde el principio en una dirección URL determinada. Por ejemplo, podrá autenticarse, navegar a la página de su cuenta o a la página de su carro de compras y, a continuación, cambiar al modo Diseño para realizar los cambios en la página deseada.

El uso del modo Examinar también le permite navegar por todas las vistas del sitio web al crear aplicaciones de una sola página. Más información

Cambiar el tamaño del dispositivo

Puede cambiar el tamaño del dispositivo de visualización del diseñador web a un tamaño predefinido como Tablet o horizontal móvil, o definir un tamaño personalizado introduciendo el número deseado de píxeles.

También puede cambiar el enfoque del zoom: de 25% a 400%.

La capacidad de cambiar el tamaño del dispositivo está diseñada para sitios adaptables que se renderizan bien en varios dispositivos, ventanas y tamaños de pantalla. Los sitios adaptables se ajustan y adaptan automáticamente a cualquier tamaño de pantalla, incluidos escritorios, portátiles, tabletas o teléfonos móviles.

CAUTION
Puede editar una experiencia web con un tamaño de dispositivo específico. Sin embargo, siempre que los selectores sean los mismos, estos cambios se aplican a todos los tamaños y dispositivos, no solo al tamaño del dispositivo en el que está trabajando. Del mismo modo, si edita una experiencia en la vista de escritorio normal, los cambios se aplican a todos los tamaños de pantalla, no solo a la vista de escritorio.
Actualmente, Journey Optimizer no admite cambios de página específicos de tamaño de dispositivo. Esto significa que, por ejemplo, si tiene un sitio web móvil independiente con otra estructura de sitio, debe realizar los cambios específicos del sitio móvil en una campaña diferente.

Vídeo explicativo

El siguiente vídeo muestra cómo crear una experiencia web con el diseñador web en Journey Optimizer campañas.

video poster
Página anteriorCreación de experiencias web
Página siguienteUtilizar el editor no visual

Journey Optimizer