Opciones de Compositor de experiencias visuales
La versión de Adobe Target Standard/Premium 25.2.1 (17 de febrero de 2015) presenta un Compositor de experiencias visuales (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 Prueba A/B. Las opciones varían según el tipo de actividad.
Experiencias carril
El carril Experiencias se muestra en el carril izquierdo del VEC.
Puede ver, crear, cambiar el nombre o quitar experiencias con el carril Experiencias.
Las siguientes opciones están disponibles en el carril Experiencias:
- Ver una experiencia: para ver una experiencia, haga clic en la experiencia que desee para mostrarla en el lienzo Diseño.
- Agregar una experiencia: Haga clic en el icono Agregar (
- Cambiar el nombre de una experiencia: haga clic en el icono Cambiar el nombre (
- Duplicar, eliminar o redirigir una experiencia: haz clic en el icono de Más acciones (
Configuración de actividades settings
Haga clic en el icono Configurar (
Las opciones disponibles son las siguientes:
- Propiedades: asigne propiedades a la actividad o quite propiedades de la actividad. Propiedades es una característica de (Target Premium). Para obtener más información, consulte Permisos de usuario de Enterprise.
- Entrega de páginas: incluye la misma experiencia en páginas similares de tu 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.
- Preferencias del sitio: configure las preferencias del sitio para especificar cómo Target genera los selectores CSS. Para obtener más información, consulte Selectores CSS en Configurar el Compositor de experiencias visuales.
- 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 Diseño/Examinar
Use los conmutadores Diseño/Examinar 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 Examinar para navegar por el sitio y elegir la vista o la página que desee actualizar. Vuelva al modo Diseño para agregar o editar los cambios.
Deshacer/Rehacer
Puede deshacer los cambios realizados haciendo clic en el icono Deshacer (
Para rehacer una acción, expande el grupo de botones Deshacer/Rehacer y elige Rehacer.
Componentes carril
Puede agregar varios componentes a la página web y editarlos según sea necesario mediante el nuevo carril Componentes.
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:
-
Básico
- Divisor
- HTML
- Imagen
-
Texto
- Encabezado
- Párrafo
- Vínculo
-
Dinámico
-
-
Arrastre el componente sobre un elemento de página existente en el lienzo Diseño.
-
Seleccione para reemplazar el elemento seleccionado o para insertar el componente antes de o después del elemento seleccionado.
Modificaciones carril
Para abrir el carril Modificaciones, haga clic en el icono Mostrar modificaciones (
El carril Modificaciones muestra todos los cambios realizados en su página en el Compositor de experiencias visuales (VEC) y le permite realizar cambios adicionales (como Selector de CSS, Mbox y Código personalizado).
Haga clic en el icono Más opciones (
Haga clic en el icono Más opciones (
Diseñar lienzo
El lienzo Design le permite seleccionar ventanillas móviles, entre las que se incluyen la pantalla adaptada, Escritorio, Tableta, Horizontal móvil y Vertical móvil. 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 Diseño, 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 del Compositor de experiencias visuales (VEC) se agrupan en las opciones de menú apropiadas para que su trabajo sea más rápido y eficiente:
Propiedades carril
El carril Propiedades 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 carril para editar el código HTML o eliminar, duplicar u ocultar elementos. Los cambios aparecen en el carril Modificaciones.
El carril Propiedades se puede contraer en el carril derecho para permitirle ocultar el lienzo de diseño y ampliar el lienzo de diseño. Haga clic en el icono Mostrar u ocultar propiedades (
Editar elementos utilizando el lienzo Design design
Las secciones siguientes muestran cómo editar imágenes y texto en el lienzo Diseño. El lienzo Diseño, junto con los carriles 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 Prueba A/B, 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 Propiedades 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 Mostrar opciones avanzadas 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 Mostrar opciones avanzadas 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 Prueba A/B, 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 Mostrar modificaciones (
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 carril Properties 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 (
- 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 Mostrar opciones avanzadas 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 Mostrar opciones avanzadas 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 Segmentación de experiencias. 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 Mostrar 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.
Más información sobre la IU actualizada
-
Target Standard/Premium 25.2.1 (17 de febrero de 2025) notas de la versión: Proporciona un resumen de los cambios clave de la interfaz de usuario en Target para Actividades, Recommendations y Compositor de experiencias visuales (VEC).
-
Target Standard/Premium 25.1.1 (9 de enero de 2025) notas de la versión: Proporciona un resumen de los cambios clave de la interfaz de usuario en Target para la Biblioteca de ofertas.
-
Comprender la Target IU: Proporciona una breve descripción general para ayudarle a familiarizarse con Target y proporciona vínculos para obtener información más detallada e instrucciones paso a paso.
-
Cambios del Compositor de experiencias visuales: La versión de Adobe Target Standard/Premium 25.2.1 (17 de febrero de 2015) presenta un Compositor de experiencias visuales (VEC) actualizado. Este artículo explica las diferencias entre las versiones heredadas y actualizadas del VEC.
-
Compositor de experiencias visuales opciones: Este artículo explica la interfaz de usuario de VEC actualizada y sus opciones.
-
Target Preguntas frecuentes sobre la actualización de la interfaz de usuario: estas preguntas frecuentes tratan sobre las nuevas preguntas comunes acerca de la interfaz de usuario de Target y el Compositor de experiencias visuales (VEC), incluidos los cambios de navegación, las ubicaciones de las características y la obsolescencia de la opción de versión de la interfaz de usuario temporal. Tanto si es un experto en marketing, desarrollador o administrador, estas preguntas frecuentes le ayudan a realizar la transición sin problemas y a aprovechar al máximo la IU actualizada.