Hur man lägger till vackra händelsetidslinjer i WordPress (2 metoder)

Vill du dela ditt företags historia utan att tråka ut dina besökare med textväggar? En visuell tidslinje är den perfekta lösningen.

Händelsetidslinjer är ett fantastiskt sätt att lyfta fram din berättelse eller visa upp viktiga ögonblick på ett sätt som verkligen engagerar din publik.

Istället för att snabbt skumma förbi textväggar dras besökarna in i en visuell resa som leder dem genom varje milstolpe.

Efter att ha testat många tidslinjelösningar för WordPress har vi hittat två som är både lätta att använda och ger professionellt utseende resultat. I den här guiden visar vi dig hur du skapar vackra tidslinjer som håller besökarna engagerade och scrollande. 🚀

📌 Snabbt svar: Det enklaste sättet att lägga till en tidslinje i WordPress är att använda pluginet Cool Timeline. Det erbjuder två metoder:

Funktion	Metod 1 – Tidslinjeberättelser	Metod 2 – Tidslinjeblock
🌟 Bäst för	Återanvändbara globala tidslinjer	Engångs, unika tidslinjer
🎢 Flexibilitet	Hög (Globala uppdateringar)	Måttlig (Sid-specifik)
⚙️ Installation	Dashboard-meny	Blockredigerare

Varför lägga till en vacker händelsetidslinje i WordPress?

Händelsetidslinjer lyfter fram betydande milstolpar med en tydlig, kronologisk struktur. Studier visar att innehåll med relevanta bilder får 94% fler visningar än enbart textinnehåll, och att använda en tidslinje kan bidra till att förbättra berättelaspekten i ditt innehåll.

Utöver milstolpar låter tidslinjer dig visuellt representera framsteg, faser och sammankopplingen av händelser. Detta kan göra ditt innehåll mer engagerande.

När det gäller användningsfall använder många WordPress-webbplatser tidslinjer för att visa relaterade händelser på ett organiserat och visuellt tilltalande sätt.

Företag och organisationer använder också ofta tidslinjer för att visa sin historia.

Om du har en portföljwebbplats, som en online-fotoportfölj, kan du visa dina fotografier i en fin vertikal tidslinje som visar din resa runt världen.

Detta kan vara mer engagerande än att skriva din historia och lägga till den på din webbplats som en sida med vanlig text.

Hur man lägger till en händelsetidslinje i WordPress

Det enklaste sättet att lägga till en händelsetidslinje i WordPress är att använda pluginet Cool Timeline. Detta gratis, användarvänliga plugin låter dig skapa fantastiska tidslinjer snabbt och enkelt.

För att börja kan du navigera till Plugins » Lägg till Plugin på din WordPress-administratörspanel.

På nästa skärm skriver du in 'Cool Timeline' i sökfältet för att snabbt hitta pluginet.

När du ser det, klicka på 'Installera nu' och 'Aktivera'.

För detaljer kan du hänvisa till vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering ser du en ny meny för Timeline Addons i sidofältet på din WordPress-administratörspanel.

Med det här pluginet kan du skapa händelsetidslinjer på 2 sätt.

Den första metoden innebär att lägga till händelser individuellt via menyn Timeline Addons. Detta skapar en databas med händelser som gör att du automatiskt kan visa exakt samma tidslinje på flera sidor på din webbplats.

Denna metod låter dig dock inte återanvända samma tidslinje på din webbplats om du inte sparar den som ett Synkroniserat Mönster (tidigare känt som ett Återanvändbart Block).

Det andra alternativet är att använda Cool Timeline Block för att bygga en visuell tidslinje inuti WordPress blockredigerare. Detta gör att du kan visa olika tidslinjer på olika delar av din webbplats.

Nackdelen är att denna metod inte låter dig återanvända samma tidslinje på din webbplats om du inte sparar den som ett blockmönster själv.

I den här guiden kommer vi att täcka båda metoderna. Oavsett hur du bygger din tidslinje måste du installera och aktivera Cool Timeline-pluginet.

När du är klar är du redo att skapa din tidslinje med antingen menyn Tidslinjetillägg eller blockredigeraren. Om du föredrar att hoppa direkt till en viss metod kan du använda länkarna nedan:

Redo? Låt oss börja.

Metod 1. Hur man bygger en återanvändbar händelsetidslinje med hjälp av menyn Timeline Addons

För att skapa ditt första evenemang kan du gå till Tidslinjetillägg » Lägg till ny berättelse från din WordPress-instrumentpanel.

Du kan sedan ge händelsen en titel genom att skriva den i fältet 'Lägg till titel'.

I huvudredigeraren, skriv in beskrivningen av händelsen.

När du har gjort det, klicka på länken 'Ange utvald bild' i kolumnen till höger.

Du kan nu välja den bild som ska representera händelsen på din tidslinje. Du kan antingen klicka för att välja en bild från WordPress mediebibliotek eller ladda upp en ny bildfil från din dator.

Därefter vill du skrolla ner till avsnittet 'Timeline Story Settings'. Här kan du klicka på fältet 'Story Date / Year' och använda kalenderpopupen för att välja tid och datum då händelsen inträffade.

Du kan också välja mellan en 'Full' eller 'Small' bild för evenemanget.

I följande bild kan du se ett exempel på en 'Full' bild.

Större bilder kommer att dra besökarens uppmärksamhet till de viktigaste händelserna på tidslinjen. Dock tar ‘Full’ bilder upp mer utrymme.

Följande bild visar samma händelse, men den här gången med en 'Liten' bild istället.

Om du vill lägga till många olika händelser till din tidslinje, kanske du vill använda inställningen 'Liten'.

Detta kan hjälpa till att förhindra att din tidslinje ser rörig ut.

Efter att ha gjort dessa ändringar vill du skrolla till toppen av sidan och klicka på knappen ‘Publicera’.

Och det är allt – du kan nu upprepa dessa steg för att skapa fler händelser.

Vill du se alla händelser du har skapat hittills? Gå sedan helt enkelt till Tidslinjetillägg » Cool Timeline Stories.

När du har skapat alla dina händelser är nästa steg att anpassa hur tidslinjen kommer att se ut på din webbplats.

För att göra detta kan du gå till Timeline Addons » Timeline Settings » General Settings.

I avsnittet ‘Tidslinjetitel’ kan du skriva titeln som kommer att visas ovanför din tidslinje.

Cool Timeline kan också visa en bild ovanför din tidslinje, till exempel din företagslogotyp. Detta kan hjälpa till att förstärka din varumärkesprofilering och låta besökare veta vad tidslinjen visar.

För att lägga till denna valfria bild vill du klicka på knappen 'Ladda upp'.

Du kan nu antingen välja en bild från ditt WordPress-mediabibliotek eller ladda upp en ny fil från din dator.

Om du lägger till mycket text i en tidslinje kan den se rörig och avskräckande ut.

Med detta i åtanke kanske du vill ange ett maximalt antal ord som ska visas på tidslinjen. För att ställa in en maximal ordgräns, skriv helt enkelt ett nummer i fältet 'Innehållslängd'.

Om du ställer in en gräns är det en bra idé att lägga till 'Läs mer'-länkar till din tidslinje. Cool Timeline kommer då att lägga till denna länk till alla beskrivningar som är större än din ordgräns.

För att lägga till den här länken, hitta sektionen 'Visa läs mer?' och klicka på knappen 'Ja'.

Du kan nu bestämma om klick på länken 'Läs mer' ska visa resten av din text i samma flik eller en ny webbläsarflik. För att göra detta val, klicka helt enkelt på antingen radio-knappen 'Samma flik' eller 'Ny flik'.

Som standard visar tidslinjen året då varje händelse inträffade. Du kanske dock inte alltid behöver visa denna information. Till exempel, om alla händelser inträffade samma år.

För att dölja årtalsetiketten, klicka helt enkelt på skjutreglaget 'Årtalsetikett' för att ändra det från 'Visa' till 'Dölj'.

Som standard visas den första händelsen i din tidslinje på höger sida av tidslinjens vertikala linje.

Vill du visa detta evenemang på vänster sida av tidslinjen istället? Klicka då helt enkelt på knappen 'Vänster' bredvid 'Vertikala tidslinjeberättelser börjar från.'

När du är nöjd med dina ändringar klickar du på knappen 'Spara' för att spara dem.

Nu kan du gå vidare till fliken ‘Stilinställningar’.

Som standard har tidslinjen ingen bakgrund.

Om du vill kan du lägga till en färgad bakgrund till din tidslinje genom att klicka på reglaget 'Tidslinjebakgrund' för att ändra det från 'Nej' till 'Ja'.

Klicka sedan på knappen bredvid ‘Bakgrundsfärg för berättelse.’

Du bör nu kunna välja en bakgrundsfärg med hjälp av färgvalsinställningarna.

Den här skärmen har också liknande färginställningar för alla olika delar av din tidslinje, inklusive den vertikala linjen och händelsetitlarna. För att ändra någon av dessa standardfärger, klicka helt enkelt på sektionens knapp och använd sedan färgväljaren som visas.

När du är nöjd med de ändringar du har gjort, glöm inte att klicka på knappen 'Spara'.

Därefter kanske du vill gå till fliken 'Typografiska Inställningar'. Här kan du ändra typsnittet och justera storleken på det olika innehållet i din tidslinje, till exempel tidslinjetiteln och berättelsetiteln.

Om du ändrar standardinställningarna för typografi, glöm inte att spara dina ändringar genom att klicka på knappen 'Spara'.

När du har anpassat tidslinjen är du redo att lägga till den på din webbplats. Öppna helt enkelt sidan eller inlägget där du vill visa den och klicka sedan på '+'-knappen.

Skriv nu 'Cool Timeline' i blockets sökfält. Eftersom du skapade dina händelser med hjälp av menyn 'Stories', måste du välja blocket Cool Timeline Shortcode för att visa dem.

Detta kommer automatiskt att hämta de berättelser du precis skapat och visa dem i en vertikal layout.

Du kan sedan antingen uppdatera eller publicera din sida som vanligt.

Nu, om du besöker din webbplats, kommer du att se den levande tidslinjen.

Metod 2. Hur man skapar flera händelsetidslinjer i WordPress med hjälp av tidslinjeblocket

Cool Timeline Block låter dig bygga en tidslinje visuellt inuti blockredigeraren.

Det här blocket har mycket platshållarinnehåll. För att bygga din tidslinje behöver du bara ersätta varje platshållare med din egen text och bilder. Detta gör att du kan bygga din tidslinje mer visuellt.

Innan vi börjar, notera att denna metod inte använder de berättelser vi skapade i Metod 1. Istället kommer du manuellt att ange händelsedetaljerna direkt i blocket.

För att göra detta, öppna helt enkelt sidan eller inlägget där du vill lägga till en tidslinje.

Du kan sedan klicka på ikonen ‘+’ och skriva in ‘Cool Timeline Block.’ När detta block visas, klicka för att lägga till det på sidan eller inlägget.

Cool Timeline-blocket har 4 platshållarhändelser. Du kan börja redigera dem en efter en genom att klicka på den första händelsen i tidslinjen.

I menyn till höger, ersätt helt enkelt platshållaren 'Berättelse rubrik' med den rubrik du vill använda för denna händelse.

Därefter kan du lägga till en beskrivning i fältet 'Berättelsebeskrivning'.

Därefter vill du hitta fältet 'Primär etikett (datum/steg)'. Skriv här in datumet då denna händelse inträffade.

Som standard visar Cool Timeline-blocket den första händelsen på tidtabellens högra sida.

Om du föredrar att visa händelsen på vänster sida av den vertikala linjen, kan du klicka på radio-knappen 'Vänster'.

Nu har Cool Timeline-blocket en platshållarbild för varje händelse. För att ersätta denna platshållare med din egen bild, klickar du helt enkelt på knappen ‘Ta bort’.

När du har gjort det, klickar du på knappen 'Ladda upp/Välj bild'.

Du kan sedan välja en bild från mediabiblioteket eller ladda upp en ny fil från din dator.

För bästa resultat rekommenderar vi att du använder bilder med samma bildförhållande, till exempel alla fyrkantiga eller alla liggande, så att din tidslinje ser snygg och professionell ut.

Cool Timeline Block kommer sedan att visa varje bild i full storlek. För att visa en mindre bild istället, öppna rullgardinsmenyn 'Bildstorlek' och välj antingen 'Medium' eller 'Miniatyr'.

Så fort du klickar på en av de olika bildstorlekarna uppdateras blocket för att visa den nya bilden. Detta gör att du kan prova olika storlekar för att se vad som ser bäst ut på din webbplats.

Som standard markerar tidtabellen varje händelse på den vertikala linjen med en prick. Du kanske vill ersätta denna enkla prick med en anpassad ikon.

Till exempel kan du använda olika ikoner för olika typer av händelser. Sedan kan du utforska de olika anpassade ikonerna du kan använda för din tidslinje genom att klicka på radioknappen ‘Anpassad (Font Awesome-ikon)’.

När du har gjort det visas en rullgardinsmeny med en pilikon. Du vill expandera den för att bläddra igenom alla olika ikoner.

När du hittar den perfekta ikonen att använda för din händelse, kan du klicka på den.

Du kan nu anpassa resten av platshållarhändelserna genom att följa samma process som beskrivs ovan.

Om du vill lägga till fler händelser i tidslinjen, klicka helt enkelt på ikonen 'Lägg till berättelse'. Detta lägger till en ny platshållare för en händelse som är redo för dig att anpassa.

När du är nöjd med hur tidslinjen ser ut kan du antingen uppdatera eller publicera sidan som vanligt. När det är klart kommer din tidslinje att vara live på din WordPress-webbplats.

Bonustips: Lägg till händelseschema i WordPress

När du har skapat en vacker tidslinje för att visa dina händelser eller milstolpar, kan du ta det ett steg längre genom att hjälpa sökmotorer att förstå vad de handlar om.

Det är där händelseschema-markup kommer in.

Händelseschema är en speciell typ av kod som fungerar i bakgrunden. Det ger Google en tydlig sammanfattning av ditt evenemangs viktigaste detaljer, som datum, tid, plats och eventuell biljettinformation, i ett strukturerat format som Google enkelt kan läsa.

Dessutom kan tillägg av händelseschema hjälpa ditt innehåll att visas i rich snippets eller Googles händelselistor. Oavsett om du delar kommande händelser eller företagshistorik, hjälper det rätt personer att hitta dig när de söker efter relaterade aktiviteter eller milstolpar.

Ett av de enklaste sätten att göra detta är att använda AIOSEO Pro, den bästa SEO-pluginen för WordPress. Den erbjuder en kraftfull Schema Generator som stöder flera schematyper, inklusive Händelse, för att hjälpa sökmotorer att bättre förstå och lyfta fram ditt innehåll.

För detaljer, se vår guide om hur man lägger till händelseschema i WordPress.

Vanliga frågor: Lägg till en vacker händelsetidslinje till din WordPress-webbplats

Har du frågor om att visa dina evenemang i ett tidslinjeformat på WordPress? Här är några snabba svar som hjälper dig att komma igång.

Har WordPress en inbyggd kalender- eller tidslinjefunktion?

WordPress inkluderar inte en inbyggd kalender- eller tidtabellsfunktion som standard. Du kan dock enkelt lägga till en med hjälp av plugins som Cool Timeline eller Sugar Calendar.

Är Cool Timeline-pluginet gratis att använda?

Ja, Cool Timeline har en gratisversion som är tillräckligt kraftfull för de flesta webbplatser. Den inkluderar kärnfunktionerna som behövs för att skapa vertikala tidslinjer. För horisontella layouter och avancerade designmallar behöver du uppgradera till Pro-versionen.

Hur skapar jag en händelsetidslinje i WordPress?

Det enklaste sättet är att använda en plugin som Cool Timeline. När den är installerad kan du lägga till händelser eller milstolpar som tidtabellshistorier, anpassa layouten och visa dem med en kortkod eller ett block.

Kan jag lägga till en kalendervy vid sidan av tidslinjen?

Ja, det kan du. Medan Cool Timeline-pluginen fokuserar på visuella tidtabeller, erbjuder den inte en traditionell kalendervy. Om du vill visa dina händelser i ett månads- eller dagsformat, rekommenderar vi att du använder en kalenderplugin som Sugar Calendar.

Hur visar jag dagens datum i WordPress?

Du kan använda en kortkod, en widget eller anpassad kod för att visa dagens datum. Vissa sidbyggarwidgets och teman har också denna funktion inbyggd.

Relaterade guider för att hantera WordPress-händelser

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en vacker händelsetidslinje på din WordPress-webbplats.

Om du fann detta hjälpsamt kanske du också vill kolla in våra guider om:

• Hur man visar kommande händelser i WordPress
• Hur man kör medlems-exklusiva evenemang i WordPress
• Hur man skapar en evenemangsregistreringssida i WordPress
• Hur man lägger till en nedräkningstimer-widget i WordPress
• Bästa WordPress Kalenderplugins

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.