Nesta página: saiba como criar sua experiência da Web com o Adobe Journey Optimizer visual web designer, incluindo seleção e edição de elementos, adição de componentes e personalização, navegação na tela e alteração do tamanho do dispositivo.
No Journey Optimizer, a criação no visual web é fornecida pela extensão do navegador 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 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 Email Designer. 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 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.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to author a web experience with the Journey Optimizer visual web designer, including selecting and editing elements, adding components and personalization, navigating the canvas, and changing the device size.
Intents:
- Open the web designer from the Edit content screen to author a web experience
- Select and edit elements on the canvas using the contextual menu, right panel icons, and dynamic right panel
- Add and edit components such as Divider, HTML, Image, Heading, Paragraph, and Link
- Add personalization to a container using the personalization editor
- Navigate the designer with breadcrumbs and Browse mode
- Change the device size and zoom focus of the designer display
Glossary:
- Web designer: The Journey Optimizer visual web authoring editor, powered by the Adobe Experience Cloud Visual Helper Chrome browser extension (product-specific)
- Design mode: The default web designer mode for performing changes on a page (product-specific)
- Browse mode: A mode used to navigate to the exact page from the selected configuration you want to personalize, useful for pages behind authentication or not available at a certain URL from the start (product-specific)
- Breadcrumbs: A control that displays information about the selected element and lets you navigate to any parent, sibling, or child element within the visual editor (product-specific)
- Non-visual edition mode: An alternative editing mode used by unselecting the Visual editor option to edit web content without loading the visual editor (product-specific)
Guardrails:
- Visual web authoring is powered by the Adobe Experience Cloud Visual Helper Chrome browser extension, and the prerequisites must be followed to access and author web pages.
- The Adobe Experience Platform Web SDK must be included in your web page.
- If a website fails to load, a message suggests installing the Visual Editing Helper browser extension.
- Changes made at a specific device size apply to all sizes and devices as long as the selectors are the same; editing in normal desktop view also applies to all screen sizes.
- Journey Optimizer does not currently support device size-specific page changes; changes for a separate mobile website with a separate structure should be made in a different campaign.
- The zoom focus can be changed from 25% to 400%.
Terminology:
- Canonical name: Web designer — Acronym: n/a — variants: visual web designer, web content designer, visual editor
- Synonyms: “web designer” = “visual web designer”
- Do not confuse: “Design mode” (default mode for performing changes) ≠ “Browse mode” (navigate to the exact page to personalize)
FAQ:
- Q: How do I open the web designer? — From the Edit content screen, click Edit web page.
- Q: Can I edit web content without the visual editor? — Yes; unselect the Visual editor option to use the non-visual edition mode instead.
- Q: What components can I add to a web page? — Divider, HTML, Image, Heading, Paragraph, and Link.
- Q: Do device-size changes apply only to that device? — No; as long as the selectors are the same, changes apply to all sizes and devices. Journey Optimizer does not currently support device size-specific page changes.
- Q: When should I use Browse mode? — When dealing with pages behind authentication or not available at a certain URL from the start, and to navigate through all the views of a website when authoring single-page applications.