De sidor du skapar (eller som medföljer eventuell mall) kommer automatiskt skapa en mobilversion men du kan behöva göra ändringar och justera för att få den bästa designen. I Webbas kan du justera i tre olika vyer: datorvy, surfplattsvy och mobilvy. För smidig hantering framåt rekommenderar Webbas att ta del av den här guiden fullt ut så du kan redigera på bästa sätt från start vilket kan spara mycket tid i slutändan.
Hur växlar jag mellan de olika vyerna desktop/surfplatta/mobilversionen?
Du kan enkelt växla mellan de olika vyerna från de tre ikonerna ner till vänster i byggaren.
VIKTIGT ☝🏼
Börja alltid med att redigera datorvyn och när du känner dig nöjd med denna justerar du mobilversionen vid behov.
De ändringar du gör i "delad vy" (vilket det är som standard om du inte skapat en separat version i annan vy så som tex mobil) - kommer också påverka ALLA vyer (desktop, surfplatta och mobil) - med följande undantagsfall som är ditt sätt att anpassa endast mobila versionen:
1. Globala stilar (här finns inställningar för desktop separat. Och mobil/surfplatta gemensamt). Detta är en nyckelfunktion som kommer göra din skapandeprocess mycket enklare.
2. Lägga till widgets i mobilversionen (lägger du t.ex. in en knapp i mobil vy i ett block syns denna knapp endast i mobil vy). Observera att detta inte går att åstadkomma från datorvyn så t.ex. en knapp endast syns i desktop men inte i mobil - för detta ändamål > se här.
3. Skapa unik mobil-/surfplatteversion genom anpassade block
Vi rekommenderar starkt att titta på denna videoguide
Här visar vi hur du redigerar mobilvy/surfplattevy samt anpassar den för att få en god förståelse i hur du gör framåt:
Så ser du vilka vyer ett block syns i byggaren från mobil vy
När du är i mobila versionen eller surfplatteversionen ser du olika inställningar till vänster vid varje block när du hovrar med muspekaren över dem. Mer om dessa i nästa punkt här nedan.
Här ser du också huruvida vilka vyer detta block finns i alls, samt om det är aktivt/inaktivt i den aktuella vyn. Såhär ser du skillnaden:
Rött kryss och utgråad (se röd fyrkant) = Inaktiv i den vyn (i exemplet nedan ser du t.ex. att detta block inte syns på desktop).
Röda ikoner utan kryss (grön fyrkant) = Aktiva och synliga i den vyn (i exemplet ser du t.ex. att detta block syns i surfplatta och mobil).
Du kan också se huruvida ett block är unikt skapat för endast mobil- och surfplattevy ( = ej synligt på desktop alls) genom att ENDAST MOBIL syns till höger om blocket.
Om desktopikonen inte syns alls bland vyerna
Så innebär detta att detta block är en så kallad delad vy som automatiskt skapats när du skapade blocket i datorversionen. Det innebär att redigerar du i ett sådant block slår justeringarna igenom överallt.
De inställningar som finns i mobilvyn:
Dessa dyker upp till vänster om du för datorpilen över ett block (en sektion).
Inställningar för blocket (har du inte en separat mobilversion enligt guide om anpassade mobila block nedan kommer ändringar du gör här slå igenom på alla vyer).
Genom att klicka i eller ur Utsträckt så kommer innehållet hamna på samma rad (flera kolumner i bredd) eller olika rader (kolumner över varandra) om det är så att du har innehåll i olika kolumner.
Vänd om innehållet betyder att du kan vända på innehåll som finns just i det blocket. Detta är t.ex. praktiskt om du har ett block med 2 kolumner där ena kolumnen har en bild och det andra text. I dator står dessa bredvid varandra och i mobil vy hamnar de över varandra. Då kan t.ex. bilden (om den var i vänster kolumn i desktop) hamna överst fast du önskar den kommer under texten i mobila vyn. Då markerar du Vänd om innehållet så byter kolumnerna plats i endast mobila vyn.
Genom Globala stilar:
Dessa når du i Byggaren i menyn till vänster genom att klicka på Penselikonen. Se sedan till att du befinner dig i mobilvyn för att ställa in för just mobil vy. Här bör du ha ställt in samma typsnitt för rubrik och paragraf/brödtext som du har för datorvyn men däremot kan du behöva justera storlek på dessa. Oftast vill du ha mindre storlek i mobil än dator eftersom det är en mindre enhet. Klicka på respektive rubrik (eller paragraf) för att ändra dess inställningar.
Läs gärna mer om Globala stilar nedan:
Lägga till widgets i mobilversionen:
Om du inte vill skapa en unik mobilversion men vill lägga till innehåll som endast visas i mobil så kan du dra in widgets när du befinner dig i mobilvyn. Allt du placerar direkt i mobilvyn får ingen "delad vy" utan syns endast där. En sådan widget får en mobilikon vid sig, om du kollar ovan bild. Här har vi placerat en widgeten Avståndsbricka för att få till ett mellanrum.
Skapa unik mobilversion genom anpassade block
Här kan du antingen lägga till ett eget nytt block (precis som med tillagda widgets i mobil vy endast syns i mobila vyn gäller för nya block som skapas i detta läge).
Vill du skapa ett nytt block i mobil vy gör du såhär:
Om du vill lägga till ett nytt block får du fram detta val om du för datorpilen mellan två block. Du kan antingen välja ett tomt block som du lägger egna widgets i för att skapa eget innehåller eller så väljer du ett block från mallarna som finns färdigskapade.
Om du istället vill utgå från ett block du skapat i datorversionen men anpassa den unikt för mobila versionen så kopierar du blocket enligt denna guide och sedan drar du in (klistrar in) blocket medan du befinner dig i mobilvyn, för innehåll du placerar direkt där syns endast i mobil. Du kommer då se att ikonen för datorvyn får ett kryss vid sig och det står även Endast mobil till höger som beskrevs längre upp i denna guide.
Observera!
Om du kopierar ett block/skapar ett unikt att du döljer det ursprungliga som just nu har delad vy mellan desktop/mobil så det inte syns dubbelt. Detta gör du genom att på ikonerna du ser till vänster (dator/surfplatta/mobil) vid blocket som ska döljas trycker på tex mobilikonen så det får ett litet kryss vid sig och blir utgråat. Då syns det inte på mobil vy längre.
Vanliga frågor och svar om att redigera och anpassa mellan desktop-/surfplatte- och mobilversionerna
Hur gör man om man vill ha ett unikt block endast i desktopvyn som inte ska synas alls i mobila vyn?
Det finns ingen inbyggd funktionalitet för detta då desktop alltid är den primära vyn som webbplatsen byggs från. Men om du önskar ha ett block som bara syns i desktop och inte mobil så skapar du blocket i desktop som vanligt.
Sedan går du till mobil vy och markerar på ikonerna till vänster om blocket i den mobila vyn att blocket inte ska synas på mobil och till exempel surfplatta enligt instruktion längre upp i denna guide.
Om man har skapat ett block i mobil vy från början, kan man kopiera den designen till desktop?
Nej, detta går tyvärr inte. Om du har råkat skapa en design från mobil vy och nu vill synliggöra detta även i desktop är enda sättet att skapa detta från noll i desktopvy också. Därav vi starkt rekommenderar att alltid bygga från början i desktop och sedan göra enskilda anpassningar.
Om du försöker ändra t.ex. ett typsnitt i mobila versionen och inget sker trots att du ändrar storlek/färg osv - vad kan vara fel?
Detta beror på att du just nu redigerar i en så kallad delad vy där desktopvyn är den som styr designen. För att anpassa i den mobila vyn, se över denna guide från start där du kan behöva se över dina globala stilar eller skapa enskilda anpassningar för mobila vyn.
Ändrar du i mobila vyn och då ändras det i desktop också, du vill bara ändra i mobil utan att det ändras även i desktop - hur går man tillväga och varför blir det så?
Detta beror på att du just nu redigerar i en så kallad delad vy vilket för att alla ändringar slår igenom på alla vyer. För att anpassa i den mobila vyn, se över denna guide från start där du kan behöva se över dina globala stilar eller skapa enskilda anpassningar för mobila vyn.
Går det att redigera mobil-/surfplatteversionen i kanaler
Tyvärr går det inte att redigera mobil version i kanaler i dagsläget. Endast i hemsidebyggaren.
Går det att redigera mobil-/surfplatteversionen i e-post kampanjer och automatiseringar
Tyvärr går det inte att redigera mobil version i email utskick i dagsläget. Endast i hemsidebyggaren.
Går det att redigera mobil-/surfplatteversionen i blogg, popup eller portfolio
Tyvärr går det inte att redigera mobil version i dessa i dagsläget.