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

Använd HubSpots avancerade alternativ för CTA (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 anpassadeklassinmatningar från din stilmall eller lägga till anpassad CSS direkt till CTA.

För att ytterligare anpassa din CTA (äldre), 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ära dig hur du centrerar din CTA.

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

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

• Klicka på rullgardinsmenyn längst upp till vänster och välj CTA (ä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 nedåt och klickar på Avancerade alternativ.

• Du kan tillämpa anpassad CSS-styling på din CTA genom att använda antingen klassen Anpassad CSS eller alternativet Anpassad CSS. Om båda alternativen används kan det leda till problem med stylingen eller visningen av din C TA.
  • 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 ska du se till att klassen inkluderas och stylas i CSS-stilmallen som används som huvudstil för dina HubSpot-sidor.
  • AnpassadCSS: lägg till anpassade stilar som endast ska tillämpas på den CTA som 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 som du vill ändra lägger du till en ny stildeklaration här innan du sparar dina ändringar.
• Längst ned till höger klickar du på Nästa > för att slutföra skapandet eller redigeringen av din CTA (legacy).