En esta página: Aprenda a crear su experiencia web con el diseñador web visual de Adobe Journey Optimizer, incluyendo la selección y edición de elementos, la adición de componentes y personalización, la navegación por el lienzo y el cambio del tamaño del dispositivo.
En Journey Optimizer, la creación web visual funciona con la extensión de explorador Chrome Adobe Experience Cloud Visual Helper. Más informació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.
-
En la pantalla Editar contenido, haga clic en Editar página web para abrir el diseñador web.
note 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 -
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
-
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.
-
Una vez editado el contenido web, puede administrar las modificaciones. Más información
Uso de componentes content-components
-
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 Designer de correo electrónico. Más información
- Párrafo: El uso de este componente es similar al uso del componente Texto en el Designer de correo electrónico. Más información
- Vínculo
-
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 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. -
Edite el componente según sea necesario directamente en el contenido de la página.
-
Ajuste los estilos que se muestran desde 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
También puede usar Decisioning para entregar la oferta más relevante a cada visitante. En el editor de personalización, vaya a Directivas de decisión y seleccione Insertar sintaxis para agregar una directiva de decisión a su componente web. Más información
Navegar por el diseñador web navigate-web-designer
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.
Usar rutas breadcrumbs
-
Seleccione cualquier elemento del lienzo.
-
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.
-
Cuando pasa el ratón por encima de las rutas de exploración, el elemento correspondiente se resalta en el editor.
-
Puede navegar fácilmente a cualquier elemento principal, del mismo nivel o secundario dentro del editor visual.
Cambiar al modo Examinar browse-mode
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 change-device-size
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.
Vídeo práctico video
El siguiente vídeo muestra cómo crear una experiencia web con el diseñador web en Journey Optimizer campañas.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to author a web experience with the Journey Optimizer visual web designer, including selecting and editing elements, adding components and personalization, navigating the canvas, and changing the device size.
Intents:
- Open the web designer from the Edit content screen to author a web experience
- Select and edit elements on the canvas using the contextual menu, right panel icons, and dynamic right panel
- Add and edit components such as Divider, HTML, Image, Heading, Paragraph, and Link
- Add personalization to a container using the personalization editor
- Navigate the designer with breadcrumbs and Browse mode
- Change the device size and zoom focus of the designer display
Glossary:
- Web designer: The Journey Optimizer visual web authoring editor, powered by the Adobe Experience Cloud Visual Helper Chrome browser extension (product-specific)
- Design mode: The default web designer mode for performing changes on a page (product-specific)
- Browse mode: A mode used to navigate to the exact page from the selected configuration you want to personalize, useful for pages behind authentication or not available at a certain URL from the start (product-specific)
- Breadcrumbs: A control that displays information about the selected element and lets you navigate to any parent, sibling, or child element within the visual editor (product-specific)
- Non-visual edition mode: An alternative editing mode used by unselecting the Visual editor option to edit web content without loading the visual editor (product-specific)
Guardrails:
- Visual web authoring is powered by the Adobe Experience Cloud Visual Helper Chrome browser extension, and the prerequisites must be followed to access and author web pages.
- The Adobe Experience Platform Web SDK must be included in your web page.
- If a website fails to load, a message suggests installing the Visual Editing Helper browser extension.
- Changes made at a specific device size apply to all sizes and devices as long as the selectors are the same; editing in normal desktop view also applies to all screen sizes.
- Journey Optimizer does not currently support device size-specific page changes; changes for a separate mobile website with a separate structure should be made in a different campaign.
- The zoom focus can be changed from 25% to 400%.
Terminology:
- Canonical name: Web designer — Acronym: n/a — variants: visual web designer, web content designer, visual editor
- Synonyms: “web designer” = “visual web designer”
- Do not confuse: “Design mode” (default mode for performing changes) ≠ “Browse mode” (navigate to the exact page to personalize)
FAQ:
- Q: How do I open the web designer? — From the Edit content screen, click Edit web page.
- Q: Can I edit web content without the visual editor? — Yes; unselect the Visual editor option to use the non-visual edition mode instead.
- Q: What components can I add to a web page? — Divider, HTML, Image, Heading, Paragraph, and Link.
- Q: Do device-size changes apply only to that device? — No; as long as the selectors are the same, changes apply to all sizes and devices. Journey Optimizer does not currently support device size-specific page changes.
- Q: When should I use Browse mode? — When dealing with pages behind authentication or not available at a certain URL from the start, and to navigate through all the views of a website when authoring single-page applications.