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.
El VEC se muestra cuando crea o edita una actividad existente.
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.
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 (
- Cambiar el nombre de una experiencia: haga clic en el icono Rename (
- Duplicar, eliminar o redirigir una experiencia: haga clic en el icono More Actions (
Configuración de actividades
Haga clic en el icono Configure (
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 (
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.
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 (
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.
Para añadir un componente nuevo a una experiencia:
-
Haga clic en el componente que desee añadir para resaltarlo.
Los componentes disponibles se agrupan en contenedores lógicos:
-
Basic
- Divider
- HTML
- Image
-
Text
- Heading
- Paragraph
- Link
-
Dynamic
-
-
Arrastre el componente sobre un elemento de página existente en el lienzo Design.
-
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 (
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 (
Haga clic en el icono More Options (
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.
También puede acercar o alejar la vista haciendo clic en el icono apropiado (
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:
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.
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 (
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:
Seleccione componentes del marco Components del lado izquierdo para insertar los siguientes elementos:
- Básico (divisor, HTML, imagen).
- Texto (encabezado, párrafo, vínculo).
- Dinámico (Recomendación, Fragmento de experiencia, oferta de HTML).
El menú en la parte superior de la imagen le permite hacer lo siguiente:
- Insertar un vínculo (
- Cambiar la imagen (
- Agregar personalización (
- Eliminar la imagen (
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 (
- Duplique la imagen (
- Eliminar la imagen (
- Ocultar la imagen (
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:
Seleccione componentes del marco Components del lado izquierdo para insertar los siguientes elementos:
- Básico (divisor, HTML, imagen).
- Texto (encabezado, párrafo, vínculo).
- Dinámico (Recomendación, Fragmento de experiencia, oferta de HTML).
Haga clic en el icono Show Modifications (
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 (
- Configure los atributos del texto (negrita, cursiva, subrayado o tachado) (
- Configure la alineación del texto (izquierda, centro, derecha, justificar) (
- Insertar un vínculo (
- Reemplace el contenido por una oferta de HTML, Fragmento de experiencia o Recomendación.
- Edite el HTML (
- Agregar personalización (
- Eliminar la imagen (
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 (
- Duplicar el texto (
- Eliminar el texto (
- Ocultar el texto (
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:
<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.
Si no ve la ruta DOM, haga clic en el icono Show 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.