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

Du känner den känslan när du landar på en WordPress-webbplats och oväntat finner dig själv läsa hela företagets historia? Det är kraften i visuell berättande.

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

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

Händelsetidslinjer lyfter fram betydande milstolpar med en tydlig, kronologisk struktur. Genom att använda en kan det 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 portfolio webbplats, som en online fotoportfolio, då 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 Cool Timeline-pluginet. Detta gratis, användarvänliga plugin låter dig skapa fantastiska tidslinjer snabbt och enkelt.

Vid aktivering ser du ett nytt område för Tidslinjetillägg i din WordPress-instrumentpanel.

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

Det första är genom att klicka på knappen ‘Lägg till ny berättelse’ från instrumentpanelen för Tidslinjetillägg.

Detta öppnar redigeraren, där du kan skriva in en titel och beskrivning, ställa in en utvald bild och lägga till annan viktig information.

När du är klar med att lägga till händelser kommer Cool Timeline att visa alla dessa händelseberättelser på samma tidslinje. Du kan sedan lägga till tidslinjen på vilken sida eller inlägg som helst.

Den här metoden är perfekt för att visa samma tidslinje flera gånger på din webbplats. Den låter dig dock bara skapa en enda tidslinje.

Det andra alternativet är att använda Cool Timeline Block för att bygga en visuell tidslinje inuti WordPress blockredigerare.

Att lägga till flera Cool Timeline Blocks på din webbplats gör att du kan visa olika tidslinjer på olika delar av din webbplats.

Den här metoden låter dig dock inte återanvända samma tidslinje över hela 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, behöver du installera och aktivera Cool Timeline-pluginet. Om du behöver mer information, se vår guide om hur man installerar ett WordPress-plugin.

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:

• Metod 1. Hur man bygger en återanvändbar händelsetidslinje med hjälp av menyn Timeline Addons
• Metod 2. Hur man skapar flera händelsetidslinjer i WordPress med hjälp av tidslinjeblocket
• Bonustips: Lägg till händelseschema i WordPress
• Vanliga frågor: Lägg till en vacker händelsetidslinje till din WordPress-webbplats
• Relaterade guider för att hantera WordPress-händelser

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 kan du skriva in all text som du vill visa på din tidslinje. Detta är vanligtvis en beskrivning av händelsen.

När du har gjort det är det dags att klicka på länken 'Ange utvald bild'.

Du kan nu välja den bild som ska representera evenemanget i 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.

Want to see all the events you’ve created so far? Then simply go to Timeline Addons » Cool Timeline Stories.

Once you’ve created all your events, the next step is customizing how the timeline will look on your website.

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ärkesprofil 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 kan du vilja ange ett maximalt antal ord som ska visas i tidslinjen. För att ställa in en maximal ordgräns, skriv helt enkelt ett nummer i fältet 'Content Length'.

Om du anger en gräns är det en bra idé att lägga till länkar som 'Läs mer' till din tidslinje. Cool Timeline kommer sedan att lägga till den här länken 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 'Timeline Background' 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 inställningarna för färgväljaren.

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 teckensnittet och justera storleken på det olika innehållet i din tidslinje, såsom tidslinjetiteln och berättelsetiteln.

If you change the default typography settings, then don’t forget to save your changes by clicking the ‘Save’ button.

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.

Nu vill du skriva in ‘Cool Timeline’ i sökfältet. Det här pluginet har några olika block, så se till att du klickar på ‘Cool Timeline Shortcode Block.’

Du kan nu 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

Du kan också bygga en vacker händelsetidslinje i WordPress med hjälp av blockredigeraren och 'Cool Timeline Block'.

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.

För att börja, ö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.

By default, the Cool Timeline block shows the first event on the right-hand side of the timeline.

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 antingen välja en bild från WordPress mediebibliotek eller ladda upp en ny fil från din dator.

Cool Timeline Block kommer 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, kommer blocket att uppdateras 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.

By default, the timeline marks each event on the vertical line with a dot. You may want to replace this plain dot with a custom icon.

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 sedan 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öretagshistoria, 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, den bästa SEO-plugin för WordPress. Den stöder flera schematyper, inklusive Event, 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 tidslinjefunktion som standard. Du kan dock enkelt lägga till en med hjälp av plugins som Cool Timeline eller The Events Calendar.

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

Cool Timeline offers a free version on the WordPress plugin repository. It includes core features like vertical and horizontal timelines. For advanced customization and extra layouts, you can upgrade to the premium version.

Hur skapar jag en händelsetidslinje i WordPress?

The easiest way is to use a plugin like Cool Timeline. Once installed, you can add events or milestones as timeline stories, customize the layout, and display them using a shortcode or block.

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

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

För en snabb handledning, se vår guide om hur man skapar en enkel händelsekalender med Sugar Calendar. Eller kolla in vår fullständiga jämförelse av de bästa WordPress-kalenderpluginsen för att hitta en som passar dina behov.

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 skapar en enkel evenemangskalender
• 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 då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.