Nøgle takeaways
- Elementor og Elementor Pro har ingen tidslinje-widget, så en Elementor horisontal tidslinje har brug for en addon-widget eller en håndbygget række af containere med brugerdefineret CSS.
- Widgetten Master Addons Timeline skifter fra lodret til vandret med ét kontrolelement, Timeline Style, der findes på fanen Content under afsnittet Tidslinje.
- En vandret tidslinje i Master Addons-widgetten er en karrusel, og dens navigationskontrol tilbyder seks muligheder: Pile og prikker, pile og brøk, pile, prikker, fremskridt og ingen.
- Karruselindstillinger i tidslinje-widgetten inkluderer et karrusel- eller coverflow-layout, autospil med en standardhastighed på 5000 ms, pause på svæve, dias til at rulle, midterrutsjebane og sløjfe.
- Det vandrette layout fungerer kun med brugerdefinerede tidslinjeelementer, fordi en posttidslinje bygget ud fra blogindlæg forbliver lodret.
En Elementor vandret tidslinje lægger dine datoer ud fra venstre mod højre, med et punkt på linjen over hvert kort og pile til at bevæge sig langs det. elementor har ingen egen tidslinjewidget, så denne guide bruger Tidslinje widget i Master Addons, hvor det vandrette layout er en enkelt dropdown.
De seks trin nedenfor starter fra en almindelig lodret tidslinje og afsluttes med en fungerende karrusel. Hvert skærmbillede kommer fra Elementor 4.3 med widgetten på en testside. Hvis du ikke har placeret en tidslinje endnu, er fuld tidslinje tutorial dækker det grundlæggende først.
Indholdsfortegnelse
Når en horisontal tidslinje er det bedre valg
Brug en vandret tidslinje, når du har en kort løbetur af trin og begrænset lodret plads. En lodret tidslinje med tre kort kan tage mere end en fuld skærm af rulning. De samme tre kort side om side passer i én række, hvilket er grunden til, at vandrette layout vises på startsider og landingssider, mens lodrette passer til lange Om sider.
| Faktor | Vandret tidslinje | Lodret tidslinje |
|---|---|---|
| Bedste længde | 3 til 8 varer | Enhver længde |
| Plads, den har brug for | En række | Vokser med hver genstand |
| Hvordan besøgende bevæger sig | Pile, prikker eller stryg | Rulning af siden |
| Typisk anvendelse | Procestrin, produktkøreplan, årlige højdepunkter | Virksomhedshistorie, ændringslog, lang historie |
| Kilde i Master Addons | Brugerdefinerede Tidslinjeelementer | Brugerdefinerede elementer eller blogindlæg |
En horisontal tidslinje er en slags karrusel. Hvis du er usikker på, hvilket af de to udtryk der passer til dit design, karrusel vs skyder i Elementor forklarer forskellen.
Sådan oprettes en vandret tidslinje i Elementor
Du skal have Elementor og Master Addons installeret, derefter seks trin i editoren. Intet nedenfor har brug for brugerdefineret CSS.
Trin 1: Tilføj tidslinje-widgetten
Åbn din side med Elementor, søg i widgetpanelet efter Tidslinje og træk den over på siden. Den ankommer som en lodret tidslinje med tre prøveemner. Forlad Tidslinje Type på Brugerdefineret tidslinje, fordi det vandrette layout kun tilbydes til brugerdefinerede elementer.
Trin 2: Skift tidslinjestil til vandret
Åbn den på fanen Indhold Tidslinje afsnit og ændring Tidslinje stil fra Vertical Timeline til Vandret tidslinje. Kortene bevæger sig ind i en række, linjen løber på tværs af toppen, og hvert punkt sidder over sit kort med datoen over det. To nye sektioner vises i panelet: Navigation og Karruselindstillinger.
Trin 3: Rediger elementerne
Klik på en række under Varer for at åbne den. Hvert element har tre små faner: Indhold, Medier og Stil.
- udstille bestemmer, hvad der sidder over punktet: en dato eller et brugerdefineret mærke såsom “Fase 1”.
- daddel og Dato Format indstil datoen og hvordan den er skrevet.
- lænke gør hele kortet klikbart.
- Indholdsredigeringsprogrammet holder overskriften og beskrivelsen. Der er ikke noget separat titelfelt, så den første linje er overskriften.
- de medier tab tilføjer et billede til kortet.
Brede billeder fungerer bedre end høje her. Tre høje fotos skubber teksten langt ned ad skærmen.
Trin 4: Vælg navigationen
Åbn navigation afsnit og vælg, hvordan besøgende bevæger sig gennem tidslinjen. Navigation dropdown har seks muligheder.
| Navigationsmulighed | Hvad besøgende ser | Godt for |
|---|---|---|
| Pile og prikker | Forrige og næste pile plus en prik pr. slide | De fleste tidslinjer |
| Pile og Brøk | Pile plus en tæller som 2 / 6 | Lange tidslinjer, hvor prikker bliver overfyldte |
| Pile | Kun pile | Rene layouts |
| Prikker | Kun prikker | Touch-first designs |
| Progress | En bar, der fyldes, når karrusellen skrider frem | Procestrin |
| Ingen | Kun swipe eller autospil | Dekorative strimler |
Under dropdown kan du slå til Dynamiske kugler?, tilføje en rullepanel med Vis rullepanel?, indstille positionen, og bytte om på ikonerne Næste og Forrige. Skjul pil på mobilen? er slået til som standard, hvilket efterlader telefonbesøgende med swipe og prikker.
Trin 5: Indstil karruseladfærden
åbne lukke op Karruselindstillinger for at styre, hvordan tidslinjen bevæger sig.
- opsætning: Karrusel til en flad række, eller Coverflow til en 3D-effekt med Rotate, Stretch og Depth kontrol.
- autoplay og Autoplay hastighed: standardhastigheden er 5000 ms, så en ny slide hvert femte sekund.
- Pause på Hover: stopper autospil, mens markøren er over tidslinjen.
- Slides til Scroll: hvor mange kort bevæger sig pr. klik, indstilles pr. enhed.
- Center Slide, Grab Cursor og Træk Free Mode for følelsen af træk.
- lænde: vender tilbage til den første vare efter den sidste.
- Animationshastighed (ms): hvor lang tid hver slideovergang tager, 500 som standard.
For en rigtig tidslinje, tænke to gange om autospil. Datoer har en ordre, og et kort, der glider væk, mens nogen læser det er irriterende. Autospil med Pause på Hover er en fair mellemvej.
Trin 6: Style pilene, punkterne og kortene
Skift til fanen Stil. Den har ti sektioner: Karruselgenstande, layout, billeder, indlæg, kort, pil, datoer, linje, punkter og navigation.
- kort: polstring, kantradius, titel og indhold farver, plus et separat look til det fokuserede kort.
- Datoer: typografi og farve af datoen eller etiketten over hvert punkt.
- række: sporets farve og tykkelse.
- punkter: en almindelig prik, et ikon eller et billede, med størrelse og farver.
- navigation: farver og størrelser til pile, prikker og rullepanelet.
Udgiv siden og test den på en telefon. Kort pr. række falder på mindre skærme, så tjek at teksten stadig passer.
Vil du også have det lodrette layout? de Elementor Tidslinje widget siden viser hvert layout, justering og stil på ét sted.
Video tutorial
Denne video bygger en tidslinje fra en tom side og skifter den til den vandrette karrusel kl. 3:44.
Fire ting, der går galt
De fleste problemer med en vandret tidslinje kommer fra at behandle den som en lodret.
- For mange varer. Forbi otte eller deromkring holder besøgende op med at klikke. Brug en lodret tidslinje eller opdel historien efter år.
- Ujævne korthøjder. En lang beskrivelse strækker rækken. Trim teksten, eller slå Automatisk højde til i Karruselindstillinger.
- Pile over det første kort. Hvis pilene sidder oven på indholdet, skal du ændre positionen i sektionen Navigation.
- Forventer blogindlæg. Post Timeline-typen er lodret. For indlæg i træk skal du bruge Blogwidget i karruseltilstand.
Læs også: 20 Elementor skyderskabeloner, som omfatter et tidslinjeskyderdesign.
Ofte stillede spørgsmål
Kan jeg lave en horisontal tidslinje i Elementor uden Elementor Pro?
Ja. Elementor Pro indeholder heller ikke en tidslinje-widget, så Pro gør ingen forskel her. Tilføj en tidslinje-widget fra en tilføjelse som Master Addons, indstil Timeline Style til Horizontal Timeline, og emnerne bliver til en karrusel.
Hvordan tilføjer jeg pile til en vandret tidslinje i Elementor?
Åbn afsnittet Navigation i fanen Indhold, og vælg Pile og prikker, Pile og brøk eller Pile. Du kan derefter indstille pilepositionen og erstatte ikonerne Næste og Forrige fra samme afsnit.
Kan en vandret tidslinje automatisk afspilles?
Ja. Tænd for Autospil under Karruselindstillinger, og indstil Autospilhastigheden i millisekunder. Standarden er 5000, hvilket er fem sekunder pr. slide. Pause på Hover stopper det, mens en besøgende læser.
Er en horisontal tidslinje lydhør?
Ja. Det er en karrusel, så den viser færre kort på tablets og telefoner, og besøgende swiper for at flytte. Slides to Scroll har separate værdier pr. enhed.
Kan jeg vise blogindlæg i en horisontal tidslinje?
Ikke med Post Timeline typen, som kun er lodret. Tilføj indlæggene i hånden som Brugerdefinerede tidslinjeelementer, eller brug en postkarrusel.
Endelige tanker
En Elementor vandret tidslinje kommer ned til en indstilling og to sektioner: Tidslinje Style indstillet til Vandret tidslinje, derefter Navigation med sine seks muligheder og Karruselindstillinger for autospil, loop og hastighed. Hold det til tre til otte korte kort og test det på en telefon.
de Tidslinje widget side har live demoer af begge layouts, herunder en horisontal køreplansdemo.
Relateret læsning
2 Svar
Punktet, at det vandrette layout kun fungerer med brugerdefinerede tidslinjeelementer, ikke Post-tidslinjen, er let at gå glip af og ville bryde en bygning sent. Før du skifter tidslinjestil, skal du bekræfte, at hvert element er et brugerdefineret element, da blog-post-drevne tidslinjer forbliver lodrette. En praktisk tweak: indstil Navigation til pile og prikker, og test derefter på en smal telefonbredde, fordi karruselpilene kan fortrænge kortene, og prikkerne gør swiping klarere for læserne.
Tak fordi du deler disse nyttige tips! 😊 Du har helt ret i, at kontrol af tidslinjeelementtypen og test af layoutet på mindre skærme kan hjælpe med at undgå uventede problemer. Vi sætter pris på, at du påpeger dette og hjælper andre Master Addons-brugere med at opbygge bedre, mere lydhøre tidslinjer. Tak fordi du er en del af vores fællesskab!