Skapa en fantastisk tidslinje för innehåll i WordPress med Elementor

Content timeline är ett sprickverktyg för att visa alla händelsers sekventiell information, men att skapa en sådan tidslinje på din WordPress-webbplats kräver att du använder rätt verktyg med fullständigt kommando.

Om du plockar upp något slumpmässigt WordPress-verktyg för att bygga din innehållstidslinje, är chansen stor att verktyget kommer att vara under genomsnittet, vilket ger ett ostlikt designutseende.

Jag har gjort en djupgående analys för att hitta ett optimalt sätt att skapa innehållstidslinje i WordPress. Gissa vad? I den här artikeln har jag satt ihop den enklaste metoden för att skapa innehållstidslinje i WordPress med Elementor.

Förstå innehållets tidslinje

En tidslinje för innehåll representerar information i kronologisk form. Det är en enkel men effektiv metod för att dela information på ett visuellt slående sätt.

Det primära syftet med en innehållstidslinje är att demonstrera verkan av en händelse sekventiellt inom ett tidsintervall. Det hjälper läsarna att få mer information på ett ögonblick.

I allmänhet innehåller en tidslinje för innehåll en lång stapel med punkter och lite information runt den. Denna stapel kan vara både vertikal och horisontell. Oavsett riktning, se bara till att tidslinjefältet innehåller tillräckligt med resurser. Du kan förbättra fältet med relaterade bilder, ikoner, siffror, klickbara texter eller andra interaktiva element.

Var ska du använda en tidslinje för innehåll?

En tidslinje för innehåll är ett mångsidigt verktyg. Du kan använda det här verktyget nästan var som helst för att utföra en uppgift smidigt. Låt oss ta en titt på huvudsektorerna där denna tidslinje fungerar bäst.

Hur man skapar en tidslinje för innehåll

Att skapa en lämplig tidslinje kräver tid och engagemang. Här är en enkel process för att skapa en tidslinje.

Steg #1: Analysera ditt ämne

Välj först ditt ämne och samla in nödvändig information om det ämnet. Du måste noggrant välja den information som du vill visa på din tidslinje.

Steg #2: Namnge tidslinjen

Var försiktig när du väljer namnet på din tidslinje. "Tidslinjenamnet" måste representera syftet med din tidslinje.

Placera alltid tidslinjen överst på tidslinjen så att namnet förblir synligt för alla.

Steg #3: Rita en grov tidslinje

I detta ögonblick ritar du en grov tidslinjestruktur på ett papper. Rita helt enkelt en horisontell eller vertikal linje tillsammans med några punkter. Varje enskild punkt indikerar ett datum eller en milstolpe för ditt projekt.

Nu är det dags att lägga till några texter eller annan relaterad information om ditt projekt. Och det är allt!

Steg #4: Avsluta ämnet

Jag hoppas att den grova tidslinjeplanen redan är i dina händer. Ta nu en paus och gör djupgående forskning om ditt ämne igen. Så du kan ta reda på de fåniga problemen och fixa dem.

Steg #5: Anpassa tidslinjen

Att anpassa tidslinjen gör den lätt att förstå och visuellt imponerande. Du kan lägga till några ikoner eller mediafiler för att göra detta.

Hur lägger jag till Elementor Content-tidslinjen på din WordPress-webbplats?

Nu när du har en tydlig kunskap om innehållets tidslinje och dess tillämpning tillsammans med processen att skapa tidslinjen.  

Nu är det dags att integrera innehållets tidslinje i din WordPress-webbplats. Så, hur kan du göra det?

Okej!

Det finns huvudsakligen två olika metoder för att skapa en innehållstidslinje i WordPress. Scrolla ner för att lära dig mer om processerna.

Manuell process (den hårda vägen)

Den manuella processen är det traditionella sättet att skapa en tidslinje för innehåll på din webbplats. Du behöver antingen en bild eller en GIF-fil för att skapa en tidslinje för innehåll. Så, hur kan du göra det?

Enkel! Följ bara stegen.

• Rita först innehållet digitalt. Du kan använda fotoredigeringsprogram som Photoshop, Gimp eller Paint för att rita tidslinjen. När du har slutfört projektet, spara bilden eller gif-filen.
• För det andra, skapa en sida eller inlägg på din webbplats och lägg bilden/gif-filen på den sidan. Lägg sedan till det nödvändiga innehållet och publicera. 

Bom! Det är allt, du är klar!

Nackdelar med denna process:

Processen kan tyckas ganska enkel. Men bli inte chill än! Du kommer att möta många problem med denna process i verkliga livet. De betydande nackdelarna listas nedan.

• Du kan inte uppdatera den publicerade tidslinjen via instrumentpanelen för webbplatsens administratör.
• Du kan inte skapa en interaktiv tidslinje.
• Att anpassa ikonerna och bilderna är en besvärlig process.

Automatisk process (enklaste sättet – ElementsKit pro)

För att få ut det mesta av din tidslinje för innehåll kan du använda ElementsKit. Det är ett premium Elementor-tillägg som kan vara praktiskt för att bygga en tidslinje för innehåll på din WordPress-webbplats.

I det här avsnittet kommer jag att introducera dig till processen att skapa en Elementor-innehållstidslinje inom några minuter. Låt oss börja.

Öppna webbplatsens adminpanel

Precis som den manuella metoden behöver du inte rita tidslinjen i fotoredigeringsprogram. Du kan göra allt från din webbplatss adminpanels instrumentpanel.

Logga bara in på administratörspanelens instrumentpanel. I allmänhet ser webbadressen till instrumentpanelen ut så här Yourdomain.com/wp-admin

Installera Elementor och ElementsKit

Efter att ha loggat in på din administratörspanel är det dags att installera Elementor och Elementor-tillägg ElementsKit. Du behöver båda dessa för att skapa tidslinjen automatiskt.

Öppna en ny eller befintlig webbsida

Efter att ha aktiverat Elementor och ElementsKit är det dags att använda dem i ett inlägg eller en sida. Så skapa ett nytt inlägg genom att klicka Inlägg > Lägg till nytt.

Klicka på "Lägg till titel” blockera och lägg till din titel. Du kan också lägga till vanlig text och bilder till inlägget.

Starta Elementor

Klicka nu på "Redigera med Elementor” och det kommer att öppna ditt helt nya inlägg i Elementor-redigeraren. Elementor-redigeraren används för att redigera inlägget mer professionellt.

Starta ElementsKit Timeline

Rulla ner i "Elementor"-panelen och leta efter "Tidslinje” tillägg i listan. Annars kan du helt enkelt söka efter "Tidslinje" i Elementor-panelen.

Startar ElementsKit Timeline

Dra och släpp widgeten Tidslinje i ditt inlägg, och det är allt! Du kommer att märka ett exempel på tidslinjen i ditt inlägg.

Som standard kommer det att finnas tre tidslinjepunkter. Du kan ta bort alla dessa och börja skapa din egen tidslinje. Annars kan du också redigera innehållet i dessa befintliga punkter och lägga till fler punkter om det behövs.

Nästa steg är att ändra texten, ikonen eller stilen för ditt innehålls tidslinje.

Anpassa tidslinjeinnehåll

Fliken "Innehåll" låter dig anpassa tidslinjestil, innehållsstil, tidslinjeinnehåll etc. Du kan ändra flera alternativ från innehållsfliken. Låt oss ta en titt på dessa nyckelalternativ.

1. Tidslinjestil

Detta är den allra första delen av fliken Innehåll. Det låter dig välja antingen den vertikala Elementor-tidslinjen eller den horisontella Elementor-tidslinjestilen. Som standard kommer den vertikala stilen att väljas. Du kan ändra stilen när du känner för att göra det!

2. Innehållsstil

Fliken Innehållsstil låter dig välja sida. Du kan visa allt innehåll antingen på samma sida eller båda.

Utsikterna för din innehållstidslinje är klar vid det här laget. I det här avsnittet måste du uppdatera texterna, bilderna eller ikonerna för tidslinjen.

3. Tidslinjeinnehåll

Tidslinjens innehåll låter dig ändra flera alternativ som titel, beskrivning, länk, datum, adress, ikon, etc. Du kan aktivera den här funktionen genom att helt enkelt klicka på titelns namn.

Det kommer att finnas tre titlar i standardinställningarna. Du kan antingen lägga till eller ta bort dessa titlar. När du har klickat på titeln blir alternativen för innehållsredigering synliga för dig.

I avsnittet om tidslinjeinnehåll kan du ändra följande alternativ –

• Titel
• Texta
• Titellänk
• Beskrivning
• Titelikon
• Datum
• Adress
• Textningsfärg
• Innehållslåda bakgrund
• Ikon textfärg och
• Ikonen bakgrund
  

4. Repeater objektstil

I det här avsnittet kan du ändra ditt innehålls färg och bakgrund för texterna och ikonerna. Viktigast av allt, svävstilen kan också ändras från det här avsnittet.

Tack till utvecklarna!

5. Animationsinställningar

I inställningsalternativet kan du ändra ikonen och animeringen av både datum och adress. Denna Elementor-tidslinjewidget låter dig välja flera zoomningsstilar, såsom tona, zooma, studsa, glida, rotera, skaka, wobble, jello, roll-in, etc.

Det handlar om att anpassa innehållet i din tidslinje. Nu är det dags att lägga till lite styling till ditt innehåll. Följ nästa fas för att få detaljer om att lägga till stil.

Anpassa tidslinjestil

På stilfliken kan du anpassa din innehållsstil, linjestil och behållarstil. Rulla ned för att få en detaljerad översikt över dessa funktioner.

1. Fliken Innehåll:

Innehållsfliken erbjuder dig många anpassningsmöjligheter för ditt innehåll. Du kan till exempel styra justering, utfyllnad, inre utfyllnad, ramradie, textfärg, underrubrik, tidslinjestil, etc.

Du kan anpassa alla dessa inställningar för varje plattform, inklusive stationära, surfplattor och mobila versioner. Kontrollera bilderna nedan för att få en tydlig förståelse av funktionerna som ligger under fliken innehåll.

Inte bara det! Du kan också ändra flera andra alternativ som textfärg, ankartextfärg, undertextfärg, marginalutrymme, typografi, rund ikon, etc. Både ikonen och bakgrundsfärgen för denna runda ikon kan ändras från det här avsnittet.

Vid det här laget har vi justerat flera stilar i din webbplatstext. Emellertid kan ElementsKit Elementor-tidslinjewidgeten göra ännu mer!

Du kan också sömlöst ändra färg på tidslinjen, ikonstorlek, marginal, typografi, adresser, etc.

2. Linje Tab

Linjefliken låter dig lägga till fyra anpassningsstilar till din innehållstidslinje. Dessa är -

• ● Linjefärg – Ändra den horisontella eller vertikala färgen på Elementor tidslinje
• ● Pin färg – ändra färgen på din stift
• ● Active Pin Color – ändra färgen på din aktiverade nålfärg
• ● Pinpoint färg – ändrar den exakta färgen

3. Behållarfliken

Behållarfliken låter dig ändra avståndet mellan ditt innehåll. Det inkluderar att ändra adress- eller datumavståndet och objektets bottenavstånd.

Avancerad anpassning

Du kan bara slutföra anpassningen av din webbplats genom att använda fliken "innehåll" och "stil". Men om du vill göra lite mer avancerad anpassning måste du använda fliken Avancerat.

Så, vad får du på vår avancerade flik?

På den avancerade fliken får du ElementsKits skick, effekter, klibbigt element, rörelseeffekter, lyhördhet, bakgrundstyp, utfyllnad och anpassning av marginaler.

Låt mig introducera dig för alla dessa funktioner en efter en.

1. ElementsKit-villkor

Genom att aktivera ElementsKit-villkoret kan du publicera villkorliga inlägg på din webbsida. Förresten, du kan välja att visa en viss del av din webbsida via WordPress Elementor-stilflikar baserat på skick. Du kan tillämpa olika villkor baserat på inloggningsstatus, webbläsare, dag, tid, etc.

2. ElementsKit-effekter

ElementsKit-effektfunktionen låter dig lägga till några interaktiva effekter till din text. Det låter dig lägga till interaktiva tidslinjer på WordPress. Du kan lägga till fyra olika effektstilar, som är CSS, tilt, on-scroll och musrörelse.

● CSS-effekter

CSS-funktionen låter dig lägga till lite CSS-animation till dina webbtexter. Du kan ändra stilen för animeringens utseende, animeringshastighet, riktning och antal iterationer.

Genom att aktivera funktionen CSS Transform kan du ändra fyra transformationsinställningar som Translate, Rotate, Scale och Skew alternativ. Om något går fel kan du klicka på knappen "Tillbaka till standardinställningarna", så återgår allt till föregående fas.

• ● Lutningseffekter

Genom att aktivera tilteffekterna kan du ändra MaxTilt-funktioner, bildskalor, axelfunktioner etc.

• ● Rullande effekter

Med rullningseffekter kan webbmastern ändra Parallax-stilen, övergången, jämnheten, offsetinställningarna, etc.

• ● Musrörelseeffekt

Med musrörelseeffekterna kan du styra rörelsehastigheten och slå på/av animeringen i redigeringsläget.

3. ● ElementsKit Sticky

Här går kontrollen över den klibbiga rörelsen på ditt webbplatselement. Du kan välja placeringen av ditt klibbiga innehåll. Du kan välja mellan Top, Bottom, Column och Scroll up. Du kan justera den klibbiga offseten, bakgrundsfärgen och klibbiga enheten från layouten.

4. Rörelseeffekter:

Funktionen för rörelseeffekter gör att du kan välja ingångsstil, varaktighet och fördröjning av din animation.

ElementsKit erbjuder flera ingångsanimationsstilar som zoomning, blekning, studsande, roterande, glidande, skakning, jello, wobbling, roll-in, etc.

5. Bakgrundseffekter

Den avancerade flikens bakgrundsalternativ låter dig transformera bakgrundsbilden i både normal stil och svävningsstil.

I bakgrundssektionen "Normal" kan du välja att antingen ändra funktionen Klassisk eller Gradient. Den klassiska bildfunktionen möjliggör bild- och färgskiftande stil tillsammans med övergångshastigheterna också.

Å andra sidan erbjuder gradientsektionen möjligheten att ändra bakgrundstyp, färg, plats, vinkel och liner eller radiell bakgrundstyp.

Du kan också utföra alla dessa åtgärder på hovringsalternativen.

6. Gräns

Vi har redan gjort mycket i innehållssektionen. Låt oss skräddarsy text- och boxkanterna.

Du kan välja olika ramtyper som solid, dubbel, prickad, streckad och räfflad. Efter att ha valt kanttyp är det dags att välja radie. De uppdaterade ElementsKit gör det möjligt att ändra radiestilen och boxskuggan också!

Du kommer också att få alla dessa funktioner i avsnittet Hover. Förresten, du kan också ändra "Övergångslängd" på fliken för att sväva.

7. Positionering

I första hand kan du ändra "bredden" och "positionen" för ditt innehåll.

I breddsektionen kan du behålla standardbredden eller ändra den till full bredd, inline, auto eller anpassad sektion. Du kan också välja den vertikala justeringen.

Efter det är det dags att justera positionssektionen. Istället för standardalternativet kan du antingen ändra alternativet "Absolut" eller "Fast". Oavsett vilket du väljer kommer undersektionen att vara liknande.

Till exempel kommer du att få horisontell och vertikal orientering med offsetmodifiering i pixlar.

Varning: Använd inte den anpassade positioneringsfunktionen om du inte behöver den. Eftersom det påverkar responsen på din webbplats. Även om du gör det, försök att inte använda den för ofta.

8. Mottaglig

Den responsiva fliken låter dig välja utseendet på dina element. Du kan ändra inställningarna på alla plattformar, till exempel skrivbord, surfplatta och mobilsektioner.

9. Anpassad CSS

Precis som namnet indikerar kan du infoga anpassad CSS i ditt inlägg via den här funktionen. Du behöver dock ElementsKit Pro version för att infoga anpassad CSS eller attribut på din webbsida.

Det är allt du får i "Content Timeline"-widgeten i ElementsKit – Allt i ett tillägg för Elementor Page Builder.

Varför ska du använda innehållstidslinjen från ElementsKit?

Okej! Jag hoppas att du har gått igenom alla våra funktioner i föregående avsnitt. Så, ska du använda ElementsKit eller hålla fast vid den traditionella metoden med penna och papper?

Tja, jag tror att du måste använda Content Timeline av ElementsKit. Låt oss fokusera på några primära skäl bakom att använda denna produkt.

• Användarvänlig

Du behöver inga kodnings- eller designfärdigheter för att skapa en tidslinje för innehåll med ElementsKit. Därmed blir den helt användarvänlig.

• Tids sparande

Att skapa en ny tidslinje och anpassa manuellt är en tidskrävande process. Förhoppningsvis låter denna multifunktionella plugin dig skapa eller anpassa en tidslinje inom några minuter.

• Inbyggda layouter

ElementsKit har flera inbyggda tidslinjestilar. Om du är i en nödsituation och inte har tid att utforma en tidslinje, har vi dig täckt. Välj bara en av de inbyggda layouterna, anpassa texterna och publicera!

• Avancerad justering

Tidslinjemodulen låter dig göra några avancerade justeringar för att skapa en enklare och iögonfallande tidslinje för din webbplats. Vi har redan diskuterat den avancerade tweaking-funktionen i avsnittet "Avancerad anpassning".

• Snabb och lyhörd

Timeline-modulen i ElementsKit är extremt lätt och laddas snabbt. Eftersom den är en responsiv produkt passar den även i alla enheter med hänsyn till skärmstorleken.

Saker att lägga till i en tidslinje för innehåll

Att skapa en tidslinje är ingen stor sak. Men att bygga en fyndig och iögonfallande tidslinje är en ganska kreativ uppgift!

Tja, om du lägger till följande alternativ kommer din tidslinje att göra ditt projekt mer fyndigt och tillfredsställa alla dina frågor. Låt oss ta en snabb titt på de alternativ som kan inkluderas i din tidslinje.

• Datum

Kan du föreställa dig en tidslinje utan något datum?

Nej!

Det är därför du måste lägga till lämpliga datum i tidslinjen för ditt innehåll. Annars blir det bara slöseri med tid. En tidslinje utan ett datum har inget värde för sin publik.

• Relevant rubrik

Glöm aldrig att namnge din tidslinje. En riktig rubrik låter användarna snabbt förstå syftet med din tidslinje.

• Grafisk ikon

Att använda några slående illustrerade bilder, ikoner eller andra grafiska element kommer att göra din tidslinje levande och mycket tilltalande.

• Design

Välj en iögonfallande design som matchar din tidslinjepresentation. Det ger klarhet och förenklar uppfattningen.

• Kort beskrivning

De korta beskrivningarna låter användarna förstå milstolparna i ditt tidslinjeprojekt.

Slutord

Innehållets tidslinje är det perfekta elementet för att representera milstolpar i ett projekt. Även om det täcker ett långt tidsintervall, belamra det inte med överdriven beskrivning. Försök istället att hålla det enkelt genom att använda bilder, korta beskrivningar osv.

Denna Elementor tidslinjewidget kan avsevärt hjälpa användare att skapa och anpassa en tidslinje utan krångel.

Om du fortfarande har några frågor kring Elementor-innehållets tidslinje, skriv din fråga i kommentarsektionen. Jag svarar på din fråga ASAP!

Det är dags att börja skapa din tidslinje för innehåll på din WordPress-webbplats!