Gerenciar modificações na Web manage-web-modifications
É possível gerenciar facilmente todos os componentes, ajustes e estilos adicionados à página da Web. Você também pode adicionar modificações diretamente no painel dedicado.
Trabalhar com o painel Modificações use-modifications-pane
-
Selecione o ícone Modificações para exibir o painel correspondente à esquerda.
-
Você pode revisar cada uma das alterações feitas na página.
-
Selecione uma modificação indesejada e clique na opção Excluir modificação do botão Mais ações para removê-la.
note caution CAUTION Continue com cuidado ao excluir uma ação, pois ela pode afetar as ações subsequentes. -
Se você estiver criando um aplicativo de página única, poderá aplicar qualquer modificação a outras exibições. Saiba mais
-
Para excluir várias modificações ao mesmo tempo, clique no botão Selecionar na parte superior do painel Modificações, verifique as modificações de sua escolha e clique no ícone Excluir.
-
Use o botão Mais ações na parte superior do painel Modificações para excluir todas as modificações de uma só vez.
-
Você também pode excluir somente as modificações inválidas, o que significa que as alterações foram substituídas por outras alterações. Por exemplo, se você modificar a cor de um texto e, em seguida, excluir esse texto, a modificação de cor se tornará inválida, pois o texto não existe mais.
-
Você pode cancelar e refazer ações usando o botão Desfazer/Refazer na parte superior direita da tela.
Clique e mantenha pressionado o botão para alternar entre as opções Desfazer e Refazer. Em seguida, clique no próprio botão para aplicar a ação desejada.
Adicionar modificações do painel dedicado add-modifications
Ao editar uma página usando o web designer, você pode adicionar novas alterações ao seu conteúdo diretamente do painel Modificações - sem a necessidade de selecionar um componente e editá-lo na interface do web designer. Siga as etapas abaixo.
-
No painel Modificações, clique no botão Mais ações.
-
Selecione Adicionar uma modificação.
-
Selecione o tipo de modificação:
- Seletor de CSS - Saiba mais
- Página
<Head>- Saiba mais
-
Insira seu conteúdo e Salve suas alterações.
-
Clique no botão Mais ações ao lado da sua modificação e selecione Informações para exibir seus detalhes.
Seletor de CSS css-selector
Para adicionar uma modificação de tipo do Seletor de CSS, siga as etapas abaixo.
-
Selecione Seletor de CSS como o tipo de modificação.
-
O campo Seletor de Elemento CSS ajuda a localizar e selecionar os elementos de HTML (ou nós na árvore DOM) aos quais você deseja aplicar as alterações.
-
Selecione um tipo de ação (Definir Conteúdo ou Definir Atributo) e preencha as informações/o conteúdo necessários.
-
Definir conteúdo: especifique o conteúdo que entra no elemento identificado pelo campo Seletor de Elemento CSS.
-
Definir Atributo: especifique um atributo a ser associado ao seletor de CSS atual para que esse seletor possa ser identificado também por esse atributo. Para fazer isso, insira um nome no campo Nome do atributo e um valor no campo Conteúdo. Se o atributo já existir, o valor será atualizado; caso contrário, um novo atributo será adicionado com o nome e o valor especificados.
-
Página <head> page-head
Você pode adicionar um código personalizado usando o tipo de modificação Página<head>.
O elemento <head> é um contêiner de metadados (dados sobre dados) e é colocado entre a marca <html> e a marca <body>. Nesse caso, o código não aguarda os eventos body ou page-load; ele é executado no início do carregamento da página.
O elemento <head> é usado com frequência para adicionar código JavaScript ou CSS à parte superior da página. Os seletores para ações visuais subsequentes dependem dos elementos de HTML adicionados nessa guia.
Para adicionar uma modificação de tipo de Página<head>, siga as etapas abaixo.
-
Selecione Página
<head>como o tipo de modificação.
-
Adicione seu código personalizado na caixa Conteúdo.
note caution CAUTION Você só pode adicionar elementos <script>e<style>à seção<head>. Adicionar<div>marcas e outros elementos pode fazer com que os<head>elementos restantes apareçam em<body>. -
Clique no botão Opções de edição avançadas. O editor de personalização é aberto.
Você pode aproveitar o editor de personalização do Journey Optimizer com todos os seus recursos de personalização e criação. Saiba mais
Exemplos de código personalizado custom-code-examples
Você pode usar o tipo de modificação Página<head> para:
-
Use o JavaScript em linha ou vincule a um arquivo externo do JavaScript.
Por exemplo, para alterar a cor de um elemento:
code language-none <script type="text/javascript"> document.getElementById("element_id").style.color = "blue"; </script> -
Configure um estilo em linha ou um link para uma folha de estilos externa.
Por exemplo, para definir uma classe para um elemento de sobreposição:
code language-none <style> .overlay { position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; } </style>
Práticas recomendadas do código personalizado custom-code-best-practices
Por exemplo:
| code language-none |
|---|
|
Caso alguma modificação seja necessária, faça alterações dentro desse contêiner.
Se você não precisar mais do código personalizado, basta deixar este container vazio, mas não o remova. Isso garante que outras modificações na experiência não sejam afetadas.
<head><>para duas campanhas que afetam a mesma URL.<head> para duas campanhas que afetam a mesma URL, a JavaScript será inserida na página pelas duas campanhas. Journey Optimizer determina automaticamente a ordem do conteúdo entregue. Certifique-se de que o código não dependa da disposição. Cabe a você garantir que não haja conflitos no código.