Editar conteúdo da Web edit-web-content
Depois de adicionar uma ação da Web à campanha, você poderá editar o conteúdo do site usando o designer da Web.
Saiba como criar uma campanha da Web neste vídeo
No Journey Optimizer, a criação na Web é fornecida pela extensão de navegador Chrome do Adobe Experience Cloud Visual Helper. Saiba mais
Acesse as seguintes seções para saber mais sobre cada tópico:
Trabalhar com o web designer work-with-web-designer
Para começar a criar sua campanha da Web, siga as etapas abaixo.
-
Na guia Ação da campanha, selecione Editar conteúdo.
-
Se você criou uma regra de correspondência de páginas, deve inserir qualquer URL correspondente a essa regra: as alterações serão aplicadas a todas as páginas que correspondam à regra. O conteúdo da página é exibido.
note note NOTE Se você inseriu um único URL como a superfície da web, o URL para personalizar já está preenchido. 
note caution CAUTION A página da Web deve incluir o Adobe Experience Platform Web SDK. Saiba mais -
Clique em Editar página da Web para começar a criá-la. O web designer é exibido.
note note NOTE Se você tentar carregar um site que não é carregado, uma mensagem será exibida sugerindo que você instale a extensão de navegador Auxiliar de edição visual. Veja algumas dicas para solução de problemas em esta seção. -
Selecione qualquer elemento da tela de desenho, como imagem, botão, parágrafo, texto, contêiner, cabeçalho, link etc. Saiba mais
-
Uso:
-
O menu contextual para editar conteúdo, layout, inserir links ou personalização, etc.
-
Os ícones na parte superior do painel direito permitem editar, duplicar, excluir ou ocultar cada elemento.
-
O painel direito que muda dinamicamente de acordo com o elemento selecionado. Por exemplo, você pode editar o plano de fundo, a tipografia, a borda, o tamanho, a posição, o espaçamento, os efeitos ou os estilos embutidos de um elemento.
-
Usar componentes content-components
-
No painel Componentes à esquerda, selecione um item. Você pode adicionar os seguintes componentes à sua página da Web e editá-los conforme necessário:
- Divisor
- HTML
- Imagem
- Cabeçalho - O uso deste componente é semelhante ao uso do componente Texto no designer de email. Saiba mais
- Parágrafo - O uso deste componente é semelhante ao uso do componente Texto no designer de email. Saiba mais
- Link
-
Passe o mouse na página e clique no botão Inserir antes de ou Inserir depois de para anexar o componente a um elemento existente na página.
note note NOTE Para desmarcar um componente, clique no botão ESC no banner azul contextual exibido na parte superior da tela. -
Edite o componente conforme necessário diretamente no conteúdo da página.
-
Ajuste os estilos exibidos no painel contextual à direita, como plano de fundo, cor do texto, borda, tamanho, posição etc. - dependendo do componente selecionado.
Adicionar personalização
Para adicionar personalização, selecione um container e selecione o ícone de personalização na barra de menu contextual exibida. Adicione as alterações usando o editor de personalização. Saiba mais
Navegar pelo web designer navigate-web-designer
Esta seção detalha as diferentes maneiras de navegar pelo web designer. Para exibir e gerenciar as modificações adicionadas à sua experiência online, consulte esta seção.
Usar navegações estruturais breadcrumbs
-
Selecione qualquer elemento da tela.
-
Clique no botão Expandir/Recolher navegações estruturais no lado inferior esquerdo da tela para exibir rapidamente as informações sobre o elemento selecionado.
-
Quando você passa o mouse sobre a navegação estrutural, o elemento correspondente é realçado no editor.
-
Ao usá-lo, você pode navegar facilmente para qualquer elemento pai, irmão ou filho no editor visual.
Alternar para o modo de navegação browse-mode
Você pode alternar do modo padrão Design para o modo Procurar usando o botão dedicado.
No modo Procurar, você pode navegar até a página exata a partir da superfície selecionada que deseja personalizar.
É especialmente útil ao lidar com páginas que estão por trás da autenticação ou que não estão disponíveis desde o início em um determinado URL. Por exemplo, você poderá autenticar, navegar até a página da sua conta ou até a página do carrinho e voltar para o modo Design para executar as alterações na página desejada.
Usar o modo de Navegação também permite que você navegue por todas as exibições do seu site ao criar aplicativos de página única. Saiba mais
Alterar tamanho do dispositivo change-device-size
Você pode alterar o tamanho do dispositivo da exibição do web designer para um tamanho predefinido, como Tablet ou Paisagem móvel, ou definir um tamanho personalizado inserindo o número desejado de pixels.
Também é possível alterar o foco do zoom de 25% para 400%.
A capacidade de alterar o tamanho do dispositivo foi projetada para sites responsivos que são renderizados em vários dispositivos, janelas e tamanhos de tela. Sites responsivos ajustam-se e se adaptam automaticamente a qualquer tamanho de tela, incluindo desktops, laptops, tablets ou telefones celulares.
Vídeo tutorial video
O vídeo abaixo mostra como criar uma experiência na Web usando o web designer em campanhas do Journey Optimizer.