Elementor ile WordPress'te bir zaman çizelgesi nasıl oluşturulur

Yayınlanan: 2025-05-26

Zaman çizelgeleri, etkinlikleri, kilometre taşlarını veya adımları kronolojik sırayla görüntülemek için görsel bir yol sağlar. Ziyaretçilerin ve kullanıcıların olay veya süreç sırasını anlamalarını kolaylaştıran doğrusal bir akışta bilgileri sunmaya yardımcı olurlar. Bunları kullanarak, şirketinizin yolculuğunu, bir proje yol haritasını veya netliğe sahip kişisel bir hikayeyi sergileyebilirsiniz.

WordPress'e bir zaman çizelgesi eklemek, içeriği daha ilgi çekici ve daha kolay takip ederek kullanıcı deneyimini geliştirebilir. Bu yüzden zaman çizelgeleri kullanmak birçok web sitesinde bir trend haline geldi. Elementor, WordPress yayınlarınıza ve sayfalarınıza aşırı düzeyde özelleştirme ile zaman çizelgeleri oluşturmak ve eklemek için kullanabileceğiniz o kadar kullanıcı dostu bir eklentidir.

Bu makalede, Elementor ile WordPress'te bir zaman çizelgesinin nasıl oluşturulacağına dair adım adım bir kılavuz göstereceğiz. Bundan önce, bugünün konusuyla ilgili birkaç teorik parçayı ele alacağız.

Zaman çizelgesi türleri ve bunların kullanım durumları

Types of Timelines and Their Use Cases

İki tür zaman çizelgesi vardır - yatay ve dikey. Her birinin bir web sitesine farklı değer katan özel kullanım durumları vardır. Aşağıdaki tartışmada onları ve kullanım durumlarını keşfedelim.

1. dikey zaman çizelgesi

Dikey zaman çizelgesi, genellikle sayfanın sol veya ortası boyunca olayları ve bilgileri yukarıdan aşağıya görüntüler. Hem masaüstü hem de mobil cihazlarda sorunsuz bir şekilde çalışan kaydırma dostu bir formattır. Kullanıcılar sayfayı aşağı kaydırdıkça, kronolojik sırayı temiz ve okunabilir bir düzende takip ederler.

Dikey zaman çizelgeleri için kullanma durumları:

  • Şirket geçmişi veya büyüme yolculuğu
  • Özgeçmiş veya kariyer vurguları
  • Blog Gönderi Serisi veya Makale İlerlemesi
  • Adım adım süreç açıklamaları
  • Ürün geliştirme kilometre taşları

2. Yatay zaman çizelgesi

Yatay zaman çizelgesi, yan kaydırma veya kayma formatını takiben soldan sağa olayları görüntüler. Genellikle boşluğun uzun olduğundan daha geniş olduğu yerlerde kullanılır. Bu format, daha kısa zaman çizelgeleri için veya geniş, görülmesi kolay bir düzende sadece birkaç önemli olay göstermek istediğinizde en iyisidir.

Yatay zaman çizelgeleri için durumlar kullanın:

  • Proje yol haritaları veya planlama aşamaları
  • Etkinlik Programları
  • Pazarlama kampanyaları veya ürün lansmanları
  • Portföy sunumları
  • Eğitim zaman çizelgeleri veya tarihsel genel bakışlar

Elementor ile WordPress'te bir zaman çizelgesi nasıl oluşturulur

Daha önce de belirtildiği gibi, Elementor bir sürükleme ve bırak sayfası oluşturucu eklentisidir. Ancak üzücü haber şu ki, zaman çizelgeleri oluşturmak için herhangi bir widget içermiyor. Ancak, eklenti, Core Elementor eklentisinin işlevlerini genişletebileceğiniz çok sayıda eklenti vardır.

HappyAddons onlardan biri. Elementor'ın birçok eksikliğini aşabilen 130+ widget ve 22+ özellik ile birlikte gelir. Böylece, HappyAddons eklentisini yükleyerek sitenizde daha fazla tasarım özelliği etkinleştirebilirsiniz. Birçok durumda, HappyAddons'ınız varsa Elementor Pro'ya bile ihtiyacınız olmayacak.

Şimdi Elementor ve HappyAddons ile WordPress'te zaman çizelgelerinin nasıl oluşturulacağını keşfedelim.

WordPress'te Yatay Zaman Çizelgesi Nasıl Oluşturulur

Umarım yatay zaman çizelgesinin ne olduğunu zaten biliyorsunuzdur. HappyAddons, kullanımı tamamen ücretsiz olan yatay bir zaman çizelgesi widget'ına sahiptir. Bu nedenle, ilk olarak web sitenizde yüklenmesi ve etkinleştirilmesi için aşağıdaki eklentilere ihtiyacınız vardır.

  • Element
  • Happyaddons

Eklentileri sitenize yükledikten ve etkinleştirdikten sonra, aşağıdaki öğreticide açıklanan adımları izlemeye başlayın.

Adım 01: Elementor Canvas'ta bir bölüm oluşturun

Elementor ile bir gönderi veya sayfa açın. Bir zaman çizelgesi oluşturmak için istediğiniz FlexBox sütun yapısı ile bir bölüm oluşturun.

Create a new section to add widget

Adım 02: Tuval'e yatay zaman çizelgesi widget'ı ekleyin

Elementor panelinde yatay zaman çizelgesi widget'ı bulun . Bulduğunuzda, widget'ı tuvale sürükleyip bırakın.

Add the Horizontal Timeline widget to the canvas

Tuval'e varsayılan bir düzen ile yatay zaman çizelgesi widget'ının eklendiğini göreceksiniz.

Horizontal widget is added to the Elementor canvas

Adım 03: Widget için bir ön ayar seçin

Ön ayar, hızlı özelleştirme için bir widget'a anında uygulayabileceğiniz önceden tanımlanmış bir tasarım stili veya düzendir. Widget'ı sıfırdan tasarlamak istemiyorsanız, bir ön ayar seçebilirsiniz. Yatay zaman çizelgesi widget'ı altı ön ayarla birlikte gelir.

Widget için istediğiniz bir ön ayar seçin .

Select a Preset for the Horizontal Timeline Widget

Adım 04: Yatay zaman çizelgesi widget'a içerik ekleyin

Zaman çizelgesi bölümünü genişletin . Burada, widget'a içerik ekleme seçenekleri alacaksınız. Varsayılan olarak, dört sekme alırsınız. Genişletmek için herhangi bir sekmeyi tıklayın . Bu, istediğiniz bilgileri yerleştirip ekleyebileceğiniz birçok alanı açacaktır.

Expand to the Timeline section

Bir sekme genişletildikten sonra, ilgili sekmeye olay tarihi, simge, görüntü, görüntü çözümü, başlık ve açıklama ekleyebilirsiniz.

Add content to the tabs of the Horizontal Widget

Yatay widget'ın ilgili bölümüne içerik eklediğimizi görebilirsiniz.

Content added to the horizontal timeline tab

Aynı şekilde, tüm zaman çizelgesi sekmelerine içerik ekleyin. Bunu aşağıda eklenen görüntüde yaptığımızı görebilirsiniz.

Add content to all timeline tabs

Widget'a daha fazla sekme eklemek için, Zaman Çizelgesi sekmesinin altındaki + Öğe Ekle düğmesini tıklayın .

Add new tabs to the horizontal timeline widget

Adım 05: Yatay zaman çizelgesi widget için ayarları yapılandırın

İçerik parçası yapıldıktan sonra, içerik sekmesinin altındaki ayarlar bölümünü genişletin . Başlık HTML sekmesini, içerik hizalamasını, içerik okunu gizleyebilir, ışık kutusunu etkinleştir, animasyon hızı, gösterilecek slayt sayısı, simge ve daha fazlasını yapılandırabilirsiniz.

Bunların yapılandırılması çok kolay. Umarız onları kendiniz yalnız yapabilirsiniz.

Configure Settings for the Horizontal Timeline Widget

Adım 06: Yatay zaman çizelgesi widget'ı stilize et

Widget'ı stilize etmek için Elementor panelindeki Stil sekmesine gidin .

Go to the Style tab of the Horizontal Timeline widget

İlk olarak, zaman çizelgesi bölümünü genişletin .

Çizgi kalınlığını, çizgi rengini, tarih aralığını, tarih tipografisini, renk, simgeyi, sınır yarıçapını, sınır tipini, sınır genişliğini, arka plan rengini vb. Özelleştirme seçenekleri alacaksınız.

Onları keşfedin ve gerekli özelleştirmeleri yapın.

Expand the Timeline section from the Style Tab

Yatay zaman çizelgesinde bazı değişiklikler yaptığımızı görebilirsiniz.

Stylized the horizontal timeline

Ardından, Oklar bölümünü genişletin . Buradan ok simgelerini, konumlarını, boyutlarını, sınır genişliğini, yarıçapını ve daha fazlasını özelleştirebilirsiniz .

Stylize the arrow icons of the timeline

Aynı şekilde, Stil sekmesinin içerik bölümünü genişletin . Sınır yarıçapını, dolguyu, içerik, sınır tipi, sınır genişliği, renk, gölge, tipografi ve daha fazlasını widget arasındaki boşluğu özelleştirebilirsiniz .

Gereken değişiklikleri yapın.

Stylize the content of the Horizontal Timeline widget

Adım 07: Yatay zaman çizelgesi widget'ı önizleme

Önizleme sayfasına gidin ve her şeyin yolunda olup olmadığını kontrol edin. Demo yatay zaman çizelgemizin herhangi bir aksaklık olmadan iyi çalıştığını görebilirsiniz.

WordPress'te dikey zaman çizelgesi nasıl oluşturulur

HappyAddons ücretsiz olarak yatay bir zaman çizelgesi oluşturmanıza izin verirken, dikey bir zaman çizelgesi oluşturmak için eklentinin premium sürümüne yükseltmeniz gerekir. Bu nedenle, sitenizde aşağıdaki eklentilerin bulunduğundan emin olun.

  • Element
  • Happyaddons
  • HappyAddons Pro

Sitenizde mevcut olduktan sonra, aşağıda açıklanan öğreticiyi izlemeye başlayın.

Adım 01: Zaman Çizelgesi Widget'ı Elementor Canvas'a sürükleyin

Arama kutusuna zaman çizelgesi yazın . Yatay zaman çizelgesi dışındaki zaman çizelgesi widget'ı seçin . Elementor tuvaline sürükleyip bırakın .

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

Tuval üzerinde varsayılan bir düzen ile dikey bir zaman çizelgesi oluşturulacaktır.

Timeline widget is added to the Elementor canvas

Adım 02: Dikey zaman çizelgesi widget'ı için bir ön ayar seçin

Umarım bir ön ayarın ne olduğunu zaten biliyorsunuzdur, çünkü yukarıda tartıştığımız gibi. Dikey zaman çizelgesini sıfırdan tasarlamak istemiyorsanız bir ön ayar seçin .

Select a Preset for the Vertical Timeline Widget

Adım 03: Dikey zaman çizelgesine içerik ekleyin

Zaman çizelgesi bölümünü genişletin . Varsayılan olarak, iki sekme göreceksiniz. Yukarıda gösterdiğimiz gibi üzerine tıklayarak herhangi bir sekmeyi genişletin.

Add Content to the Verticle Timeline

Umarım burada çok fazla konuşmana gerek yoktur. Çünkü yatay zaman çizelgesinde yapabileceğiniz gibi dikey zaman çizelgesine neredeyse aynı tür içerik ekleyebilirsiniz.

Her zaman çizelgesi bölümü için bir simge ekleyebilir, simge türünü değiştirebilir, zamanı tanımlayabilir, bir başlık ayarlayabilir, bir resim ekleyebilirsiniz . Zehirli şeyleri kendin yap.

Add content to the verticle timeline

Zaman çizelgesine içerik eklemeyi tamamlayın. Yukarıda gösterildiği gibi + ekle öğesini tıklayarak zaman çizelgesine daha fazla öğe ekleyebilirsiniz.

Complete adding content to the verticle timeline

Adım 04: Dikey Zaman Çizelgesi Widget için ayarları yapılandırın

Ayarlar bölümünü genişletin . Tarih, saat, içerik oku ve kaydırma ağacını gösterip göstermeyeceğini yapılandırabilirsiniz. Başlık etiketini, simge kutusu hizalamasını, ağaç hizalamasını ve arka plan rengini de değiştirebilirsiniz.

Neeful ayarlarını kendiniz yapın. Ama bize göre, varsayılan hizalama iyi görünüyor. Yani, öğretici için buna bağlı kalacağız.

Configue Settings for the Verticle Timeline Widget

Adım 05: Dikey Zaman Çizelgesi Widget'ı stilize et

Elementor panelindeki Stil sekmesine gelin . Bu sekmedeki widget üzerindeki her türlü içerik ve görsel öğeyi özelleştirebilirsiniz.

Stylize the Verticle Timeline Widget

İlk olarak, içerik kutusunu genişletin . Tipografi, renk, ok rengi, arka plan tipi, sınır tipi ve sınır genişliğini buradan özelleştirebilirsiniz. Bunu yap.

Customize content of the verticle timeline widget

Aynı şekilde, simge kutusu bölümünü genişletin . Buradan widget'taki simgelerle ilgili genişliği, yüksekliği, kutu alanını ve diğer seçenekleri değiştirebilirsiniz. Varsayılan stilizasyondan memnunsanız, hiçbir şeye dokunmayın.

Stylize the Icon Box of the Verticle Timeline Widget

Gerekli hissedilirse widget'ın başlığını stilize edin. Tipografimizi değiştirdiğimizi görebilirsiniz.

Stylize the title of the verticle timeline widget

Aynı şekilde, saat ve tarihin görünümünü özelleştirin. Renkini, ağırlığını ve tipografisini değiştirdik.

Stylize time and date

Son olarak, düğme bölümünü genişletin . Arka plan rengini stilize edebilir, tipografi ve diğerlerini kopyalayabilirsiniz.

Stylize the button on the verticle timeline widget

Adım 06: Dikey Zaman Çizelgesi Widget'ı önizleme

Önizleme sayfasına gelin ve dikey zaman çizelgesinin iyi çalışıp çalışmadığını kontrol edin. Widget'ı kaydırarak yapın. Biz bizimki gibi sonunda iyi çalışacağını umuyoruz.

Böylece, çeşitli içerikleri harika bir şekilde sunmak için web sitenizde farklı türde zaman çizelgesi bölümleri oluşturabilirsiniz.

HappyAddons ile daha fazlasını yapabileceğiniz şeyler

HappyAddons dürüstçe kapsamlı bir eklentidir. Bir kez kullandıktan hemen sonra bu eklentiye aşık olacağınızdan emin olabilirsiniz. Eklenti ile yapabileceğiniz aşağıdaki şeylere bir göz atın.

Things More You Can Do with HappyAddons

A. Ücretsiz bir tema oluşturucu kullanın

Elementor ayrıca bir tema oluşturucu var. Ancak sadece premium kullanıcılar için ayrılmıştır. Ancak HappyAddons durumunda, kullanmak tamamen ücretsizdir. HappyAddons tema oluşturucularını kullanarak başlıklar, altbilgiler, blog yazısı şablonları ve arşiv sayfaları oluşturabilirsiniz. HappyAddons ile ücretsiz bir blog yazısı şablonunun nasıl oluşturulacağını kontrol edin.

B. WooCommerce dostu

HappyAddons, e-ticaret sitenizi geliştirmek için dokuz güçlü WooCommerce dostu widget ile birlikte gelir. Bu widget'lar ürün şebekesi, ürün atlıkarıncası, ürün kategorisi ızgarası, ürün kategorisi atlıkarıncası, tek ürün, mini araba, araba, ödeme ve nakliye çubuğudur.

C. Alanlar arası kopya yapıştırma

Bu özellik ile, aynı widget'ları, bölümleri ve sayfaları bir web sitesinden başka bir etki alanına doğrudan kopyalayabilirsiniz. Bu, her zaman sıfırdan başlamak zorunda olmadığınız için değerli zaman kazandırabilir. Aşağıdaki video, eklentinin alanlar arası kopya yapıştırma özelliğini açıklamaktadır.

D. Yaratıcı İçerik Tasarım

Image Hover, Animasyonlu Bağlantı, Eğlence Faktörü, Görüntü Yığın Grubu, Fotoğraf Yığısı, Yaratıcı Düğmesi, Metin Kaydırma ve Lord Icon gibi widget'ları ile kullanıcıları kanca için ilgi çekici yaratıcı içerik oluşturabilirsiniz.

e. İstatistiksel bilgileri göster

Diğer birçok Elementor eklentisinden farklı olarak, bu eklenti istatistiksel bilgileri sergileyebileceğiniz ve infografik yayınlar ve sayfalar oluşturabileceğiniz birkaç grafik widget'ı sunar. Elementor ile bir infografik sayfanın nasıl oluşturulacağını öğrenin.

Tüm bunlara ek olarak, HappyAddons eklentisiyle yapabileceğiniz daha birçok şey var.

Son düşünceler!

Zaman çizelgeleri oluşturmak tüm web siteleri için zorunlu bir şey değildir. Ancak belirli bilgileri ve içeriği sergilemek için ideal bir seçenek olabileceğinden gerekli olabilirler. Bu nedenle, bir zaman çizelgesi oluşturma ihtiyacını hissettiğinizde, bu öğretici yazının kullanımınıza geleceğini umuyoruz.

Bu gönderiyi sevdiyseniz, aşağıdaki yorum kutusundan bize bildirmenizi istiyoruz. Ayrıca, HappyAddons eklentisi ile ilgili herhangi bir sorunuz varsa, sohbet kutusunda bir mesaj bırakabilirsiniz. Canlı destek ajanımız size en kısa sürede cevap verecek.

Sonuna kadar bizimle birlikte olduğun için teşekkürler. Size mutlu bir gün diliyoruz.