Divi'nin Dönüştürme Seçenekleriyle Yapılan ÜCRETSİZ Zaman Çizelgesi Bölümünü İndirin

İçeriği yapılandırmaya gelince, bir zaman çizelgesi oluşturmak, bilgileri ziyaretçileriniz için ilginç ve ilgi çekici tutmanın harika bir yoludur. Ayrıca, okudukları bilgileri çok daha hızlı gezinmelerine ve işlemelerine yardımcı olur. Güzel bir tasarım kullandığınızda, sayfanızın genel görünümünü ve verdiği hissi de yükseltir. Bu yazıda, Divi'nin dönüştürme seçenekleriyle nasıl çarpıcı bir zaman çizelgesi bölümü oluşturacağınızı göstereceğiz. Yeniden oluşturacağımız tasarım, daha küçük ekran boyutlarında yanıt vermeye devam edecek.

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

ÜCRETSİZ Zaman Çizelgesi Bölüm Düzenini İndirin

Ellerinizi ücretsiz zaman çizelgesi bölümü düzenine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Yeniden Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

aralık

Yeni bir sayfa oluşturun veya mevcut bir sayfayı açın ve ona normal bir bölüm ekleyin. Bölüm ayarlarını açın, boşluk ayarlarına gidin ve bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 12vw
• Alt Dolgu: 0vw

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın. Tasarım sekmesindeki boyutlandırma ayarlarına gidin ve satırın ekranın tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

görünürlük

Sonraki adımlarda bir örnek eklemek için bu satırı kullanacağız. Yine de, bu resme yalnızca masaüstü için ihtiyacımız var. Bu yüzden tüm satırı tablet ve telefonda saklayacağız.

Resim Modülü Ekle

İllüstrasyon Yükle

Bu yazının önceki adımında belirtildiği gibi, bu satıra ihtiyaç duymamızın tek nedeni zaman çizelgesi illüstrasyonunu eklemektir. Bu yazının başında indirdiğiniz klasörde bulabilirsiniz. Bulduktan sonra, yeni bir Görüntü Modülüne yükleyin.

boyutlandırma

Her şeyin tüm ekran boyutlarında duyarlı kalmasını sağlamak için, Görüntü Modülünün boyutlandırma ayarlarında 'Tam Genişliğe Zorla' seçeneğini etkinleştireceğiz.

• Tam Genişliği Zorla: Evet

2. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme ikinci bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın ekranın tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Ardından, boşluk ayarlarına gidin. Burada, tüm özel üst ve alt dolguları kaldırarak (masaüstünde) satırın kapladığı alanı sınırlamak istiyoruz. Daha küçük ekran boyutlarında bazı üst ve alt dolguları koruyoruz.

• Üst Dolgu: 0px (Masaüstü), 15vw (Tablet ve Telefon)
• Alt Dolgu: 0px (Masaüstü), 15vw (Tablet ve Telefon)

Sütun 1'e Blurb Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! Sütun 1'e bir Bulanıklık Modülü ekleyin. İstediğiniz içeriği girin.

Simge Seç

İstediğiniz bir simgeyi seçerek devam edin.

Degrade Arka Plan

Bir degrade arka planı da ekleyin.

• Renk 1: #a5c4ff
• Renk 2: #ffffff
• Başlangıç ​​Konumu: %40
• Bitiş Konumu: %40

Simge Ayarları

Ardından tasarım sekmesine gidin ve simge ayarlarını değiştirin.

• Simge Rengi: #ffffff
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 5vw (Masaüstü), 17vw (Tablet), 18vw (Telefon)

Başlık Metni Ayarları

Başlık metni ayarlarına gidin ve seçenekleri buna göre değiştirin:

• Başlık Yazı Tipi: Didact Gothic
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metni Hizalama: Orta
• Başlık Metin Boyutu: 1.1vw (Masaüstü), 2.7vw (Tablet), 4vw (Telefon)
• Başlık Satırı Yüksekliği: 2.8em

Gövde Metni Ayarları

Gövde metni ayarları için de aynı şeyi yapın.

• Gövde Yazı Tipi: Açık Sans
• Gövde Metni Hizalama: Orta
• Gövde Metni Boyutu: 0.7vw (Masaüstü), 1.5vw (Tablet), 2.1vw (Telefon)
• Gövde Çizgisi Yüksekliği: 2em

aralık

Ayrıca, farklı ekran boyutlarına göre özelleştireceğimiz bazı özel kenar boşlukları ve dolgu değerleri ekliyoruz.

• Sol Kenar Boşluğu: 3vw
• Sağ Kenar Boşluğu: 3vw
• Alt Marj: 5vw (Tablet), 7vw (Telefon)
• Üst Dolgu: 2vw (Masaüstü), 6vw (Tablet ve Telefon)
• Alt Dolgu: 2vw (Masaüstü), 6vw (Tablet ve Telefon)
• Sol Dolgu: 3vw (Masaüstü), 9vw (Tablet ve Telefon)
• Sağ Dolgu: 3vw (Masaüstü), 9vw (Tablet ve Telefon)

Sınır

Kenarlık ayarlarına geçin ve köşelerin her birine '20px' ekleyin.

Kutu Gölge

Son olarak, Blurb Module'e ince bir kutu gölgesi ekleyerek sayfada biraz derinlik yaratın.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.1)

Blurb Modülünü Üç Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

Blurb Module'ü oluşturmayı ve özelleştirmeyi tamamladığınızda, onu üç kez klonlayabilirsiniz. Kopyaları satırın kalan sütunlarına yerleştirin.

Yinelenen #1'in Gradyan Arka Planını Değiştir

İlk kopyayı açın (Sütun 2'deki Blurb Modülü) ve degrade arka planının ilk rengini değiştirin.

• Renk 1: #ffa5ae

Yinelenen #2'nin Gradyan Arka Planını Değiştir

Sütun 3'teki Blurb Modülü için de aynı şeyi yapın.

• Renk 1: #f7e3a0

Yinelenen #3'ün Gradyan Arka Planını Değiştir

Ve son Blurb Module'ün degrade arka planını da değiştirin.

• Renk 1: #caa5ff

Blurb Modüllerine Dönüştürme Ayarları Ekleme

Blurb Modülü 1'e Dönüştürme Çevir'i ekleyin

Artık ihtiyacımız olan tüm tasarım öğelerine sahip olduğumuza göre, konumlarını dönüştürmeye başlayabiliriz! Bunu yapmak için transform translate seçeneğini kullanacağız. Sütun 1'deki Blurb Modülünü açın ve değerleri buna göre değiştirin:

• Alt: 2vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ: -106vw (Masaüstü), 0vw (Tablet ve Telefon)

Dönüştürmeyi Ekle Blurb Modülüne Çevir #2

İkinci Blurb Modülüne geçin ve dönüşüm çevirme değerlerini buna göre değiştirin:

• Alt: 16.6vw (Alt), 0vw (Tablet ve Telefon)
• Sağ: -78vw (Sağ), 0vw (Tablet ve Telefon)

Dönüştürmeyi Ekle Blurb Modülüne Çevir #3

Daha sonra sütun 3'teki Blurb Modülünü açın ve aşağıdaki transform translate değerlerini kullanın:

• Alt: 17vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ: -46vw (Masaüstü), 0vw (Tablet ve Telefon)

Blurb Modülü #4'e Dönüştürme Çevir'i ekleyin

Aşağıdaki değerleri kullanarak son Blurb Modülü için de aynı şeyi yapın:

• Alt: -66vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ: -24vw (Masaüstü), 0vw (Tablet ve Telefon)

2. Satıra Negatif Alt Marj Ekle

Dönüştürme çevirme seçeneğinin kullanılması, satırdaki Blurb Modülleri tarafından başlangıçta kaplanmış olan alanı kaldırmaz. Bu boşluktan kurtulmak için satıra bir miktar negatif alt kenar boşluğu ekleyebiliriz ve işimiz bitti!

• Alt Kenar Boşluğu: -15vw (Masaüstü), 0vw (Tablet ve Telefon)

Ön izleme

Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu yazıda, Divi'nin yeni dönüştürme seçeneklerini kullanarak güzel bir zaman çizelgesi bölümünün nasıl oluşturulacağını gösterdik. Eğitimin başında, JSON dosyasını ve illüstrasyonu ücretsiz olarak indirebildiniz! Bu, hemen başlamanıza yardımcı olacaktır. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.