Så här lägger du till sidobilder i registreringsformulär
Du kommer att lära dig
Läs mer om hur du inkluderar en högkvalitativ bild till vänster eller höger om ditt registreringsformulär för en övertygande registreringsupplevelse som matchar din varumärkesdesign.
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 att tänka på:
- Det finns många typer av bildformat att välja mellan. JPEG-bilder balanserar kvalitet och storlek bra för färgstarka bilder, medan PNG-bilder kan få transparenta bilder eller logotyper att se skarpa ut.
- Se till att använda en bild av tillräckligt hög kvalitet för bästa resultat.
- Försök att hålla dina bilder mellan 600 och 1 000 px i bredd och under 2 000 px i höjd för bilder i full bredd, för att balansera kvalitet och laddningstid. Bilder som är mindre än full bredd kan vara mindre än 600 px
- Precis 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 under 200 KB för bakgrundsbilder för att se till att din bild ser högkvalitativ ut utan att göra webbplatsen långsammare.
- Lägg till alt-text i 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-postmeddelanden, som återges i ESP:er) finns det färre rekommendationer för hur du formaterar och justerar dem. Webbläsare kan återge bilder i alla typer och storlekar, så håll dig i allmänhet till högupplösta bilder, hanterbara filstorlekar och testa utseendet på varje typ av enhet.
Lägg till en sidobild i ditt formulär
För att lägga till en bild på någon sida av innehållet i ditt registreringsformulär:
- Gå till fliken Registreringsformulär.
- Bredvid ditt formulär klickar du på de 3 punkterna > Redigera formulär.
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 funktionen sidobild. Gör så här: gå till avsnittet Form Background i avsnittet Styles och ta bort bakgrundsbilden. Scrolla sedan ned till Form Styles och ta bort eventuell överflödig utfyllnad på höger eller vänster sida.
- I avsnittet Stilar går du till avsnittet Sidobild och väljer vilken sida du vill lägga till en bild på (vänster eller höger).
- Klicka på den tomma platshållaren för bilden i förhandsvisningen av formuläret.
- Klicka på Bläddra i bildbiblioteket för att lägga till en bild från ditt bildbibliotek i Klaviyo, ladda upp en bild eller importera en ny bild från en URL.
Se till att använda en bild av tillräckligt hög kvalitet för bästa resultat. Precis 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 se till att bilden ser högkvalitativ ut utan att göra webbplatsen långsammare.
Visningsalternativ för sidobild
Formulärstilar
Som standard är formulär med sidobilder inställda på en bredd på 780 px och sidobildens bredd är inställd på Medium. Du kan använda avsnitten Bredd och 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 Sidobild (t.ex. liten, medel, stor, anpassad).
Ditt formulärs sidobild döljs som standard på mobila enheter för att optimera mobilupplevelsen, eftersom skärmutrymmet på mobila enheter är begränsat. Om du vill att din sidobild 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 Sidobild 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. - Bildposition
Detta avgör hur bilden ska anpassas inom området för sidobild. Välj bland följande alternativ:- Inneslut
Hela bilden visas inom avsnittet och beskärs inte alls. Om bilden inte passar exakt i bildområdet fyller avsnittets bakgrundsfärg i alla områden som inte täcks. - Täck
Bilden fyller hela sidobildsområdet. Vissa delar av bilden kan beskäras för att bilden ska fylla utrymmet. - Anpassad
Välj din egen bredd för bilden.
- Inneslut
- Horisontell justering och Vertikal justering
Med dessa kan du välja om bilden ska centreras eller justeras till bildområdets överkant, nederkant, vänster eller höger. - Bakgrundsfärg
Om du använder en mindre bild i ditt formulär kan du ställa in en bakgrundsfärg för att fylla den tomma ytan bakom den.