Isenção de responsabilidade de tradução: esse conteúdo foi traduzido para sua conveniência com o uso de software e pode não ter sido revisado por uma pessoa. O texto oficial é a versão em inglês e sempre será o texto mais atualizado. Para ver a versão em inglês, clique aqui.
Blog

Personalize o botão Leia mais no seu blog

Ultima atualização: Outubro 19, 2020

Disponível para

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic (versão anterior)

Alterar a aparência do botão Leia mais na página de listagem do blog pode ser muito útil se quiser que esse botão se destaque. Saiba como personalizar o design do botão ou editar o texto Leia mais.

Observação: a edição do seu botão Leia mais exige conhecimentos de HTML básico. Para obter suporte com o trabalho de design personalizado, entre em contato com os designers da HubSpot no Fórum de design.

Personalize a aparência do botão Leia mais

Para personalizar a aparência do seu botão Leia mais, crie uma classe CSS que manterá o estilo do botão. Adicione essa classe e qualquer estilo personalizado em sua folha de estilo. Veja alguns exemplos de estilos:

.read-more-btn{
background: blue;
border-radius: 10px;
color: white;
}

Para adicionar uma classe personalizada ao botão Leia mais:

  • Acesse o modelo do seu blog.
  • Clique no módulo de conteúdo do blog para selecioná-lo no inspetor e, na seção Modelos de post, clique em Editar modelo de listagem para acessar a página de listagem HTML.
  • Localize o seguinte código no modelo de listagem HTML:
<a class="more-link" href="{{content.absolute_url}}">Leia mais</a
  • Substitua a classe more-link pela sua nova classe read-more-btn. O código deve ser semelhante a este:
<a class="read-more-btn" href="{{content.absolute_url}}">Leia mais</a>
  • Clique em Publicar alterações.

Edite o texto do botão Leia mais

Na página de listagem do seu blog, você verá uma visualização de cada post com um link Leia mais que abre o post completo. Para alterar o texto Leia mais para outro idioma ou frase, você precisará editar o modelo do seu blog.

  • Na sua conta da HubSpot, navegue até Marketing > Arquivos e modelos > Ferramentas de design.
  • No  finder, clique no nome do modelo de blog.
  • No modelo, clique no módulo de conteúdo do blog . No  inspetor, na guia Editar, clique em Editar modelo de listagem.

  • Procure o seguinte código próximo da linha 55:
     <a class="more-link" href="{{ content.absolute_url }}">Leia mais</a>
  • Edite Leia mais para personalizar esse texto em cada visualização de post na página de listagem do blog.
  • Clique em Publicar alterações.