Opções do Visual Experience Composer

Ao clicar em um elemento de página no Adobe Target Visual Experience Composer (VEC), 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. As seções a seguir contêm informações sobre as várias opções de imagens e texto.

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 no quadro Componentes à esquerda 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 quadro 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 HTML, Fragmento de experiência ou [Recomendação]/help/main/c-recommendations/recommendations-as-an-offer.md).
  • Edite o HTML ( Ícone Inserir HTML ).
  • Adicionar personalização ( Ícone Adicionar Personalization ).
  • Excluir a imagem ( Ícone Excluir ).

O quadro 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.

Editar HTML html

Além do código HTML, você pode editar e injetar JavaScript personalizado.

Várias opções de formatação de rich text estão disponíveis durante a edição de texto e HTML para atividades de A/B e Experience Targeting. Você pode escolher uma fonte, selecionar um estilo de fonte, alterar o alinhamento do texto e outras opções de formatação de texto padrão. Ao modificar o HTML, você pode alternar entre a visualização de código e a visualização de edição avançada do HTML.

As seguintes tags de HTML 5 podem ser aninhadas:

Adicionar tag
Tags aninhadas 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>

Ao clicar em um elemento na página, o menu de opções de VEC é exibido. Além disso, ao clicar em um elemento, o caminho DOM correspondente é exibido na parte inferior da página.

Caminho DOM

Se você não vir o caminho DOM, clique no ícone Show DOM ( Mostrar ícone DOM ).

Você pode usar o caminho DOM para ver rapidamente as informações sobre o elemento selecionado (tipo, ID e classe) e mover para cima ou para baixo o caminho DOM para selecionar o elemento desejado.

É possível navegar com facilidade em qualquer elemento pai, irmão ou filho do VEC usando o caminho DOM.

O recurso de caminho DOM também está disponível ao configurar o rastreamento de cliques.

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