Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
Blog

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

Última actualización: octubre 19, 2020

Requisitos

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Básico (versión anterior)

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.

Nota: editar el aspecto de tu botón Más información requiere una comprensión básica de HTML. Para respaldar con el trabajo de diseño personalizado, conecta con los diseñadores de HubSpot en el Foro de diseño.

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.