Opções do Visual Experience Composer

Última atualização: 14 de fevereiro de 2025
  • Tópicos:

A versão Adobe Target Standard/Premium 25.2.1 (17 de fevereiro de 2015) introduz um Visual Experience Composer (VEC) atualizado. Este artigo explica a interface do usuário atualizada e suas opções.

IMPORTANT
O Visual Editing Composer atualizado exige a Adobe Experience Cloud Visual Editing Helper extensão disponível no Chrome Web Store.

O VEC é exibido ao criar ou editar uma atividade existente.

Visual Experience Composer (VEC)

Visão geral da interface do VEC

As seções a seguir explicam as opções disponíveis no VEC atualizado para uma atividade A/B Test. As opções variam, dependendo do tipo de atividade.

Painel Experiences

O painel Experiences é exibido no painel esquerdo do VEC.

Painel de experiências

Você pode exibir, criar, renomear ou remover experiências usando o painel Experiences.

As seguintes opções estão disponíveis no painel Experiences:

  • Exibir uma experiência: para exibir uma experiência, clique na experiência desejada para exibi-la na tela Design.
  • Adicionar uma experiência: clique no ícone Add ( Ícone Adicionar ) para adicionar uma nova experiência. Configure a nova experiência conforme desejado.
  • Renomear uma experiência: clique no ícone Rename ( Ícone Renomear ) para exibir a caixa de diálogo Rename Experience. Especifique o novo nome e clique em Save.
  • Duplique, exclua ou redirecione uma experiência: clique no ícone More Actions ( ícone Mais Ações ) e escolha Duplicate, Delete ou Redirect to URL.

Configurações/configurações de atividade

Clique no ícone Configure ( Ícone Configurar ) exibido na parte superior da tela Design para exibir o menu de propriedades da atividade.

Opções de configurações da atividade

As opções disponíveis são as seguintes:

  • Properties: Atribua propriedades à atividade ou remova propriedades da atividade. Properties é um recurso (Target Premium). Para obter mais informações, consulte Permissões de usuário do Enterprise.
  • Page Delivery: Incluir a mesma experiência em páginas semelhantes do site. Use um modelo de página para fornecer estrutura às suas páginas, ou, se as páginas contiverem elementos semelhantes, para testar variações em elementos de página estruturadas de forma semelhante ou em todo o domínio. Para obter mais informações, consulte Incluir a mesma experiência em páginas semelhantes.
  • Site Preferences: configure as preferências do site para especificar como o Target gera seletores de CSS. Para obter mais informações, consulte Seletores de CSS em Configurar o Visual Experience Composer.
  • Adicionar mais páginas: adicione mais páginas à atividade para criar uma atividade multipáginas que permita criar uma história em várias páginas, com um design específico para cada página. Para obter mais informações, consulte Atividade multipáginas.
  • Público-alvo: use um único público para a atividade.
  • Vários públicos-alvo: atribua vários públicos-alvo à atividade. Clique no ícone Adicionar públicos-alvo ( Ícone Adicionar ) e selecione um ou mais públicos-alvo da lista. Você também pode combinar públicos-alvo ou criar um novo público-alvo na caixa de diálogo Add Audiences.

Modos Design/Browse

Use os botões Design/Browse exibidos na parte superior da tela de design para alternar entre o modo de design e o modo de navegação.

Alternância de design e navegação

Use o modo Browse para navegar em seu site e escolher o modo de exibição ou a página que deseja atualizar. Volte para o modo Design para adicionar ou editar suas alterações.

Undo/Redo

Você pode desfazer as alterações feitas ao clicar no ícone Undo ( ícone Desfazer ).

Ícone Desfazer no VEC

Para refazer uma ação, expanda o grupo de botões Desfazer/Redo e escolha Redo.

Painel Components

Você pode adicionar vários componentes à sua página da Web e editá-los conforme necessário, usando o novo painel Components.

Painel Componentes

NOTE
Se você vir o painel Modifications nessa área em vez do painel Components, clique no ícone Show Components ( ícone Mostrar componentes ). O ícone Show Components ( Mostrar ícone Componentes ) e o ícone Show Modifications ( Mostrar painel Modificações ) atuam como alternadores para mostrar as opções apropriadas.

Para adicionar um novo componente a uma experiência:

  1. Clique no componente desejado que deseja adicionar para realçá-lo.

    Os componentes disponíveis são agrupados em contêineres lógicos:

  2. Arraste o componente sobre um elemento de página existente na tela Design.

  3. Escolha inserir o componente antes de depois de depois do elemento selecionado.

    Em comparação com a versão anterior do VEC, não é possível substituir um elemento selecionado por um componente.

Painel Modifications

Para abrir o painel Modifications, clique no ícone Show Modifications ( Mostrar painel de Modificações ) no painel Components.

Painel de modificações

NOTE
O ícone Show Components ( Mostrar ícone Componentes ) e o ícone Show Modifications ( Mostrar painel Modificações ) atuam como alternadores para mostrar as opções apropriadas.

O painel Modifications mostra todas as alterações feitas em sua página no Visual Experience Composer (VEC) e permite que você faça alterações adicionais (como Seletor de CSS, Mbox e Código personalizado).

Clique no ícone More Options ( Ícone Mais Ações ) no cabeçalho do painel para adicionar uma modificação, excluir todas as modificações ou excluir todas as modificações inválidas. Clique em Select para executar operações em massa: Apply to All Pages ou Delete.

Clique no ícone More Options ( Ícone Mais Ações ) ao lado de cada modificação para exibir suas informações, excluir a modificação ou aplicar a modificação a mais exibições.

Tela Design

A tela Design permite selecionar janelas de visualização, inclusive ajustar à tela, Desktop, Tablet, Mobile Landscape e Mobile Portrait. Por padrão, a tela se ajusta à página junto com os visores definidos na seção Administração.

Opções de viewport

Também é possível aumentar ou diminuir o zoom clicando no ícone apropriado ( ícone de Aumentar Zoom ou ícone de Diminuir Zoom ).

Ao clicar em um elemento de página na tela Design, um menu mostrará as opções disponíveis para esse tipo de elemento. Além disso, um caminho DOM é exibido na parte inferior da página, possibilitando uma navegação fácil pela estrutura da página.

As várias ações do Visual Experience Composer (VEC) são agrupadas nas opções de menu apropriadas para tornar seu trabalho mais rápido e eficiente:

Menu de opções de VEC

NOTE
As opções disponíveis dependem do tipo de atividade e do elemento que você está criando ou editando. Para obter mais informações sobre como editar imagens e ofertas em uma atividade A/B Test, consulte Editar elementos usando a Design tela abaixo.

Painel Properties

O painel Properties permite alterar as propriedades dos elementos selecionados na página, sejam eles elementos do HTML ou objetos específicos do Target, como recomendações ou ofertas.

Painel Propriedades

Clique nos ícones na parte superior do painel para editar o código HTML ou excluir, duplicar ou ocultar elementos. As alterações aparecem no painel Modifications.

O painel Properties pode ser recolhido no painel direito. Clique no ícone Show/Hide Properties ( Ícone Propriedades ) à direita do painel para recolher ou exibir o painel Properties.

Editar elementos usando a tela Design

As seções a seguir mostram como editar imagens e texto na tela Design. A tela Design, juntamente com os painéis Componentes, Modificações e Propriedades fornecem ferramentas poderosas para permitir que você crie experiências facilmente para suas atividades.

Opções de imagem

Se você clicar em uma imagem em uma atividade A/B Test, o VEC será semelhante à seguinte ilustração:

VEC com imagem selecionada

Selecione componentes do quadro Components no lado esquerdo para inserir os seguintes elementos:

O menu na parte superior da imagem permite fazer o seguinte:

  • Inserir um link ( ícone Inserir link ).
  • Altere a imagem ( Ícone Escolher imagem ).
  • Adicionar personalização ( Ícone Adicionar Personalization ).
  • Excluir a imagem ( Ícone Excluir ).

O painel Properties no lado direito permite configurar ainda mais as propriedades da imagem.

Os ícones na parte superior do quadro permitem fazer o seguinte:

  • Edite o HTML ( Ícone Inserir HTML ). Consulte Editar HTML abaixo para obter mais informações.
  • Duplique a imagem ( Ícone de duplicação ).
  • Excluir a imagem ( Ícone Excluir ).
  • Ocultar a imagem ( Ícone Ocultar ).

As opções no quadro direito permitem que você faça o seguinte:

  • Edite a classe CSS.
  • Configure as propriedades da imagem (fonte, título, texto alternativo).
  • Edite o URL do link.
  • Configure o tamanho da imagem (altura e largura). Clique em Show Advanced Options para configurar o tamanho mínimo e máximo, a largura, a altura, o estouro e o ajuste do objeto da imagem.
  • Configure a posição da imagem na página (absoluta, fixa, relativa, estática ou fixa).
  • Configure o espaçamento do elemento, incluindo a margem e o preenchimento.
  • Configure os efeitos do elemento (opacidade). Clique em Show Advanced Options para configurar os valores de sépia, escala de cinza, contraste, brilho e desfoque da imagem. Também é possível inverter ou girar a imagem.
  • Configure os estilos em linha da imagem.

Opções de texto

Se você clicar em texto em uma atividade A/B Test, o VEC será semelhante à seguinte ilustração:

VEC com texto selecionado

Selecione componentes do quadro Components no lado esquerdo para inserir os seguintes elementos:

Clique no ícone Show Modifications ( Ícone Mostrar modificações ) para exibir as modificações na experiência.

O menu na parte superior do elemento de texto permite fazer o seguinte:

  • Configurar as propriedades do texto (nível do cabeçalho, parágrafo, citação em bloco ou monoespaço)
  • Selecione a cor do texto ( ícone Cor do Texto )
  • Configure os atributos do texto (negrito, itálico, sublinhado ou tachado) ( Ícone Escolher atributos de texto ).
  • Configure o alinhamento do texto (esquerda, centro, direita, justificado) ( Ícone de Alinhamento de Texto ).
  • Inserir um link ( ícone Inserir link ).
  • Substitua o conteúdo por uma oferta do HTML, Fragmento de experiência ou Recomendação.
  • Edite o HTML ( Ícone Inserir HTML ).
  • Adicionar personalização ( Ícone Adicionar Personalization ).
  • Excluir a imagem ( Ícone Excluir ).

O painel Properties no lado direito permite configurar ainda mais as propriedades do texto.

Os ícones na parte superior do quadro permitem fazer o seguinte:

  • Edite o HTML ( Ícone Inserir HTML ). Consulte Editar HTML abaixo para obter mais informações.
  • Duplique o texto ( Ícone de duplicado ).
  • Exclua o texto ( Ícone Excluir ).
  • Ocultar o texto ( Ícone Ocultar ).

As opções no quadro direito permitem que você faça o seguinte:

  • Edite a classe CSS.
  • Configurar a cor de fundo e a imagem do texto.
  • Configure a tipografia do texto (estilo do cabeçalho, tamanho da fonte, espessura da fonte, altura da linha, alinhamento, cor do texto, estilo do texto (negrito, itálico, sublinhado ou tachado)).
  • Configure listas, incluindo com marcadores, numeradas ou A,B,C.
  • Escolha a cor da borda.
  • Configure o tamanho da caixa de texto (altura e largura). Clique em Show Advanced Options para configurar o tamanho mínimo e máximo, a largura, a altura, o estouro e o ajuste do objeto da caixa de texto.
  • Configure a posição da caixa de texto na página (absoluta, fixa, relativa, estática ou fixa) e defina o número de pixels entre a parte superior, direita, inferior e esquerda.
  • Configure o espaçamento do elemento, incluindo a margem e o preenchimento.
  • Configure os efeitos do elemento (opacidade). Clique em Show Advanced Options para configurar os valores de sépia, escala de cinza, contraste, brilho e desfoque da imagem. Também é possível inverter ou girar o texto.
  • Configure os estilos em linha.