Designblock

Med designblock bygger du upp sidan innehåll.

Du lägger till nya designblock genom att klick på "+"knappen nere i högra hörnet när du har en sida öppen för redigering.

Sektionshuvud

Det här blocket är avsett att användas längs upp på sidan för att inleda sidan med en bild, rubrik och ev. mindre text tillsammans med upp till 2 knappar med länkar. Du kan naturligtvis använda designblocket på andra platser på sidan också.

Vi rekommenderar starkt att använda bilder med mörka toner och vit text. För mer information, se Promo- och produktbilder.

Om bilden inte är tillräckligt mörk för att texten ska framträda tydligt kan du justera bildens transparens vilket gör bilden mindre framträdande. Det här är viktigt för läsbarhet (som beskrivet i t.ex tillgänglighetsdirektivet WCAG).

Välja bild

Klicka på knappen Välj bild för att öppna dialogrutan som används av alla designblock för att infoga en bild.

På fliken Mina bilder kan du ladda upp dina egna bilder som minimum måste vara 1920x1080 och maximalt 2550x1440 pixlar. Tänk på att innan du laddar upp en bild optimera den för användning på webben. Det gör du i ett bildbehandlingsprogram.

På fliken Unsplash hittar du tusentals professionella bilder som du fritt får använda på SLI Play. Tjänstens metadata är på engelska. Du behöver därför söka på engelska begrepp för att hitta bilder.

Klicka på bilden du vill använda och stäng dialogrutan med krysset uppe till höger i fönstret.

Om bilden du har valt inte fokuserar på den punkt du skulle vilja ha i centrum kan du antingen redigera bilden i ditt lokalt installerade bildbehandlingsprogram (rekommenderas) eller också kan du använda funktionen Välj mittpunkt.

Funktionen Välj mittpunkt ska användas sparsamt. Den rekommenderade lösningen är att istället beskära bilden i ett bildbehandlingsprogram och sedan ladda upp den bilden. Webbsidan blir snabbare och risken för problem minskas då bildernas storlek på sidan justeras beroende på användarens bildupplösning vilket gör att mittpunkt kan förändras.

Text & länkar i sektionshuvudet

Du kan ange en titel och en text som visas på sektionshuvudet. Du kan även påverka justering av texten.

Tänk på att inte lita på att justeringen av texten krävs för att texten ska framträda tydligt mot bakgrunden eftersom både bild och texter kommer att flyta runt och förändras beroende på vilken skärm den visas på (mobil, ipad, olika upplösningar på datoror).

Du kan också lägga till upp till 2 knappar, en primär och en sekundär som länkar till en annan sida, som i det här fallet min delade samling med filmer som jag har kallat "Årstider".

Textblock

När du infogar ett textblock så kan du skriva och formatera text med sk. markdown vilket är en standard för att snabbt skriva och formatera texter.

Att skriva text på det här sättet kan till en början verka lite överväldigande men är faktiskt ganska enkelt och går fort att lära sig.

Läs mer om hur du formaterar text här.

Texten du skriver kan presenteras i en eller två kolumner. Du kan även infoga en bakgrundsbild på samma sätt som du kan infoga en bild i designblocket sektionshuvud.

Bild & text

Med designblocket Bild & text kan du dela av långa texter för att lätta upp sidan.

Du infogar bild på samma sätt som du kan infoga en bild i designblocket sektionshuvud.

Texten du skriver kan inte formateras och består av en rubrik, en text och upp till 2 länkar.

Det fungerar på precis på samma sätt som Text & länkar i sektionshuvudet, men med skillnaden att vänster/högerställa texten istället här handlar om vilken sida om bilden du vill ha texten.

Bildblock

Med ett Bildblock kan du infoga en eller två bilder som delar av långa texter för att lätta upp.

Du infogar bild på samma sätt som du kan infoga en bild i designblocket sektionshuvud.

Och så här kan resultatet t.ex. se ut.

Inloggnings- och registreringsformulär

Dessa designblock är lite speciella. Dels så kräver de att få ligga högst upp på sidan, och dels så innehåller de funktioner som behövs för att SLI Play ska fungera. Du kan dock påverka bakgrundsbild, rubrik och text.

Du kan också på dessa sidor lägga till ytterligare designblock så länge dessa placeras under dessa fasta systemblock.