HubSpot Kunskapsbas

Lägg till anpassade stilar till din CTA (legacy)

Skriven av HubSpot Support | Nov 2, 2021 2:25:34 PM

Använd HubSpots avancerade alternativ för CTA:er (legacy) för att skapa mycket anpassade CTA-knappar som passar perfekt med ditt webbplatstema. Du kan använda en anpassad CSS-klass för attstödja anpassade klassinmatningar från din stilmall eller lägga till anpassad CSS direkt till CTA.

För att ytterligare anpassa din CTA (legacy), lär dig hur du redigerar din CTA-storlek. Om du lägger till din CTA (legacy) i ett e-postmeddelande eller en mall kan du läsa om hur du centrerar din CTA.

Observera: anpassade stilar kan endast tillämpas på anpassade knappar och intebildknappar.

Så här lägger du till en anpassad stil till din knapp-CTA:

  • I ditt HubSpot-konto navigerar du till Marknadsföring > Lead Capture > CTA.
  • Klicka på rullgardinsmenyn längst upp till vänster och välj CTA:er (äldre).
  • Håll muspekaren över en CTA och klicka på Åtgärder > Redigera, eller klicka på Skapa CTA.
  • I den högra panelen rullar du ner och klickar på Avancerade alternativ.

  • Du kan använda anpassad CSS-styling för din CTA genom att endast använda antingen klassen Anpass ad CSS eller alternativet Anpassad CSS. Om båda alternativen används kan det leda till problem med din CTA-styling eller visning .
    • Anpassad CSS-klass: lägg till en anpassad klass i din CTA för att stödja inmatningar med anpassade klasser. Detta är användbart när flera CTA:er på dina webbplatssidor behöver dela en liknande uppsättning designegenskaper, t.ex. teckensnittsfamiljer, storlek eller till och med utfyllnad och marginaler. Om du använder en anpassad CSS-klass måste du se till att klassen inkluderas och utformas i CSS-formatmallen som används som huvudformatmall för dina HubSpot-sidor.
    • Anpassad CSS: lägg till anpassade stilar som endast ska tillämpas på den CTA du redigerar. I fältet Anpassad CSS kan du tillämpa inline-styling som är specifik för den CTA. Om du har ett element i CTA:n som du vill ändra lägger du till en ny stildeklaration här innan du sparar dina ändringar.
  • Klicka på Nästa > längst ned till höger för att slutföra skapandet eller redigeringen av din CTA (legacy).