Hoe zijafbeeldingen toevoegen in aanmeldingsformulier

Wat je leert

Leer hoe je links of rechts van je aanmeldingsformulier een hoogwaardige afbeelding kunt plaatsen voor een aantrekkelijke Aanmelden-ervaring die past bij het ontwerp van je merk.

Voordat je van start gaat

Zijafbeeldingen verschijnen links of rechts van de inhoud van je formulier. Als je een afbeelding in een formulier gebruikt, moet je met een paar dingen rekening houden:

• Er zijn veel soorten afbeeldingsformaten om uit te kiezen. JPEG's zorgen voor een goede balans tussen kwaliteit en formaat voor kleurrijke afbeeldingen, terwijl PNG's transparante afbeeldingen of logo's scherp kunnen houden. 
• Zorg ervoor dat je een afbeelding van redelijke kwaliteit gebruikt voor de beste resultaten. 
  
  • Probeer je afbeeldingen tussen de 600 en 1000px in de breedte te houden en minder dan 2000px in de hoogte voor afbeeldingen op volledige breedte om een balans te vinden tussen kwaliteit en laadtijd. Afbeeldingen minder dan volledige breedte kunnen kleiner zijn dan 600px
• Zoals bij alle afbeeldingen die op het web worden bekeken, leiden grotere bestanden tot een langzamere laadtijd.
  • Streef naar een bestandsgrootte van 50-100 KB voor zijafbeeldingen en minder dan 200 KB voor achtergrondafbeeldingen om ervoor te zorgen dat je afbeelding er hoogwaardig uitziet zonder je site te vertragen.
• Voeg alt-tekst toe aan je afbeelding zodat je formulieren toegankelijk zijn voor alle bezoekers van je site. 

Omdat aanmeldingsformulieren worden weergegeven op browsers (in tegenstelling tot e-mail, die wordt weergegeven op e-mailserviceproviders), zijn er minder aanbevelingen voor hoe je ze moet opmaken en aanpassen. Browsers kunnen afbeeldingen van alle soorten en maten weergeven, dus blijf in het algemeen bij afbeeldingen met een hoge resolutie, hanteerbare bestandsgroottes en test het uiterlijk op elk type apparaat. 

Een zijafbeelding aan je formulier toevoegen

Om aan weerszijden van je aanmeldingsformulier een afbeelding toe te voegen:

1. Navigeer naar het tabblad aanmeldingsformulier.
2. Klik naast je formulier op de 3 puntjes > Formulier bewerken.
   

   Als je formulier vóór juli 2021 is gemaakt en een rechts of links uitgelijnde achtergrondafbeelding als zijafbeelding gebruikt, verwijder deze dan voordat je de zijafbeeldingsfuncties gebruikt. Navigeer hiervoor naar de sectie Formulierachtergrond in de sectie Stijlen en verwijder de achtergrondafbeelding. Scroll dan naar beneden naar Formulierstijlen en verwijder overtollige vulling aan de rechter- of linkerkant. 

3. Navigeer in het gedeelte Stijlen naar het gedeelte Zijafbeelding en selecteer de kant waar je een afbeelding wilt toevoegen (links of rechts).
   
4. Klik op de lege plaatshouder voor de afbeelding in de voorbeeldweergave van het formulier.
5. Klik op Afbeeldingsbibliotheek doorbladeren om een afbeelding toe te voegen uit uw Klaviyo afbeeldingsbibliotheek, een afbeelding te uploaden of een nieuwe afbeelding te importeren vanaf een URL.
   

Zorg ervoor dat je een afbeelding van redelijke kwaliteit gebruikt voor de beste resultaten. Zoals bij alle afbeeldingen die op het web worden bekeken, leiden grotere bestanden tot een langzamere laadtijd. Streef naar een bestandsgrootte van 50-100 KB voor zijafbeeldingen om ervoor te zorgen dat je afbeelding er hoogwaardig uitziet zonder je site te vertragen. 

Opties voor beeldweergave opzij

Formulierstijlen

Formulieren met zijafbeeldingen zijn standaard ingesteld op 780px breed met de breedte van de zijafbeelding ingesteld op Medium. Je kunt de secties Breedte en Minimale hoogte gebruiken om de grootte van het formulier aan te passen. Als je wilt dat de zijafbeelding meer of minder ruimte inneemt in het formulier, pas dan de grootte aan in het gedeelte Zijafbeelding (bijvoorbeeld klein, middelgroot, groot, aangepast). 

De zijafbeelding van je formulier wordt standaard verborgen op mobiele apparaten om de mobiele ervaring te optimaliseren, omdat de schermruimte op mobiele apparaten beperkt is. Als je wilt dat je zijafbeelding op alle apparaten wordt weergegeven, klik je op de afbeelding in het voorbeeld, scrol je naar Toon op en selecteer je Alle apparaten.

Afbeeldingsstijlen opzij

Gebruik het gedeelte Stijlen van de instellingen voor Zijdeafbeelding om te kiezen hoe de afbeelding wordt weergegeven. 

• Alt-tekst
  Voeg alt-tekst toe aan je afbeelding zodat deze toegankelijk is voor iedereen die je website bezoekt.
• Positie afbeelding
  Dit bepaalt hoe de afbeelding in het Side Image-gebied past. Kies uit de volgende opties: 
  • Bevatten
    De volledige afbeelding verschijnt in de sectie en wordt helemaal niet bijgesneden. Als de afbeelding niet precies in het afbeeldingsgebied past, zal de achtergrondkleur voor de sectie de onbedekte gebieden opvullen. 
  • Omslag
    De afbeelding vult het beeldgebied aan de zijkant volledig. Sommige delen van de afbeelding kunnen worden afgesneden, zodat de afbeelding de ruimte vult. 
  • Aangepast
    Selecteer je eigen breedte voor de afbeelding.
• Horizontale uitlijning en verticale uitlijning
  Hiermee kun je kiezen of de afbeelding wordt gecentreerd of uitgelijnd aan de boven-, onder-, linker- of rechterkant van het afbeeldingsgebied.
• Achtergrondkleur
  Als je een kleinere afbeelding gebruikt in je formulier, stel dan een achtergrondkleur in om de lege ruimte erachter op te vullen.

Extra hulpbronnen

• Best practices voor het bouwen van toegankelijke e-mail en formulieren 
• Stijlen voor een aanmeldingsformulier begrijpen
• Aan de slag met Canva