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:
Opções de imagem
Se você clicar em uma imagem em uma atividade A/B Test, o VEC será semelhante à seguinte ilustração:
Selecione componentes no quadro Componentes à esquerda para inserir os seguintes elementos:
- Básico (divisor, HTML, imagem).
- Texto (cabeçalho, parágrafo, link).
- Dinâmico (Recomendação, Fragmento de experiência, oferta HTML).
O menu na parte superior da imagem permite fazer o seguinte:
- Inserir um link (
- Altere a imagem (
- Adicionar personalização (
- Excluir a imagem (
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 (
- Duplique a imagem (
- Excluir a imagem (
- Ocultar a imagem (
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:
Selecione componentes do quadro Components no lado esquerdo para inserir os seguintes elementos:
- Básico (divisor, HTML, imagem).
- Texto (cabeçalho, parágrafo, link).
- Dinâmico (Recomendação, Fragmento de experiência, oferta HTML).
Clique no ícone Show Modifications (
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 (
- Configure os atributos do texto (negrito, itálico, sublinhado ou tachado) (
- Configure o alinhamento do texto (esquerda, centro, direita, justificado) (
- Inserir um 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 (
- Adicionar personalização (
- Excluir a imagem (
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 (
- Duplique o texto (
- Exclua o texto (
- Ocultar o texto (
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:
<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>Navegar pelos elementos usando o caminho DOM dom-path
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.
Se você não vir o caminho DOM, clique no ícone Show 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.