Laatst bijgewerkt: januari 19, 2023
Gebruik HubSpot's geavanceerde opties voor CTA's om sterk aangepaste CTA-knoppen te maken die perfect passen bij het thema van je website. Je kunt een aangepaste CSS klasse gebruiken om aangepaste klasse invoer vanuit je stylesheet te ondersteunen of aangepaste CSS direct aan de knop CTA toevoegen.
Om uw knop CTA verder aan te passen, leert u hoe u uw CTA-formaat bewerkt. Als je de knop CTA toevoegt aan een e-mail of sjabloon, lees dan hoe je de CTA centreert
.
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:
- Navigeer in je HubSpot-account naar Marketing > Lead Capture > Button CTA's.
- Ga met de muis over een knop CTA en klik op Acties > Bewerken, of klik op CTA maken.
-
Scroll in het rechterpaneel naar beneden en klik op Geavanceerde opties.
- U kunt aangepaste CSS-styling toepassen op uw knop CTA met alleen de klasse Aangepaste CSS of de optie Aangepaste CSS. Als beide opties worden toegepast, kan dit leiden tot problemen met de styling of weergave van uw knop CTA.
- Aangepaste CSS-klasse: voeg een aangepaste klasse toe aan uw knop CTA om aangepaste klasse-invoer te ondersteunen. Dit is handig wanneer meerdere CTA's op uw 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 om alleen toe te passen op de knop CTA die je aan het bewerken bent. In het veld Aangepaste CSS kun je inline styling toepassen die specifiek is voor die knop CTA. Als je een element van de knop 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 uw knop CTA te voltooien.
