Cum se creează o cronologie în WordPress cu elementor

Publicat: 2025-05-26

Cronologia oferă o modalitate vizuală de a afișa evenimente, repere sau pași într -o ordine cronologică. Acestea ajută la prezentarea informațiilor într -un flux liniar care facilitează vizitatorilor și utilizatorilor să înțeleagă secvența evenimentelor sau proceselor. Folosindu -le, puteți prezenta călătoria companiei dvs., o foaie de parcurs a proiectului sau o poveste personală cu claritate.

Adăugarea unei cronologii la WordPress poate îmbunătăți experiența utilizatorului, făcând conținutul mai antrenant și mai ușor de urmat. Acesta este motivul pentru care utilizarea termenelor a devenit o tendință pe multe site -uri web. Elementar este un astfel de plugin ușor de utilizat pe care îl puteți utiliza pentru a crea și adăuga termene la postările și paginile dvs. WordPress cu un nivel extrem de personalizare.

În acest articol, vă vom arăta un ghid pas cu pas despre cum să creați o cronologie în WordPress cu Elementar. Înainte de aceasta, vom acoperi câteva părți teoretice cu privire la subiectul de astăzi.

Tipuri de termene și cazuri de utilizare a acestora

Types of Timelines and Their Use Cases

Există două tipuri de termene - orizontale și verticale. Fiecare are cazuri de utilizare specifice care adaugă valoare unui site web diferit. Să le explorăm și cazurile lor de utilizare în discuția de mai jos.

1.. Cronologie verticală

O cronologie verticală afișează evenimente și informații de sus în jos, de obicei de -a lungul stângii sau centrul paginii. Este un format prietenos care funcționează perfect atât pe desktop, cât și pe dispozitive mobile. Pe măsură ce utilizatorii derulează în jos pagina, ei urmează ordinea cronologică într -un aspect curat și lizibil.

Utilizați cazuri pentru termene verticale:

  • Istoricul companiei sau călătoria de creștere
  • Reluare sau evidență în carieră
  • Seria de postări pe blog sau progresul articolului
  • Explicații ale procesului pas cu pas
  • Repere de dezvoltare a produselor

2. Cronologie orizontală

O cronologie orizontală afișează evenimente de la stânga la dreapta, urmând un format de defilare laterală sau alunecare. Este de obicei utilizat acolo unde spațiul este mai larg decât este înalt. Acest format este cel mai bun pentru termenele mai scurte sau când doriți să arătați doar câteva evenimente importante într-un aspect larg, ușor de vizionat.

Utilizați cazuri pentru termene orizontale:

  • Foile de parcurs ale proiectului sau etapele de planificare
  • Programe de evenimente
  • Campanii de marketing sau lansări de produse
  • Prezentări de portofoliu
  • Timele educaționale sau imagini de ansamblu istorice

Cum se creează o cronologie în WordPress cu elementor

După cum s-a spus deja, Elementar este un plugin de constructor de pagini drag-and-drop. Dar vestea tristă este că nu include niciun widget pentru a crea termene. Cu toate acestea, pluginul are o mulțime de suplimente prin care puteți extinde funcționalitățile pluginului Core Elementar.

HappyAddons este unul dintre ei. Este livrat cu peste 130 de widget -uri și 22+ funcții care pot depăși multe deficiențe ale elementului. Așadar, prin instalarea pluginului HappyAddons, puteți activa mai multe funcții de proiectare pe site -ul dvs. În multe cazuri, nici nu veți avea nevoie de Elementar Pro dacă aveți HappyAddons.

Să explorăm acum cum să creăm termene în WordPress cu Elementar și HappyAddons.

Cum se creează o cronologie orizontală în WordPress

Sper că știți deja care este calendarul orizontal. HappyAddons are un widget orizontal de cronologie , care este complet gratuit de utilizat. Deci, aveți nevoie de următoarele pluginuri care vor fi instalate și activate mai întâi pe site -ul dvs. web.

  • Element
  • Happyaddons

După ce aveți pluginurile instalate și activate pe site -ul dvs., începeți să urmați pașii explicați în tutorialul de mai jos.

Pasul 01: Creați o secțiune pe pânza elementar

Deschideți o postare sau o pagină cu element. Creați o secțiune cu structura de coloană FlexBox dorită pentru a crea o cronologie.

Create a new section to add widget

Pasul 02: Adăugați widgetul timeline orizontal pe pânză

Găsiți widgetul orizontal Timel pe panoul Elementar. Odată ce îl găsiți, trageți-și drop widget-ul pe pânză.

Add the Horizontal Timeline widget to the canvas

Veți vedea că widgetul timeline orizontal a fost adăugat pe pânză cu un aspect implicit.

Horizontal widget is added to the Elementor canvas

Pasul 03: Selectați o presetare pentru widget

O presetare este un stil de design sau un aspect predefinit pe care îl puteți aplica instantaneu unui widget pentru personalizare rapidă. Dacă nu doriți să proiectați widgetul de la zero, puteți selecta o presetare. Widgetul orizontal Timeline vine cu șase presetări.

Selectați o presetare doriți pentru widget.

Select a Preset for the Horizontal Timeline Widget

Pasul 04: Adăugați conținut la widgetul Timeline orizontal

Extindeți secțiunea Timeline . Aici, veți primi opțiuni pentru a adăuga conținut la widget. În mod implicit, veți primi patru file. Faceți clic pe orice filă pentru a o extinde. Acest lucru va deschide multe câmpuri în care puteți plasa și adăuga informațiile dorite.

Expand to the Timeline section

Odată extins o filă, puteți adăuga data evenimentului, pictograma, imaginea, rezoluția imaginii, titlul și descrierea în fila respectivă.

Add content to the tabs of the Horizontal Widget

Puteți vedea că am adăugat conținut la secțiunea respectivă a widgetului orizontal.

Content added to the horizontal timeline tab

În același mod, adăugați conținut în toate filele Timeline. Puteți vedea că am făcut -o în imaginea atașată mai jos.

Add content to all timeline tabs

Pentru a adăuga mai multe file la widget, faceți clic pe butonul + Adăugare element din fila Timel.

Add new tabs to the horizontal timeline widget

Pasul 05: Configurați setările pentru widgetul timeline orizontal

Odată ce partea de conținut este terminată, extindeți secțiunea Setări sub fila Conținut. Puteți configura fila HTML Title, alinierea conținutului, ascunderea săgeții de conținut, activarea Lightbox, viteza de animație, numărul de diapozitive de afișat, pictogramă și multe altele.

Acestea sunt atât de ușor de configurat. Sperăm că le puteți face singur.

Configure Settings for the Horizontal Timeline Widget

Pasul 06: Stilizați widgetul timeline orizontal

Pentru a stiliza widgetul, accesați fila Style din panoul Elementar.

Go to the Style tab of the Horizontal Timeline widget

În primul rând, extindeți secțiunea Timeline .

Veți primi opțiuni pentru a personaliza grosimea liniei, culoarea liniei, distanțarea datei, tipografia datei, culoarea, pictograma, raza de frontieră, tipul de frontieră, lățimea graniței, culoarea de fundal etc.

Explorați -le și faceți personalizările necesare.

Expand the Timeline section from the Style Tab

Puteți vedea că am făcut unele modificări la cronologia orizontală.

Stylized the horizontal timeline

Apoi, extindeți secțiunea săgeți . De aici, puteți personaliza pictogramele săgeții, pozițiile, dimensiunile, lățimea frontierei, raza și multe altele .

Stylize the arrow icons of the timeline

În același mod, extindeți secțiunea de conținut din fila Stil. Puteți personaliza raza de frontieră, căptușeala, spațiul dintre conținut, tipul de frontieră, lățimea frontierei, culoarea, umbra, tipografia și multe altele din widget.

Faceți schimbările necesare.

Stylize the content of the Horizontal Timeline widget

Pasul 07: Previzualizați widgetul timeline orizontal

Accesați pagina de previzualizare și verificați dacă totul funcționează bine sau nu. Puteți vedea că cronologia noastră orizontală demo funcționează bine fără niciun fel de sclipici.

Cum se creează o cronologie verticală în WordPress

În timp ce HappyAddons vă permite să creați gratuit o cronologie orizontală, trebuie să treceți la versiunea premium a pluginului pentru a crea o cronologie verticală. Deci, asigurați -vă că următoarele pluginuri sunt disponibile pe site -ul dvs.

  • Element
  • Happyaddons
  • HappyAddons Pro

După ce sunt disponibile pe site -ul dvs., începeți să urmați tutorialul explicat mai jos.

Pasul 01: glisați-vă widget-ul Timeline pe Canvas Elementar

Tastați cronologia în caseta de căutare. Selectați widgetul Timel, în afară de cronologia orizontală. Glisați-l și purificați -l pe pânza elementar.

Drag-and-Drop the Timeline Widget to the Elementor Canvas

O cronologie verticală va fi creată pe pânză cu un aspect implicit.

Timeline widget is added to the Elementor canvas

Pasul 02: Selectați o presetare pentru widgetul Timeline Vertical

Sper că știți deja ce este o presetare, așa cum am discutat deja mai sus. Selectați o presetare dacă nu doriți să proiectați cronologia verticală de la zero.

Select a Preset for the Vertical Timeline Widget

Pasul 03: Adăugați conținut la cronologia verticală

Extindeți secțiunea Timeline . În mod implicit, veți vedea două file. Extindeți orice filă făcând clic pe ea așa cum v -am arătat mai sus.

Add Content to the Verticle Timeline

Sper că nu trebuie să vorbești mult aici. Deoarece puteți adăuga aproape același tip de conținut la cronologia verticală așa cum ați putut face în cazul cronologiei orizontale.

Puteți adăuga o pictogramă, puteți schimba tipul de pictogramă, puteți defini timpul, puteți seta un titlu, adăugați o imagine etc., pentru fiecare secțiune de cronologie. Fă -ți singuri lucrurile neefuitoare.

Add content to the verticle timeline

Adăugarea completă adăugând conținut la cronologie. Puteți adăuga chiar mai multe articole la cronologie făcând clic pe elementul + Adăugare, așa cum se arată mai sus.

Complete adding content to the verticle timeline

Pasul 04: Configurați setările pentru widgetul Timeline Vertical

Extindeți secțiunea Setări . Puteți configura dacă să afișați data, ora, săgeata de conținut și arborele de defilare . De asemenea, puteți modifica eticheta de titlu, alinierea cutiei de pictograme, alinierea arborelui și culoarea de fundal .

Faceți singur setările neefuitoare. Dar pentru noi, alinierea implicită arată bine. Deci, ne vom lipi de el pentru tutorial.

Configue Settings for the Verticle Timeline Widget

Pasul 05: Stilizați widgetul Timeline vertical

Vino la fila Style din panoul Elementar. Puteți personaliza toate tipurile de conținut și elemente vizuale din widget din această filă.

Stylize the Verticle Timeline Widget

În primul rând, extindeți caseta de conținut . Puteți personaliza tipografia, culoarea, culoarea săgeții, tipul de fundal, tipul de frontieră și lățimea de frontieră de aici. Faceți acest lucru.

Customize content of the verticle timeline widget

În același mod, extindeți secțiunea cutiei de pictograme . Puteți schimba lățimea, înălțimea, spațiul cutiei și alte opțiuni legate de pictogramele de pe widget de aici. Dacă sunteți mulțumit de stilizarea implicită, nu atingeți nimic.

Stylize the Icon Box of the Verticle Timeline Widget

Stilizați titlul widget -ului dacă se simte necesar. Puteți vedea că ne -am schimbat tipografia.

Stylize the title of the verticle timeline widget

În același mod, personalizați aspectul orei și datei . I -am schimbat culoarea, greutatea și tipografia.

Stylize time and date

În cele din urmă, extindeți secțiunea butonului . Puteți să -i stilizați culoarea de fundal, tipografia de copiere și altele .

Stylize the button on the verticle timeline widget

Pasul 06: Previzualizați widgetul Timeline Vertical

Vino la pagina de previzualizare și verificați dacă cronologia verticală funcționează bine sau nu. Faceți -o derulând widgetul. Sperăm că va funcționa bine la sfârșitul tău ca a noastră.

Astfel, puteți crea diferite tipuri de secțiuni de cronologie pe site -ul dvs. web pentru a prezenta în mod minunat diverse conținut.

Lucruri pe care le poți face mai mult cu HappyAddons

Happyaddons este sincer un plugin cuprinzător. Sunteți sigur că vă veți îndrăgosti de acest plugin imediat după ce l -ați folosit pentru o dată. Aruncați o privire la următoarele lucruri pe care le puteți face cu pluginul.

Things More You Can Do with HappyAddons

o. Folosiți un constructor de teme gratuit

Elementator are, de asemenea, un constructor de teme. Dar este rezervat numai utilizatorilor premium. Dar, în cazul HappyAddons, este complet gratuit de utilizat. Folosind Builder -ul de temă HappyAddons, puteți crea anteturi, subsoluri, șabloane de postare pe blog și pagini de arhivă. Verificați cum să creați un șablon de postare pe blog cu HappyAddons gratuit.

b. WooCommerce-Friendly

Happyaddons vine cu nouă widget-uri prietenoase cu WooCommerce pentru a-ți îmbunătăți site-ul de comerț electronic. Aceste widget -uri sunt grilă de produse, carusel de produse, grilă de categorii de produse, carusel de categorii de produse, produs unic, mini cărucior, coș, checkout și bara de transport.

C. Cross-domein Copy-paste

Cu această caracteristică, puteți copia direct aceleași widget -uri, secțiuni și pagini de pe un site web pe un alt domeniu. Acest lucru vă poate economisi timp valoros, deoarece nu trebuie să începeți întotdeauna de la zero. Următorul videoclip explică caracteristica de copiere cu domenii transversale a pluginului.

D. Proiectați conținut creativ

Cu widget -urile sale, cum ar fi Image Hover, Link animat, Fun Factor, Image Stack Group, Photo Stack, Creative Button, Text Scroll și Lord Pictogran, puteți crea conținut creativ captivant pentru utilizatorii de cârlig.

e. Afișați informații statistice

Spre deosebire de multe alte suplimente Elementar, acest plugin oferă mai multe widget-uri de diagramă prin care puteți prezenta informații statistice și crea postări și pagini infografice. Aflați cum să creați o pagină infografică cu Elementar.

În plus față de toate acestea, există multe alte lucruri pe care le puteți face cu pluginul HappyAddons.

Gânduri finale!

Crearea termenelor nu este un lucru obligatoriu pentru toate site -urile web. Dar pot deveni necesare, deoarece ar putea fi o opțiune ideală pentru a prezenta anumite informații și conținut. Așadar, ori de câte ori simțiți nevoia să creați o cronologie, sperăm că această postare tutorial va veni la utilizarea dvs.

Dacă ați iubit această postare, vă solicităm să ne anunțați prin caseta de comentarii de mai jos. În plus, dacă aveți întrebări cu privire la pluginul HappyAddons, puteți lăsa un mesaj în caseta de chat. Agentul nostru de asistență live va veni să vă răspundă cât mai curând posibil.

Vă mulțumim că ați fost alături de noi până la sfârșit. Vă dorim o zi fericită înainte.