Divi Eklentisi Vurgulama – Divi Zaman Çizelgesi Modülü

Kronolojik bilgileri göstermenin en ilginç yollarından biri zaman çizelgesi kullanmaktır. Adım adım talimatlar, bir özgeçmiş için deneyim listesi, bir portföy için bir proje listesi ve hatta blog gönderileri olsun, zaman çizelgeleri bilgileri görsel olarak çekici hale getirebilir. Divi Timeline Module adlı bir eklentiyi kullanarak Divi Builder'da kendi zaman çizelgelerinizi oluşturabilirsiniz.

Tortoise IT tarafından Elegant Marketplace aracılığıyla üçüncü taraf bir eklenti olan Divi Zaman Çizelgesi Modülü, iki farklı türde duyarlı zaman çizelgesi oluşturmak için Divi Builder'a birkaç yeni modül (ana modül ve üç yardımcı modül) ekler:

1. Zaman çizelgesindeki her nokta için içerik oluşturduğunuz yer. Zaman çizelgesindeki her öğenin kendi içeriği, bağlantıları, renkleri, yazı tipleri, simgesi vb. olabilir.
2. Sayfalardan, gönderilerden, medyadan veya projelerden mevcut içeriğinizi kullanan bir içerik.

Bu genel bakışta, her iki tür zaman çizelgesini oluşturmaya adım atacağım ve ardından bir blog sayfası oluşturmaya ilişkin bir örnek göstereceğim. Bu genel bakış için Unsplash.com'dan ücretsiz görseller kullanıyorum. Başlayalım.

Divi Zaman Çizelgesi Modülü Eklentisini Yükleme

Kurulum basittir. Eklentiyi yükleyin ve herhangi bir eklentide yaptığınız gibi etkinleştirin. Başka bir kurulum gerekmez.

Zaman Çizelgesi Oluşturma

Dört modül vardır: (Post) – Dikey , İçerik , Öne Çıkan Resim ve Dikey . Çok sütunlu düzenlerle çalışacak olsa da, tek sütunlu düzenler en iyi sonucu verir. Sayfalarda Zaman Çizelgesi – Dikey veya Zaman Çizelgesi (Mesajlar) – Dikey kullanılacaktır. Gerisi bir düzen oluşturmak için kullanılacaktır.

Zaman Çizelgesi Dikey

Zaman Çizelgesi – Dikey modülünü tek sütunlu bir satıra ekleyin.

Genel Ayarlar'da yeni bir zaman çizelgesi öğesi ekleyebilir, zaman çizelgesi için bir başlık sağlayabilir ve zaman çizelgesinin rengini seçebiliriz. Zaman çizelgesi öğelerinin her birini oluşturmak için Yeni Zaman Çizelgesi Öğesi Ekle'ye tıklayın .

Yeni Zaman Çizelgesi Öğesi Ekle'yi tıklatmak, metin, medya, etiket, daha fazla göster düğmesi, simge, simge rengi, arka plan rengi ve görüntü/simge animasyonuyla tamamlanmış bir içerik düzenleyici açar. Ayrıca, tüm standart Gelişmiş Tasarım Ayarlarının yanı sıra Özel CSS'yi de içerir .

İstediğiniz kadar zaman çizelgesi öğesi ekleyin. Burada beş element eklediğimi ve Merkez Çizgi Rengini yeşile çevirdiğimi görebilirsiniz. Zaman çizelgesi öğeleri içinde her öğe için simgeler ve renkler seçtim.

Zaman Çizelgesi Dikey Sonuç

İşte yaptığım hızlı zaman çizelgesi. Her biri kendi içeriğine ve simgelerine sahip beş öğeye sahiptir. Çizgi için seçtiğim renk de içerik pencerelerinin altına eklendi. Modülün bulunduğu bölüme bir arka plan resmi ekledim.

Elbette Gelişmiş Tasarım Ayarları kullanılarak modül sayfaya uyacak şekilde biçimlendirilebilir, böylece beyaz bir arka plana veya bu yazı tiplerine sahip olmanız gerekmez.

Bu, numaralandırılmış talimatlar, özgeçmiş, ürün listesi, portföy vb. adımlar için harika bir seçimdir.

Gönderi Zaman Çizelgesi

Ayrıca içeriğinizden bir zaman çizelgesi oluşturabilirsiniz. Buna gönderiler, sayfalar, medya veya projeler dahildir. Nasıl çalıştığı biraz karmaşık olabilir, ancak oluşturulması kolaydır.

İki şey yapmanız gerekecek:

1. Bir düzen oluşturun
2. Sayfayı oluşturun ve bu düzeni seçin

Düzeni ve sayfayı oluşturmak için gereken tüm modüller dahildir. Örnek blog gönderilerini kullanarak bir örnek oluşturalım.

Düzen Oluştur

İlk önce bir düzen oluşturun. Panoda Divi , Divi Kitaplığı'na gidin ve Yeni Ekle'yi seçin. Düzene sizin için anlamlı olan bir ad verin (Zaman Tüneli Düzeni Sonrası'nı seçtim). Şablon Türü olarak Düzen'i seçin. Global'i işaretlemeden bırakın. Gönder 'i tıklayın.

Oluşturduğunuz düzen, gönderileri (veya seçtiğiniz gönderi türünü) görüntüler. Bunu kendi blog modülünüzü oluşturmak olarak düşünün, yalnızca gönderilerin düzenini tasarlayabilirsiniz. Öyle değil, ama bu örnek kolayca anlamama yardımcı oldu. Şey, biraz öyle, ama aslında değil. Hareketli.

Bu düzen, eklentide bulunan Zaman Çizelgesi İçeriği , Öne Çıkan Resim ve Gönderi Başlığı modülleri kullanılarak oluşturulmuştur.

Düzeni oluşturmak için iki sütunlu bir düzen seçin ve Zaman Çizelgesi – Öne Çıkan Resim modülünü sağ tarafa ve Zaman Çizelgesi – Gönderi Başlığı ve Zaman Çizelgesi – İçerik modüllerini sola yerleştirin. Elbette, yalnızca resim veya başlığı kullanmak veya bunları farklı konfigürasyonlara yerleştirmek gibi mizanpajlarla biraz oynamak isteyebilirsiniz, ancak önce normal mizanpajı oluşturalım.

Not – bu modüller, çoğu Divi Builder modülü gibi bir sayfada kullanılmaz. Zaman Çizelgesi (Mesajlar) – Dikey modül tarafından çağrılacak bir düzen içinde kullanılmak içindir.

Divi Builder'da görünen düzen budur. Beklendiği gibi, bu modüllerin her birinin Genel Ayarlar , Gelişmiş Tasarım Ayarları ve Özel CSS dahil olmak üzere kendi seçenekleri vardır.

1/3, 2/3 düzeni kullanıyorum ama 1/2, 1/2 de çalışıyor. Kısmen, kullanmak istediğiniz öne çıkan görselin boyutuna ve görüntülemek istediğiniz içeriğin miktarına ve ayrıca yazı tipi boyutları gibi diğer ayarlara bağlı olacaktır.

Modüllerinizi yerleştirdikten ve tüm ayarlarınızı seçtikten sonra, Yayınla altında sağda Güncelle'yi seçin.

Her bir modüle daha yakından bakalım.

Öne Çıkan Görüntü Modülü

Öne Çıkan Görsel Modülü tam olarak beklediğiniz şeyi yapar – bir gönderinin öne çıkan görselini görüntüler. Görüntü boyutunu seçebileceğiniz bir açılır kutu içerir. Ayrıca alternatif metin, başlık, ışık kutusunda aç, bağlantı URL'si, aynı pencerede veya yeni sekmede aç, animasyon, görüntünün altındaki boşluğu kaldırma, hizalama, cihazlar için devre dışı bırakma ve yönetici etiketi içerir.

Orta bir görüntü boyutu seçiyorum ve animasyonu kapatıyorum.

Yazı Başlığı Modülü

Gönderi Başlığı Modülü , içeriğe bağlanmanıza, yönetici etiketini değiştirmenize ve CSS ayarlarını yapmanıza olanak tanır. İçeriğe Bağla ayarını Evet olarak bırakmanızı öneririm. Gerisini varsayılanlarına ayarlı bıraktım.

İçerik Modülü

İçerik Modülü , uzmanları veya içeriği göstermeyi seçmenize ve bir Devamını Oku düğmesi görüntülemenize olanak tanır. Bir alıntıyı ve daha fazlasını oku düğmesini gösterecek şekilde ayarladım.

Sayfayı Oluştur

Divi Builder'ı kullanarak yeni bir sayfa oluşturun ve Zaman Çizelgesi (Gönderiler) – Dikey modülünü tek bir sütun düzenine bırakın.

Zaman Tüneli (Gönderiler) Dikey Modül Ayarları

Bu modül, oluşturduğunuz düzeni arayacaktır. Burada başlık, düzen, merkezi çizgi rengi, zaman çizelgesindeki öğeler için simge, sayıları veya simgeleri gösterme, simge/sayı rengi ve arka plan rengi, animasyon, sayfalandırma, yazı tipi, görüntülenecek yazı sayısı gibi birçok seçeneğiniz var. ofset sonrası (hangi gönderiyle başlayacak), taksonomi ve yönetici etiketi.

Oluşturduğunuz düzeni çağırmak için Döngü Düzeni adlı açılır listeden seçin. Aşağı kaydırın ve ekran blog gönderileri için Mesaj türü olarak Mesajını seçti.

Tüm seçimlerinizi yaptıktan sonra sayfayı yayınlayın.

Zaman Çizelgesi Sonucunu Gönder

Sonuç, bir zaman çizelgesindeki en son gönderilerimin bulunduğu bir blog sayfasıdır. Zaman çizelgesini bir arka plan resminin üzerine yerleştirdim (resim bölüme eklendi). Bu modül ile simgeler küreseldir. Zaman çizelgesini ten rengi bir simge arka planı ve mavi simgelerle maviye ayarladım. Posta modülü, Gelişmiş Tasarım Ayarları kullanılarak sayfaya uyacak şekilde daha fazla biçimlendirilebilir.

Bir Blog Örneği

Zaman çizelgesi diğer düzenler içinde kullanılabilir. Birkaç gönderiyi üstte, ardından geri kalanını bir zaman çizelgesi içinde görüntüleyen bir blog düzeni oluşturmak istedim.

Resim üstte, içerik ortada ve başlık altta olacak şekilde tek bir sütunda bir düzen oluşturdum.

Daha sonra Blog modülü ve Zaman Çizelgesi (Mesajlar) – Dikey modülü içeren bir sayfa oluşturdum. Blog modülünü bir ızgarada üç gönderi gösterecek şekilde ayarladım. Ben mesajları göz ardı eder, böylece bir blog modülü görüntülemek ve post sayısı 4. başlayacak bir mesajla aralarında bir metin modülü yerleştirilir edeceği 3 ofset olması için Zaman Çizelgesi modülünü ayarlamanız uyarıları ziyaretçinin blog'un altındaki içerik yazılar hala blogun bir parçası.

Blog Sayfası Sonucu

İşte blog sayfası. Sonuç, okuyucuyu içerik boyunca yönlendiren temiz bir düzendir. Elbette bu sadece bir blog sayfası olmak zorunda değil. Bu aynı zamanda bir portföy sayfası, sanat eseri, hizmetler vb. için projeleri göstermek için de kullanılabilir.

Son düşünceler

Zaman çizelgeleri, kronolojik veya sayısal verileri görüntülemek için harika tasarım öğeleridir. Divi Zaman Çizelgesi Modülü, özel zaman çizelgeleri oluşturmanın veya sayfalar, gönderiler, medya veya projeler gibi içeriğinizi mizanpajlarınızda görüntülemek üzere kronolojik zaman çizelgeleri oluşturmak için kullanmanın kolay bir yolunu sağlayarak Divi Builder'a bu işlevi ekler.

Eklentinin kullanımı kolaydır ve herhangi bir Divi Modülünden beklediğiniz tüm tasarım ayarları burada. Düzenleri ve sayfaları öğrenmek ve oluşturmak, Divi Builder'ı kullanmak kadar hızlı ve basittir. Web sitenize bir zaman çizelgesi eklemek istiyorsanız, Divi Zaman Çizelgesi Modülü harika bir seçimdir.

Sizden duymak isteriz. Divi Zaman Çizelgesi Modülünü kullandınız mı? Yorumlarda deneyiminizi bize bildirin.

Ollie The Designer / Shutterstock.com aracılığıyla Öne Çıkan Görsel