Trabalhar com o web designer work-with-web-designer
No Journey Optimizer, a criação no visual web é fornecida pela extensão de navegador do Chrome Adobe Experience Cloud Visual Helper. Saiba mais
Comece a criar sua experiência na Web
Para começar a criar sua experiência online usando o visual web designer, siga as etapas abaixo.
-
Na tela Editar conteúdo, clique em Editar página da Web para abrir o designer da Web.
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. Você também pode editar o conteúdo da Web sem carregar o editor visual. Para fazer isso, desmarque a opção Editor visual para usar o modo de edição não visual. Saiba mais -
Uma vez no web designer, selecione qualquer elemento da tela, como imagem, botão, parágrafo, texto, contêiner, cabeçalho, link etc. Saiba mais
-
Para editar um elemento, é possível usar:
-
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.
-
Após editar o conteúdo da Web, você pode gerenciar as modificações. Saiba mais
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 para a página exata a partir da configuração 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.