Lägga in innehåll och hantera layout på en sida

Den här guiden handlar om hur du hanterar layouten på en innehållssida med flera widgetar. Om du vill veta hur man lägger in en widget, se guiden Lägg till en widget. Om du undrar hur du lägger in nya artiklar, se guiden Publicera nya artiklar i admin ut i webbshopen. Innan du kan lägga in innehåll på en sida så behöver sidan skapas, se guiden Skapa en ny sida.

Modulbaserat med widgetar

Innehållet på sidorna skapas modulbaserat med hjälp av widgetar - små byggblock som fungerar som informationsbehållare. När du vill lägga till innehåll, som exempelvis text, bilder, bildspel eller ett skyltfönster med artiklar, gör du det genom att placera en widget på sidan. Därefter ställer du in widgetens innehåll och bestämmer hur mycket utrymme den ska ta upp.

Det modulära upplägget ger dig en tydlig översikt och gör det enkelt att skapa flexibla sidlayouter med många variationsmöjligheter.

Gör så här i admin:

1. Gå till Webbplats -> Sidor.
   
2. Klicka på sidan du vill lägga in innehåll på. (Om du inte redan har skapat sidan, se denna guide.) Fliken Innehåll blir förvald. Om du just har skapat sidan så har den inget innehåll och fliken kommer därför vara tom, som på bilden nedan.
   
3. Tryck på Lägg till en widget. Hur du lägger till en widget och gör inställningar i den finns förklarat i guiden Lägg till en widget. I exemplet nedan har vi lagt till widgeten Bildspel och satt titeln till "Bildspel". Notera att när du lägger in den första widgeten får du även välja hur många kolumner du vill använda dig av, i vårt exempel nedan har vi valt 3 kolumner - vi kan alltså jobba med 3 widgetar på rad. Vi har även dragit ut widgeten så den använder 3 kolumner. Drag och släpp i högerkanten på en widget för att få den ta upp fler/färre kolumner.
4. För att se hur sidan ser ut i din webbshop trycker du knappen Spara. Sedan öppnar du upp innehållssidan igen och klickar på länken i rutan till höger.
   
   Observera att för att du ska kunna se sidan får Status för sidan inte vara satt till Inaktiverad. Denna inställning hittar du under tabben Allmänt för sidan.
5. Om vi lägger in några widgetar till, till exempel tre Splash och ett skyltfönster med nya artiklar så dyker dessa också upp på sidan. Notera att alla widgetar i admin ser ut att ha samma höjd, men hur det faktiskt ser ut på sidan beror på vilket innehåll widgetarna har, samt vilka inställningar som gjorts för Höjd i respektive widget. I exemplet nedan så har vi även valt att widgetarna Splash ska ta upp 1 kolumn var. Medans Bildspel och Nyheter tar upp 3 kolumner var.
6. Notera att om vi istället vill minska antalet kolumner får vi inte ha någon widget som spänner över flera kolumner än det nya antalet kolumner vi vill sätta. Vi måste då först minska bredden på de widgetarna genom att dra och släppa i högerkanten på dem, och sedan minska antalet kolumner.
7. När du är klar med innehållet på sidan, tryck på Spara och tryck upp alternativt ladda om webshoppens sida igen och kontrollera att allt ser ut som du tänkt dig.
   
   

Arbeta med responsiv vy eller mobilsida

Det finns två alternativ för att redigera mobilversionen på din sida, beroende på om du har responsiv design på din sida (sidan anpassar sig efter skärm) eller en äldre mobilversion (m-domän). Du kan enkelt se om din sida är responsiv genom att dra ihop webbläsaren och se om sidan anpassar sig efter storleken.

Responsiv sida

1. På innehållssidan har du en ruta som heter Arbeta med responsiv vy. Om du trycker på den finns här valen Mobil och Tablet. Valet Standard är desktop-versionen.
2. Om du trycker på Mobil eller Tablet, så ser du hur widgetarna är placerade där. Widgetarna som är inlagda under Standard-vyn (alltså för dekstop) hamnar automatiskt under både Mobil och Tablet-vyn också. Som standard är det också 1 kolumn på dessa sidor eftersom skärmen är mindre.
3. För att dölja en widget i någon av dessa vyer, så trycker du på kugghjulet till höger och sedan "Dölj i akuell vy".
   
   Vi väljer att dölja widgeten bildspel i mobilversionen, då får widgeten automatiskt en annan färg. Widgeten är dock fortfarande kvaroch aktiverad i de andra två vyerna.
   
4. För att lägga till en widgwet som endast syns i mobil och/eller tablet-vyn men inte i desktop (standard), så går vi tillbaka till Standard-vyn och skapar en ny widget. I vårt exempel nedan döper vi den till "Splash högst upp (mobil)" och gör samma sak - trycker på kugghjulet till höger och väljer "Dölj i akuell vy". Nu är widgeten dold i desktop men aktiv i de två andra vyerna.
   
   
5. Om vi sedan går till vyn för Mobil igen, så har widgeten dykt upp där.
   
6. När du är klar med alla vyer, tryck på Spara. Glöm inte att kolla så att vyerna ser bra ut i webbläsaren också. 

Mobilversion

1. Klicka på fliken Mobilt innehåll på innehållssidan.

2. Här behöver du lägga upp nya widgets för den mobila versionen av sidan.
3. När du är klar, tryck på Spara.

Stänga av eller ta bort en widget

Om du temporärt vill naktivera en widget men ändå vill ha kvar innehållet i widgeten kan du klicka kugghjulet till höger och välja Inaktivera. Widgeten inaktiveras och hamnar längst ned på sidan. Där kan du senare när du vill ha tillbaka widgeten trycka på den släckta glödlampsikonen för att aktivera widgeten igen. I exemplet nedan har skyltfönstret med nyheter stängts av.

Om du vill ta bort en widget helt klickar du kugghjulet till höger och sedan på Ta bort. Du får då upp en dialogruta som frågar om du är säker på om du vill ta bort widgeten. Om du är osäker på om du kanske kommer vilja använda innehållet igen senare så är det rimligt att inaktivera widgeten istället för att ta bort den.