Så här lägger du till sidobilder i registreringsformuläret

Du kommer att lära dig

Lär dig hur du inkluderar en högkvalitativ bild till vänster eller höger om registreringsformuläret för en övertygande Registrera dig-upplevelse som matchar ditt varumärkes design.

Innan du börjar

Sidobilder visas till vänster eller höger om formulärinnehållet. När du använder en bild i ett formulär finns det några saker du bör tänka på:

• Det finns många olika typer av bildformat att välja mellan. JPEG-filer balanserar kvalitet och storlek väl för färgglada bilder, medan PNG-filer kan hålla transparenta bilder eller logotyper snygga. 
• Se till att använda en bild av någorlunda hög kvalitet för bästa resultat. 
  
  • Försök att hålla dina bilder mellan 600 och 1000 pixlar i bredd och mindre än 2000 pixlar i höjd för fullbreddsbilder för att balansera kvalitet och laddningstid. Bilder som är mindre än fullbredd kan vara mindre än 600px
• Som med alla bilder som visas på webben leder större filstorlekar till långsammare laddningstider.
  • Sikta på en filstorlek på 50-100 KB för sidobilder och mindre än 200 KB för bakgrundsbilder för att säkerställa att din bild ser högkvalitativ ut utan att sakta ner din webbplats.
• Lägg till alt-text till din bild så att dina formulär är tillgängliga för alla webbplatsbesökare. 

Eftersom registreringsformulär återges i webbläsare (till skillnad från e-post, som återges i e-postleverantörens) finns det färre rekommendationer för hur de ska formateras och justeras. Webbläsare kan återge bilder av alla typer och storlekar, så i allmänhet bör du hålla dig till högupplösta bilder, hanterbara filstorlekar och testa utseendet på varje typ av enhet. 

Lägg till en sidobild till ditt formulär

Så här lägger du till en bild på vardera sidan av innehållet i ditt registreringsformulär:

1. Navigera till fliken registreringsformulär.
2. Klicka på de tre prickarna bredvid ditt formulär > Edit Form.
   

   Om ditt formulär skapades före juli 2021 och använder en höger- eller vänsterjusterad bakgrundsbild som sidobild ska du ta bort den innan du använder sidobildsfunktionen. För att göra det, navigera till avsnittet Formulärbakgrund i avsnittet Stilar och ta bort bakgrundsbilden. Bläddra sedan ner till Form Styles och ta bort eventuell överflödig utfyllnad på höger eller vänster sida. 

3. I avsnittet Styles navigerar du till avsnittet Side Image och väljer den sida där du vill lägga till en bild (vänster eller höger).
   
4. Klicka på den tomma bildplatshållaren i förhandsgranskningen av formuläret.
5. Klicka på Browse Image Library för att lägga till en bild från ditt Klaviyo bildbibliotek, ladda upp en bild eller importera en ny bild från en URL.
   

Se till att använda en bild av någorlunda hög kvalitet för bästa resultat. Som med alla bilder som visas på webben leder större filstorlekar till långsammare laddningstider. Sikta på en filstorlek på 50-100 KB för sidobilder för att säkerställa att din bild ser högkvalitativ ut utan att sakta ner din webbplats. 

Alternativ för visning av sidobilder

Formulärstilar

Som standard har formulär med sidobilder en bredd på 780 pixlar och sidobildens bredd är inställd på Medium. Du kan använda avsnitten Width (bredd ) och Minimum height (minsta höjd ) för att justera formulärets storlek. Om du vill att sidobilden ska ta upp mer eller mindre utrymme i formuläret justerar du storleken i avsnittet Side Image (t.ex. small, medium, large, custom). 

Formulärets sidobild kommer som standard att döljas på mobila enheter för att optimera mobilupplevelsen eftersom skärmutrymmet på mobila enheter är begränsat. Om du vill att sidobilden ska visas på alla enheter klickar du på bilden i förhandsgranskningen, bläddrar sedan till Visa på och väljer Alla enheter.

Stilar för sidobilder

Använd avsnittet Stilar i inställningarna för sidobilden för att välja hur bilden ska visas. 

• Alt-text
  Lägg till alt-text till din bild så att den är tillgänglig för alla som besöker din webbplats.
• Bildens position
  Här bestäms hur bilden ska placeras i området för sidobilder. Välj bland följande alternativ: 
  • Innehåller
    Hela bilden kommer att visas i avsnittet och kommer inte att beskäras alls. Om bilden inte passar exakt in i bildområdet kommer bakgrundsfärgen för avsnittet att fylla i de områden som inte täcks. 
  • Täckning
    Bilden kommer att fylla hela bildytan på sidan. Vissa delar av bilden kan vara bortklippta för att bilden ska fylla ut utrymmet. 
  • Anpassad
    Välj din egen bredd för bilden.
• Horizontal Alignment och Vertical Alignment
  Med dessa funktioner kan du välja om bilden ska centreras eller justeras upptill, nedtill, till vänster eller höger om bildytan.
• Bakgrundsfärg
  Om du använder en mindre bild i formuläret kan du ange en bakgrundsfärg för att fylla det tomma utrymmet bakom den.

Ytterligare resurser

• Bästa praxis för att skapa tillgängliga e-postmeddelanden och formulär 
• Förståelse för stilar för ett registreringsformulär
• Komma igång med Canva