Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Page Properties


Beskrivning

Layout builder gör det enkelt bygga flexibla sidor och layout med hjälp av en särskild funktionalitet som finns i Drupal. Här kan du skapa sidans layout rätt så fritt, men tänk på att inte överanvända finesser. Sidorna delas in i sektioner, som i sin tur kan delas in i ett antal spalter och sedan fyllas med komponenter. Layout builder är en möjlighet för dig som redaktör att hjälpa besökaren att hitta rätt information.

Layout builder kan användas som ett komplement på informationssidor och på sidor om Forskningsprojekt/grupp. På genomgångssidor däremot är layout builder ett måste, för att du ska kunna bygga en bra sida.

Tillvägagångssättet för hur du använder Layout builder är detsamma oavsett innehållstyp som har denna funktionalitet. Däremot skiljer det sig vilka komponenter du har möjlighet att använda beroende på innehållstyp. Till exempel kan du lägga till en faktaruta på en informationssida, men inte på en genomgångssida. Sektionen Information finns bara i Informationssidan och Forskningsprojekt/grupp. Och komponenten Editor finns bara i sektionen Information. Läs mer om Regler för sektioner och komponenter.

Film: Använda Layout builder i Drupal




Page Properties
hiddentrue


Highlight

<<Tillbaka



Så här gör du

I det här exemplet beskrivs hur du använder Layout builder på en befintlig genomgångssida och hur du lägger till komponenterna "Textruta" och komponenten "Video" i tvåspaltssektion.

  1. När du står på din sida, klicka på "Layout" i raden med flikar.
    Image Modified

  2. Lägg till sektion
    Nedanför de fasta fälten har du möjlighet att skapa din layout genom att först lägga till vad som kallas sektioner. 
    1. Klicka på länken "Lägg till sektion" längst ner till höger på sidan eller använd den förvalda "två-spalt sektionen" på sidan.
      Image Modified
  3. Sektionstyp
    Du får nu möjlighet att välja hur många spalter sektionen ska ha genom att klicka på någon av de olika layouterna till höger på sidan.
    1. "Två-spalt" (tre val).
    2. "Tre-spalt".
    3. "En-spalt".
    4. "Fullbredd".

      Image Modified

  4. Konfigurera sektion
    Ange sektionsrubrik, bakgrundsfärg (Ingen eller grå) och om det ska finnas marginal till ovanliggande sektion. Det gäller för alla sektioner utom typen "Fullbredd" som inte har några inställningar.
    1. Klicka på den blå knappen "Lägg till sektion".

      Image Modified

  5. Fyll sektionen med innehåll och lägg till komponent
    Den sektion du precis lade till kan du nu börja fylla med innehåll.
    Klicka på länken "Lägg till komponent" som ligger till vänster i två-spalten.


    1. Välj komponent
      I det här exemplet väljer vi att lägga till komponenten "Textruta" i listan till höger. Klicka på länken "Textruta".



    2. Konfigurera komponent
      Fyll i text i den rutan som dyker upp och klicka på den blå knappen "Lägg till komponent" för att spara.

  6. Lägg nu till innehåll i den högra spalten i två-spalten. Klicka  på länken "Lägg till komponent".



    1. Välj komponent
      I det här exemplet väljer vi att lägga till komponenten "Video". Klicka på länken "Video".

      Image Modified

    2. Konfigurera komponent
      1. Titel
        Ange videons  namn/rubrik i fältet"Titel", obligatoriskt. Denna text kommer att placeras i filmens underkant.
      2. Video URL
        Ange URL till videon genom att klistra in adressen i fältet "Video URL" (obligatoriskt).
      3. Video längd
        Ange videons längd i formatet m:s (minuter och sekunder) eller t:m:s (timmar, minuter och sekunder) i fältet "Video längd".
      4. Video omslag
        Lägg till en bild som skall fungera som omslagsbild för video innan den spelas i fältet "Video omslag" (obligatoriskt). Klicka på den grå knappen "Öppna bildbibliotek.
      5. Lägg till komponent
        Klicka på den blå knappen "Lägg till komponent"

        Image Modified
  7. Publicera sedan ändringarna på sidan genom att välja "Publicerad" och klicka därefter på den blå knappen "Spara ändringar".

    Image Modified



  8. Komponenten "Bild" (Ange vilka sektioner)
    Välj komponenten "Bild".
    1. Klicka på "Öppna bildbibliotek".
    2. Välj bild från biblioteket, markera bild och klicka på "Välj bilder".
    3. Ange alternativ text (obligatorisk text). Bilder som enbart har en dekorativ funktion eller inte är meningsbärande ska inte ha en alt-text.
    4. Klicka på "Lägg till komponent".
  9. Komponenten "Puff - extern (länk)" (Ange vilka sektioner)
    Välj komponenten
    "Puff - extern (länk)" - fyll i rubrik i fältet "Titel" och länkadress i fältet "Länk". Klicka på "Lägg till komponent".
  10. Du kan också välja att:
    1. lägga till en etikett i fältet "Etikett/Kategori", för att hjälpa besökaren.
    2. skriva en kortare sammanfattning i fältet "Ingress".
    3. lägga till en bild som visas för puffen genom att klicka på "Öppna bildbibliotek".
  11. Komponenten "Puff - intern (länk)" (Ange vilka sektioner)
    Välj komponenten
    "Puff - intern (länk)" - fyll i rubrik i fältet "Titel" och länkadress i fältet "Länk". Klicka på "Lägg till komponent".
    1. Du kan också välja att:
    2. lägga till en etikett i fältet "Etikett/Kategori", för att hjälpa besökaren.
    3. skriva en kortare sammanfattning i fältet "Ingress".
    4. lägga till en bild som visas för puffen genom att klicka på "Öppna bildbibliotek".
  12. Komponenten "Video" (Ange vilka sektioner)
    Välj
    komponenten "Video".
    1. Ange videons Title i fältet "Title" (obligatoriskt).
    2. Klistra in en länk från t.ex. Youtube, Vimeo eller GU Play i fältet "Video URL" (obligatoriskt).
    3. Ange videons längd i fältet "Video längd" (obligatoriskt).
    4. Lägg till en bild som skall fungera som omslagsbild för video innan den spelas i fältet "Video cover".
    5. Klicka på "Lägg till komponent".
  13. Komponenten "Textruta" (ange vilka sektioner)
    Välj
    komponenten "Textruta".
    1. Lägg in din text i editorn.
    2. Klicka på "Lägg till komponent".
  14. Komponenten "Dokument" (ange vilka sektioner)
    Välj
    komponenten "Dokument".
    1. Ange rubriken i fältet "Rubrik".
    2. Klicka på "Lägg till dokument".
    3. Klicka på länken "Bläddra bland existerande dokument" för att ange fil eller genom att söka efter existerande fil. 
    4. Klicka i kryssrutan och klicka på knappen "Välj dokument".
    5. Du kan också välja att Ladda upp nytt dokument:
      1. Klicka på länken "Ladda upp nytt dokument"
      2. Ange titel i fältet "Titel".
      3. Klicka på knappen "Bläddra..." i fältet "Fil" och leta upp ditt dokument.
      4. Ange ett kort sammandrag som beskriver dokumentet.
      5. Ange "Försättsbild" om du vill lägga till en bild till vänster om dokumentlänken.
  15. Komponenten "Länklista" (Ange vilka sektioner)
    Välj
    komponenten "Länklista".
    1. Ange länklistans rubrik i fältet "Rubrik"
    2. Ange länk till sidan i fältet "URL" och länktext i fältet "Länktext".
    3. Klicka på knappen "Lägg till ytterligare alternativ" för att lägga till fler länkar.
    4. Länkordning ändras genom knappen "Visa radernas vikt".
  16. Komponenten "Editor" (Ange vilka sektionerdenna komponent kan bara användas på informationssidor och i den vänstra sektionen)
    Välj komponenten "Editor
    ".
    1. Lägg in din text i editorn.
    2. Klicka på "Lägg till komponent".
  17. Komponenten "Dragspel" (Ange vilka sektioner)
    Välj
    komponenten "Dragspel".
    1. Ange rubrik och rubriknivå (H2-H4) för dragspelet i fältet "Rubrik".
    2. Lägg in fakta-text i editorn under "Innehåll".
    3. Klicka på "Lägg till komponent".
    4. Spara dina ändringar via knappen "Spara ändringar".
  18. Komponenten "Faktaruta"
    Välj
    komponenten "Faktaruta". 
    1. Ange titel i fältet "Titel".
    2. Lägg in fakta-text i editorn i fältet "Fakta".
    3. Klicka på "Lägg till komponent".
  19. Komponenten "Textruta"
    Välj komponenten "Textruta".
    1. Lägg in fakta-text i editorn.
    2. Klicka på "Lägg till komponent".
  20. Glöm inte att spara ändringar.
    Image Modified




Page Properties
hiddentrue


Info
titleViktigt att tänka på




Page Properties
hiddentrue

Felsökning

  1. Tänk på att det är viktigt att alltid spara ändringar.



Page Properties
hiddentrue

Relaterade artiklar

Filter by label (Content by label)
showLabelsfalse
max5
spacescom.atlassian.confluence.content.render.xhtml.model.resource.identifiers.SpaceResourceIdentifier@1086d
showSpacefalse
sortmodified
reversetrue
typepage
cqllabel = "Genomgångssida" and type = "page" and space = "DIR"
labelskb-how-to-article