HubSpot Kennisbank

Aangepaste stijlen toevoegen aan je CTA (legacy)

Geschreven door HubSpot Support | Oct 8, 2020 9:01:16 AM

Gebruik HubSpot's geavanceerde opties voor CTA's (legacy) om sterk aangepaste CTA-knoppen te maken die perfect passen bij het thema van je website. Je kunt een aangepaste CSS-klasse gebruiken omaangepaste klasse-invoer vanuit je stylesheet teondersteunen of aangepaste CSS rechtstreeks aan de CTA toevoegen.

Leer hoe je het formaat van je CTA kunt bewerken om je CTA (legacy) verder aan te passen. Als je je CTA (legacy) toevoegt aan een e-mail of sjabloon, lees dan hoe je je CTA kunt centreren.

Let op: aangepaste stijlen kunnen alleen worden toegepast op aangepaste knoppen en niet op knoppen met afbeeldingen.

Zo voeg je een aangepaste stijl toe aan je knop CTA:

  • Klik linksboven op het vervolgkeuzemenu en selecteer CTA's (legacy).
  • Beweeg de muis over een CTA en klik op Acties > Bewerken of klik op CTA maken.
  • Scroll in het rechterpaneel naar beneden en klik op Geavanceerde opties.

  • Je kunt aangepaste CSS-styling toepassen op je CTA door alleen de Aangepaste CSS-klasse of de Aangepaste CSS-optie te gebruiken. Als beide opties worden toegepast, kunnen er problemen ontstaan met de styling of weergave van je CTA .
    • Aangepaste CSS-klasse: voeg een aangepaste klasse toe aan je CTA om aangepaste klasse-invoer te ondersteunen. Dit is handig als meerdere CTA's op je websitepagina's dezelfde ontwerpkenmerken moeten hebben, zoals lettertypefamilies, grootte of zelfs opvulling en marges. Als je een aangepaste CSS-klasse gebruikt, zorg er dan voor dat de klasse is opgenomen en gestyled in het CSS-stylesheet dat wordt toegepast als de hoofdstijl voor je HubSpot-pagina's.
    • Aangepaste CSS: voeg aangepaste stijlen toe die alleen van toepassing zijn op de CTA die je bewerkt. In het veld Aangepaste CSS kun je inline styling toepassen die specifiek is voor die CTA. Als je een element van de CTA wilt wijzigen, voeg dan hier een nieuwe stijlverklaring toe voordat je je wijzigingen opslaat.
  • Klik rechtsonder op Volgende > om het maken of bewerken van je CTA (legacy) te voltooien.