Webbläsaren som du använder stöds inte av denna webbplats. Alla versioner av Internet Explorer stöds inte längre, av oss eller Microsoft (läs mer här: * https://www.microsoft.com/en-us/microsoft-365/windows/end-of-ie-support).

Var god och använd en modern webbläsare för att ta del av denna webbplats, som t.ex. nyaste versioner av Edge, Chrome, Firefox eller Safari osv.

Skapa en orienteringssida

Siffrorna ett, två och tre med pilar mellan. Grafik.

En orienteringssida är en sida som ger en översikt eller introduktion till en webbplats eller till delar av en webbplats. Den hjälper dina användare att navigera och förstå strukturen och innehållet. Orienteringssidor kan finnas i huvudmenyn men också längre ned i menystrukturen om det behövs.

I den här steg för steg-guiden visar vi hur du bygger en orienteringssida som är tänkt att ligga längre ned i menystrukturen på din webbplats i Drupal. 

För att bygga en orienteringssida använder du dig av:

  • En page (undersida)
  • Edit-läget
  • Layout-läget
  • Bildbehandlingsprogram (för att beskära toppbilden till rätt format).

Steg 1: Skapa en page och arbeta i Edit-läget

  1. Logga in på din webbplats.

  2. Gå till Content> Add content> Page i administrationsmenyn. När du skapat sidan kommer du automatiskt till Edit-läget. Om inte- klicka på fliken Edit högst upp.

  3. Välj en titel för sidan. Tänk på att välja en titel som är tydlig och talar om vad användaren kan förvänta sig att hitta på sidan.

  4. Skriv en ingress. Ingressen bör inte vara mer än 1-2 meningar lång och sammanfatta informationen som finns på sidan.

  5. Fyll i din brödtext. På en orienteringssida som den här behöver du skapa ett stycke för varje del av webbplatsen dina användare kan navigera till. Varje stycke behöver bestå av en underrubrik, en kort introduktion och en länk.

  6. Gå till Menu settings som du hittar till höger i Edit-läget och kryssa i rutan Provide a menu link och fyll i fälten för att placera din orienteringssida i menystrukturen på din webbplats.

  7. När du har valt en titel, skrivit en ingress och delat upp din brödtext i stycken enligt den här beskrivningen med fungerande länkar kan du spara sidan som utkast genom att välja "Draft" längst ned i Edit-läget och trycka på Save. Glöm inte att ange sidansvarig för sidan.

Steg 2: Förbered en toppbild för sidan 

Toppbilden för sidan har dimensionerna 1288x357px. Du behöver själv beskära en lämplig bild i ett bildbehandlingsprogram så att dimensionerna blir rätt. I den här guiden förklarar vi hur du gör det i bildbehandlingsprogrammet Adobe Photoshop. Det finns flera olika sätt att göra det på även i Adobe Photoshop. Här visar vi två av dem. Det första kan du som har version 24.6.0 eller senare använda. Det andra är för dig som har en äldre version av programvaran.

Version 24.6.0 eller senare

  1. Starta Adobe Photoshop och välj File> New.
  2. Välj alternativet "Custom" som gör att du själv kan anpassa bredd och höjd på din bild. 
  3. Under Preset details till höger fyller väljer du att ange storlek i pixlar och fyller sedan i 1288 i bredd och 357 i höjd. Välj liggande format.
  4. Nu öppnas en ny fil med en vit ruta som har de dimensioner du valt. Under den vita rutan hittar du en knapp där det står Import image. Klicka på den och välj en bild du har sparad lokalt på din dator. 
  5. Dra sedan i storleksreglaget så att bilden fyller din vita ruta på önskvärt sätt. Klicka sedan på enter.
  6. Exportera bilden genom att klicka på File>Export As och välj ett lämpligt format. 

Tidigare versioner av programvaran

  1. Starta Adobe Photoshop och välj File> Open för att öppna bilden du har sparad på din dator.
  2. Välj sedan File>New för att skapa en ny fil i en ny arbetsyta.
  3. Välj alternativet "Custom" som gör att du själv kan anpassa bredd och höjd på din bild. 
  4. Under Preset details till höger fyller väljer du att ange storlek i pixlar och fyller sedan i 1288 i bredd och 357 i höjd. Välj liggande format.
  5. Nu öppnas en ny fil med en vit ruta som har de dimensioner du valt.
  6. Gå till arbetsytan med bilden du öppnade och markera bilden med markeringsverktyget som du hittar i panelen till vänster.
  7. Kopiera sedan bilden med hjälp av kortkommandot Ctrl+C (Windows) eller ⌘+C (Mac).
  8. Gå till arbetsytan med den tomma vita rutan och klistra in din bild genom kortkommandot Ctrl+V eller ⌘+V.
  9. Nu kommer du troligtvis att behöva justera bilden så att den passar in i din vita ruta. Genom kortkommandot Ctrl+T eller ⌘+T får du upp ett reglage som gör att du kan göra bilden större eller mindre. Dra i reglaget tills bilden fyller rutan på ett lämpligt sätt.
  10. Exportera bilden genom att klicka på File>Export As och välj ett lämpligt format. 

 

Steg 3: Arbeta i layout-läget

  1. Börja med att gå till Layout-läget för din orienteringssida. 
  2. Skapa en sektion där toppbilden ska ligga. Det gör du genom att klicka på Lägg till sektion och välj sedan till höger under Choose a layout for this section en 1 column 9 (en kolumn som har 9 i spaltbredd) och klicka på Add section.
  3. I sektionen du skapat kan du nu klicka på Add content block och sedan väljer du Image.
  4. Ladda upp toppbilden du förberett i steg 2, skriv en alt-text till den och klicka sedan på Add content block.
  5. Nu bör du se din toppbild ovanför sektionen där din ingress och brödtext ligger.

Lägg till kompletterande information i högerspalten

I sektionen där du har din brödtext ser du till höger en högerspalt. I den kan det vara lämpligt att skapa en box med kompletterande information, t.ex. kontaktuppgifter som i det här exemplet. 

  1. Klicka på Add content block I högerspalten där boxen ska ligga. 
  2. Välj om du vill skapa en ny info-box eller om du har en befintlig du vill återanvända.
  3. Om du väljer att skapa en ny klickar du på Info box, new. Mer information om hur du fyller i fälten i en infobox hittar du på sidan om Info-boxar.

Steg 4: Spara din layout

För att spara din layout klickar du på den blå knappen Spara högst upp på sidan. Om du inte redan publicerat sidan och vill göra det nu kan du till vänster välja att ändra till Published.

Kategorier