Layouts
I denna sektion går vi igenom hur du arbetar med och skapar layouts i PicFlow.
Varje skärm i PicFlow tilldelas en specifik layout som definierar dess struktur och innehållsytor. Layouten består av definierade areas vilka fungerar som behållare för det innehåll som ska visas.
Vad är Layouts?
Flödet för att visa upp skärminnehåll i PicFlow kan beskrivas som att varje skärm tilldelas en layout. Layouten i sin tur har ytor, och dessa ytor fyller vi med innehåll. Innehåll kan vara mediefiler, så som bilder och rörligt material, eller templates, som i sin tur kan innehålla mediefiler.
Innan du placerar ut innehåll i form av bilder, videos eller templates, behöver du ge din skärm en layout. Layouten är ett form av “skelett” för att visa upp skärminnehåll. En layout består av ytor, och de är i dessa ytor vi publicerar vårt innehåll. Olika ytor kan ta upp olika mycket plats av skärmen, detta väljer du helt fritt om du själv skapar en layout. Du kan också välja att använda dig av någon av våra standardlayouter.
En layout är alltså en grundstruktur för hur ditt skärminnehåll ska vara upplagt. Du kan tänka på en layout som en anslagstavla som du visar upp på din skärm, på vilken du placerar ut specifika ytor i vilka du kan publicera ditt innehåll och nå ut med dina budskap.
Vad är ytor?
Det i ytorna som publicering av innehåll sker. Innehåll kan vara mediefiler, så som bilder och rörligt material, eller templates, som i sin tur kan innehålla bland annat mediefiler eller text.
En layout har ofta flera ytor utplacerade. För att få en bättre förståelse för hur ytor kan vara utplacerade, kika på en av våra standardlayouter som du hittar under “Layout Templates“.
Navigera till Layouts via den gula sidebaren till vänster på skärmen.
Layouts
Under Layouts fliken hittar du dina skapade layouter. För att erhålla en god överblick och struktur rekommenderar vi att döpa dina layouter på ett sätt som gör det lätt för dig och din organisation att skilja dem från varandra.
Skapa en Layout
1. Klicka på den röda “Create Layout” knappen i sidopanelen till höger på skärmen.
Ett annat alternativ är att klicka på det mindre plustecknet i det övre högra hörnet. Båda alternativen öppnar samma popup-fönster.
2. Ett pop up- fönster öppnas på skärmen. Här väljer du mellan att skapa en helt ny layout från grunden, eller någon av våra standardlayouter att utgå ifrån.
Väljer du “New Layout”, likt i bilden ovan, får du en blank canvas att jobba med.
Markerar du en av PicFlows standardlayouter, har du möjlighet att utgå från denna designen i redigeringsläget, för att ta fram din egna layout.
Klicka på “Create Layout” knappen för att skapa din layout. Du når nu redigeringsvyn.
📖 Läs mer om redigeringsvyn i avsnittet “Redigeringsvyn” här.
Redigera en Layout
Markera en befintlig layout genom att klicka på den, en röd ram runt objektet indikerar att layouten är vald.
Möjliga val för layouten visas i sidopanelen på höger sida av skärmen.
Redigera layoutens namn under “Layout Name“.
❗️ Glöm inte att spara förändringar av namnet, genom att klicka på den röda “Save Settings” knappen längst ner i sidopanelen.
Klicka på “Edit Layout” knappen för att redigera din layout. Redigeringsvyn öppnas då upp på din skärm.
📖 Läs mer om redigeringsvyn i nästa avsnitt av User Guiden. Navigera dit direkt genom att klicka här.
Klicka på “Make a Copy” för att duplicera den markerade layouten. Du tas direkt till redigeringsvyn, där du ges möjlighet att redigera duplikationen.
Du hittar duplikationen bland resten av layouterna i Layouts biblioteket.
Redigeringsvyn
Du når redigeringsvyn för en layout genom att välja att redigera en befintlig layout, eller när du skapar en ny layout. För att hantera din layout använder du dig av verktygsfältet i ovankant, och den högra sidopanelen.
Verktygsfältet
Vi går igenom verktygsfältet, symbol för symbol:
Här ges du alternativ att visa upp ett rutnät (1) ovanpå din template samt aktivera ett snapping tool (2), justeringsverktyg, vilken underlättar vid placering av dina widgets.
Klicka på symbolerna för att aktivera verktygen. När verktyget är aktiverat, blir symbolen röd. Båda verktygen kan vara aktiverade samtidigt.
Symbolerna för skärmar avser stående respektive liggande layout. Som standard får du en stående layout. Om du istället vill bygga en layout till en liggande skärm trycker du helt enkelt på symbolen med den liggande skärmen.
Rotationen ser du direkt på din skärm. Den stående respektive liggande symbolen är också markerad i rött, beroende på vilken rotation du valt.
Genom att trycka på symbolen med den streckade ramen, kan du öppna ett visningsfönster, för att se hur den nuvarande sparade layouten ser ut. Inga ändringar i layouten syns i detta visningsfönster innan de sparats.
Tryck på den röda “Save Changes” knappen när du är nöjd med dina ändringar och vill spara dem till din layout.
Genom att trycka tre vertikala punkterna, öppnas en listmeny. Tryck “Delete” för att ta bort din layout, bekräfta borttagningen i pop up-fönstret. Tryck på “Preview Mode” för att öppna layouten i helfönster, i en ny flik. Tryck “Save as Layout Template” om du vill spara din layout som en template att skapa framtida layouter från.
Sidopanelen
Klicka på den röda knappen “Add Area” för att lägga till en yta i din layout.
📖 Vi går igenom mer noggrant hur man lägger till och hanterar areas i avsnittet “Lägg till en area”.
Navigera dit genom att klicka här.
Parameters

I sektionen Parameters kan du redigera namn, förhållandet mellan bredd och höjd (“Aspect Ratio“), skärmupplösning, rutnätsstorleken (“Grid“) i pixlar oh ge din layout en bakgrundsfärg.
Layers
I sektionen Layers kan du se alla ytor i din layout som lager, vilket ger dig full kontroll över vad som ingår i din layout.
❗️ Glöm inte trycka på den röda “Save Changes” knappen i verktygsfältet när du är nöjd med dina ändringar och vill spara dem till din layout.
Areas
För att kunna använda layouten och publicera innehåll, behöver du lägga till areas, eller ytor, att publicera i.’
Du lägger till ytor till din layout i redigeringsvyn.
💡 Du når redigeringsvyn för en layout genom att välja att redigera en befintlig layout, eller när du skapar en ny layout.
Lägg till en area
1. Klicka på den röda knappen “Add Area“, högst upp i den högra sidopanelen.
2. Ge din yta ett namn i pop up-fönstret, och tryck sedan på “Create“.
Hantera area
Greppa ytan du vill hantera genom att klicka på den. En röd ram runt arean indikerar att ytan är vald. En mindre verktygspanel blir synlig i areans ovankant.
I verktygspanelen ges du möjlighet att med hjälp av pilarna flytta det lager som arean utgör bakåt eller framåt. Klicka på symbolen med en papperskorg för att radera arean. Klicka på symbolen för ett lås för att låsa eller låsa upp arean, en låst area går inte att flytta på förän den låses upp igen. Klicka på symbolen för ett öga för att styre huruvida ytan skall vara synlig eller inte på skärmen, du kan alltså dölja en area utan att radera den.
För att skapa en snygg layout och erhålla symmetri rekommenderar vi att du aktiverar rutnät och snapping tool i verktygsfältet. Symbolerna för dem lyser rött när de är aktiverade, likt ovan.
📖 Läs mer om verktygsfältet och dess verktygs innebörd i avsnittet “Redigeringsvyn” ovan. Navigera dit genom att klicka här.
💡 För att justera rutnätets rutors storlek, avmarkera din ytan (om du har någon markerad) genom att klicka någonstans i det gråa utanför layouten. Redigera rutornas storlek under “Grid“, vågrät längd anges vid X-parametern och lodrät höjd anges vid Y-parametern.
Du kan reglera parametrar och förändra egenskaperna för din yta under “Parameters” i den högra sidopanelen.
❗️ Obs! För att redigera en ytas parametrar måste ytan vara markerad. Greppa ytan genom att klicka på den i layouten.
Ändra ytans position i din layout genom att klicka på ytan, dra den med muspekaren och släppa den på önskad plats, eller genom att skriva in önskad position direkt i X/Y-koordinatfälten.
Ändra ytans storlek sett till ytan genom att dra i någon av de röda fyrkanterna runt om ytan , eller genom att ange önskad bredd och höjd direkt i W/H-fälten.
💡 Tips: En full layouts standardmått är 1080 x 1920 pixlar. För att få till en symmetrisk layout, se till att dina ytor har samma avstånd till layoutens kanter, och har lika stort mellanrum mellan sig.
Välj även innehållets visningsläge under “Display Mode“.
Du har följande alternativ att välja på:
Original
Visar bilden i originalstorlek och format, utan justeringar. Om bilden är större än behållaren kan delar beskäras. Om den är mindre kan tomrum uppstå runt bilden.
Contain
Skalar bilden så att hela bilden får plats inom behållaren. Hela bilden syns, men det kan uppstå tomrum om bildens proportioner inte matchar behållaren.
Fill
Skalar bilden för att fylla hela behållaren. Inget tomrum visas, men bilden kan bli utdragen eller förvrängd om proportionerna skiljer sig mycket från behållarens.
Fit
Skalar bilden så att den passar inom behållaren och behåller sina ursprungliga proportioner. Om behållaren är mindre än bilden, beskärs delar för att undvika att ändra proportionerna.
När du skapar en layout kan välja att behålla ytan tomma, och publicera innehåll först på skärmnivå, eller så kan du publicera innehåll som ingår i layouten.
För en detaljerad genomgång av hur du lägger till innehåll som ingår i layouten, se avsnittet “Publicera innehåll som ingår i layouten” nedan.
Publicera innehåll som ingår i layouten
Klicka på den röda knappen “Edit Playlist” i den högra sidopanelen.
Du skapar, eller redigerar, nu innehållet som visas i din area.
I detta läget ser du en förhandsvisning av dina areas innehåll. Du ser även speltid för din innehållet, och hur många objekt av respektive medietyp som spellistan innehåller.
Du kan även härifrån redigera din areas namn, och välja läge för övergångarna mellan objekt i din area under “Transition Animation“.
Under “Area Items” ser du de objekt som arean innehåller.
Lägg till innehåll i spellistan
Tryck på “Add Content” för att lägga till innehåll i din spellista.
Du kan lägga till både mediefiler och templates i din spellista, välj mellan befintliga eller att ladda upp/skapa nya.
📖 För mer noggrann genomgång av hur du lägger till och hanterar innehåll, navigera till User Guidens sektion “Screens” och avsnittet “Publicera innehåll“. Scrolla ned till underavsnitten “Lägg till mediefil” respektive “Lägg till en template” för att läsa en detaljerad genomgång av hur du lägger till mediefiler och templates. Navigera dit genom att klicka här.
Dina tillagda objekt dyker upp under “Area Items“.
Tryck på de tre vertikala punkterna för att visa alternativ för ditt objekt. Du kan bl.a. redigera namn, schemalägga ditt innehåll, sätta prioritet på ditt innehåll och ta bort objektet ur spellistan.
📖 För mer noggrann genomgång av dessa alternativ, navigera till User Guidens sektion “Screens” och avsnittet “Hantera objekt i en playlist“. Där kan du läsa en detaljerad genomgång av både hur du kan hantera mediefiler och templates i en spellista, under “Hantera mediefiler i en playlist“, här, och “Hantera templates i en playlist“, här.
❗️ Obs! Glöm inte trycka på den röda knappen “Save Changes” för att spara förändringarna du gjort i din layout.