Divi's Blurb Modülü ile Zaman Çizelgesi Nasıl Oluşturulur

Bu gönderide, Divi'nin Blurb Modüllerinizle basit ama zarif bir zaman çizelgesini nasıl kolayca oluşturabileceğinizi göstereceğiz. Aşağıda görebileceğiniz sonucu elde etmek için modüllerin ve satırların sağladığı farklı seçenekleri birleştireceğiz. Paylaşacağımız örnek, yalnızca yerleşik Divi seçeneklerine dayanmaktadır; bu, herhangi bir ek CSS kodu eklemeniz gerekmeyeceği anlamına gelir! Ayrıca, hem masaüstünde hem de mobilde iyi görünmesini sağlıyoruz.

Sonuç

Bir zaman çizelgesinin görünümü iki tasarım öğesiyle sağlanır; üç Blurb Modülünü ve sayıları geçen çizgi. Masaüstü sürümü şöyle görünür:

Ve mobil sürüm şöyle görünür:

Başlayalım!

Divi's Blurb Modülü ile Zaman Çizelgesi Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Standart Bölüm Ekle

Bölüm Arka Plan Rengi

Yeni bir standart bölüm ekleyerek ve arka plan rengi olarak 'rgba(0,0,0,0.12)' kullanarak başlayın.

Bölüm Dolgusu

Tasarım sekmesine gidin ve '300 piksel'lik bir üst dolgu kullanın.

Üç Sütunlu Satır Ekle (Zaman Çizelgesi)

Sütun Arka Planları

Bölümü oluşturduktan sonra, ona üç sütunlu bir satır ekleyin. Bu satırın İçerik sekmesinde, Sütun 1 arka plan rengi olarak '#e09900', Sütun 2 arka plan rengi olarak '#0c71c3' ve Sütun 3 arka plan rengi olarak '#8300e9' kullanın.

boyutlandırma

Tasarım sekmesine gidin ve Boyutlandırma alt kategorisi için aşağıdaki ayarları kullanın:

• Bu Satırı FulldWidth Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

Özel Kenar Boşluğu ve Dolgu

Ardından, aşağıdaki Özel Doldurma ve Özel Kenar Boşluğunu satıra ekleyin:

• Üst Dolgu: 1 piksel
• Alt Dolgu: 0px
• Alt Kenar Boşluğu: -200px

Ve her sütunun üst ve alt dolgusuna '3px' ekleyin.

Tablet ve Telefonda Devre Dışı Bırak

Son olarak, hem tablette hem de telefonda satırı devre dışı bırakın.

Başka Bir Üç Sütunlu Satır Ekle (Bulanıklık Modülleri)

Sütun Gradyan Arka Planı

İlk üç sütunlu satırı oluşturduktan sonra devam edebilir ve hemen altında ikincisini oluşturabilirsiniz (aynı bölümü paylaşırlar). Sütunların her biri, aynı ayarlara sahip ancak farklı bir ilk renge sahip bir degrade arka plana ihtiyaç duyar:

• İlk Renk: #e09900 (Sütun 1), #0c71c3 (Sütun 2), #8300e9 (Sütun 3)
• İkinci Renk: rgba(255, 255, 255, 0)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %73
• Bitiş Konumu: %92

Satırı Tam Genişlikte Yap

Ardından Tasarım sekmesine gidin ve 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

Satır Özel Dolgusu

Boşluk alt kategorisini açın ve satır için aşağıdaki Özel Doldurma ve Özel Kenar Boşluğunu kullanın:

• Üst Dolgu: 0px
• Sağ Dolgu: 60px
• Alt Dolgu: 100px
• Sol Dolgu: 60px
• Üst Kenar Boşluğu: -100px

Her sütunun üst dolgusuna da '5px' ekleyin.

Bulanıklık Modülü

Satır ayarlarını tamamladıktan sonra, az önce oluşturduğunuz satırın ilk sütununa bir Blurb Modülü ekleyebilirsiniz. İçerik sekmesinin Görüntü ve Simge alt kategorisinde, 'Simge Kullan' seçeneğini etkinleştirin ve istediğiniz bir simgeyi seçin.

Aynı sekmeyi aşağı kaydırın ve arka plan rengi olarak '#f4f4f4' kullanın.

Tasarım sekmesine gidin ve Görüntü ve Simge alt kategorisinde aşağıdaki ayarlamaları yapın:

• Simge Rengi: #e09900
• Resim/Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 50px

Metin alt kategorisinde, sol Metin Yönlendirmesinin etkinleştirildiğinden emin olun.

Başlık Metni alt kategorisi için seçenekler şunlardır:

• Başlık Yazı Tipi: Girit Yuvarlak
• Başlık Metni Hizalama: Sol
• Başlık Yazı Tipi Boyutu: 32px
• Başlık Çizgisi Yüksekliği: 1em

Ardından, Gövde Metni alt kategorisini açın ve aşağıdaki ayarları kullanın:

• Gövde Metni Hizalama: Sol
• Gövde Yazı Tipi Boyutu: 12px
• Gövde Çizgisi Yüksekliği: 1.7em

Aşağıdaki ayarlarla da bir kenarlık kullanacağız:

• Kenarlık Kullan: Evet
• Kenar Rengi: #000000
• Kenar Genişliği: 2px
• Kenarlık Stili: Noktalı

Ardından, Boyutlandırma alt kategorisini açın ve İçerik Genişliği için '279px' ve Genişlik için '%100' kullanın.

Son olarak, üst, sağ, alt ve sol dolguya '30px' ekleyin.

Metin Modülü

Blurb Modülünü ekleyip değiştirdikten sonra devam edin ve hemen altına bir Metin Modülü ekleyin. Metin Modülü de gradyan bir arka plana ihtiyaç duyacaktır:

• İlk Renk: #e09900
• İkinci Renk: rgba(255, 255, 255, 0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %24

Tasarım sekmesine gidin ve Metin alt kategorisi için aşağıdaki ayarları kullanın:

• Metin Yazı Tipi Boyutu: 21px
• Metin Rengi: #FFFFFF
• Metin Satırı Yüksekliği: 1.7em
• Metin Yönü: Merkez

Boyutlandırma alt kategorisini açın, '%48' genişlik kullanın ve doğru Modül Hizalamasını seçin.

Son olarak, '-100px' üst kenar boşluğunu kullanın ve üst ve alt dolguya '50px' ekleyin.

Klon Bulanıklığı ve Metin Modülü

İlk sütunu tamamladıktan sonra, her iki modülü de kopyalayabilir ve diğer iki sütuna yerleştirebilirsiniz. Değiştirmeniz gereken tek şey tanıtım yazısı simgesi, tanıtım yazısı rengi ve Metin Modülünün ilk degrade rengi ikinci sütun için '#0c71c3' ve son sütun için '#8300e9'.

Tablet ve Telefonda Devre Dışı Bırak

Bu ikinci satırı tamamladıktan sonra, telefon ve tablet için de devre dışı bıraktığınızdan emin olun.

Klon Üç Sütunlu Satır (Tablet ve Telefon)

Tablet ve telefondaki zaman çizelgesi sürümü biraz farklıdır. Bu gönderinin önceki bölümünde oluşturduğunuz tanıtım yazılarıyla satırı klonlayın ve sonraki adımları izleyerek telefona ve tablete sığdırın.

Satır Gradyan Arka Planı Ekle

Tablet ve telefondaki satır, aşağıdaki gradyan arka planına ihtiyaç duyacaktır:

• İlk Renk: rgba(0,0,0,0.7)
• İkinci Renk: rgba(255, 255, 255, 0)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %1
• Bitiş Konumu: %0

Satır Dolgusu

Masaüstü sürümünde kullanılan tüm özel dolguyu ve kenar boşluğunu silin ve üst dolguya '100px' ekleyin.

Masaüstünde Devre Dışı Bırak

Son olarak, telefon ve tablette satırı devre dışı bırakmak yerine masaüstünde devre dışı bırakın.

Sonuç

Gönderideki tüm adımları izledikten sonra, masaüstünde aşağıdaki sonucu elde edebilmelisiniz:

Ve tablet ve telefonda aşağıdaki sonuç:

Son düşünceler

Bu gönderide, yerleşik Divi seçeneklerinden başka bir şey kullanmadan Blurb Modülünüzün basit bir zaman çizelgesini nasıl oluşturabileceğinizi gösterdik. Blurb Modüllerini bir zaman çizelgesi olarak tanımlamaya yardımcı olan iki faktör, üç Blurb Modülünü ve sayıları birbirine bağlayan çizgidir. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!