Stående bild på mobil startsida. Liggande på startsidan, desktop

Hur anpassar jag kampanjbilder för mobil och desktop?

Låt säga att du vill ha en liggande kampanjbild på startsidan av din e-handel som visas för desktop, och samtidigt en annan version av samma bild - fast stående för mobiltelefoner. Denna guide beskriver hur du gör det för WooCommerce med Wetail. Så här ändrar du detta i Admin.

Vi försöker med andra ord svara på frågan: "Jag skulle vilja ha en liggande bild högst upp som nu på startsidan på desktop, en stående bild högst upp på mobil. Är det möjligt och vart ändrar jag detta?"

1. Navigera via ditt Admin till din startsidas innehåll

Har du redan en desktop-bild på plats, låt den ligga kvar men gör en kopia av den och ändra bild på kopian till det du vill visa för kunder som besöker er site med mobil/stående format.

2. Justera din liggande bild föra att visas för desktop

Sedan klickar du på desktop-bilden och går till fliken Avancerat. Under Visibility -> Breakpoint väljer du Large & Medium Devices Only och sparar. Detta leder till att de som har skärmar som är lämpliga att visa detta format för, kommer att få det när de besöker er e-handel.

3. Anpassa bild för mobil

Klicka på bilden som ska visas i stående format för mobil och repeterar enligt punkt 2, men välj Small Devices Only istället.

Testar och kontrollerar att det blir bra gör du genom att i Wetail Page-builder trycka på knappen R så kommer du att komma till responsivt läge för plattor, ett till tryck och du kommer att komma till responsivt läge för mobiler. Ett till tryck och du är tillbaka till desktop (osv i all evighet). På så sätt kan du förhandsgranska hur det ungefär kommer att se ut på motsvarande storlekar (faktisk skärmstorlek avgör dock), men i "vanliga" desktop-läget kommer båda bilderna fortfarande synas för att man inte ska glömma bort att det finns två element.