Editar o HTML e CSS do Seu Widget ou Microsite para o Advocate

Você pode personalizar seus widgets e microsite do Advocate com HTML e CSS adicionais para alinhar melhor com a aparência da sua marca. Usando o editor HTML embutido do Advocate, você pode adicionar estrutura, estilo e até substituir certos componentes padrão para uma personalização mais profunda.

Observação: A edição de HTML/CSS personalizada está disponível somente para edições específicas do Advocate. Entre em contato com suporte para atualizar sua conta e acessar esse recurso.

Por que usar HTML ou CSS personalizados?

HTML personalizado e CSS inline permitem que você:

• Combine mais de perto com as diretrizes de marca da sua empresa

• Reformate o layout e o espaçamento

• Aplique estilos além do que está disponível no editor padrão

• Substitua a estilização de componentes selecionados do widget ou microsite

Importante: Nossa equipe de suporte oferece assistência limitada para problemas introduzidos por código personalizado. Se você não tiver certeza, recomendamos trabalhar com sua equipe de implementação do Advocate ou com a equipe pós-lançamento.

Edite o HTML ou o CSS

Edite seu microsite

Você pode editar o HTML ou o CSS para fazer personalizações adicionais no seu microsite usando o editor HTML embutido. Embora o editor HTML permita maior flexibilidade no design do microsite, tenha em mente que não podemos solucionar problemas de ajustes feitos com HTML ou CSS personalizados.

1. No menu de navegação à esquerda, selecione [Engage] → Conteúdo.

2. No cartão do microsite, selecione Editar conteúdo.

3. Na guia Microsite, selecione o layout ou a página cujo código você deseja editar.

4. Selecione [Visualização de código] na barra de menu superior.

5. Adicione ou modifique HTML e CSS conforme necessário.

6. O CSS pode ser adicionado de três maneiras:

   • Importando uma folha de estilo CSS externa

   • No topo da página em uma <style> tag:

   <style>
     p {
       color: blue;
     }
   
     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }
   
     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 

   • Inline, para aplicar um estilo a um elemento HTML específico:

   <h3 style="font-size:30px;color:blue;">Seja recompensado quando seu amigo usar nosso produto</h3> 

7. Selecione [Pincel] para visualizar suas atualizações.

8. Selecione Salvar rascunho para salvar, ou Publicar para aplicar as alterações ao vivo.

Edite seu widget

Editar componentes usando CSS Parts

Alguns componentes integrados no seu widget ou microsite não podem ser totalmente estilizados pelo editor visual. Em certos casos, você pode substituir sua aparência usando CSS parts, que permitem um controle mais granular.

Se você pretende fazer atualizações de estilo avançadas, a equipe da impact.com pode orientar sobre o que é possível e compartilhar quaisquer seletores relevantes de CSS parts. Se estiver interessado em editar componentes com CSS parts, entre em contato com sua equipe de implementação do Advocate ou com a equipe de suporte pós-lançamento.