Nøgle takeaways
- Disse otte Elementor-tidslinjeeksempler er alle bygget med én widget, Master Addons Timeline-widgetten, og hver enkelt har en live demoside, du kan åbne.
- Seks af de otte tidslinjedesigns er lodrette og to er vandrette karruseller, som matcher, hvordan layoutene bruges: lodret til lange etager og vandret til korte sekvenser.
- De lodrette eksempler bruger tre af tidslinje-widgettens fire justeringer: Center for skiftende kort, Venstre for en ensidig liste og Højre for en spejlet ensidig liste.
- Det meste af den visuelle forskel mellem de otte designs kommer fra fire Style-sektioner i Tidslinje-widgetten: Kort, Datoer, Linje og Punkter.
- Elementor og Elementor Pro indeholder ikke en tidslinje-widget, så enhver Elementor-tidslinjeskabelon afhænger af, at en tilføjelse installeres.
Gode Elementor tidslinjeeksempler er svære at finde, fordi de fleste demoer er tre grå kort med lorem ipsum. De otte designs nedenfor bruger rigtige historier: en orgelgenopbygning, et brospænd, et klinisk forsøg, et bageri første år. Alle er bygget med Master Addons Tidslinje widget og hver har en live demo.
For hvert eksempel får du, hvad det er godt for, hvad der får designet til at fungere, og indstillingerne bag det, så du kan bruge det som skabelon til din egen side. Hvis du ikke har bygget en tidslinje før, så start med sådan oprettes en tidslinje i Elementor.
Indholdsfortegnelse
De otte tidslinjeeksempler på et øjeblik
Vælg efter layout først, derefter efter humør. Denne tabel viser, hvilket Elementor-tidslinjedesign der passer til hvilket job.
| # | designe | opsætning | billeder | Godt for |
|---|---|---|---|---|
| 1 | Skiftende Rebuild | Lodret, centrum | ingen | Projektlogfiler, restaureringer |
| 2 | Arch Image Field | Lodret, den ene side | Ja, buet | Sæsonbestemte eller årlige noter |
| 3 | Højrejusteret undersøgelse | Lodret, højre | ingen | Kronologier, sagsakter |
| 4 | Vandret fremstilling | Vandret karrusel | Ja | Produktionsstadier |
| 5 | Split Card Week | Lodret, enkelt søjle | ingen | Uge for uge tidsplaner |
| 6 | Skiftende Arch Media | Lodret, centrum | Ja, buet | Brand og grundlægger historier |
| 7 | Light Card Trial | Lodret, den ene side | ingen | Forsknings- og procesmilepæle |
| 8 | Horisontalt år | Vandret karrusel | ingen | Historie efter årstal |
1. Vekslende Rebuild Tidslinje
Dette er den klassiske Elementor lodrette tidslinje: kortene skifter til venstre og højre for en midterlinje, med et nummereret punkt og en dato for hver fase. Demoen fortæller historien om et pibeorgel, der er genopbygget over tre år.
Brug den til restaureringer, byggedagbøger eller ethvert projekt med klare stadier. Tallene giver ordren, allerede før du læser en dato. For at bygge den skal du bruge Vandret Juster indstillet til Center, en tynd Linje, små Punkter og en kortbaggrund, der kun er lidt lettere end siden.
Åbn Alternating Rebuild-demo'en
2. Arch Image Field Tidslinje
En ensidig tidslinje på en creme baggrund, hvor hver post har et bueformet foto ved siden af teksten. Demoen følger ti vintre med hække, der ligger på en gård.
Brug det til feltnoter, sæsonarbejde, rejsejournaler eller noget foto-ledet. Buegrøden får almindelige fotos til at se bevidste ud. For at bygge det skal du bruge en ensidig justering og en stor radius på de øverste hjørner kun i Stil, Billeder, Border Radius.
3. Højrejusteret undersøgelse Tidslinje
Her løber linjen ned ad højre kant, og kortene sidder til venstre, med højrejusteret tekst. Det er spejlet af det sædvanlige layout. Demoen er kronologien af en toårig informationsanmodning.
Brug den til undersøgelser, juridiske eller overholdelseskronologier eller casestudier. En usædvanlig justering får et tidslinjelook, der kun er tekst, til at se designet. For at bygge det skal du bruge Vandret justering indstillet til Højre, Punkter med en kant og ingen udfyldning.
Åbn demoen Right Aligned Investigation
4. Vandret Fabrication Tidslinje
Det første af to vandrette eksempler. Månedsetiketter sidder over limegrønne punkter, og billedkort glider under dem med runde pileknapper. Demoen dækker et brospænd fremstillet i fem trin.
Brug den til fremstillings- eller produktionsstadier eller en fem-trins proces. Fotos bærer hvert trin, og teksten forbliver på tre linjer. Hvis du vil bygge den, skal du bruge Tidslinjestil indstillet til Vandret tidslinje, Navigation indstillet til Pile og et billede i hvert elements Media-fane.
Åbn demoen Horizontal Fabrication. Karruselkontrollerne er forklaret i sådan oprettes en horisontal tidslinje i Elementor.
5. Split Card Week Tidslinje
En enkelt centreret kolonne med hvide kort. Hvert kort er delt i to: en smal strimmel med ugen til venstre og indholdet til højre. Demoen er et museum rehang planlagt uge for uge.
Brug den til tidsplaner, sprintplaner eller kursuskonturer. Etiketkolonnen linjer op ned ad siden, så du kan scanne ugerne uden at læse kortene. For at bygge det skal du bruge et brugerdefineret mærke på hvert element (“Uge 1 · 6. januar”) i stedet for en dato, lyskort med en blød skygge.
6. Vekslende Arch Media Tidslinje
Skiftende kort igen, denne gang med sort-hvide fotos beskåret til en bue oven på hvert kort. Demoen er et bageri første år, startende fra en ovn og et banklån.
Brug den til Om sider, grundlæggerhistorier eller en tidslinje for Elementorhistorik for en lille virksomhed. En accentfarve og monokrome fotos får billeder i blandet kvalitet til at ligne et sæt. Hvis du vil bygge det, skal du bruge Vandret Juster sæt til Center, et billede pr. element, den samme accent i Datoer og Punkter.
Åbn Alternating Arch Media-demoen
7. Tidslinje for prøveversion af lyskort
Lyskort på en dyb lilla baggrund, alt sammen på den ene side af linjen, med ravfarvede punkter. Demoen sporer et klinisk forsøg fra finansiering til en protokolændring.
Brug det til forskningsmilepæle, finansieringsrunder eller godkendelsesprocesser. Kontrasten mellem kort og baggrund gør arbejdet, så kortene behøver ingen kant eller skygge. For at bygge det skal du bruge Vandret Juster sæt til Venstre, en lys Kort baggrund, små udfyldte Punkter.
8. Vandret År Tidslinje
Det andet horisontale design sætter store år over stregen (1982, 1986, 1989) med et kort kort under hver. Demoen er seksten års fyrautomatisering, og den parrer tidslinjen med et før- og efterbord.
Brug det til virksomhedens historie efter år, produktgenerationer eller mærkedage. Året er den største tekst på skærmen, hvilket er, hvad folk leder efter i en historie. For at bygge det skal du bruge Vandret tidslinje, et brugerdefineret mærke, der kun holder året, og store Datoer typografi i en accentfarve.
Vil du have alle seksten? Demo-fremviseren på Elementor Tidslinje widget page har disse otte plus otte mere, inklusive en ændringslog, en køreplan og en begivenhedsdagsorden.
Sådan bruger du disse som skabeloner
Du kan genopbygge nogen af disse elementor tidslinjeskabeloner om et par minutter, fordi forskellene er alle i indstillingerne. For en hel side at sætte en på, se Elementor sideskabeloner.
- Tilføj Tidslinje-widgetten, og indtast dine egne elementer: en dato eller etiket, en overskrift, en kort beskrivelse og et valgfrit billede.
- Vælg layoutet. Tidslinje Style vælger lodret eller vandret, og Style, Layout, Horizontal Align vælger Venstre, Center, Overlay eller Højre.
- Match farverne. Indstil siden eller beholderens baggrund først, derefter Kort, Datoer, Linje og Punkter.
- Kontroller tilstanden Fokuseret. Hvert eksempel giver indtastningen i visningen et lidt anderledes kort eller punkt, så læseren beholder sin plads.
- Se på det på en telefon. Lodrette tidslinjer flytter til den ene side på små skærme, og vandrette viser færre kort.
Viser indlæg på en tidslinje har sin egen guide: sådan viser du blogindlæg på en tidslinje i Elementor.
Læs også: 20 Elementor skyderskabeloner, som omfatter en tidslinjeskyder med reel afstand mellem år.
Ofte stillede spørgsmål
Kommer Elementor med tidslinjeskabeloner?
Nej. Elementor og Elementor Pro har ingen tidslinje widget, så deres skabelonbibliotek har heller ingen sand tidslinje. Tidslinjeskabeloner til Elementor er altid afhængige af en addon widget eller på brugerdefineret CSS.
Hvilket tidslinjelayout er bedst for en virksomheds historie?
En vekslende lodret tidslinje passer til en lang historie med fotos, som eksempel 6. For en kort historie med fem eller seks hovedår tager en vandret årstidslinje som eksempel 8 mindre plads.
Kan jeg bruge disse tidslinjedesigns med noget tema?
Ja. Designene er lavet i Elementor-editoren med Timeline-widgetens egne style-kontroller, så de ikke afhænger af et tema. Skrifttyper følger dit websteds globale typografi, medmindre du angiver dem i widgetten.
Hvor mange elementer skal en tidslinje have?
Fire til otte er et behageligt område. Under fire er en simpel liste klarere. Over ti, opdel tidslinjen efter år eller årti, eller forkort hvert kort til en overskrift og en linje.
Endelige tanker
Disse otte Elementor tidslinjeeksempler dækker de layouts, de fleste websteder har brug for: to skiftende designs, tre ensidige, en enkelt kolonne tidsplan og to vandrette karruseller. De kommer alle fra en widget, og forskellene sidder i fire Style sektioner: Kort, Datoer, Linje og Punkter.
Åbn demoerne, vælg den nærmeste, og byg din version med Tidslinje widget.
Relateret læsning
