Opret en fantastisk tidslinje for indhold i WordPress med Elementor

Indholdstidslinje er et knækværktøj til at vise enhver begivenheds sekventielle information, men at oprette en sådan tidslinje på dit WordPress-websted kræver brug af det rigtige værktøj med fuld kommando.

Hvis du henter et hvilket som helst tilfældigt WordPress-værktøj til at bygge din indholdstidslinje, er chancerne for, at værktøjet vil være under gennemsnittet, hvilket giver et osteagtigt designudseende.

Jeg har lavet en dybdegående analyse for at finde en optimal måde at skabe indholds tidslinje i WordPress. Gæt hvad? I denne artikel har jeg sammensat den nemmeste metode til at oprette indholdstidslinje i WordPress med Elementor.

Forstå indholdets tidslinje

En indholdstidslinje repræsenterer info i kronologisk form. Det er en enkel, men effektiv metode til at dele information på en visuelt slående måde.

Det primære formål med en indholdstidslinje er at demonstrere handlingen af en hændelse sekventielt inden for et tidsinterval. Det hjælper læserne med at få mere information på et øjeblik.

Generelt indeholder en indholdstidslinje en lang bjælke med punkter og nogle oplysninger omkring den. Denne stang kan være både lodret og vandret. Uanset retningen skal du blot sørge for, at tidslinjelinjen indeholder nok ressourcer. Du kan forbedre bjælken med relaterede billeder, ikoner, tal, klikbare tekster eller andre interaktive elementer.

Hvor skal du bruge en indholdstidslinje?

En indholdstidslinje er et multifunktionelt værktøj. Du kan bruge dette værktøj næsten overalt til at udføre en opgave problemfrit. Lad os tage et kig på de vigtigste sektorer, hvor denne tidslinje fungerer bedst.

Sådan opretter du en tidslinje for indhold

At skabe en passende tidslinje kræver tid og dedikation. Her er en ligetil proces til at skabe en tidslinje.

Trin #1: Analyser dit emne

Først skal du vælge dit emne og indsamle de nødvendige oplysninger om dette emne. Du skal nøje vælge den information, du vil have vist på din tidslinje.

Trin #2: Navngiv tidslinjen

Vær forsigtig, mens du vælger navnet på din tidslinje. 'Tidslinjenavnet' skal repræsentere formålet med din tidslinje.

Sæt altid tidslinjen øverst på tidslinjen, så navnet forbliver synligt for alle.

Trin #3: Tegn en grov tidslinje

I dette øjeblik skal du tegne en grov tidslinjestruktur på et stykke papir. Du skal blot tegne en vandret eller lodret linje sammen med et par punkter. Hvert enkelt punkt angiver en dato eller milepæl for dit projekt.

Nu er det tid til at tilføje nogle tekster eller andre relaterede oplysninger om dit projekt. Og det er det!

Trin #4: Afslut emnet

Jeg håber, at den grove tidslinjeplan allerede er i dine hænder. Tag nu en pause og foretag dybdegående research om dit emne igen. Således kan du finde ud af de dumme problemer og rette dem.

Trin #5: Tilpas tidslinjen

Tilpasning af tidslinjen gør det let forståeligt såvel som visuelt forbløffende. Du kan tilføje nogle ikoner eller mediefiler for at gøre dette.

Sådan tilføjer du Elementor Content-tidslinjen til dit WordPress-websted?

Nu hvor du har en klar viden om indholdets tidslinje og dens anvendelse sammen med processen med at oprette tidslinjen.  

Nu er det tid til at integrere indholdets tidslinje i dit WordPress-websted. Så hvordan kan du gøre det?

Okay!

Der er hovedsageligt to forskellige metoder til at oprette en indholdstidslinje i WordPress. Rul ned for at lære mere om processerne.

Manuel proces (den hårde måde)

Den manuelle proces er den traditionelle måde at skabe en tidslinje for indhold på din hjemmeside. Du skal bruge enten et billede eller en GIF-fil for at lave en indholdstidslinje. Så hvordan kan du gøre det?

Enkel! Bare følg trinene.

• Tegn først indholdet digitalt. Du kan bruge billedredigeringssoftwaren som Photoshop, Gimp eller Paint til at tegne tidslinjen. Når du har afsluttet projektet, skal du gemme billedet eller gif-filen.
• For det andet, opret en side eller et indlæg på din hjemmeside og læg billedet/gif-filen på den side. Tilføj derefter det nødvendige indhold og udgiv. 

Bom! Det er det, du er færdig!

Ulemper ved denne proces:

Processen kan virke ret simpel. Men bliv ikke afslappet endnu! Du vil stå over for mange problemer med denne proces i det virkelige liv. De væsentlige ulemper er angivet nedenfor.

• Du kan ikke opdatere den offentliggjorte tidslinje via webstedsadministratorens dashboard.
• Du kan ikke oprette en interaktiv tidslinje.
• Tilpasning af ikoner og billeder er en generende proces.

Automatisk proces (nemmeste måde – ElementsKit pro)

For at få mest muligt ud af dit indholds tidslinje, kan du bruge ElementsKit. Det er en premium Elementor-tilføjelse, der kan være praktisk til at bygge en indholdstidslinje på dit WordPress-websted.

I dette afsnit vil jeg introducere dig til processen med at oprette en Elementor-indholdstidslinje inden for et par minutter. Lad os komme igang.

Få adgang til webstedets administrationspanel

Ligesom den manuelle metode behøver du ikke tegne tidslinjen i billedredigeringssoftware. Du kan gøre alt fra dit websteds admin panel dashboard.

Du skal blot logge ind på administrationspanelets dashboard. Generelt ser dashboard-URL'en sådan ud Yourdomain.com/wp-admin

Installer Elementor og ElementsKit

Efter at have logget ind på dit admin-dashboard, er det tid til at installere Elementor og Elementor tilføjelse ElementsKit. Du skal bruge begge disse for at oprette tidslinjen automatisk.

Åbn en ny eller eksisterende webside

Efter at have aktiveret Elementor og ElementsKit, er det tid til at bruge dem i et indlæg eller en side. Så opret et nyt indlæg ved at klikke Indlæg > Tilføj nyt.

Klik på "Tilføj titel” bloker og tilføj din titel. Du kan også tilføje almindelig tekst og billeder til indlægget.

Start Elementor

Klik nu på "Rediger med Elementor” og det åbner dit helt nye indlæg i Elementor-editoren. Elementor-editoren bruges til at redigere indlægget mere professionelt.

Start ElementsKit Timeline

Rul ned i "Elementor"-panelet og se efter "Tidslinje” tilføjelse på listen. Ellers kan du blot søge efter "Tidslinje" i Elementor-panelet.

Start af ElementsKit-tidslinje

Træk og slip nu tidslinjewidgetten i dit indlæg, og det er det! Du vil bemærke et eksempel på en tidslinje i dit indlæg.

Som standard vil der være tre tidslinjepunkter. Du kan fjerne alle disse og begynde at oprette din egen tidslinje. Ellers kan du også redigere indholdet af disse eksisterende punkter og tilføje flere punkter, hvis det er nødvendigt.

Det næste trin er at ændre teksten, ikonet eller stilen for dit indholds tidslinje.

Tilpasning af tidslinjeindhold

Fanen "Indhold" giver dig mulighed for at tilpasse tidslinjestil, indholdsstil, tidslinjeindhold osv. Du kan ændre flere muligheder fra fanen Indhold. Lad os tage et kig på disse nøglemuligheder.

1. Tidslinjestil

Dette er den allerførste sektion af fanen Indhold. Det giver dig mulighed for at vælge enten den lodrette Elementor-tidslinje eller den vandrette Elementor-tidslinjestil. Som standard vil den lodrette stil være valgt. Du kan ændre stilen, når du har lyst til det!

2. Indholdsstil

Fanen Indholdsstil giver dig mulighed for at vælge sider. Du kan vise alt indhold enten på samme side eller begge dele.

Udsigten for din indholdstidslinje er nu færdig. I dette afsnit skal du opdatere teksterne, billederne eller ikonerne på tidslinjen.

3. Tidslinjeindhold

Tidslinjens indhold giver dig mulighed for at ændre flere muligheder som titel, beskrivelse, link, dato, adresse, ikon osv. Du kan aktivere denne funktion ved blot at klikke på titelnavnet.

Der vil være tre titler i standardindstillingerne. Du kan enten tilføje eller fjerne disse titler. Når du har klikket på titlen, vil indholdsredigeringsmulighederne blive synlige for dig.

I afsnittet med tidslinjeindhold kan du ændre følgende muligheder –

• Titel
• Undertekst
• Titellink
• Beskrivelse
• Titelikon
• Dato
• Adresse
• Undertekstfarve
• Baggrund for indholdsboks
• Ikon tekstfarve og
• Ikon baggrund
  

4. Repeater Item Style

I dette afsnit kan du ændre dit indholds farve og baggrund for tekster og ikoner. Vigtigst er det, at svævestilen også kan ændres fra dette afsnit.

Kudos til udviklerne!

5. Animationsindstillinger

I indstillingsmuligheden kan du ændre ikonet og animationen af både dato og adresse. Denne Elementor-tidslinje-widget giver dig mulighed for at vælge flere zoom-stile, såsom fading, zoom, hoppe, glide, rotere, ryste, wobble, jello, roll-in osv.

Det handler om at tilpasse indholdet af din tidslinje. Nu er det tid til at tilføje lidt styling til dit indhold. Følg den næste fase for at få detaljer om tilføjelse af stil.

Tilpas tidslinjestil

På stilfanen kan du tilpasse din indholdsstil, linjestil og containerstil. Rul ned for at få et detaljeret overblik over disse funktioner.

1. Fanen Indhold:

Indholdsfanen tilbyder dig adskillige tilpasningsmuligheder for dit indhold. For eksempel kan du styre justeringen, polstring, indre polstring, kantradius, tekstfarve, undertekst, tidslinjestil osv.

Du kan tilpasse alle disse indstillinger til hver platform, inklusive desktop-, tablet- og mobilversioner. Tjek billederne nedenfor for at få en klar forståelse af de funktioner, der ligger under fanen indhold.

Ikke kun det! Du kan også ændre flere andre muligheder såsom tekstfarve, ankertekstfarve, undertekstfarve, marginrum, typografi, rundt ikon osv. Både ikonet og baggrundsfarven for dette runde ikon kan ændres fra denne sektion.

På nuværende tidspunkt har vi tilpasset flere stilarter i din hjemmesidetekst. ElementsKit Elementor-tidslinjewidgetten kan dog endnu mere!

Du kan også problemfrit ændre farven på tidslinjen, ikonets størrelse, margen, typografi, adresser osv.

2. Linje Tab

Linjefanen giver dig mulighed for at tilføje fire tilpasningsstile til din indholdstidslinje. Disse er -

• ● Linje farve – Skift den vandrette eller lodrette Elementor-tidslinjefarve
• ● Pin farve – skift farven på din pin
• ● Aktiv pin farve – skift farven på din aktiverede nålefarve
• ● Pinpoint farve – ændrer den præcise farve

3. Fanen Container

Beholderfanen giver dig mulighed for at ændre afstanden mellem dit indhold. Det omfatter ændring af adresse- eller datoafstand og varebundsafstand.

Avanceret tilpasning

Du kan kun fuldføre tilpasningen af dit websted ved at bruge fanen 'indhold' og 'stil'. Men hvis du vil lave noget mere avanceret tilpasning, skal du bruge fanen avanceret.

Så hvad får du i vores avancerede fane?

På den avancerede fane får du ElementsKit-tilstanden, effekter, klæbrig element, bevægelseseffekter, reaktionsevne, baggrundstype, polstring og margentilpasning.

Lad mig introducere dig til alle disse funktioner én efter én.

1. ElementsKit-betingelser

Ved at aktivere ElementsKit-betingelsen kan du udgive betingede indlæg på din webside. Forresten kan du vælge at vise en bestemt del af din webside via WordPress Elementor-stilfaner baseret på tilstand. Du kan anvende forskellige betingelser baseret på login-status, browser, dag, klokkeslæt osv.

2. ElementsKit-effekter

ElementsKit-effektfunktionen giver dig mulighed for at tilføje nogle interaktive effekter til din tekst. Det giver dig mulighed for at tilføje interaktive tidslinjer på WordPress. Du kan tilføje fire forskellige effektstile, som er CSS, tilt, on-scroll og musebevægelse.

● CSS effekter

CSS-funktionen giver dig mulighed for at tilføje nogle CSS-animationer til dine webtekster. Du kan ændre animationens udseende, animationshastighed, retning og antal iterationer.

Ved at aktivere CSS-transformationsfunktionen kan du ændre fire transformationsindstillinger som Translate, Rotate, Scale og Skew. Hvis noget går galt, kan du klikke på knappen 'Tilbage til standarder', og alt vil vende tilbage til den forrige fase.

• ● Tilt effekter

Ved at aktivere tilt-effekterne kan du ændre MaxTilt-funktionerne, billedskalaer, aksefunktioner osv.

• ● Rulningseffekter

On-scroll-effekter giver webmasteren mulighed for at ændre Parallax-stilen, overgangen, glathed, offset-indstillinger osv.

• ● Musebevægelseseffekt

Muse-move-effekterne giver dig mulighed for at styre bevægelseshastigheden og tænde/slukke for animationen i redigeringstilstand.

3. ● ElementsKit Sticky

Her går kontrollen over den klæbrige bevægelse af dit webstedselement. Du kan vælge placeringen af dit klæbrige indhold. Du kan vælge mellem Top, Bund, Kolonne og Rul op. Du kan justere den klæbrige offset, baggrundsfarven og den klæbrige enhed fra layoutet.

4. Bevægelseseffekter:

Bevægelseseffektfunktionen giver dig mulighed for at vælge indgangsstil, varighed og forsinkelse af din animation.

ElementsKit tilbyder flere indgangsanimationsstile såsom zoom, fading, hoppende, roterende, glidende, rystende, jello, wobbling, roll-in osv.

5. Baggrundseffekter

Den avancerede fanes baggrundsindstilling giver dig mulighed for at transformere baggrundsbilledet i både normal stil og svævestil.

I baggrundssektionen "Normal" kan du vælge enten at ændre funktionen Klassisk eller Gradient. Den klassiske billedfunktion muliggør også billed- og farveskiftende stil sammen med overgangshastighederne.

På den anden side giver gradientafsnittet mulighed for at ændre baggrundstype, farve, placering, vinkel og liner eller radial baggrundstype.

Du kan også udføre alle disse handlinger på svæveindstillingerne.

6. Grænse

Vi har allerede gjort meget i indholdssektionen. Lad os skræddersy tekst- og bokskanterne.

Du kan vælge forskellige kanttyper såsom massiv, dobbelt, prikket, stiplet og rille. Når du har valgt kanttypen, er det tid til at vælge radius. Det opdateret ElementsKit giver også mulighed for at ændre radiusstilen og kasseskyggen!

Du får også alle disse funktioner i Hover-sektionen. Du kan i øvrigt også ændre 'Overgangsvarighed' i svævefanen.

7. Positionering

Primært kan du ændre 'Bredde' og 'position' af dit indhold.

I breddesektionen kan du beholde standardbredden eller ændre den til fuld bredde, inline, auto eller brugerdefineret sektion. Du kan også vælge den lodrette justering.

Derefter er det tid til at justere positionssektionen. I stedet for standardindstillingen kan du ændre enten 'Absolut' eller 'Fixed'. Uanset hvad du vælger, vil underafsnittet være ens.

For eksempel vil du få vandret og lodret orientering med offset modifikation i pixels.

Advarsel: Brug ikke den brugerdefinerede positioneringsfunktion, medmindre du har hårdt brug for det. Fordi det påvirker responsen på dit websted. Selvom du gør det, så prøv ikke at bruge det for ofte.

8. Lydhør

Den responsive fane giver dig mulighed for at vælge udseendet af dine elementer. Du kan ændre indstillingerne på alle platforme, såsom desktop-, tablet- og mobilsektioner.

9. Brugerdefineret CSS

Ligesom navnet indikerer, kan du indsætte tilpasset CSS i dit indlæg via denne funktion. Du skal dog bruge ElementsKit Pro version for at indsætte tilpasset CSS eller attributter på din webside.

Det er alt, du får i 'Content Timeline'-widget'en i ElementsKit – Alt i én tilføjelse til Elementor Page Builder.

Hvorfor skal du bruge indholdstidslinjen fra ElementsKit?

Okay! Jeg håber, du har gennemgået alle vores funktioner i det forrige afsnit. Så skal du bruge ElementsKit eller holde dig til den traditionelle pen og papir metode?

Nå, jeg tror, du skal bruge Content Timeline af ElementsKit. Lad os fokusere på nogle primære årsager til at bruge dette produkt.

• Brugervenlig

Du behøver ingen kodnings- eller designfærdigheder for at skabe en indholdstidslinje med ElementsKit. Dermed bliver den fuldstændig brugervenlig.

• Tidsbesparende

At oprette en ny tidslinje og tilpasse manuelt er en tidskrævende proces. Forhåbentlig giver dette multi-purpose plugin dig mulighed for at oprette eller tilpasse en tidslinje inden for et par minutter.

• Indbyggede layouts

ElementsKit har flere indbyggede tidslinjestile i sig. Hvis du er i en nødsituation og ikke har tid til at designe en tidslinje, har vi dækket dig. Du skal blot vælge et af disse indbyggede layouts, tilpasse teksterne og udgive!

• Avanceret tilpasning

Tidslinjemodulet giver dig mulighed for at lave nogle avancerede tweaking for at skabe en nemmere og iøjnefaldende tidslinje for din hjemmeside. Vi har allerede diskuteret den avancerede tweaking-funktion i afsnittet "Avanceret tilpasning".

• Hurtig og responsiv

Timeline-modulet i ElementsKit er ekstremt let og indlæses hurtigt. Da det er et responsivt produkt, passer det også ind i enhver enhed med hensyn til skærmstørrelsen.

Ting, der skal tilføjes i en indholdstidslinje

At oprette en tidslinje er ikke en big deal. Men at bygge en ressourcestærk og iøjnefaldende tidslinje er en ganske kreativ opgave!

Hvis du tilføjer følgende muligheder, vil din tidslinje gøre dit projekt mere ressourcestærkt og tilfredsstille alle dine forespørgsler. Lad os tage et hurtigt kig på de muligheder, der kan være inkluderet i din tidslinje.

• Dato

Kan du forestille dig en tidslinje uden nogen dato?

Nix!

Det er derfor, du skal tilføje passende datoer i dit indholds tidslinje. Ellers vil det bare være spild af tid. En tidslinje uden en dato har ingen værdi for sine målgrupper.

• Relevant overskrift

Glem aldrig at navngive din tidslinje. En ordentlig overskrift giver brugerne mulighed for hurtigt at forstå formålet med din tidslinje.

• Grafisk ikon

Brug af nogle slående illustrerede billeder, ikoner eller andre grafiske elementer vil gøre din tidslinje levende og meget tiltalende.

• Design

Vælg et iøjnefaldende design, der matcher din tidslinjepræsentation. Det tilføjer klarhed og forenkler opfattelsen.

• Kort beskrivelse

De korte beskrivelser giver brugerne mulighed for at forstå milepælene i dit tidslinjeprojekt.

Afsluttende ord

Indholdstidslinjen er det perfekte element til at repræsentere et projekts milepæle. Selvom det dækker et langt tidsinterval, skal du ikke fylde det med overdreven beskrivelse. Prøv i stedet at holde det enkelt ved at bruge billeder, korte beskrivelser osv.

Denne Elementor-tidslinje-widget kan i høj grad hjælpe brugere med at oprette og tilpasse en tidslinje uden besvær.

Hvis du stadig har spørgsmål om Elementor-indholdets tidslinje, så send din forespørgsel i kommentarfeltet. Jeg svarer på din forespørgsel ASAP!

Det er tid til at begynde at oprette din tidslinje for indhold på dit WordPress-websted!