Bildinställningar

Vad finns det för inställningar och hur kan de användas?

Slider

I en tidigare artikel rekommenderade jag att använda Slider-blocket som hero-bild, vilket är en favorit hos många av våra kunder just för möjligheterna det för med sig. Med detta block kan ni bland annat:

• Styra hur många bilder som ska visas, med olika versioner till desktop och mobil*
• Länka upp till 8 bilder för att leda butikens kunder till exempelvis kategorier eller kampanjer av olika slag
• Ställa in om bilderna ska bytas automatiskt (om detta alternativ är ikryssat kan ni även välja hur länge bilderna ska visas)
• Välja om sliderknapparna ska vara ljusa eller mörka
• Visa bilderna i fullbredd (tänk på att detta ser bäst ut med skarpa bilder)

*Ofta ser desktopdimensioner lite skeva ut på en telefon – därför kan det vara bra att göra om bilden lite för mobilanvändarna. PRINTWORKS är duktiga på detta. Ta en titt på exemplet här nedanför:

Bilden till vänster används till desktop och bilden till höger är den som syns om man besöker butiken via en mobiltelefon.

Om ni väljer att ha olika bilddimensioner, se till att de matchar varandra. Annars kan ni råka koppla fel bild till fel länk!

Dimensionsförslag för hero-bilder

Desktop: 2880 x 1120 pixlar
Mobil: 1000 x 1450 pixlar

Bilder med text-blocken

Det finns fyra olika bilder med text-block som även dessa fungerar bra till hero-bilder. För det syftet brukar jag oftast använda mig av 1 eller 2 Bilder med text-blocken. Vilka inställningar finns det då? Låt mig berätta!

• Välj om blocket ska vara fullbredd eller ej
• Visa eller visa inte mellanrum mellan bilderna
• Höjd på blocket i pixlar
• Textinställningar, om ni vill ha text på bilderna (här är ett "life hack" som har med textplattan att göra som du kanske inte kände till)
• Möjlighet att länka bilderna till andra sidor

Vill du ha en färg istället för en bild i en (eller flera) av rutorna? Inga problem! Kryssa i Bakgrundsfärg-rutan och skriv in färgkoden i hex- eller RGB-format. Behöver ni lite inspiration? Cardi är duktiga på att blanda färg och bild.

Värt att tänka på

Tänk på att dessa block beter sig lite annorlunda mobilt. Försök att använda bilder med fokus i mitten eftersom sidorna kommer att "kapas" för kunder som besöker butiken via en mobiltelefon. Undvik alltför detaljerade bilder samt bilder med inbäddad text. Vill du ha text på bilderna? Använd blockinställningarna för responsiv text.

Texten anpassar sig beroende på vilken enhet kunden besöker butiken på. Bilden till vänster visar hur den ser ut på en dator och den till höger visar bilden på en mobiltelefon.

Hero-bild vs Kategoribild

Nu när vi har gått igenom ett par block som fungerar bra som hero-bilder kan det vara bra att en gång för alla fastställa skillnaden mellan dem och kategoribilder.

Herobild
En bild högst upp på startsidan (eller andra sidor i butiken) som du själv lägger till med hjälp av Drag & släpp

Kategoribild
Bilden högst upp på butikens kategorisidor/produktlistningar. Även denna är en typ av herobild, men den ändras i Admin.

Kolumner

Kolumnblocket kan användas till mycket! För att länka till kategorier eller visa upp USP:ar vänder jag mig ofta till just detta block.

• Välj mellan 1-6 kolumner och hur många som ska visas i rad på läsplatta/mobil
• Välj om blocket ska vara fullbredd eller ej
• Ställ in bakgrundsfärg

Väljer du att visa upp kategorier på detta sätt, glöm inte att länka både text och bild!

Bonustips!

Visste du att man kan göra bilder runda direkt i butiken? Det är lätt! Markera först bilden du vill ska bli rund. Välj Infoga/redigera bild. Vid Klass väljer du sedan Rund. Obs! se till att bilden du väljer är kvadratisk, annars kommer den att bli oval. 

1.

2.

Mobile first 📱

Idag dominerar mobiltelefoner e-handelsbranschen, så se till att butiken ser bra ut även mobilt. Gå in via telefonen när du har sparat och scrolla igenom för att få en ordentlig helhetsupplevelse. Varför inte till och med låtsas vara en kund och analysera utifrån det perspektivet?