Personaliza el botón Más información en tu blog

vrneuman
HubSpot Employee

Cambiar el aspecto de tu botón Más información en la página de listas de blogs puede ser muy útil si deseas destacar este botón. Descubre cómo personalizar el diseño  del botón o editar el texto Más información .

 

Personaliza el aspecto de tu botón Más información

Para personalizar el aspecto de tu botón Más información, crea una clase CSS que mantendrá el estilo para el botón de más información. Agrega esta clase y cualquier estilo personalizado en tu hoja de estilo. Este es un ejemplo de estilo:

 

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

 

Para agregar una clase personalizada a tu botón Más información:

  • Navega a la plantilla de tu blog.
  • Haz clic en el módulo de contenido del blog para seleccionarlo en el inspector y luego en la sección Plantillas de Post haz clic en Editar plantilla de listado para acceder a HTML de página de listado.
  • Busca el siguiente código en la plantilla de listado HTML:

 

<a class="more-link" href="{{content.absolute_url}}">Más información</a

 

  • Reemplaza la clase more-link con tu clase read-more-btn. El código ahora debería verse de la siguiente manera:

 

<a class="read-more-btn" href="{{content.absolute_url}}">Más información</a>

 

  • Haz clic en Publicar cambios.

 

Edita el texto de tu botón Más información

En tu página de listado de blog, verás una vista preliminar de cada publicación de blog con un enlace Más información que abre la publicación completa del blog. Para cambiar el texto Más información a otro idioma o frase, deberás editar la plantilla de tu blog.

 

  • En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
  • En el buscador, haz clic en el nombre de tu plantilla de blog.
  • Una vez en la plantilla, haz clic en el módulo Contenido del blog. En el inspector en la pestaña Editar, haz clic en Editar plantilla de listado.

  • Busca el siguiente código en la línea 55:

     <a class="more-link" href="{{ content.absolute_url }}">Más información</a>
  • Edita Más información para personalizar este texto en cada vista preliminar de tu blog en la página de listas de blogs.
  • Haz clic en Publicar cambios.
1 Respuesta 1
rlopez
Colaborador líder

Hola @vrneuman 🙂

 

Fenomenal, muy detallado. Gracias por compartir.

 

Saludos,

 

Rafael López


[ Si esta publicación te ha ayudado con tu problema ayuda a la comunidad marcándola como solución ]
[ If this response helped you, please mark it as a solution ]

Rafael López
Head of Marketing
Odontonet by Glintt


HubSpot Community Champion

linkedininstagram