Sådan oprettes en tidslinje i Elementor (Lodret, vandret og posttidslinje)

elementor har ingen tidslinje widget af sin egen, i den gratis version eller i Pro. For at sætte en tidslinje på en Elementor side du tilføje en fra en addon. Denne vejledning bruger Timeline widget i den gratis Master Addons plugin, som dækker lodrette layouts, vandrette karruseller og tidslinjer, der bygger sig selv fra dine blogindlæg.

Hvert skærmbillede nedenfor kommer fra Elementor 4.2.4 med Master Addons 3.2. Brugerdefinerede tidslinjer, både layouts og hele Style-fanen er gratis. Post Timeline har brug for Pro, og det er mærket, hvor det kommer op.

Hvis du hellere vil se, dækker denne video de samme trin på under fem minutter.

Kan man lave en tidslinje i Elementor uden plugin?

Ja, for en simpel ensidig tidslinje. Elementors containere kan gøre det i fire trin:

1. Tilføj en overordnet beholder, indstil dens retning til spalte og dens mellemrum til 0. Dette holder hele tidslinjen.
2. For hver indgang skal du tilføje en indre beholder. Under Stil → Border, sæt en solid kant på venstre side kun, 2px bred, og tilføj venstre polstring, så teksten rydder det. Stablet sammen, de grænser bliver linjen.
3. Sæt en overskrift for datoen og en teksteditor til beskrivelsen i hver post.
4. Tilføj en Icon-widget til prikken. Under Avanceret → Layout, indstil Position til Absolut og skub den med forskydningerne, indtil den sidder på grænsen.

Det giver dig en venstrejusteret tidslinje uden tilføjelse. Du får ikke det skiftende venstre-og-højre layout, en vandret version eller kort, der animerer ind på rulle. Skiftende behov brugerdefineret CSS, plus dine egne responsive regler, fordi et tosidet layout skal kollapse til en kolonne på telefoner.

Det bliver også langsomt at vedligeholde. Hver ny milepæl er en anden beholder at bygge og en anden prik til at placere med hånden. En widget holder linjen, markørerne, vekslen og brudpunkterne som indstillinger, så tilføjelse af en post er et klik.

Søg i widgetpanelet for “tidslinje” på en lager Elementor installere og præcis ét resultat kommer tilbage, Master Addons widget.

Installer plugin'et

Fra WordPress dashboard gå til Plugins → Tilføj plugin, søge efter Master Addons til Elementor, så installer og aktiver. Åbn en hvilken som helst side med Elementor og søg widgetpanelet for tidslinje.

Hvis der ikke kommer noget op efter aktivering, skal du kontrollere Master Addons → Widgets Bibliotek og sørg for, at Tidslinje er slået til. Widgets kan deaktiveres individuelt for at holde ubrugt kode væk fra frontenden, hvilket er værd at gøre alligevel, hvis du holder af Elementor sidehastighed.

Sådan tilføjes en tidslinje i Elementor, trin for trin

Trin 1: Træk widgetten over på siden

Rediger en side med Elementor, søg efter Tidslinje, og træk den ind i en beholder. Den ankommer med tre prøveposter, der allerede er udfyldt, så du kan se, hvad hvert felt gør, før du ændrer noget.

Trin 2: Vælg tidslinjetypen

Åbn den på fanen Indhold Tidslinje sektion. Den første dropdown er Tidslinje Type.

Brugerdefineret tidslinje er den gratis. Du skriver selv hver post, hvilket er hvad du ønsker for en virksomhedshistorik, en produktkøreplan eller en eventplan, hvor indholdet er fast og redaktionelt.

Post Tidslinje er en Master Addons Pro funktion. Den læser dine WordPress indlæg og bygger tidslinjen fra dem, så udgivelse af et indlæg tilføjer en post alene. Der er et afsnit om det længere nede.

Trin 3: Vælg lodret eller vandret

Den anden dropdown er Tidslinje stil.

Lodret løber ned ad siden med kort skiftevis til venstre og højre for en central linje. Vandret lægger indgangene ud side om side som en karrusel med pile. Begge er gratis, og du kan skifte mellem dem på ethvert tidspunkt uden at miste dine poster.

Én grænse værd at vide nu: Tidslinjestil vises kun for Brugerdefinerede tidslinjer. Post Tidslinjer er kun lodrette, og dropdown forsvinder, når du skifter typen.

Trin 4: Rediger dine poster

under Varer, hver post er en repeater række. Klik på en for at åbne den.

Hver række har en fane Indhold og en fane Medier. De felter, der betyder noget:

• udstille: Dato eller Brugerdefineret etiket. Dato giver dig en datovælger; Brugerdefineret etiket lader dig skrive hvad som helst, hvilket er, hvordan du får “Q3 2026” eller “Founded” på linjen i stedet for en kalenderdato.
• Dato Format: forudindstillinger plus Brugerdefineret. Brugerdefineret tager en PHP-datostreng, så F Y udskriver “juni 2019” og holder en milepælstidslinje fra at ligne en ændringslog.
• lænke: gør hele kortet klikbart. Lad det være slukket, hvis kortets tekst allerede indeholder et link, fordi et link inde i et link er ugyldig HTML, og browsere vil slippe en af dem.
• Indholdsboksen er en fuld editor. Der er ikke noget særskilt titelfelt, så indlæggets overskrift går herind som overskrift 3.
• Fanen Medier tilføjer et billede til kortet og indstiller dets opløsning.

Tilføj vare opretter en ny række, kopiikonet dublerer en, og rækker trækker for at genbestille.

Trin 5: Udgiv og se på det

Fire poster, datoer formateret som måned og år, flag ikoner på markørerne, alt det på det gratis plugin.

Kortene skifter side, og datoerne sidder overfor hver enkelt, uden at du placerer noget.

Hvorfor kortene ser tomme ud, indtil du ruller

Tidslinjekort starter skjult og animerer, når de ruller til syne, og det punkt, der er nærmest din rulleposition, har en fokuseret tilstand, som du styler separat i afsnittet Punkter.

Så en tidslinje placeret under folden ser tom ud i et skærmbillede værktøj, i en PDF-eksport, eller i en side-hastighed revision, der aldrig ruller. Rul siden og posterne vises.

At lave en horisontal tidslinje i Elementor

bestemme Tidslinje stil til Vandret tidslinje og layoutet roterer: indgange sidder side om side, punkter sidder over kortene på en vandret linje, og pile ruller gennem dem.

Pile er konfigureret i fanen Stil under Navigation. To kontroller, let at blande:

• Placering er inden for eller uden for karrusellen.
• position er der, hvor de sidder, fra øverst til venstre gennem nederst til højre.

Indstilling af Position til en værdi, der hører til Placering, falder pilene ind i øverste venstre hjørne, oven på din første post. Bundcenter med udvendig placering er den sikre parring, og det er det, skærmbilledet bruger.

Vandret passer til fire til seks stærke milepæle over folden, som en produktlanceringssekvens på en landingsside. Tidligere seks poster læseren klikker på en pil gentagne gange for at se indhold, de ikke kan scanne, og lodrette gevinster. Lodret er også den sikrere indsats på telefoner, hvor top-til-bund læsning er, hvad folk forventer. Uanset hvad du vælger, skal du kontrollere det mod din Responsive brudpunkter før du sender, fordi de to layouts kollapser forskelligt.

Styling af linjen, pointene og kortene

Fanen Stil har elleve sektioner: Karruselgenstande, layout, billeder, indlæg, kort, pil, datoer, linje, punkter, navigation og mønstre.

række indstiller den centrale linjes farve og tykkelse. kort håndterer baggrund, kant, skygge og polstring. Datoer og typografikontrollerne matcher indtastningsteksten til dit skrifttypesystem.

punkter er sektionen værd at bruge tid i. Dens skrift kontrol vælger, hvad der sidder på hver markør, og den har tre tilstandsfaner: forsømmelse, svæve og Fokuseret. Fokuseret gælder for den indgang, der er nærmest læserens rulleposition, så det er det, der får en tidslinje til at blive læst som en flad liste, mens læseren ruller forbi den. Style alle tre.

bestemme skrift til ikoner og markøren tager et ikon, som er det, skærmbillederne her bruger. Tjek det på forenden med det samme: Hvis markøren gengives som en tom cirkel, er ikonet ikke indlæst, og skift af Type tilbage til Standard giver dig en almindelig farvet prik, der altid virker.

Opbygning af en tidslinje fra dine blogindlæg

Skift tidslinjetype til Post Tidslinje og panelet ændres fuldstændigt. I stedet for at skrive poster beskriver du, hvilke indlæg der skal trækkes, og widgetten bygger tidslinjen ud fra dem.

Kontrolelementerne værd at indstille:

• Vis titel, Titel Link og Overskrift Tag. Indstil overskriftsmærket til H2 eller H3, så indlægstitler sidder under sidens H1 i overskriftsrækkefølgen. Dette er den samme overskriftsrækkefølgeregel, der betyder noget, når du opbyg en blogside i Elementor.
• Vis billede og Billedopløsning sæt det fremhævede billede på kortet.
• Dato Format og Tidsformat. Standardudskriver klokkeslættet ud for datoen, som lyder mærkeligt på en milepælstidslinje. Indstil tidsformat til ingen, eller brug et brugerdefineret datoformat.
• Indlæg pr. side, Offset Post Count, Postordre og Bestil Af.
• kategori, Filtrer efter tag, Forfatter og Indlæg til Ekskluder indsnævr forespørgslen, så en tidslinje kan være “alt i nyheder” og en anden et håndplukket sæt.
• Aktiver Links gør hele kortet klikbart. Samme advarsel som den brugerdefinerede version: Sluk det, hvis kortindholdet har sine egne links.

Fordi den læser indlæg direkte, falder denne version pænt ind i en Tema Bygherre arkiv eller enkelt skabelon, og den opdaterer sig selv, når du udgiver. Post Tidslinje er en del af Master Addons Pro.

Brugerdefineret eller post tidslinje: hvilken

Hvis udgivelse af et indlæg skal tilføje en post, skal du bruge Post Timeline. Hvis posterne er en historie, du skrev en gang, skal du bruge Brugerdefineret.

Hvor en tidslinje er værd at bruge

• Om sider. En vertikal virksomhedshistorie, med en opgøre række over den for overskriftsnumrene.
• Produktsider. En horisontal køreplan over afsendte funktioner og hvad der er det næste. Fire til seks poster, ikke mere.
• Udgivelsesbemærkninger. En posttidslinje filtreret til én kategori ved siden af en skifte widget.
• Porteføljer og casestudier. Daterede poster med fremhævede billeder, hvilket er hvor Media fanen betaler sig.
• Event- og kursusplaner. Brugerdefinerede etiketter i stedet for datoer, så linjen lyder “Dag 1, Dag 2, Dag 3”.

Syv ting, der får en tidslinje til at læse bedre

1. Hold hvert kort til to eller tre sætninger. En tidslinje er et scanningsformat, og hele afsnit besejrer det.
2. Brug brugerdefinerede etiketter til milepæle. “2019” slår “17. juni 19”, når den nøjagtige dag ikke betyder noget.
3. Hold ét overskriftsniveau inde i kortene. Indholdsboksen har intet titelfelt, så indstil hver indtastnings overskrift til det samme mærke i stedet for at blande H2 og H4.
4. Skift til lodret forbi seks poster, fordi vandret rulning bliver kedeligt hurtigt.
5. Style tilstanden Fokuseret. Det er den, der fortæller læseren, hvor de er.
6. Kontroller dine markører på forenden, når du har valgt et ikon. En tom cirkel betyder, at ikonet ikke blev indlæst, og Standardprikker er den sikre fallback.
7. Kontroller det på en telefon. Det vekslende layout kollapser til en kolonne, og lange brugerdefinerede etiketter er den første ting, der pakker dårligt.

Ofte stillede spørgsmål

Relateret læsning

• Elementor Tidslinje widget, funktionssiden med hvert kontrolelement, der er angivet
• Tidslinje widget dokumentation
• Sådan opretter du en blogside med Elementor
• SEO praksis for Elementor sider
• Master Addons på WordPress.org