Opciones del Compositor de experiencias visuales

Al hacer clic en un elemento de página en el Adobe Target Visual Experience Composer (VEC), 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. Las secciones siguientes contienen información sobre las distintas opciones para imágenes y texto.

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 Componentes 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 marco 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 con una oferta de HTML, Fragmento de experiencia o [Recomendación]/help/main/c-recommendations/recommendations-as-an-offer.md).
  • Edite el HTML ( Insertar icono de HTML ).
  • Agregar personalización ( Agregar icono de Personalization ).
  • Eliminar la imagen ( Icono Eliminar ).

El marco del lado derecho 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 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 un HTML, puede alternar entre la vista de código y la vista de edición enriquecida del 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