Guide: Heimdalls heroblock - Design, webbutveckling och integration

Guide: Heimdalls heroblock

Höjd och bredd Lägg till innehåll Positionera innehåll Gör till bildspel

Öppna blockinfogaren och välj heroblocket för att lägga till det på sidan.

Bestämma höjd

Under Utseende-fliken bestämmer man inställningar såsom höjden och bredden på heroblocket och om det ska visa ett bildspel eller inte.

Höjden ställs in för både desktop och mobil, och man kan välja mellan en fast höjd (exempelvis 500px) eller en relativ höjd. Med en fast höjd kommer heron alltid hålla sig till den specificerade höjden, medan den relativa höjdinställningen gör att höjden påverkas av förhållandet till heroblockets bredd. Vill du exempelvis att heron ska vara dubbelt så bred som den är hög, så skriver du in värden med förhållandet 1:2, såsom höjd 1000 och bredd 2000.

Om du bara vill visa en bild i heron måste ett höjdmått ställas in. Innehåller heron även text eller knappar kommer höjden baseras på texten och/eller knappens höjd, om man inte skriver över det med ett eget höjdmått.

Bestämma bredd

Genom att kryssa i fullbredd-rutan kan du bestämma om blocket ska gå hela vägen ut till kanten på fönstret eller ha en begränsad bredd. Den begränsade bredden motsvarar oftast hemsidans innehålls maxbredd och brukar ofta linjera med logotypen i sidhuvudet. Den begränsade bredden specificeras i css-koden.

Fade ut-effekt

Under höjd- och breddinställningarna kan man också kryssa i en ruta som gör att heron blir mer transparent när man skrollar förbi det på sidan.

CSS-klasser för hela heron

Under Utseende-fliken finns också möjligheten att lägga till css-klasser som ska appliceras på hela heroblocket. Vid flera klasser skrivs dessa in separerade med ett mellanslag.

Lägg till en slide

När du har bestämt vilken storlek heron ska ha är det dags att fylla heron med innehåll. Eftersom innehållet kan behöva disponeras olika beroende på skärmstorlek, behöver du lägga till innehållet för både desktop- och mobilstorlek. Det innebär att du kan ha olika innehåll för din hero i desktop- och mobilstorlek, och att inget innehåll kommer visas för vissa skärmstorlekar om inget innehåll fylls i.

För att lägga till innehåll på en slide väljer du fliken Desktop eller Mobil, och därefter Lägg till rad.

Lägg till bakgrund

När du har lagt till en rad dyker det upp fler inställningsmöjligheter för den specifika sliden eller bilden. Under fliken bakgrund kan du välja om bakgrunden ska bestå av en färg eller en bakgrundsbild.

Bakgrundsbilden för desktop bör vara så stor att de flesta skärmstorlekar kan visa den utan att bilden blir suddig. Runt 2000–2500 px brukar vara lagom.

Med en bakgrundsbild finns möjligheten att att lägga på en parallax-effekt och att välja ut en specifik fokuspunkt som webbläsaren försöker fokusera på i bilden. Fokuspunkten kan aktiveras genom att klicka på bilden där du vill att fokuset ska ligga, eller genom att fylla i procenttal i fältet nedanför bilden.

Du kan också lägga till en toning på bilden, en så kallad overlay. Overlayen kan vara en enskild färg som läggs till med en hexkod (exempelvis #FFFFFF) eller en avancerad gradient. Dessutom kan du anpassa hur genomskinlig overlayen ska vara med opacitets-reglaget.

Lägg till innehåll

Under fliken innehåll lägger man till textinnehåll och knappar som ska placeras ovanpå bakgrunden. Tryck på Lägg till rad inom rutan för att börja lägga till innehåll.

Textinnehåll

Överst i innehållsfliken finner du nu ett textfält där du kan mata in texten som ska synas i heron. Du har möjlighet att använda textfunktioner såsom höger-/vänsterställa och centraljustera, lägga till listor, fetmarkera, länka text och byta färg på texten.

Du har också möjlighet att lägga en animation på texten.

Knappar

Efter textinnehållet kan du lägga till knappar. Lägg till en ny knapp genom att trycka på Lägg till rad och fyll i text på knappen, var den ska länka, eventuell färg som ska slå ut standardfärgen samt knappens position.

För fler knappar, tryck igen på Lägg till rad.

Bakgrundsfärg till innehållet

Längst ner i blocket kan du lägga till en bakgrundsfärg till texten och knapparna för att särskilja dem från bakgrunden.

Positionera innehållet

Förskjut innehållet

Det finns två sätt att positionera innehållet på sliden, och dessa sätt kan användas i kombination med varandra.

Under Innehållsfliken finns möjligheten att förskjuta innehållet i sliden åt något håll. Positionen ställs in som relativ, absolut eller centrerad.

Centrerad position innebär att innehållsblocket placeras centrerat i höjdled i heron. Fälten med positionsvärde som finns nedanför kommer inte användas med denna inställning och kan lämnas tomma.

Relativ position innebär att innehållet förskjuts från sin ursprungsposition. Med inställningen 30px från toppen och 30px från höger, kommer innehållet att förflyttas från ursprungspositionen 30px nedåt och åt vänster. Ursprungspositionen för innehållet är vanligtvis längst upp till vänster i heron, men du har möjlighet att lägga till flera innehållsblock i en slide, och då påverkar dessa varandras ursprungsposition, eftersom det andra innehållsblocket placeras efter det första innehållsblocket. För att lägga till ett nytt innehållsblock trycker du på Lägg till rad nedanför bakgrundsfärgsfältet i desktop- eller mobilfliken.

Absolut position innebär att innehållet förskjuts i förhållande till kanten på heron istället för från blockets ursprungsposition. Med inställningen 30px från toppen och 30px från höger förskjuts innehållet från övre och högra kanten på heron 30px till nedåt och till vänster.

Risken med att använda dessa inställningar är att delar av innehållet förskjuts utanför kanten på heron så att de helt eller delvis försvinner. Istället bör då inställningarna under Utseende slide användas.

Begränsa innehållet

Istället för att förskjuta innehållet finns också möjligheten att begränsa innehållet och den ytan innehållet kan ta upp. Dessa inställningar hittar man under fliken Utseende slide.

Med hjälp av inställningarna under Utseende slide kan du ställa in hur stor del av herons yta som får användas till innehåll. Genom att fylla i 30px på topp- och högervärdet har en extra marginal lagts till innehållet på ovankanten och den högra sidan, så att innehållet inte kan breda ut sig lika långt.

Denna inställning används med fördel för att göra stora placeringsändringar, som att bara lägga text på den högra halvan av heron eller liknande. Då läggs ett värde in i fältet marginal vänster motsvarande utrymmet från innehållet till kanten.

Du kan också kryssa i rutan begränsa innehållet till maxbredd, vilket gör att inget innehåll kommer placeras utanför det området som är sidans maxbredd för innehåll.

Här finns även en ruta för css-klasser som appliceras på den enskilda sliden – användbart om man använder bildspelsfunktionen.

Visa som hero eller bildspel

Nederst på Utseende-fliken finns möjligheten att välja om blocket ska visas som en hero eller som en slide. En hero visar enbart en bild (med eventuellt innehåll) medan en slide är ett bildspel som kan växla mellan flera bilder. Välj Visa som – Slide för att få upp fler inställningar för bildspel.

Under Slide kan man bestämma om blocket själv ska växla mellan bilderna (autoplay) eller om användaren själv måste växla. Du kan ställa in hur lång tid varje bild i bildspelet visas, mellan 0 och 100 sekunder.

Här har du också möjlighet att välja vilken animation som ska användas när bildspelet växlar mellan bilderna.

Vill du visa pilar för att växla mellan bilderna lägger du till en pilikon med hjälp av knappen. Ladda upp pilen för vänster sida av bildspelet, den kommer speglas på den högra sidan också. Passande filformat för pilikonen är .png eller .svg.

Slutligen kan du välja om den första bilden som visas i bildspelet ska slumpas fram eller om den ska vara den första sliden du lägger till.

Flera slides för bildspel

När du har skapat din första slide och fyllt den med det innehåll du vill visa, scrollar du ner till botten av heroblocket när du är i desktop eller mobilfliken och klickar på den nedersta Lägg till rad-knappen för att skapa en ny slide. Då får du upp en ny uppsättning med flikar som heter Innehåll, Bakgrund och Utseende slide, och du har möjlighet att fylla den nya sliden med innehållet du vill visa. I vänsterkanten på blocket syns en siffra som visar ordningen som sliden visas i bildspelet. Där kan du hålla nere muspekaren och dra runt blocken för att justera ordningen.