Du kommer att lära dig
Lär dig hur du utformar dina registreringsformulär med anpassade typsnitt så att dina kunder får en stark varumärkesidentitet och konsekvens med resten av din webbplats.
Att skapa ett snyggt utformat registreringsformulär är avgörande för att få dem att fullfölja målet med ditt formulär. Om ditt varumärke använder typsnitt som inte finns tillgängliga direkt i redigeraren för registreringsformulär är det ett enkelt sätt att få dina formulär att se enhetliga ut med resten av webbplatsen att lägga till dessa anpassade typsnitt. När du har lagt till dina typsnitt kan du använda ditt typsnitt för att anpassa dina registreringsformulär som du vill.
Nyckelbegrepp
- Anpassat teckensnitt
Teckensnitt som inte tillhandahålls som standard i Klaviyo-redigeraren. Detta inkluderar:
- Googles teckensnitt
- Adobe-teckensnitt
- Importerade teckensnitt
- Webbsäkert teckensnitt Ett teckensnitt som lagras lokalt på de flesta enheter och som därför inte behöver läsas in från en extern källa för att kunna visas.
- Reservteckensnitt Ett webbsäkert teckensnitt som används om en sida inte kan läsa in det primära teckensnittet.
Lägga till anpassade typsnitt i ditt Konto
I huvudmenyn längs vänster sida navigerar du till Innehåll > Bilder och varumärke. Där klickar du på fliken Teckensnitt. Du kan lägga till ett Google-teckensnitt, ett Adobe-teckensnitt eller ett importerat teckensnitt.
Om du lägger till ett anpassat typsnitt i Klaviyo som redan används på din webbplats, ladda upp exakt den typsnittsstil (t.ex. light, bold eller italic) och vikt (t.ex. 400) som din webbplats använder just nu. Om du laddar upp ett typsnitt och väljer en stil eller vikt som skiljer sig något, kan de stilar som valts i Klaviyo åsidosätta några av din webbplats befintliga typsnittsstilar.
Lägga till ett Google-teckensnitt
Så här lägger du till ett Google-teckensnitt:
- Välj rullgardinsmenyn Teckensnittsnamn för att se en lista över alla tillgängliga Google-teckensnitt, förutom de teckensnitt som du redan har läst in i ditt Konto.
- Välj önskat teckensnitt. När du har valt ser du en förhandsvisning av teckensnittet under rullgardinsmenyn samt antalet möjliga variationer (t.ex. fetstil, kursiv osv.).
- Om du vill lägga till mer än 1 variation klickar du på pilen bredvid antalet möjliga variationer och väljer de typsnitt du vill lägga till.
- Välj ett reservteckensnitt.
- Klicka på Lägg till teckensnitt. Det teckensnitt du har lagt till visas nu i avsnittet Dina teckensnitt längst ned på sidan.
I avsnittet Dina teckensnitt kan du se vilka teckensnitt du har lagt till i ditt Konto. Om du vill redigera eller ta bort något av dina teckensnitt i det här avsnittet väljer du de tre punkterna på teckensnittet.
Om du väljer att använda Google Fonts ska du för GDPR-ändamål notera att Google Fonts hostas av Google. Genom att inkludera ett Google-teckensnitt i ditt teckensnittsbibliotek använder du Google-teckensnittet. Klaviyo har ett urval av anpassade typsnitt som vi använder i våra mallar för registreringsformulär som du enkelt kan importera och använda. Visa listan över typsnitt som finns hos Klaviyo.
Lägga till ett Adobe-teckensnitt
Du måste ha ett Adobe-konto för att använda Adobe Fonts.
Gör så här för att lägga till ett Adobe-teckensnitt:
- Navigera till Adobe Fonts.
- Sök efter länken till ditt Adobe-teckensnitt och välj sedan ditt teckensnitt.
- Bredvid ditt teckensnittsnamn klickar du på kodikonen.
- Om det behövs anger du ett nytt projektnamn och klickar sedan på Spara.
- I nästa modal kopierar du https://use.typekit.net-URL:en för det teckensnitt som du vill lägga till. Ta inte med .css som en del av URL:en när du kopierar den.
- Navigera tillbaka till Klaviyo och klistra in webbadressen i fältet CSS-adress.
- Välj Fortsätt och välj sedan ett reservteckensnitt för det teckensnitt du vill ladda upp. Observera att om ett teckensnitt redan är tillgängligt i ditt Konto visas en grön bock bredvid teckensnittet och dess befintliga reservteckensnitt visas.
- Välj Lägg till teckensnitt.
När du har lagt till ditt teckensnitt kommer det att listas i avsnittet Dina teckensnitt längst ner på sidan. Om du vill redigera något av dina teckensnitt i det här avsnittet väljer du de tre prickarna på teckensnittet.
Lägga till ett importerat teckensnitt
Om du har köpt eller laddat ner ett anpassat teckensnitt som inte är hostat av en tredjepartskälla kan du fortfarande använda det i ett Klaviyo-formulär. Börja med att hosta teckensnittsfilerna på en plats som kommer att vara tillgänglig för Klaviyo (till exempel i webbplatsens resurser eller på en plattform för teckensnittshosting). Se till att aktivera CORS (Cross-Origin Resource Sharing) genom att ställa in Access-Control-Allow-Origin header till *, så att teckensnittet kan nås av dina mottagares enheter.
Så här lägger du till ett importerat teckensnitt:
- Namnge ditt teckensnitt.
- Ange en teckenvikt, en stil och en käll-URL. Käll-URL:en måste vara en giltig URL som slutar på WOFF, WOFF2, TTF, EOT eller SVG.
- Valfritt: Om du vill lägga till fler variationer väljer du Lägg till teckensnittsvariation och upprepar sedan steg 2 för den här variationen.
- Välj Lägg till teckensnitt för att lägga till detta teckensnitt i avsnittet Dina teckensnitt .
Under Dina teckensnitt kan du se de teckensnitt som du har importerat till ditt Konto. Du kan också ta bort eller redigera dina teckensnitt genom att välja de 3 punkterna på teckensnittet.
Redigera teckensnitt
Så här redigerar du ett befintligt anpassat teckensnitt:
- Gå till Innehåll > Bilder och varumärke > Teckensnitt.
- Leta reda på det teckensnitt du vill redigera i avsnittet Dina teckensnitt längst ned på sidan.
- Klicka på de tre prickarna i det teckensnittets kort uppe i hörnet.
- Välj Redigera. Härifrån kommer du att kunna:
- Redigera reservteckensnittet för valfritt anpassat teckensnitt.
- Endast för Google-teckensnitt och Klaviyo-värdbaserade teckensnitt: redigera eller lägg till i de valda variationerna genom att välja Antal teckensnittsvariationer för att expandera listan och sedan välja de teckensnitt du vill lägga till.
Du kan inte lägga till variationer i ett Adobe-teckensnitt efter att du har laddat upp det, eftersom variationer är inbyggda i din Typekit-länk. Om du vill lägga till variationer i ett Adobe-teckensnitt måste du ta bort det befintliga teckensnittet och lägga till det igen med en annan Typekit-länk som innehåller alla variationer som du vill ta med.
- När du är klar med att redigera ditt typsnitt väljer du Uppdatera typsnitt.
Ta bort ett teckensnitt
Så här tar du bort ett teckensnitt:
- Gå till avsnittet Dina teckensnitt .
- På det teckensnitt som du vill ta bort klickar du på de 3 punkterna och väljer sedan Ta bort. Om du väljer att ta bort ditt typsnitt visas en modal som meddelar att om ditt typsnitt används i några formulär kommer ditt reservtypsnitt att visas efter att du har tagit bort det typsnitt du har lagt till.
- Välj Radera.
När ett anpassat teckensnitt tas bort återgår alla formulär i Klaviyo som för närvarande använder det anpassade teckensnittet omedelbart till reservteckensnittet. Om du lägger till teckensnittet igen börjar dessa formulär använda det igen.
Använda anpassade teckensnitt i registreringsformulärskaparen
För att använda ditt anpassade teckensnitt i ett registreringsformulär redigerar du bara texten i förhandsgranskningen av formuläret:
- Gå till fliken Registreringsformulär.
- Hitta formuläret du vill redigera och klicka på de tre punkterna bredvid det. Välj sedan Redigera formulär.
- I formulärförhandsgranskningen väljer du den text du vill redigera.
- Markera texten i menyn Text till höger.
- Använd rullgardinsmenyn för typsnitt längst upp för att välja ditt anpassade typsnitt. Observera att typsnitt från avsnittet Dina typsnitt i ditt Konto visas högst upp i listan.
När du redigerar visas ditt anpassade teckensnitt i canvasen (t.ex. i redigeringsförhandsgranskningen), men inte i panelen på vänster sida. Panelen på vänster sida visar ditt reservteckensnitt i stället för det anpassade teckensnittet.
- När du är nöjd med dina ändringar klickar du på Publicera för att göra dem live.
Webbplatsens teckensnitt påverkas av Klaviyo.js
Klaviyo Aktiv spårning på webbplatsen (Klaviyo.js) måste installeras manuellt eller via din e-handelsintegration för att kunna publicera Klaviyo-registreringsformulär på din webbplats. Om du bara har laddat upp vissa teckensnittsvariationer laddar Klaviyo.js automatiskt resten av variationerna i ditt bibliotek när det injiceras på din webbplats. På grund av detta kan teckensnitten på din webbplats ändras något i processen, till exempel att vikten på webbplatsens sidhuvud kan justeras.
Det finns två alternativ för att hantera eventuella ändringar som Klaviyo.js gör i dina teckensnitt. Du kan antingen:
- Ta bort de relevanta teckensnitten från ditt Klaviyo bibliotek med teckensnitt.
- Uppdatera CSS i sidhuvudet på din webbplats så att det inte skrivs över när Klaviyo.js läser in de extra variationerna.
Eftersom det här alternativet kräver djupgående kunskaper om CSS kan du behöva hjälp av en utvecklare. Klaviyo kan tyvärr inte hjälpa till med att justera CSS för din webbplats, men vi har ett stort partnernätverk.