Hoe voeg je afbeeldingen aan de zijkant toe in aanmeldingsformulieren
Wat je leert
Lees hoe je een afbeelding van hoge kwaliteit links of rechts van je aanmeldingsformulier kunt opnemen voor een overtuigende aanmeldervaring die past bij het ontwerp van je merk.
Voordat je van start gaat
Afbeeldingen aan de zijkant verschijnen links of rechts van de content van je formulier. Als je een afbeelding in een formulier gebruikt, zijn er een paar dingen om in gedachten te houden:
- Er zijn veel soorten afbeeldingsindelingen om uit te kiezen. JPEG's brengen kwaliteit en bestandsgrootte goed in balans voor kleurrijke afbeeldingen, terwijl PNG's transparante afbeeldingen of logo's scherp kunnen houden.
- Zorg dat je een afbeelding van redelijk hoge kwaliteit gebruikt voor de beste resultaten.
- Probeer je afbeeldingen tussen 600 en 1000 px breed en minder dan 2000 px hoog te houden voor afbeeldingen op volledige breedte, om de kwaliteit en laadtijd in balans te houden. Afbeeldingen die minder dan volledige breedte hebben, kunnen kleiner zijn dan 600 px
- Zoals bij alle afbeeldingen die je op internet bekijkt, zorgen grotere bestandsgroottes voor langzamere laadtijden.
- Streef naar een bestandsgrootte van 50 - 100 KB voor zijafbeeldingen en minder dan 200 KB voor achtergrondafbeeldingen, zodat je afbeelding er hoogwaardig uitziet zonder je site te vertragen.
- Voeg alt-tekst toe aan je afbeelding zodat je formulieren toegankelijk zijn voor alle sitebezoekers.
Omdat aanmeldingsformulieren in browsers worden weergegeven (in tegenstelling tot e-mails, die in ESP's worden weergegeven), zijn er minder aanbevelingen voor het opmaken en aanpassen ervan. Browsers kunnen afbeeldingen van alle typen en formaten weergeven, dus houd je in het algemeen aan afbeeldingen met een hoge resolutie, beheersbare bestandsgroottes en test je de weergave op elk type apparaat.
Voeg een afbeelding aan de zijkant toe aan je formulier
Om een afbeelding aan een van beide kanten van de content van je aanmeldingsformulier toe te voegen:
- Ga naar het tabblad Aanmeldingsformulieren.
- 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 zijafbeelding-functie gebruikt. Ga hiervoor naar de sectie Form Background in de sectie Styles en verwijder de achtergrondafbeelding. Scroll vervolgens omlaag naar Form Styles en verwijder eventuele overtollige opvulling aan de rechter- of linkerkant.
- Ga in de sectie Stijlen naar de sectie Afbeelding aan de zijkant en selecteer de kant waar je een afbeelding wilt toevoegen (links of rechts).
- Klik op de lege afbeeldingsplaceholder in de formulierpreview.
- Klik op Bladeren in afbeeldingsbibliotheek om een afbeelding toe te voegen uit je Klaviyo-afbeeldingsbibliotheek, een afbeelding te uploaden of een nieuwe afbeelding te importeren via een URL.
Zorg dat je een afbeelding van redelijk hoge kwaliteit gebruikt voor de beste resultaten. Zoals bij alle afbeeldingen die op het web worden bekeken, leiden grotere bestandsgroottes tot langere laadtijden. 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.
Weergaveopties voor afbeelding aan de zijkant
Formulierstijlen
Formulieren met zijafbeeldingen zijn standaard ingesteld op 780px breed, met de breedte van de zijafbeelding ingesteld op Middel. Je kunt de secties Breedte en Minimumhoogte 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 je de grootte aan in de sectie Zijafbeelding (bijv. klein, middel, 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 de preview en scrol je vervolgens naar Weergeven op en selecteer je Alle apparaten.
Stijlen voor zijafbeelding
Gebruik de sectie Stijlen van de instellingen voor Afbeelding naast tekst 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. - Afbeeldingspositie
Dit bepaalt hoe de afbeelding in het gebied Zijafbeelding past. Selecteer een van de volgende opties:- Bevat
De volledige afbeelding wordt binnen de sectie weergegeven en wordt helemaal niet bijgesneden. Als de afbeelding niet precies in het afbeeldingsgebied past, vult de achtergrondkleur van de sectie eventuele onbedekte gebieden op. - Bedekking
De afbeelding vult het zij-afbeeldingsgebied volledig. Sommige delen van de afbeelding kunnen worden afgesneden, zodat de afbeelding de ruimte kan vullen. - Aangepast
Selecteer je eigen breedte voor de afbeelding.
- Bevat
- Horizontal Alignment en Vertical Alignment
Hiermee kun je kiezen of de afbeelding wordt gecentreerd of wordt uitgelijnd aan de bovenkant, onderkant, linkerkant of rechterkant van het afbeeldingsgebied. - Achtergrondkleur
Als je een kleinere afbeelding in je formulier gebruikt, stel je een achtergrondkleur in om de lege ruimte erachter op te vullen.
Extra hulpbronnen
- Accessibility in emails and forms best practice reference
Learn how to make your emails and sign-up forms more accessible. When designing your emails and signup forms, you’ll want to make sure your designs are accessible to all of your recipients.
- Understanding styles for a sign-up form
Learn how to use Klaviyo’s sign-up form builder to design your form by editing the design settings available in the Styles section. Style settings apply across your sign-up form, including in all of a form’s steps and in its success message.
- Getting started with Canva for Images
Learn how to integrate Klaviyo with Canva in order to bring images from Klaviyo into Canva, and designs from Canva into your Klaviyo image library. Once Canva designs are in your Klaviyo image library, you can use them within email templates, SMS content, sign-up forms, and more.