Opciones del Compositor de experiencias visuales

La versión de Adobe Target Standard/Premium 25.2.1 (del 17 de febrero de 2015) presenta un Visual Experience Composer (VEC) actualizado. Este artículo explica la interfaz de usuario actualizada y sus opciones.

IMPORTANT
El(la) Visual Editing Composer actualizado(a) requiere la extensión Adobe Experience Cloud Visual Editing Helperdisponible(a) en Chrome Web Store.

El VEC se muestra cuando crea o edita una actividad existente.

Compositor de experiencias visuales (VEC)

Información general de VEC UI

Las siguientes secciones explican las opciones disponibles en el VEC actualizado para una actividad A/B Test. Las opciones varían según el tipo de actividad.

Experiences panel

El panel Experiences se muestra en el carril izquierdo del VEC.

Panel de experiencias

Puede ver, crear, cambiar el nombre o quitar experiencias mediante el panel Experiences.

Las siguientes opciones están disponibles en el panel Experiences:

  • Ver una experiencia: para ver una experiencia, haga clic en la experiencia que desee para mostrarla en el lienzo Design.
  • Agregar una experiencia: Haga clic en el icono Add ( Agregar icono ) para agregar una nueva experiencia. Configure la nueva experiencia como desee.
  • Cambiar el nombre de una experiencia: haga clic en el icono Rename ( Cambiar nombre ) para mostrar el cuadro de diálogo Rename Experience. Especifique el nuevo nombre y haga clic en Save.
  • Duplicar, eliminar o redirigir una experiencia: haga clic en el icono More Actions ( icono Más acciones ) y, a continuación, elija Duplicate, Delete o Redirect to URL.

Configuración de actividades

Haga clic en el icono Configure ( Icono de configuración ) que se muestra en la parte superior del lienzo Design para mostrar el menú de propiedades de la actividad.

Opciones de configuración de actividades

Las opciones disponibles son las siguientes:

  • Properties: asigne propiedades a la actividad o elimine propiedades de la actividad. Properties es una característica (Target Premium). Para obtener más información, consulte Permisos de usuario de Enterprise.
  • Page Delivery: incluya la misma experiencia en páginas similares del sitio. Utilice una plantilla de página para dar estructura a las páginas o, si las páginas contienen elementos similares, para probar variaciones en elementos de página de estructura similar o en todo el dominio. Para obtener más información, vea Incluir la misma experiencia en páginas similares.
  • Site Preferences: configure las preferencias de su sitio para especificar cómo Target genera los selectores CSS. Para obtener más información, consulte selectores CSS en Configurar Visual Experience Composer.
  • Agregar páginas adicionales: agregue páginas adicionales a la actividad para crear una actividad de varias páginas que le permita crear una historia en varias páginas, con un diseño que sea específico de cada página. Para obtener más información, consulte Actividad multipágina.
  • Audiencia única: use una sola audiencia para la actividad.
  • Varias audiencias: asigne varias audiencias a la actividad. Haga clic en el icono Agregar audiencias ( Agregar icono ) y, a continuación, seleccione una o varias audiencias de la lista. También puede combinar audiencias o crear una audiencia nueva desde el cuadro de diálogo Add Audiences.

Modos Design/Browse

Utilice los conmutadores Design/Browse que se muestran en la parte superior del lienzo de diseño para cambiar entre el modo de diseño y el modo de exploración.

Alternadores de diseño y exploración

Utilice el modo Browse para navegar por el sitio y elegir la vista o la página que desee actualizar. Vuelva al modo Design para agregar o editar los cambios.

Undo/Redo

Para deshacer los cambios, haga clic en el icono Undo ( Deshacer icono ).

Icono Deshacer en VEC

Para rehacer una acción, expanda el grupo de botones Deshacer/Redo y elija Redo.

Components panel

Puede agregar varios componentes a la página web y editarlos según sea necesario mediante el nuevo panel Components.

Panel de componentes

NOTE
Si ve el panel Modifications en esta área en lugar del panel Components, haga clic en el icono Show Components ( Mostrar icono de componentes ). El icono Show Components ( Mostrar icono de componentes ) y el icono Show Modifications ( Mostrar panel de modificaciones ) actúan como alternadores para mostrar las opciones adecuadas.

Para añadir un componente nuevo a una experiencia:

  1. Haga clic en el componente que desee añadir para resaltarlo.

    Los componentes disponibles se agrupan en contenedores lógicos:

  2. Arrastre el componente sobre un elemento de página existente en el lienzo Design.

  3. Seleccione esta opción para insertar el componente antes de o después del elemento seleccionado.

    En comparación con la versión anterior del VEC, no se puede reemplazar un elemento seleccionado con un componente.

Modifications panel

Para abrir el panel Modifications, haga clic en el icono Show Modifications ( Mostrar panel de modificaciones ) en el panel Components.

Panel de modificaciones

NOTE
El icono Show Components ( Mostrar icono de componentes ) y el icono Show Modifications ( Mostrar panel de modificaciones ) actúan como alternadores para mostrar las opciones adecuadas.

El panel Modifications muestra todos los cambios realizados en su página en Visual Experience Composer (VEC) y le permite realizar cambios adicionales (como selector de CSS, mbox y código personalizado).

Haga clic en el icono More Options ( icono Más acciones ) en el encabezado del panel para agregar una modificación, eliminar todas las modificaciones o eliminar todas las modificaciones no válidas. Haga clic en Select para realizar operaciones masivas: Apply to All Pages o Delete.

Haga clic en el icono More Options ( icono Más acciones ) junto a cada modificación para ver su información, eliminar la modificación o aplicar la modificación a más vistas.

Design lienzo

El lienzo Design le permite seleccionar ventanillas móviles, incluidas las de ajuste a pantalla, Desktop, Tablet, Mobile Landscape y Mobile Portrait. De manera predeterminada, el lienzo ajusta la página a la pantalla junto con las ventanillas móviles definidas en la sección Administración.

Opciones de ventanilla

También puede acercar o alejar la vista haciendo clic en el icono apropiado ( Icono de acercar o icono de alejar ).

Al hacer clic en un elemento de página en el lienzo Design, un menú muestra las opciones disponibles para ese tipo de elemento. Además, se muestra una ruta DOM en la parte inferior de la página que permite navegar fácilmente por la estructura de la página.

Las distintas acciones de Visual Experience Composer (VEC) se agrupan en opciones de menú apropiadas para que su trabajo sea más rápido y eficiente:

Menú Opciones de VEC

NOTE
Las opciones disponibles dependen del tipo de actividad y del elemento que esté creando o editando. Para obtener más información sobre la edición de imágenes y ofertas en una actividad A/B Test, consulte Editar elementos usando el lienzo Design a continuación.

Properties panel

El panel Properties le permite cambiar las propiedades de los elementos seleccionados en la página, ya sean estos elementos HTML u objetos específicos de Target, como recomendaciones u ofertas.

Panel de propiedades

Haga clic en los iconos de la parte superior del panel para editar el código HTML o eliminar, duplicar u ocultar elementos. Los cambios aparecerán en el panel Modifications.

El panel Properties se puede contraer en el carril derecho. Haga clic en el icono Show/Hide Properties ( icono Propiedades ) a la derecha del panel para contraer o mostrar el panel Properties.

Editar elementos utilizando el lienzo Design design

Las secciones siguientes muestran cómo editar imágenes y texto en el lienzo Design. El lienzo Diseño, junto con los paneles Componentes, Modificaciones y Propiedades, le proporcionan potentes herramientas que le permiten crear fácilmente experiencias para sus actividades.

Opciones de imagen

Si hace clic en una imagen en una actividad A/B Test, el VEC tiene un aspecto similar al de la siguiente ilustración:

VEC con imagen seleccionada

Seleccione componentes del marco Components del lado izquierdo para insertar los siguientes elementos:

El menú en la parte superior de la imagen le permite hacer lo siguiente:

  • Insertar un vínculo ( Icono Insertar vínculo ).
  • Cambiar la imagen ( Elija el icono Imagen ).
  • Agregar personalización ( Agregar icono de Personalization ).
  • Eliminar la imagen ( Icono Eliminar ).

El panel Properties de la derecha permite configurar aún más las propiedades de la imagen.

Los iconos de la parte superior del marco permiten hacer lo siguiente:

  • Edite el HTML ( Insertar icono de HTML ). Consulte Editar HTML más abajo para obtener más información.
  • Duplique la imagen ( Icono duplicado ).
  • Eliminar la imagen ( Icono Eliminar ).
  • Ocultar la imagen ( Ocultar icono ).

Las opciones del marco derecho permiten hacer lo siguiente:

  • Edite la clase CSS.
  • Configure las propiedades de la imagen (origen, título, texto alternativo).
  • Edite la dirección URL del vínculo.
  • Configure el tamaño de la imagen (altura y anchura). Haga clic en Show Advanced Options para configurar el tamaño, la anchura, la altura, el desbordamiento y el ajuste de objeto mínimos y máximos de la imagen.
  • Configure la posición de la imagen en la página (absoluta, fija, relativa, estática o fija).
  • Configure el espaciado del elemento, incluidos el margen y el relleno.
  • Configure los efectos del elemento (opacidad). Haga clic en Show Advanced Options para configurar los valores de sepia, escala de grises, contraste, brillo y desenfoque de la imagen. También puede invertir o rotar la imagen.
  • Configure los estilos en línea de la imagen.

Opciones de texto

Si hace clic en texto en una actividad A/B Test, el VEC tiene un aspecto similar al de la siguiente ilustración:

VEC con texto seleccionado

Seleccione componentes del marco Components del lado izquierdo para insertar los siguientes elementos:

Haga clic en el icono Show Modifications ( Mostrar modificaciones ) para mostrar las modificaciones a la experiencia.

El menú en la parte superior del elemento de texto permite hacer lo siguiente:

  • Configure las propiedades del texto (nivel de encabezado, párrafo, comilla de bloque o monoespacio)
  • Seleccione el color del texto ( icono Color de texto )
  • Configure los atributos del texto (negrita, cursiva, subrayado o tachado) ( Elija el icono Atributos de texto ).
  • Configure la alineación del texto (izquierda, centro, derecha, justificar) ( Icono Alineación de texto ).
  • Insertar un vínculo ( Icono Insertar vínculo ).
  • Reemplace el contenido por una oferta de HTML, Fragmento de experiencia o Recomendación.
  • Edite el HTML ( Insertar icono de HTML ).
  • Agregar personalización ( Agregar icono de Personalization ).
  • Eliminar la imagen ( Icono Eliminar ).

El panel Properties de la derecha permite configurar aún más las propiedades del texto.

Los iconos de la parte superior del marco permiten hacer lo siguiente:

  • Edite el HTML ( Insertar icono de HTML ). Consulte Editar HTML más abajo para obtener más información.
  • Duplicar el texto ( Icono de duplicado ).
  • Eliminar el texto ( Icono Eliminar ).
  • Ocultar el texto ( Ocultar icono ).

Las opciones del marco derecho permiten hacer lo siguiente:

  • Edite la clase CSS.
  • Configure el color de fondo y la imagen del texto.
  • Configure la tipografía del texto (estilo de encabezado, tamaño de fuente, grosor de fuente, altura de línea, alineación, color de texto, estilo de texto (negrita, cursiva, subrayado o tachado)).
  • Configure listas, incluidas las listas con viñetas, numeradas o A,B,C.
  • Elija el color del borde.
  • Configure el tamaño del cuadro de texto (alto y ancho). Haga clic en Show Advanced Options para configurar el tamaño, la anchura, la altura, el desbordamiento y el ajuste de objeto mínimos y máximos del cuadro de texto.
  • Configure la posición del cuadro de texto en la página (absoluta, fija, relativa, estática o fija) y establezca el número de píxeles desde arriba, derecha, abajo e izquierda.
  • Configure el espaciado del elemento, incluidos el margen y el relleno.
  • Configure los efectos del elemento (opacidad). Haga clic en Show Advanced Options para configurar los valores de sepia, escala de grises, contraste, brillo y desenfoque de la imagen. También puede invertir o rotar el texto.
  • Configure los estilos en línea.

Editar HTML

Además del código HTML, puede editar e insertar JavaScript personalizado.

Hay varias opciones disponibles para aplicar formato de texto enriquecido al editar texto y HTML para las actividades A/B y Experience Targeting. Puede seleccionar un tipo de letra, elegir un estilo de letra y cambiar la alineación del texto, entre otras opciones estándar de formato de texto. Al modificar HTML, puede alternar entre la vista de código y la vista de edición enriquecida de HTML.

Se pueden anidar las siguientes etiquetas HTML5:

Etiqueta
Etiquetas anidadas permitidas
<a>
<h1-h6>, <p>, <ul>, <ol>, <menu>, <div>, <figure>, <figcaption>
<ins>
<h1-h6>, <p>, <ul>, <ol>, <menu>
<del>
<ul>, <ol>, <menu>, <h1-h6>, <p>
<label>
<p>

Desplazamiento por elementos utilizando la ruta DOM dom-path

Al hacer clic en un elemento de la página, aparece el menú de opciones de VEC. Además, al hacer clic en un elemento, la ruta DOM correspondiente se muestra en la parte inferior de la página.

Ruta DOM

Si no ve la ruta DOM, haga clic en el icono Show DOM ( Mostrar icono DOM ).

Puede utilizar la ruta DOM para ver rápidamente información sobre el elemento seleccionado (tipo, ID y clase) y subir o bajar por la ruta DOM para seleccionar el elemento deseado.

Puede navegar fácilmente a cualquier elemento principal, del mismo nivel o secundario dentro del VEC utilizando la ruta DOM.

La función de ruta DOM también está disponible al configurar el rastreo de clics.

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654