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 a aparência e o estilo à sua marca. Usando o editor de HTML integrado do Advocate, você pode adicionar estrutura, estilo e até substituir certos componentes padrão para uma personalização mais aprofundada.

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

Por que usar HTML ou CSS personalizados?

HTML personalizado e CSS embutido permitem que você:

• Alinhe-se mais de perto às 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 o estilo de componentes selecionados do widget ou microsite

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

Edite o HTML ou CSS

Edite seu microsite

Você pode editar o HTML ou CSS para fazer personalizações adicionais no seu microsite usando o editor de HTML integrado. Embora o editor de HTML permita mais flexibilidade no design do microsite, tenha em mente que não conseguimos solucionar problemas em 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 aba Microsite, selecione o layout ou a página cujo código 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:

   • 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> 

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

   <h3 style="font-size:30px;color:blue;">Ganhe 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 publicar as alterações.

Edite seu widget

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

1. No menu de navegação à esquerda, selecione [Engage] → Conteúdo.
2. Na Widgets cartão, selecione Editar widget.
3. Em Widgets do programa, selecione o widget que deseja editar.

1. Na barra de menu superior, selecione [Colchetes].
2. Adicione ou edite seu HTML no corpo da página.
3. 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> 

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

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

4. Selecione [Pincel] para visualizar suas atualizações.
5. Selecione Salvar rascunho para salvar, ou Publicar para publicar as alterações.

Editar componentes usando partes de CSS

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

Se você deseja 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 tiver interesse em editar componentes com partes de CSS, entre em contato com sua equipe de Implementação do Advocate ou de suporte pós-lançamento.