Ziyaretçilerinize markanızın geçmişiyle ilgili bazı temel bilgileri sağlamanın birçok yaratıcı yolu vardır ve zaman çizelgeleri kesinlikle bunlardan biridir. Bir olay zaman çizelgesi aracılığıyla işletmenizin nasıl ortaya çıktığına dair bir dizi olayı sergilemek, aynı anda ilgi çekici, bilgilendirici ve görsel olarak çekici olabilir. Kısacası, seyahatinizin en önemli adımlarından bazılarını görüntülemek veya diğer önemli bilgileri ziyaretçilerinizle temiz ve kullanıcı dostu bir şekilde paylaşmak için zaman çizelgeleri kullanılabilir. Ve hem dikey hem de yatay zaman çizelgeleri bu görev için aynı derecede etkili olabilse de, bu sefer özellikle dikey zaman çizelgesine odaklanacağız.
Size WordPress’te güzel ve işlevsel bir dikey zaman çizelgesi oluşturma yeteneği sağlayabilecek pek çok harika zaman çizelgesi eklentisi var. Fakat bize sorarsanız, WordPress Eklentileri Eklentisinden daha iyi bir seçenek yok. Bu makalede, eklentinin çok yönlü Dikey Zaman Çizelgesi widget’ını kullanarak dikey bir zaman çizelgesini nasıl kolayca ekleyeceğinizi, özelleştireceğinizi ve stillendireceğinizi göstereceğiz.
Bu görsel olarak sürükleyici öğeyi WordPress sitenize dahil etmek ve ziyaretçilerinizin sizin ve işletmenizin neyle ilgili olduğunu anlamalarına yardımcı olmak için atmanız gereken tüm adımlar şunlardır:
-
Elementor için WordPress Eklentileriyle Dikey Zaman Çizelgesi Widget’ı Ekleme
-
İçeriği Düzenleme
-
Dikey Zaman Çizelgesi Widget’ını Şekillendirme
Elementor için WordPress Eklentileriyle Dikey Zaman Çizelgesi Widget’ı Ekleme
Yüzün üzerinde tamamen özelleştirilebilir pencere öğesinden oluşan bir koleksiyona sahip olan WordPress Addons for Elementor, herhangi bir sayfa öğesi veya bölümü oluşturmak için ihtiyaç duyulan her şeye sahip ücretsiz bir eklentidir. Bu durum iş ve tipografi eklentilerinden bilgi grafiklerine ve vitrin tabanlı öğelere kadar her şeyi içerir. Widget listesinde ayrıca Dikey Zaman Çizelgesi adı verilen özel widget vardır. Özellikle bu widget, siteniz için her türlü dikey zaman çizelgesi düzenini oluşturmanıza olanak tanır. Farklı görüntüler ekleyebilir, boşlukları ve dolguları ayarlayabilir, öğelerinizin renklerini ve tipografisini ayarlayabilir ve çok daha fazlasını yapabilirsiniz.
Bu yüzden bu pratik parçacığı kendi özel ihtiyaçlarınıza uyacak şekilde nasıl ekleyeceğinizi ve özelleştireceğinizi öğrenmek için bilmeniz gereken her şeyi size göstereceğiz. Aynı konuyu işleyen bir videomuz da var, ona da göz atabilirsiniz:
Başlamak için Elementor sayfanızın arka ucuna gidin. Widget için kullanacağımız bölümü önceden hazırladık ve bu bölümü iki sütuna ayırmaya özen gösterdik. İlki resmi içerecek, ikincisi ise dikey zaman çizelgesi widget’ımızı eklemek için kullanacağımız diğer iki sütunla birlikte bir iç bölüm öğesine sahip olacak.
Resim eklemek için sütun seçeneklerini açmak üzere Sütunu düzenle düğmesine tıklamanız gerekir.
Stil sekmesine basın ve ardından Görüntü alanını bulun. Burada arka plan resminizi yükleyebilirsiniz.
Daha sonra Öğeler menüsünü açın ve Dikey Zaman Çizelgesi widget’ını bulun. Sayfanın üzerine sürükleyin.
Öğeyi daha sonra ikinci sütuna kopyalamayı planladığımız için parçacığı iç bölümümüzün ilk sütununa sürükledik. Bu durum ilk zaman çizelgesindeki herhangi bir stil ayarını korumanıza yardımcı olacak ve yalnızca zaman çizelgesinin içeriğini düzenlemeniz gerekeceğinden ve onu tekrar şekillendirmekle uğraşmak zorunda kalmayacağınız için zamandan büyük ölçüde tasarruf etmenizi sağlayacaktır.
İçeriği Düzenleme
Widget’ın seçeneklerine geçerken, Genel bölümüyle İçerik sekmesi var. Buradaki ilk önemli seçenek Tarih’tir – bu, istediğiniz herhangi bir tarihi yazabileceğiniz metin alanıdır. 2022 yılını okumak için bizimkini değiştirdik.
Aşağıda, zaman çizelgesi içindeki noktaları temsil eden iki öğe bulunmaktadır. “Öğe Ekle” düğmesine basarak daha fazla öğe ekleyebilirsiniz (zaman çizelgemiz için iki öğe bıraktık).
Daha sonra öğelerinizi özelleştirme zamanı. Bunu yapmak için söz konusu öğe alanına tıklamanız yeterlidir.
Burada bulunan ilk alan Saat olarak adlandırılır. Tıpkı yukarıdaki Tarih alanı gibi, bu bir metin alanıdır, dolayısıyla buraya istediğiniz her şeyi girebilirsiniz. Örneğimiz için saat aralığını belirledik.
Daha sonra İçerik alanı var – burası, Saatlerin altında bulunan paragraf metnini değiştirebileceğiniz yerdir.
Buradaki son seçenek, öğenize bir resim eklemenizi sağlayan Resim’dir.
Öğemize de bir resim eklemeyi seçtik.
Şimdi devam edip ikinci öğeyi özelleştirebilirsiniz. Tabii ki, ilkiyle aynı seçenekleri içeriyor. Siz de buraya dilediğinizi eklemekten çekinmeyin.
İkinci öğeyi özelleştirmeyi bitirdikten sonra zaman çizelgemiz şöyle görünür:
Hatta ikinci sütunun (iç bölümü ve zaman çizelgesi öğesini yerleştirdiğimiz) dolgularını ayarladığımızı da not etmeliyiz. Bunu yaparak, zaman çizelgemizi daha dengeli hale getirmeyi başardık ve soldaki resimden biraz daha ayırdık.
Bunu ikinci sütun ayarlarına tıklayarak yaptık, ardından Gelişmiş sekmesini seçtik ve dolgu için değerlerin bağlantısını kaldırdık. Değerleri yüzde olarak değiştirdik ve sonra üst, sağ ve alt dolgu için 10 piksel girerken solda 22 piksel ayarladık.
Dikey Zaman Çizelgesi Widget’ını Şekillendirme
Artık genel ayarları hallettiğimize ve öğelerimizin içeriğini ayarladığımıza göre, dikey çizgi widget’ına stil verme zamanı. Stil sekmesindeki ilk bölüm Genel Stil olarak adlandırılır.
Buradaki ilk seçenek, öğeler arasındaki boşluğu daha fazla değiştirmenize yardımcı olan Öğeler Arasındaki Boşluğu ayarlamanıza izin verecektir.
Sonraki, öğelerin solundaki boşluğu değiştiren Öğe Dolgusu seçeneğidir. Bizimki için 50px ayarladık.
Tarih Stili
Tarih Stili bölümü, zaman çizelgenizdeki tarih seçeneğini içerir. Tarih Kenar Boşluğu, burada bulunan ilk seçenektir ve tarihin her yerine daha fazla alan eklemenizi sağlar. Her kenar boşluğu için aynı taraflara sahip olmak istemiyorsanız, alanların bağlantısını kaldırabilir ve her kenar için farklı bir değer girebilir (veya girmeyebilirsiniz).
Buradaki alanların bağlantısını kaldırdık ve ilk ikisini 0px’de bırakarak altta 19px ve solda 50px ayarladık.
Sırada, tarihin etrafına daha da fazla boşluk eklemenizi sağlayan Tarih Dolgusu var. Tüm değerleri sıfıra ayarladığı için buradaki alanların bağlantısını kaldırdık.
Bu seçeneğin başka bir kullanımı daha var ve ona birazdan döneceğiz.
Daha sonra tarihin ne kadar geniş olacağını sınırlamanıza izin veren Tarih Genişliği var. Örneğin biraz kısaltabilir ve tarih başlığını iki satıra düşürebilirsiniz. Örneğimiz için bu ayarı kullanmamayı seçtik.
Sonraki, tarih başlığı için herhangi bir rengi ayarlamanıza yardımcı olan Tarih Rengidir. Bizimkini düz siyah (#000000) olarak ayarladık.
Hatta tarih metni için tipografiyi tüm ayrıntılarıyla ayarlamanıza izin veren Tarih Tipografisi de vardır. Yazı tipi ailesi, ağırlık, stil, dekorasyon vb. seçenekleri içerir.
Font ailesini Playfair Display olarak değiştirdik ve font boyutunu 26px olarak ayarladık.
Hemen altında, Tarih Arka Plan Rengini değiştirme seçeneği var. Burada istediğiniz rengi ayarladıktan sonra, daha önce bahsedilen Tarih Dolgusu seçeneğine geri dönebilirsiniz. Dolguyu artırarak, seçtiğiniz rengin kapladığı yüzeyi de artırmış olursunuz.
Bununla birlikte randevumuz için arka plan rengini kullanmayı planlamıyoruz, bu nedenle bu seçeneklerin ikisini de sıfırladık.
İçerik Stili
İçerik Stili bölümü, içeriğinize tamamen stil vermenizi sağlar.
İlk seçenek olan İçerik Konumu, içeriğinizin saatlerin altına mı yoksa sağa mı yerleştirileceğine karar vermenizi sağlar. Tasarımımız için, içeriği saatlerin hemen altına yerleştiren varsayılan ayarı kullandık.
İçerik Kenar Boşluğu Üstü ve İçerik Kenar Boşluğu Alt seçenekleri, sırasıyla içeriğin üstüne ve altına daha fazla boşluk eklemenizi sağlar. Üst içerik marjı için 4 piksel ve alt içerik marjı için 51 piksel ayarladık.
Daha sonra içerik metninizin rengini ayarlamanıza izin veren İçerik Rengi seçeneği vardır. Örneğimizde içerik rengi için #a1a1a1 hex kodunu ayarladık.
Hemen ardından, Tarih Tipografisi ile aynı seçenekleri içeren İçerik Tipografisi seçeneğine sahipsiniz. Yazı tipi ailesini tarih için zaten kullandığımızla eşleşecek şekilde ayarladık. Hatta yazı tipi boyutunu 20 piksel olarak değiştirdik. Son olarak Satır Yüksekliği seçeneğini piksel olarak değiştirdik ve 38 olarak ayarladık. Bu durum satır yüksekliği metni birbirinden uzaklaştırdığından içeriğin genel olarak daha fazla aralıklı olmasını sağlar.
Saat Stili ve Görüntü Stili
Saatlerinizin görünümünü şekillendirmenizi sağlayacak seçeneklere ulaştık. Öncelikle, renk seçiciyi kullanarak veya onaltılı kodu ayarlayarak Saat Rengini değiştirebilirsiniz (biz siyah rengi onaltılı kod #000000 ile seçtik). Daha sonra Saat Tipografisini de ayarlayabilirsiniz. Yazı tipi ailesini içeriğin geri kalanıyla uyum sağlaması için bir kez daha Playfair Display olarak ayarladık ve boyutunu 20px olarak belirledik.
Daha sonra resimlerinizin stilini ayarlamak için kullanabileceğiniz (içeriğinizde varsa) Görüntü Stili seçenekleri bulunmaktadır.
Buradaki ilk seçenek Görüntü Oranları’dır. Varsayılan ayar Orijinal’dir ancak burada kullanabileceğiniz Küçük Resim, Orta, Büyük, Kare vb. gibi birçok başka ayar vardır.
Orijinal ayar için en iyi sonucu veren resmi yükledik, bu yüzden onu saklayacağız.
Hemen altında, görüntünün altına daha fazla boşluk eklemek için kullanılan Görüntü Kenar Boşluğu Alt da var. Burada 24px ayarladık.
Çizgi ve Nokta Stili
Son olarak Çizgi ve Nokta Stili bölümü, öğeleri ve her birini işaretleyen noktaları birleştiren çizginin görünümünü değiştirmenize olanak tanıyan kapsamlı bir dizi seçeneğe sahiptir.
İlk seçenek Satır Başlangıç Konumunu ayarlamaya yarar. Tarih Etiketi varsayılan konumdur; bu, satırın öğe içeriğiyle aynı yükseklikte veya daha doğrusu öğenin üstünde başladığı anlamına gelir. Bu ayarı İlk Öğe olarak değiştirirseniz, çizgi ilk öğeyi işaretleyen noktadan başlayacaktır (ayrıca görüntü ile aynı yükseklikte). Bu durum dikey zaman çizelgemiz için korumaya karar verdiğimiz ayardır.
Sonraki, renkle ilgili diğer seçeneklerle aynı renk seçiciyi içeren Çizgi Rengi seçeneğidir. Çizgi rengimiz için #eed0de hex kodunu ekledik.
Çizgi Kalınlığı seçeneği, çizginin kalınlığını artırır veya azaltır. Bizimkini 1px olarak ayarladık.
Ardından Nokta Türü seçeneği, puanlarınızın stilini ayarlamanıza olanak tanır. Standart nokta türü varsayılan, madde işareti stilinde bir görünüme sahiptir.
Noktaları büyütmek veya küçültmek için Nokta Boyutunu, Nokta Dikey Konumunu (içeriğin geri kalanına göre nokta konumunu beğeninize göre ayarlamak için) ve Nokta Rengini de değiştirebilirsiniz.
Alternatif Nokta Türleri
Nokta Türü ayarını Standart’tan başka bir şeye değiştirirseniz, birkaç başka seçeneği de belirleme olanağına sahip olursunuz. Örneğin Standart nokta yerine Çizgi kullanmaya karar verirseniz, diğer şeylerin yanı sıra rengi, nokta genişliğini, yüksekliği ve noktanın yatay (ve dikey) konumunu değiştirebilirsiniz.
Seçenekleriyle oynamaya başladığınızda, bu nokta türü ayarının nasıl görünebileceğini size gösterelim. Göstermek için nokta rengi için #DA6767 onaltılık kodunu kullandık, nokta genişliğini 49 piksel olarak değiştirdik ve nokta yüksekliğini 4 piksel olarak ayarladık. Hatta bu seçenekleri değiştirmenin noktanızın görünümüne neler yapabileceğini göstermek için noktanın yatay ve dikey konumunu -6 ve 10 piksel olarak değiştirdik.
Size başka bir nokta türü olan Simge’yi göstermek için tüm bu ayarları sıfırladık. Bu ayar, seçtiğiniz bir simgeyi yüklemenize ve bunu zaman çizelgesi noktanız olarak kullanmanıza olanak tanır. Örneğimiz için SVG’yi kullandık.
Kullanmak istediğiniz simgeye karar verdiğinizde Medya Ekle düğmesine basın.
Daha sonra Simge Rengini değiştirebilirsiniz (örnek için #eed0de onaltılık kodunu kullandık).
Burada Simge Boyutu seçeneği de vardır. Fakat bir SVG yüklediğimiz için simgemizin boyutu zaten önceden tanımlanmıştır, dolayısıyla daha fazla ayarlamaya gerek yoktur.
Dikey zaman çizelgenizi biçimlendirmek için kullanabileceğiniz tüm seçenekler bu kadar.
Zaman Çizelgesini Çoğaltmak
Yapılması gereken tek şey, zaman çizelgesini ilk sütundan, aynı zaman çizelgesi stilini korumak için önceden hazırladığımız başka bir sütuna kopyalamaktır.
Yapmak…