Editar o HTML e o CSS do seu widget ou microsite para o Advocate

Você pode personalizar seus widgets do Advocate e seu microssite com HTML e CSS adicionais para alinhar melhor a aparência e o estilo à identidade visual da sua marca. Usando o editor HTML integrado 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 personalizada de HTML/CSS está disponível apenas em edições específicas do Advocate. Entre em contato com suporte para atualizar sua conta e acessar este recurso.

Por que usar HTML ou CSS personalizados?

HTML personalizado e CSS inline permitem que você:

• Siga as diretrizes de marca da sua empresa com mais precisão
• Reformate o layout e o espaçamento
• Aplique estilos além do que está disponível no editor padrão
• Substitua o estilo de componentes selecionados do widget ou do microssite

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 CSS

Edite seu microssite

Você pode editar o HTML ou CSS para fazer personalizações adicionais no seu microssite usando o editor HTML integrado. Embora o editor HTML permita mais flexibilidade no design do microssite, tenha em mente que não conseguimos solucionar ajustes feitos com HTML ou CSS personalizados.

1. No menu de navegação à esquerda, selecione [Engage] → Conteúdo.
2. No cartão do microssite, selecione Editar conteúdo.
3. Na aba Microssite, 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 o HTML e o CSS conforme necessário.
6. O CSS pode ser adicionado de três maneiras:

   • Por meio da importação de 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;">Receba recompensas 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 partes de CSS

Alguns componentes integrados no seu widget ou microssite não podem ser estilizados totalmente pelo editor visual. Em certos casos, você pode substituir a aparência deles usando partes de CSS, o que permite um controle mais granular.

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