Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
panelIconId1f464
panelIcon:bust_in_silhouette:
panelIconText👤
bgColor#F4F5F7

Webbredaktör och lättredaktör kan skapa och redigera.

Sidans innehåll

Table of Contents
none
minLevel1
maxLevel1
outlinefalse
styledisc
typelist
printablefalse

Om puff - intern (länk)

Komponenten puff - intern (länk) använder du när du vill länka till en sida eller en utbildning som finns på gu.se. Du kan hämta innehåll från alla webbytor. Däremot kan du inte länka till hitta-sidor, till exempel om du vill visa alla sommarkurser i utbildningskatalogen - då använder du puff - extern (länk).

Förstå hur du arbetar i Layoutbuilder

Vill du förstå hur du arbetar i Layoutbuilder? Manualen Layoutbuilder

Riktlinjer

Expand
titleSidtyp bestämmer användning av puff

Beroende på vilken sidtyp du har finns det rekommendationer för hur du använder en puff.

Genomgångssida

Puff används för att leda besökaren vidare i navigeringen. Genomgångssidan består till största del av puffar.

Informationssida

Puff används för relaterad information till den rena faktan som finns på informationssidan. Antingen läggs Du lägger då puffen längst ner på sidan med rubriken Relaterad information, alternativt används den för att bryta olika sektioner och då är rekommendationen att undvika rubriki en grå sektion med rubriken “Relaterad information”.

Utbildningssida

Puff används för relaterad information till den rena faktan som finns på utbildningssidan. Antingen läggs Du lägger då puffen längst ner på sidan med rubriken Relaterad information, alternativt används den för att bryta olika sektioner och då är rekommendationen att undvika rubriki en grå sektion med rubriken “Relaterad information”.

Nyheter

Puff används för relaterad information och hamnar automatiskt längst ner på sidan. Rubriken är Relaterat innehåll och går inte att ändra.

Forskningsprojekt/grupp

Puff används för relaterad information och läggs längst ner på sidan i en grå sektion med rubriken Relaterad information“Relaterad information”.

Forskningsreportage/porträtt

Puff används för relaterad information och hamnar automatiskt längst ner på sidan. Rubriken är Relaterat innehåll och går inte att ändra.

Expand
titleAnpassa puffen

Du har möjlighet att anpassa puffen beroende på placering. Det finns rekommendationer för hur du ska anpassa puffen.

Titel

Puffen visar automatiskt sidans titel. Rekommendationen är att du inte ändrar titeln eftersom det kan förvirra besökaren i sin navigering.

Sammanfattning för puff

Puffen visar automatiskt sidans ingress (förutom för komponent i storlek 33). Rekommendationen är att du ändrar sammanfattningen för puff; :

  • Klicka på mellanslag i fältet för “sammanfattning” för att ingressen helt enkelt inte ska synas. Det här kan vara bra att göra om puffen känns för rörig och innehållet tydliggörs i rubriken.

  • Skriv en ny sammanfattning som på ett kort sätt förklarar sidans innehåll. Detta för att undvika “…” i puffen.

Bild för puff

Puffen visar automatiskt sidans huvudbild. Rekommendationen är att låta samma bild synas i puffen. Har sidan inte en bild har du möjlighet att välja en passande bild till puffen.

Visa ej bakgrundsbild

Du kan också välja att “Visa ej visa bakgrundsbildbakgrundsbild” och istället välja en bakgrundsfärg: blå, grön eller vit. Rekommendationen är att använda detta när du upplever att det blir för rörigt med flera puffar med bild.

Expand
titleBild i puffen

Om bild används i puffen, se till så att bilden inte är för stökigt samt att den inte innehåller någon text. Då syns länktexten som lägger sig över fotot bättre och besökaren har lättare att uppfatta vart puffen leder.

Expand
titleUtformning av puffar i en sektion

Beroende på vilken sektionstyp du har valt ser puffarnas storlek olika ut i desktop (i mobil är majoriteten av puffarna alltid lika stora). Puffar i en sektion ska alltid vara överskådliga och ha en struktur. Rekommendationen är att max antal puffar i en sektion är sex stycken. Vill du ha fler puffar skapar du fler sektioner.

Generellt finns det ett visst samband mellan puffens storlek och besökarens benägenhet att klicka på den. Men för att skapa ett snyggt flöde för besökaren är rekommendationen att du kombinerar olika storlekar på puffar.

Expand
titleHur ser det ut i mobilen?

Puffarnas utseende skiljer sig åt beroende på om besökaren är på en mobil eller i desktop, till exempel syns aldrig sammanfattningen i en puff på en mobil.

Storleken på puffen är också likadan vid majoritet av sektionstyperna, det skiljer sig bara åt för sektionstypen Fullbredd. Detta kan göra att en sida som känns ganska kort i desktop blir väldigt lång i mobil. Kom därför ihåg att alltid kolla hur din sida ser ut i mobil!

Expand
titleEtiketthantering
  • En Nyhetspuff får alltid etiketten Nyhet

  • En Evenemangspuff får alltid kategorin som en etikett t.ex. Föreläsning

  • En puff till sidtypen Forskningsprojekt/grupp får alltid etiketten Forskning

  • En puff till sidtypen Forskningsreportage/porträtt får etiketten Forskningsreportage/porträtt

  • En genomgångssida får ingen etikett

  • En ytas startsida får ingen etikett

  • En utbildningssida får ingen etikett

  • En kontaktsida får ingen etikett

  • En landningssida (som bara finns som startsida för gu.se och Aktuelltsidan) får ingen etikett.

Du som är redaktör kan alltså inte påverka etiketterna för dessa innehållstyper. Den lilla udda fågeln som vi har är informationssidan. Den fungerar så här.

  • När den skapas och när den läggs in i menyn, oberoende i vilken nivå, så hämtas etiketten ifrån första nivån. Ett exempel: I menyn har vi Om universitetet > Jobba hos oss > Så blir du en av oss. Om du gör en puff av sidan “Så blir du en av oss” kommer etiketten att bli “Om universitetet”, som är nivå 1 i menyn.

Skapa puff - intern (länk)

...

  1. Gå till redaktörsmenyn och välj “Layout”och Skapa din sektion. Välj sektionstyp, du kan skapa puff - intern (länk) i samtliga sektionstyper.

  2. Klicka på “Lägg till komponent” och välj “Puff - intern (länk)”

  3. Ska du länka till en sida på gu.se väljer du “Sök efter innehåll”.Ska du länka till en utbildning i kurskatalogen väljer du “Sök efter utbildning”.

  4. Sök efter titeln på sidan eller utbildningen. Finns det annat innehåll som har samma titel kan du också använda filtreringen för att enklare hitta.

  5. Klicka på “Välj innehåll”.

  6. Nu har du möjlighet att anpassa puffen enligt riktlinjerna ovan.

  7. När du är klar klickar du på “Lägg till komponent”. Klart!

Redigera innehåll i puff

  1. I redaktörsmenyn väljer du “Layout” och vid komponenten klickar du på redigeringspennan.

  2. Nu kan du redigera den befintliga puffen som du vill ändra. Till exempel kan du ändra titel, länk, ingress eller bild. Kom ihåg att följa våra riktlinjer.

  3. Klicka på “Uppdatera”.

Flytta puff

Du kan flytta en puff på två sätt:

  1. Ta tag i puffen och dra den till den sektion du vill flytta puffen till.

  2. Välja “Flytta”under redigeringspennan. Väl där kan du sedan välja vilken “sektion” samt “region” dit du vill flytta innehållet. Gör ditt val och klicka sedan på “Flytta”.

Radera puff

  1. I redaktörsmenyn väljer du “Layout” och vid puffen klickar du på redigeringspennan.

  2. Klicka på “Radera komponent”. En raderad komponent går inte att återställa.

  3. Klicka på “Ta bort”.

Bruten länk

Om en intern länk inte funkar längre kommer det synas på puffen när du är i redaktörsgränssnittet. För besökaren syns dock inte puffen.

...

Du behöver hantera länken i puffen, antingen genom att ta bort puffen eller söka fram nytt innehåll. Kom ihåg att återkommande rätta brutna länkar med hjälp av Siteimprove. På så sätt kan du säkerställa att besökaren hittar till den informationen som du länkar till.

Utvärdera och följ upp statistik med Siteimprove

Spara ändringar du har gjort

När du är färdig scrollar du längst ner på sidan för att spara dina ändringar.

  • Publicerad: Ändringarna sparas och visas för besökare.

  • Utkast: Ändringarna sparas, men visas inte för besökare förrän du väljer att ändra till Publicerad.

  • Avpublicerat: Sidan finns kvar i redigeringsläget, men en besökare kan inte se den alls.

Note

Kom ihåg att klicka på “Spara” för att ändringarna ska slå genom.

Goda exempel

Kommer inom kort.