Artikelsidor i Episerver

Artikelsidor är en av de vanligaste sidtyperna i Episerver och den används för sidor där du vill få fram mycket fakta eller inspiration i textform, varvat med bilder.

Så här gör du för att skapa en artikel

1. Ställ dig i trädet på den plats där du vill skapa din artikel (se till att den sidan som du vill skapa artikeln under är markerad). Tryck på hamburgermenyn (de tre strecken) som kommer upp till höger om sidan du markerat. Välj Ny sida.

2. Du får nu ett antal olika val på nya sidor att skapa. Välj sidtypen Artikel.

3. Döp din artikel. Skriv in ett namn och klicka på Ok. Det namn du väljer blir även sidans namn i URL-adressen. Det går att byta namn på URL-adressen efter att du skapat sidan, men det är bra att göra detta omgående för att undvika brutna länkar.

OBS! Undvik att byta URL-namn på redan befintliga sidor eftersom det kommer att göra det svårare för sökmotorer att hitta sidan. Kontakta Turistrådets support om du verkligen behöver byta namn på en webbadress.

Fliken Innehåll

Under fliken Innehåll lägger du in innehållet (text, bild, video) i din artikel.

Toppbild

Börja med att lägga till toppbild för din artikel genom att klicka på plustecknet under rubriken Toppbild. Då kommer du till ImageVault där du kan hämta bilder från din destinations bildmapp eller från Västsveriges Mediabank samt ladda upp nya bilder. För mer info se manual för ImageVault.

När du har valt bild, markera bilden och tryck på Lägg till. Liggande bilder fungerar bäst!

Radera en toppbild – är du inte nöjd med bilden raderar du den genom att föra musen över bilden och trycka på symbolen ”x”. Därefter kan du lägga till en ny bild.

Beskära en toppbild – för musen över bilden och tryck på symbolen för Editera bild, då kommer du till ett nytt fönster där du kan beskära bilden. Observera att bilden kan komma att se olika ut beroende på vilken typ av enhet besökaren använder, det är därför svårt att göra en exakt beskärning.

Notis! Tidigare fanns det ett val att lägga till flera toppbilder i en artikel, men sedan april 2023 är den funktionen bortagen. Det ser dock fortfarande ut som att det går, men så är alltså inte fallet.

Rubrik, ingress m.m.

Sidtitel – skriv samma som för Titel

Titel – huvudrubriken för artikeln, det som även kallas för H1-rubrik.

Sidhuvudplacering – här kan du välja mellan sida och toppbild. Väljer du sida kommer rubriken att visas under bilden (rekommenderas!). Väljer du däremot toppbild så visas rubriken centrerad i toppbilden, men det rekommenderar vi inte för artiklar.

Publiceringsdatum – används för att visa när artikeln är skapad. OBS! Turistrådet Västsverige använder inte denna i sina artiklar, eftersom artiklar som skapades för flera år sedan riskerar att uppfattas som gamla.

Källa – används för att hänvisa till eventuell text man har hämtat inspiration ifrån.

Skribent – här kan man skriva in vem som har skrivit artikeln. Visas under toppbilden.

Tags – tags styr om man vill visa upp relaterade artiklar.

Ingress – ingressen är den inledande delen av en artikel. Dess uppgift är att sammanfatta
artikeln genom att ta fram det viktigaste, och att locka till läsning av resten av artikeln.
Vi rekommenderar att ingressen är max 3 rader på desktop, för annars riskrera den att bli väldigt lång på mobila enheter.

Texteditorn

I bilden längre ner kan du se en översikt av texteditorn, men vi går också igenom funktionerna här nedan.

Brödtext – här lägger du in den löpande texten i din artikel.

Tips! För att inte få med oönskad formatering (t.ex. radbrytningar eller konstiga typsnitt) när du kopierar text från ett dokument eller en hemsida, högerklicka och välj Klistra in som oformaterad text. För att avformatera text kan du också markera den och klicka på symbolen Avformatera längst till vänster i texteditorn.

Underrubriker – underlätta för besökaren genom att använda underrubriker i din artikel. En underrubrik ska på ett kort och koncist sätt beskriva vad efterföljande stycke handlar om.

För att skapa underrubrik, ställ markören på texten du vill formatera. Gå sedan till verktygsfältet och
tryck på fliken Text. Välj Underrubrik (H3) eller Underrubrik 2 (H4).

I verktygsfältet kan du även välja att fetmarkera ord, samt infoga punktlistor och nummerlistor. Det är också smarta sätt att lätta upp texten på och göra den mer lättöverskådlig för besökaren.

Länkar – för att skapa en textlänk markerar du det ord eller den mening som ska länkas. Gå sedan till verktygsfältet och välj symbolen Infoga/redigera länk.

Vill du länka till en sida i Episerver, välj Sida. Tryck på rutan med tre punkter. Leta upp sidan du vill länka till i trädstrukturen. Tryck OK.

För att länka till en extern sida väljer du Extern länk. Klicka i rutan och klistra in URL-adressen. Tryck OK.

För att länka till en pdf-fil väljer du Media. Tryck på rutan med tre punkter. Leta upp din pdf. Tryck OK.

Vill du veta mer om länkar, hur man laddar upp en pdf-fil och hur man skapar knappar av sina länkar? Kolla då i manualen för länkar, knappar och pdf:er.

Artikelbild

Artikelbild är den vanligaste formen av bilder som används i artiklar.

Artikelbilder skapas under resursfönstret som du hittar till höger i Episerver. När du har skapat bilden kan du sedan dra in den på valfri plats i din artikel, på liknande sätt som block på en portalsida.

Så här gör du för att skapa en artikelbild

1. Tryck på Växla resursfönster till höger, dubbelkolla att du står på Block och inte Media.

2. Scrolla längst ned i resursfönstret och markera För denna sida. Det går även att skapa artikelbilden i kommunens egen mapp, mer om det kan du läsa i manualen för resursfönstret. Men det enklaste är att skapa bilden i mappen som heter för denna sida (rekommenderas).

3. Tryck på + (längst ned till vänster). Du får nu upp ett antal olika block att välja mellan. Leta upp det som heter Artikelbild.

4. Döp bilden så att du via namnet förstår vilken bild det är, då är det enklare för dig om du vill redigera bilden i efterhand. Namnet syns inte utåt för besökaren. Tryck OK.

5. För att komma vidare och välja bild, Tryck på + i bildrutan. Du kommer nu vidare till ImageVault där du kan hämta en bild från din destinations bildmapp, från Västsveriges Mediabank eller ladda upp en ny bild. För mer info se manual för ImageVault.

6. När du har valt bild, markera bilden och tryck på Lägg till. notera att liggande bilder oftast fungerar bäst som artikelbilder.

7. Publicera.

Så här infogar du artikelbilden i artikeln

1. Ställ markören i brödtexten där du vill att bilden ska placeras.

2. Gå till Växla resursfönster och leta upp blocket med artikelbilden som du skapat. Ofta ligger det i mappen För denna sida.

3. Dra över blocket till vald plats i brödtexten.

4. Publicera.

Bildkollage

Bildkollage är ett fiffigt sätt att få in fler bilder i en artikel utan att det tar så mycket plats. Det går att sätta samman ett bildkollage på flera olika sätt, varav de vanligaste visas längre ner på sidan.

Bildkollage skapas under resursfönstret som du hittar till höger i Episerver, på samma sätt som artikelbilder. När du har skapat bildkollaget kan du sedan dra in det på valfri plats i din artikel, på liknande sätt som block på en portalsida.

Så här gör du för att skapa ett bildkollage

1. Tryck på Växla resursfönster till höger, dubbelkolla att du står på Block och inte Media.

2. Scrolla längst ned i resursfönstret och markera För denna sida. Det går även att skapa bildkollaget i kommunens egen mapp, mer om det kan du läsa i manualen för resursfönstret. Men det enklaste är att skapa kollaget i mappen som heter för denna sida (rekommenderas).

3. Tryck på + (längst ned till vänster). Du får nu upp ett antal olika block att välja mellan. Leta upp det som heter Puffram.

4. Döp pufframen så att du via namnet förstår vad det är, då är det enklare för dig om du vill redigera bildkollaget i efterhand. Namnet syns inte utåt för besökaren. Tryck OK.

5. Nu är det dags att fylla pufframen med de bildpuffar som ska utgöra kollaget. I detta exempel ska vi skapa en bildpuff som är 2x1 och två som är 1x1. Klicka på Skapa ett nytt block.

6. Leta upp blocket som heter Bildpuff.

7. Döp bildpuffen, förslagsvis till storleken så är det lätt att hitta (till exempel Bild 2x1).

8. Välj storlek, i detta fall 2x1.

9. Rubrik, Text och Länk kan du oftast ignorera när du gör ett bildkollage.

10. Kryssa i Ta bort mörkt överlägg på bild, annars kommer det bli en mörk gradient längst ner i bilden och syftet med överlägget är att eventuell text i bilden ska bli mer lättläst. Men när vi gör kollage jobbar vi oftast utan bildtexter, och därför behövs inte gradienten.

11. Tryck på + i bildrutan för att lägga in en bild. Du kommer nu vidare till ImageVault där du kan hämta en bild från din destinations bildmapp, från Västsveriges Mediabank eller ladda upp en ny bild. För mer info se manual för ImageVault.

12. När du har valt bild, markera bilden och tryck på Lägg till.

13. Publicera.

14. Upprepa steg 5-13 för att skapa fler bilder till bildkollaget. I detta exempel har vi även skapat två stycken bildpuffar som har storlek 1x1.

Tips! Det går också bra att kopiera en redan skapad bildpuff och byta namn, storlek och lägga in en ny bild. Om du vill göra det letar du upp blocket i resursfönstret till höger, klickar på den trestreckade menyn som kommer upp när man hovrar över blocknamnet och väljer kopiera. Ställ dig sedan där det står För detta block och välj klistra in i den trestreckade menyn. Glöm inte att dra in det kopierade blocket i pufframen efter att du redigerat det.

15. Om du vill att det ska bli en tunn vit ram mellan de olika bilderna i kollaget kryssar du i rutan Luft mellan block (rekommenderas).

16. Publicera pufframen.

Nu bör du ha en puffram som ser ut enligt nedan.

Så här infogar du bildkollaget i artikeln

1. Ställ markören i brödtexten där du vill att bildkollaget ska placeras.

2. Gå till Växla resursfönster och leta upp blocket med bildkollaget som du skapat. Ofta ligger det i mappen För denna sida.

3. Dra över blocket till vald plats i brödtexten.

4. Publicera.

Exempel på bildkollage

Det går som sagt att skapa bildkollage som ser ut på flera olika sätt. Tänk bara på att se till att det går jämt ut med puffarna både på desktop och i mobil. Det kan ibland vara lite klurigt att förstå i vilken ordning bildpuffarna hamnar, speciellt i mobilen.

Förslag på olika bildkollage och vilken ordning puffarna ska läggas i:

• 2x1, 1x1, 1x1
• 2x1, 2x2, 2x1
• 2x3, 2x1, 2x2
• 2x2, 2x1, 2x2, 2x1

Här nedan är ett exempel på bildkollaget som vi skapade ovan, med bildpuffar i storlek 2x1, 1x1 och 1x1 så som det ser ut på desktop och i mobil.

Artikelvideo

Artikelvideo är det videoblock du ska använda när du vill lägga in filmer från Youtube eller Vimeo i artiklar.

Artikelvideo skapas under resursfönstret som du hittar till höger i Episerver. När du har skapat videon kan du sedan dra in den på valfri plats i din artikel.

Så här gör du för att skapa en artikelvideo

1. Tryck på Växla resursfönster till höger, dubbelkolla att du står på Block och inte Media.

2. Scrolla längst ned i resursfönstret och markera För denna sida. Det går även att skapa artikelvideon i kommunens egen mapp, mer om det kan du läsa i manualen för resursfönstret. Men det enklaste är att skapa videon i mappen som heter för denna sida (rekommenderas).

3. Tryck på + (längst ned till vänster). Du får nu upp ett antal olika block att välja mellan. Leta upp det som heter Artikelvideo.

4. Döp bilden så att du via namnet förstår vad det är, då är det enklare för dig om du vill redigera videon i efterhand. Namnet syns inte utåt för besökaren. Tryck OK.

5. Nu är det dags att lägga till själva videon, och det man gör är att man hänvisar till en video som man redan laddat upp på antingen Youtube eller Vimeo. Klicka på Skapa ett nytt block under Video.

6. Välj Youtube-video eller Vimeo-video beroende på var filmen finns någonstans.

7. Vid Video-id ska du klistra in ändelsen från videons URL-adress. Fetmarkerat i exemplen:
https://www.youtube.com/watch?v=dR0yNaHlQrQ
https://vimeo.com/116538685

OBS! Du ska inte kopiera hela länken utan endast den sista ändelsen.

8. Döp blocket till något passande (syns inte utåt för besökaren).

9. Sedan behöver du addera en bild till videon. Tryck på + i bildrutan. Du kommer nu vidare till ImageVault där du kan hämta en bild från din destinations bildmapp, från Västsveriges Mediabank eller ladda upp en ny bild. För mer info se manual för ImageVault.

10. När du har valt bild, markera bilden och tryck på Lägg till. notera att liggande bilder oftast fungerar bäst som artikelbilder.

11. Om du vill kan du lägga till en beskrivning av videon, men det är inte obligatoriskt. Det blir lite som en bildtext som kommer att synas under videoblocket i artikeln.

12. Publicera.

Så här infogar du artikelvideon i artikeln

1. Ställ markören i brödtexten där du vill att videon ska placeras.

2. Gå till Växla resursfönster och leta upp blocket med artikelvideon som du skapat. Ofta ligger det i mappen För denna sida.

3. Dra över blocket till vald plats i brödtexten.

4. Publicera.

Här nedan ser du exempel på hur den färdiga videon kommer att visas i artikeln.

Fliken Två kolumner (fakta)

I artiklar finns möjligheten att ha en faktaruta. På desktop kommer den att visas till höger och i mobil visas den i början eller slutet av artikeln.

Faktarutan skapas under fliken Två kolumner (fakta).

Så här gör du för att skapa en faktaruta

1. Gå till fliken Två kolumner (fakta).

2. Kryssa i Använd två kolumner med faktaruta.

3. Skriv en lämplig rubrik i fältet Rubrik för fakta.

4. Klicka på + där det står Fakta editor. Då får du upp en vanlig texteditor där du kan fylla i informationen som ska finnas i faktarutan.

5. Välj vilket utseende faktarutan ska ha under Bakgrundsfärger för faktaruta. dessa går att välja på:

• Vit, blå rubrikyta
• Ljusgrå, blå rubrikyta
• Ljusgrå, mörkgrå rubrikyta

Har du beslutsångest så rekommenderar vi Vit, blå rubrikyta.

6. Publicera.

Tillval

Ovan instruktioner duger för att skapa en faktaruta, men här är några fler funktioner som finns att välja på.

Bild över fakta – precis vad det låter som, om du lägger till en bild här så dyker det upp en bild ovanför faktarutan.

Göm bild över fakta i mobilläge – också vad det låter som. Kryssa i rutan om inte vill att bilden ska synas i mobilläge, då syns den alltså bara på desktop.

Placera faktaruta under ingress i mobilläge – defaultläget är att faktarutan placeras efter brödtexten på mobilen, men om du hellre vill att faktarutan ska ligga högre upp på sidan så kan du kryssa i att den ska ligga direkt under ingressen.

Blockyta under faktarutan – här har du möjlighet att addera till exempel en bild eller mer text direkt under faktarutan (rekommenderas inte).

Så här gör du för att redigera en faktaruta

Det kan vara lite svårt att hitta hur man redigerar en befintlig faktaruta, åtminstone själva texteditorn. Det man gör är att hovra över fältet som ser ut som massor av teknisk kod och då dyker en trestreckad meny upp i högerkanten. Klicka på den och välj Redigera så kommer du in i texteditorn.

Bilden nedan visar hur du gör.

Exempel på olika faktarutor

Här nedan ser du exempel på de olika färgerna som finns att välja på för faktarutor:

• Vit, blå rubrikyta
• Ljusgrå, blå rubrikyta
• Ljusgrå, mörkgrå rubrikyta

Det är alltid bra att visa för besökaren att det finns mer intressant innehåll på sajten. Förslagsvis gör du detta längst ner i artikeln. Här är några olika sätt du kan välja på, och du kan läsa mer om hur du skapar dem längre ner på sidan.

Relaterat innehåll

Visa förslag på fler relevanta artiklar i slutet av artikeln. Det går att relatera till olika typer av sidor och det går att göra antingen genom urval eller listning.

1. Klicka på Skapa ett nytt block i rutan Objekt under brödtexten.

2. Leta upp blocket som heter Relaterat innehåll.

3. Namnge blocket och klicka på Skapa.

4. Öppna blocket igen genom att klicka på Redigera vid den trestreckade menyn.

5. Under Title skriver du den rubrik som ska synas för besökaren ovanför blocket. Det kan vara till exempel: "Andra har även läst:", "Fler förslag på samma tema" eller "Hitta fler liknande upplevelser".

Fortsätt med antingen urval eller listning.

Urval

6. Stanna kvar på fliken innehåll. För att få in länkar i blocket så letar du upp sidorna du vill länka till i navigeringsfönstret (Epi-trädet). Klicka på sidan, håll in musknappen, dra och släpp sidan i rutan för blocket. Fortsätt att lägga till fler sidor på samma sätt. Det kan vara både artiklar, portalsidor, evenemang, företagssidor och ledsidor. Det är lagom att dra in 3-7 st.

7. Utifrån vilka sidtyper du väljer att dra in i blocket för relaterat innehåll så klickar du i de rutor som passar:

• Inkludera portalsida: klickas i för att portalsidor ska exponeras.
• Sortera på evenemangsdatum: klickas i för att evenemang ska visas i datumordning.
• Slumpmässig sortering: klickas i för att ordningen på exempelvis artiklar och portalsidor slumpmässigt ska ändras varje gång besökaren laddar om webbläsaren.

8. Publicera.

Listning

6. Gå till fliken Listning.

7. Klicka i Hämta evenemang som listning (istället för urval).

8. Ställ in vilken sidtyp du vill visa. I detta exempel har vi valt evenemangssidor, men det går bra med andra sidtyper också.

9. Välj vilken/vilka kommuner du vill visa träffar från under Filtrera på område som du hittar lite längre ner på sidan.

Fler val:

• Sortering: ange hur träffarna ska sorteras, till exempel efter namn eller datum. 
• Antal träffar i slider: ange hur många träffar som ska visas.
• Hämta evenemang som inträffar mellan (start): vill du ange från när evenemang ska hämtas så kan du ange datum här.
• Hämta evenemang som inträffar mellan (slut): vill du ange hur länge evenemang ska hämtas så kan du ange datum här. 
• Filtrering: här kan du fylla i fler uppgifter kring hur du vill att listningen ska filtreras, till exempel på tag, gruppering eller kategorier. 

10. Publicera.

Tips! Här kan du läsa mer om de olika funktionerna för listning och urval.

Knapp

Ett bra sätt att hjälpa besökaren att hitta rätt på sajten är att lägga till en knapp som länkar tillbaka till det övegripande ämnet. Om du har en artikel om de bästa vandringslederna så kan du till exempel lägga en knapp med texten "Allt inom vandring" som länkar till din huvudsida för vandring. Det är bra både för besökaren och för sökmotorer som försöker förstår sidstrukturen.

1. Klicka på Skapa ett nytt block i rutan Objekt under brödtexten.

2. Leta upp blocket som heter Avdelare.

3. Namnge blocket.

4. Skriv in en passande länktext på Knapptext. Försök att vara så konkret som möjligt så att besökaren förstår vart knappen går. "Läs mer" är sällan det bästa alternativet.

5. Välj vilken typ av knapp du vill använda. Vi rekommenderar Standardknapp eller Primärknapp.

6. Välj vart du vill länka knappen genom att trycka på de tre prickarna vid Länk.

• Vill du länka till en sida i Episerver, välj Sida. Tryck på rutan med tre punkter. Leta upp sidan du vill länka till i trädstrukturen. Tryck OK.
• För att länka till en extern sida väljer du Extern länk. Klicka i rutan och klistra in URL-adressen. Tryck OK.

7. Tryck på Skapa.

Tips! Vill du veta mer om länkar och knappar? Kolla då i manualen för länkar och knappar.

Text- och bildpuff

En text- och bildpuff är ett snyggt sätt att länkar vidare till en annan sida från en artikel. Tänk bara på att du behöver skapa puffen i en puffram.

1. Tryck på Växla resursfönster till höger, dubbelkolla att du står på Block och inte Media.

2. Scrolla längst ned i resursfönstret och markera För denna sida.

3. Tryck på + (längst ned till vänster). Du får nu upp ett antal olika block att välja mellan. Leta upp det som heter Puffram.

4. Döp pufframen så att du via namnet förstår vad det är. Namnet syns inte utåt för besökaren. Tryck OK.

5. Inne i pufframen skapar du en bildpuff med storleken 4x2. Klicka på Skapa ett nytt block.

6. Leta upp blocket som heter Text & Bild-puff.

7. Döp puffen och välj storleken 4x2.

8. Tryck på + i bildrutan för att lägga in en bild. Du kommer nu vidare till ImageVault där du kan hämta en bild från din destinations bildmapp, från Västsveriges Mediabank eller ladda upp en ny bild. För mer info se manual för ImageVault.

9. Välj vilken färg textplattan i puffen ska ha. Om du har beslutsångest så rekommenderar vi Ljusgrå ny.

9. Fyll i Rubrik och Text.

10. Välj vart du vill länka knappen i puffen genom att trycka på de tre prickarna vid Url. Och skriv in en lämplig knapptext vid fältet Namn, samt välj Typ av knapp (vi rekommenderar Standardknapp eller Primärknapp).

Övriga inställningar kan du ignorera.

11. Tryck på Skapa. Du kommer då tillbaka till pufframen och kan klicka på Publicera.

12. Gå tillbaka till artikelsidan och ställ markören längst ner i brödtexten.

13. Gå till Växla resursfönster och leta upp blocket med pufframen som du skapat och dra över det till brödtexten.

14. Publicera.

Fliken SEO

För alla sidor du skapar ska du fylla i metatitel och metabeskrivning.

Metatitel – Kallas också sidtitel och är superviktigt ur ett SEO-perspektiv. En metatitel bör vara max 60 tecken lång.

Metabeskrivning – Beskriver på ett kortfattat och lockande sätt vad sidan handlar om. En metabeskrivning bör vara 135-155 tecken lång.

Övriga fält under SEO-fliken kan du ignorera.

Fliken Område

Här fyller du i vilket eller vilka geografiska områden och/eller grupperingar som artikeln handlar om.

Om du fyller i en viss kommun så innebär det att artikeln kan bli synlig i det interna söket hos den kommunen. Detta är en bra funktion om ni har en artikel som handlar om upplevelser som sträcker sig över kommungränserna och som flera olika kommuner vill använda på sajten. Det är nämligen inte rekommenderat att skapa en kopia av samma artikel och lägga hos olika kommuner.

Fliken Kategori

Här sätter du vilken eller vilka kategorier som artikeln handlar om. Kategorier används famför allt på företagssidor, evenemang och ledsidor, men det går alltså bra att kategorisera även artiklar.

Formulär i Episerver

Formulär skapas på artikelsidor, men det finns en egen manual för formulär. Kika i den!