Drupal, instruktioner för redaktörer

Layout builder

Owned by Mattias Jacobsson
Last updated: Mar 11, 2021
5 min read
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

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.


  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.

  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".



  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".



  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".



    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"


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





  8. Komponenten "Bild"
    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)"
    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".
    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".
      OBS: När man nu lägger in en URL ifrån ett sökresultat i en extern puff ska den inte ha ikonen som visar att man lämnar webben. 

      För att den interna länkningen på en puff (en pil) ska fungera så tar du bort det som är överstruket i denna url https://www.gu.se/om-universitetet/hitta-person?organisation=Administrativt stöd
  10. Komponenten "Puff - intern (länk)"
    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".
  11. Komponenten "Video"
    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".
  12. Komponenten "Textruta"
    Välj     komponenten "Textruta".
    1. Lägg in din text i editorn.
    2. Klicka på "Lägg till komponent".
  13. Komponenten "Dokument"
    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.
  14. Komponenten "Länklista"
    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".
  15. Komponenten "Editor" (denna 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".
  16. Komponenten "Dragspel"
    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".
  17. 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".

      OBS! Tänk på att du måste fylla i både "Titel" och faktatext i fältet "Fakta" för att rutan ska synas.

  18. Komponenten "Textruta"
    Välj komponenten "Textruta".
    1. Lägg in fakta-text i editorn.
    2. Klicka på "Lägg till komponent".
  19. Glöm inte att spara ändringar.


I komponenterna"Bild" och"Editor"kan du välja att inte beskära en bild

För bilder som placeras i en informationssektion via komponenterna "Bild" och "Editor" kan man kryssa i en ruta för att förhindra att bilden beskärs. 


  1. Välj komponenten "Bild" i huvudkolumnen.
  2. När du har valt en bild, under rubriken Visa som, välj "Bildkomponenten: Medium (No crop)".
  3. Fyll i en Alt-text.
  4. Klicka på Bädda in.
  5. Spara och publicera.
  6. Titta på Visa-fliken att bilden inte har beskurits.
  1. Välj komponenten "Editor" i huvudkolumnen.
  2. När du har valt en bild, kryssa i rutan "Beskär inte bilden".
  3. Fyll i en Alt-text.
  4. Klicka på Bädda in.
  5. Spara och publicera.
  6. Titta på Visa-fliken att bilden inte har beskurits.