Central de conhecimento HubSpot

Adicione estilos personalizados ao seu CTA (legado)

Written by HubSpot Support | 5/abr/2019 9:52:55

Use as opções avançadas do HubSpot para CTAs (legado) para criar botões de CTA altamente personalizados que se adaptam perfeitamente ao tema do seu site. Você pode usar uma classe CSS personalizada para ofereça suporte a entradas de classe personalizadas de sua folha de estilo ou adicione CSS personalizado diretamente ao CTA.

Para personalizar ainda mais seu CTA (legado), saiba como edite o tamanho do seu CTA. Se você estiver adicionando seu CTA (legado) a um e-mail ou modelo, saiba como centralize seu CTA.

Observe: estilos personalizados só podem ser aplicados a botões personalizados e não botões de imagem.

Para adicionar um estilo personalizado ao CTA do seu botão:

  • No canto superior esquerdo, clique no menu suspenso e selecione CTAs (legado).
  • Passe o mouse sobre um CTA e clique Ações > Editar ou clique em Criar CTA
  • No painel direito, role para baixo e clique em Opções avançadas.

  • Você pode aplicar um estilo CSS personalizado ao seu CTA usando apenas ou o Classe CSS personalizada ou o CSS customizado opção. Se ambas as opções forem aplicadas, isso pode resultar em problemas com o estilo ou exibição do seu CTA. 
    • Classe CSS personalizada: adicione uma classe personalizada ao seu CTA para suporte a entradas de classe personalizadas. Isso é útil quando várias CTAs nas páginas do site precisam compartilhar um conjunto similar de características de design, como famílias de fonte, tamanho ou mesmo deslocamento e margens. Se você usar uma classe CSS personalizada, certifique-se de que a classe esteja incluída e estilizada no arquivo Folha de estilo CSS aplicado como estilo principal para suas páginas do HubSpot.
    • CSS customizado: adicione estilos personalizados para aplicar apenas ao CTA que você está editando. No CSS customizado campo, você pode aplicar estilo embutido específico para esse CTA. Se você tiver um elemento do CTA que gostaria de alterar, adicione uma nova declaração de estilo aqui antes de salvar suas alterações. 
  • No canto inferior direito, clique em Próximo > terminar criando ou editando seu CTA (legado).