Lägg till anpassade stilar till din CTA-knapp
Senast uppdaterad: juni 28, 2023
Tillgänglig med något av följande abonnemang, om inte annat anges:
|
|
Tidigare Marketing Hub Basic |
Använd HubSpot's avancerade alternativ för CTA-knappar för att skapa mycket anpassade CTA-knappar som passar perfekt till temat på din webbplats. Du kan använda en anpassad CSS-klass för att stödja anpassade klassinmatningar från ditt formatmallblad eller lägga till anpassad CSS direkt i CTA-knappen.
Om du vill anpassa din knapp CTA ytterligare kan du lära dig hur du redigerar din CTA-storlek. Om du lägger till din CTA-knapp i ett e-postmeddelande eller en mall kan du lära dig hur du centrerar din CTA-knapp
.
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:
- I ditt HubSpot-konto navigerar du till Marknadsföring > Lead Capture > Button CTAs.
- Håll muspekaren över en knapp 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 tillämpa anpassad CSS-formgivning på din knapp CTA genom att endast använda antingen klassen Anpassad CSS eller alternativet Anpassad CSS. Om båda alternativen tillämpas kan det leda till problem med stylingen eller visningen av din knapp CTA.
- Anpassad CSS-klass: Lägg till en anpassad klass till din knapp CTA för att stödja inmatningar med anpassad klass. Detta är användbart när flera CTA:er på webbplatsens sidor måste dela en liknande uppsättning designegenskaper, t.ex. typsnittsfamiljer, 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 det CSS-formatblad som används som huvudformat för dina HubSpot-sidor.
- Anpassad CSS: Lägg till anpassade stilar som endast ska tillämpas på den CTA-knapp som du redigerar. I fältet Anpassad CSS kan du tillämpa inline-formgivning som är specifik för denna knapp CTA. Om du har ett element i knappen CTA som du vill ändra lägger du till en ny stildeklaration här innan du sparar dina ändringar.
- Klicka på Nästa > längst ner till höger för att avsluta skapandet eller redigeringen av din knapp CTA.
