Blog

Pas de knop Lees meer op uw blog aan

Laatst bijgewerkt: oktober 19, 2020

Geldt voor:

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Legacy Marketing Hub Basic

Het wijzigen van het uiterlijk van uw Lees meer knop op de blogvermeldingspagina kan zeer nuttig zijn als u wilt dat deze knop opvalt. Leer hoe u het ontwerp van de knop kunt aanpassen of bewerk de LeesMeer tekst

.

Let op:het bewerken van het uiterlijk van uwLees meer knop vereist een basiskennis van HTML. Voor ondersteuning bij maatwerk kunt u contact opnemen met de ontwerpers van HubSpot op het Design Forum.

Pas het uiterlijk van uw Read More button aan

Om de look en feel van uw ReadMore knopaan te passen,creëer een CSS klasse die de styling voor de read more knop vasthoudt. Voeg deze klasse en elke aangepaste styling toe aan uwstylesheet. Hier is wat voorbeeldstyling:

.read-more-btn{
achtergrond: blauw;
grensstralen: 10px;
kleur: wit;
}

Om een aangepaste klasse toe te voegen aan uw ReadMore knop

:
  • Navigeer naar uw blog template.
  • Klik op de blog-inhoudsmodule om deze in de inspecteur te selecteren en klik vervolgens onder de sectie Post Templates op Edit ListingTemplate (Lijstsjabloon bewerken)om toegang te krijgen tot de lijstpagina HTML.
  • Zoek de volgende code in de listing template HTML:
<a klasse="meer-link" href="https://knowledge.hubspot.com/nl/cos-blog/how-to-change-the-look-of-your-read-more-button">Lees meer</a
  • Vervang de meer-link klasse door uw nieuwe read-more-btnklasse. De code zou er nu zo uit moeten zien:
<a class="read-more-btn" href="https://knowledge.hubspot.com/nl/cos-blog/how-to-change-the-look-of-your-read-more-button">Lees meer</a>
  • Klik opVeranderingenpubliceren.

Leesmeer over de tekst van

de knop

Op uw blog listingpagina ziet u een preview van elk blogbericht met eenLees meerlinkdie de volledige blogpost opent. Om deLees meertekstin een andere taal of zin, moet u het sjabloon van uw blog bewerken.

  • Navigeer in uw HubSpot account naar Marketing > Bestanden en templates > Ontwerphulptools.
  • Klik in de finderop de naam vanuw blogsjabloon.
  • Eenmaal in het sjabloon, klik op de BlogContent module.Klik in deinspecteur onder het tabbladBewerken op Lijstsjabloon bewerken.

  • Zoek de volgende code rond regel 55:
     <a klasse="meer-link" href="https://knowledge.hubspot.com/nl/cos-blog/how-to-change-the-look-of-your-read-more-button"> Leesmeer</a>

  • BewerkLees meerom deze tekst aan te passen op elke postvoorvertoning op de pagina van uw blogvermelding.
  • Klik opVeranderingen publiceren.