Divi ile Güzel ve İlgi Çekici Dinamik Blog Yazısı Kahraman Bölümleri Nasıl Oluşturulur

Her yeni güncelleme çıktığında, sahip olduğunuz tasarım olanakları artar. Örneğin, dinamik içerik ve fareyle üzerine gelme seçeneklerini birleştirmek çarpıcı sonuçlar getirebilir. Bunu göstermek için, yalnızca Divi'nin yerleşik seçeneklerini kullanarak 3 çarpıcı dinamik blog yazısı kahraman bölümünün nasıl oluşturulacağını göstereceğiz. Kendi varyasyonlarınızı yaratmanız için size ilham verecek örneklerin her birinde size adım adım rehberlik edeceğiz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, oluşturacağımız üç örneğin hepsinin sonucuna bir göz atalım.

Örnek 1

Örnek #2

Örnek 3

Yeni Blog Yazısı Ekle

Gönderi Ayrıntıları

İlk önce ilk şeyler, yeni bir blog yazısı oluşturarak başlayın. Başlığı, tercih ettiğiniz kategoriyi ve öne çıkan görseli ekleyin. Bu yapıldıktan sonra Divi Builder'ı etkinleştirin.

Divi Sayfa Ayarları

Visual Builder'a geçmeden önce, yeni blog gönderisinin sağ üst köşesindeki Divi Sayfa Ayarlarını değiştirin.

• Sayfa Düzeni: Tam Genişlik
• Yazı Başlığı: Gizle

Visual Builder'a geçin

Farklı örnekler oluşturmaya başlamak için Visual Builder'a geçme zamanı!

Modülleri Oluşturma

Yeni Bölüm + Tek Sütunlu Satır Ekle

Örneklerin her birine ayrı ayrı dalmadan önce, dinamik içerik içeren Metin Modüllerini oluşturarak başlayacağız. Her üç örnekte de tasarımı tamamlamak için bu hazır modülleri kullanacağız. Yeni bir bölüm ekledikten sonra, aşağıdaki sütun yapısını kullanarak ona yeni bir satır ekleyin:

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

Gönderi Başlığı Dinamik İçeriği Seçin

İhtiyacımız olan ilk dinamik modül, Gönderi Başlığını içerecektir. Yeni bir Metin Modülü ekleyin ve dinamik içerik listesinden Gönderi Başlığı'nı seçin.

Metin Ayarları

Ardından, metin ayarlarına gidin ve bazı değişiklikler yapın.

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #000000
• Metin Boyutu: 58px (Masaüstü), 45px (Tablet), 35px (Telefon)
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Boşluk değerlerini de değiştirin.

• Alt Kenar Boşluğu: 50px
• Üst Dolgu: 10px
• Alt Dolgu: 10px

Yayınlanma Tarihi Sonrası Metin Modülü

Yayınlama Tarihini Seç Dinamik İçerik

İhtiyacımız olan ikinci modül, Yayınlama Sonrası Tarihi içeren bir Metin Modülüdür. Devam edin ve bir tane ekleyin ve dinamik içerik listesinde Yayınlama Tarihini Gönder'i seçin.

Metin Ayarları

Daha sonra bu modülün metin ayarlarını değiştirin.

• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Rengi: #000000
• Metin Boyutu: 30px (Masaüstü), 20px (Tablet), 16px (Telefon)
• Metin Harf Aralığı: 14px
• Metin Yönü: Merkez

aralık

Biraz alt kenar boşluğu da ekleyin.

• Alt Kenar Boşluğu: 50px

Mesaj Kategorileri Metin Modülü

Kategorileri Seçin Dinamik İçerik

Ekleyeceğimiz son modül, Kategori Sonrası dinamik içeriği içeren bir Metin Modülüdür.

Metin Ayarları

Metin ayarlarına gidin ve metin yönünü değiştirin.

• Metin Yönü: Merkez

Bağlantı Metni Ayarları

Ardından, bağlantı metni ayarlarında bazı değişiklikler uygulayın.

• Bağlantı Yazı Tipi Ağırlığı: Ultra Kalın
• Bağlantı Yazı Tipi Stili: Büyük Harf
• Bağlantı Metni Rengi: #000000
• Bağlantı Metni Boyutu: 15px
• Bağlantı Harfi Aralığı: 5px

aralık

Sonraki alt dolgu ekleyin.

• Alt Dolgu: 20px

Sınır

Ve ince bir alt kenarlıkla bitirin.

• Alt Kenar Genişliği: 1px
• Alt Kenar Rengi: #000000

Örnek #1 Oluşturma

Yeni Bölüm Ekle

aralık

İlk örneği oluşturmaya başlayalım! Oluşturduğunuz önceki bölümün hemen altında, devam edin ve yeni bir tane ekleyin. Ayarlarını açın ve tüm varsayılan özel dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısına sahip yeni bir satır ekleyerek devam edin:

boyutlandırma

Bu satırın boyutlandırma ayarlarını açın ve bazı şeyleri değiştirin.

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

aralık

Daha sonra bazı özel boşluk değerleri ekleyin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sütun 2 Üst Dolgu: 130 piksel
• Sütun 2 Alt Dolgu: 130 piksel
• Sütun 2 Sol Dolgu: 50px
• Sütun 2 Sağ Dolgu: 50 piksel

Sütun 1'e Görüntü Modülü Ekle

Öne Çıkan Görsel Dinamik İçeriğini Seçin

İlk sütuna bir Görüntü Modülü ekleyerek devam edin. Bir görsel yüklemek yerine, modülü dinamik Öne Çıkan Görsele bağlayın.

Sınır Varsayılanı

Ayrıca fareyle üzerine gelindiğinde bir sağ kenarlık ekliyoruz. Bunu yapmak için önce aşağıdaki varsayılan kenarlık genişliğini seçin:

• Sağ Kenar Genişliği: 0px

sınır vurgusu

Ve fareyle üzerine gelindiğinde aşağıdaki ayarları ekleyin:

• Sağ Kenar Genişliği: 24px
• Sağ Kenar Rengi: #FFFFFF

Kutu Gölge Varsayılanı

Aynısı kutu gölgesi için de geçerlidir, aşağıdaki varsayılan kutu gölgesi ayarlarını uygulayın:

• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 80px
• Gölge Rengi: rgba(255,255,255,0)

Kutu Gölge Vurgusu

Ve fareyle üzerine gelindiğinde etraftaki şeyleri değiştirin:

• Kutu Gölgesi Yatay Konumu: 600px
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 80px
• Gölge Rengi: #E4BAC7

geçişler

Yumuşak bir geçiş oluşturmak için gelişmiş sekmesinde geçiş süresini değiştirin.

• Geçiş Süresi: 1200ms

Dinamik Modülleri Sütun 2'ye Yerleştirin

Bu örneği tamamlamak için geriye kalan tek şey, bu öğreticinin ilk bölümünde oluşturduğumuz modülleri ikinci sütuna yerleştirmek.

Örnek #2 Oluşturma

Yeni Bölüm Ekle

Üst Bölücü Varsayılanı

Bir sonraki günü! Aşağıdaki üst ayırıcıyla yeni bir bölüm ekleyin:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #FFFFFF
• Bölücü Yüksekliği: 50px
• Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Üst Bölücü Vurgusu

Vurguluyken bölücü yüksekliğini değiştirin.

• Bölücü Yüksekliği: 174px

aralık

Sonraki bölümün tüm özel dolgusunu kaldırın. Bu, sonraki adımlardan birinde satır ve bölümün çarpışmasını sağlar.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

geçişler

Düzgün bir bölücü geçişi oluşturmak için gelişmiş sekmesinde geçiş süresini değiştirin.

• Geçiş Süresi: 500ms

Yeni Satır Ekle

Sütun Yapısı

Şimdi devam edin ve aşağıdaki sütun yapısını kullanarak bölümünüze bir satır ekleyin:

Arka Plan Rengi Varsayılanı

Aşağıdaki arka plan rengini buna ekleyin:

• Arka Plan Rengi: #FFFFFF

Arka Plan Rengi Vurgulu

Fareyle üzerine gelindiğinde arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(255,255,255,0.56)

Öne Çıkan Resim Dinamik Arka Plan Resmi

Öne Çıkan Resmi de dinamik satır arka plan resmi olarak yükleyin. Bunu yaptıktan sonra arka plan görüntüsü karışımını değiştirin.

• Arka Plan Resmi Karışımı: Ekran

boyutlandırma

Boyutlandırma ayarlarını değiştirerek satırın ekranın tüm genişliğini kaplamasına izin verin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Ve bazı özel dolgu aralığı değerleri ekleyin.

• Üst Dolgu: 200 piksel
• Alt Dolgu: 200px
• Sol Dolgu: 100px (Masaüstü), 50px (Tablet), 20px (Telefon)
• Sağ Doldurma: 100px (Masaüstü), 50px (Tablet), 20px (Telefon)

geçişler

Son olarak, geçiş süresini değiştirerek yumuşak bir geçiş oluşturun.

• Geçiş Süresi: 700ms

Dinamik Modülleri Sütuna Yerleştirin

Artık tüm dinamik modülleri satırın sütununa yerleştirebilirsiniz ve ikinci örnekle işiniz bitti!

Örnek #3 Oluşturma

Yeni Bölüm Ekle

Öne Çıkan Resim Dinamik Arka Plan Resmi

Son örneğe geçelim! Yeni bir bölüm ekleyin ve bölüm arka plan görüntüsü olarak Öne Çıkan Görsel'i seçin.

Aralık Varsayılanı

Ardından, bölümün tüm varsayılan özel dolgusunu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Boşluk Vurgusu

Küçülen bir efekt oluşturmak için üzerine gelindiğinde bazı özel kenar boşlukları ekleyin.

• Sol Dolgu: 150px (Masaüstü), 50px (Tablet), 30px (Telefon)
• Sağ Doldurma: 150px (Masaüstü), 50px (Tablet), 30px (Telefon)

geçişler

Geçiş süresini de değiştirin.

• Geçiş Süresi: 500ms

Yeni Satır Ekle

Sütun Yapısı

Bölüm ayarlarını değiştirmeyi bitirdikten sonra, aşağıdaki sütun yapısına sahip yeni bir satır ekleyerek devam edin:

Arka Plan Rengi Varsayılanı

Aşağıdaki arka plan rengini ekleyin:

• Arka Plan Rengi: #ffffff

Arka Plan Rengi Vurgulu

Fareyle üzerine gelindiğinde arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(255,255,255,0.46)

Degrade Arka Plan

Radyal degrade arka planı da ekleyin.

• Renk 1: rgba(41,196.169,0)
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Başlangıç ​​Konumu: %29
• Bitiş Konumu: %29

boyutlandırma

Sonraki satırın boyutlandırma ayarlarını değiştirin.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 200 piksel
• Alt Dolgu: 200px
• Sol Dolgu: 100px (Masaüstü), 50px (Tablet), 20px (Telefon)
• Sağ Doldurma: 100px (Masaüstü), 50px (Tablet), 20px (Telefon)

geçişler

Son olarak, yumuşak bir geçiş için geçiş süresini değiştirin.

• Geçiş Süresi: 500ms

Dinamik Modülleri Sütuna Yerleştirin

Devam edin ve tüm hazır modülleri satırın sütununa yerleştirin.

Tüm Modüllerin Metin Yönlendirmesini Değiştir

Bu modüller hakkında değiştirmeniz gereken tek şey metin yönüdür ve işiniz bitti!

• Metin Yönü: Sol

Ön izleme

Şimdi tüm adımların üzerinden geçtik, şimdi oluşturduğumuz üç örneğe son bir göz atalım.

Örnek 1

Örnek #2

Örnek 3

Son düşünceler

Bu gönderide, çarpıcı blog yazısı kahraman bölümleri oluşturmak için dinamik içeriği Divi'nin fareyle üzerine gelme seçenekleriyle nasıl birleştireceğinizi gösterdik. Bu örnekler inkar edilemez bir şekilde kendi varyasyonlarınızı yaratmanız ve orada yayınladığınız blog gönderisini kişiselleştirmeniz için size ilham verecektir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!