Divi'nin Özel Bölümü ile Benzersiz Çok Sütunlu Kahraman Bölümleri Nasıl Tasarlanır

Tüm tasarım trendleri boyunca, kahraman bölümlerinizi tasarlama şekliniz son derece önemli olmaya devam ediyor. Divi ile farklı yaklaşımlar benimseyebilir ve dikkat çeken ve insanları web sitenizde kalma sürelerini uzatmaya teşvik eden bir kahraman bölümü oluşturabilirsiniz. Yaklaşan Divi projeleriniz için ilham almanıza yardımcı olmak için, yalnızca Divi'nin yerleşik seçeneklerini kullanarak benzersiz çok sütunlu kahraman bölümlerini nasıl tasarlayacağınızı göstereceğiz. Çok sütunlu kahraman bölümleri harika görünmekle kalmaz, aynı zamanda ziyaretçilerinizi bunaltmadan kahraman bölümüne stratejik olarak daha fazla içerik yerleştirmenize yardımcı olur.

Hadi hadi bakalım!

Ön izleme

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

Çok Sütunlu Kahraman Bölüm Düzenini ÜCRETSİZ İndirin

Ellerinizi çok sütunlu kahraman bölümü düzenine sokmak 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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Yeniden Yaratmaya Başlayalım!

Yeni Özel Bölüm Ekle

Sütun Yapısı

Kesintisiz çok sütunlu bir kahraman bölümü oluşturmak için, Visual Builder içinde erişiminiz olan Divi özel bölümlerinden birini kullanacağız. Özel bir bölüme gitmek, çok sütunlu bir kahraman bölümü tasarlarken tercih ettiğiniz ızgara yapısını daha iyi kavramanıza olanak tanır. Bu özel örnek için aşağıdaki sütun yapısını seçiyoruz:

Arka plan rengi

Bölüm ayarlarını açın ve beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

boyutlandırma

Boyutlandırma ayarlarını değiştirerek bölüm sütunları arasında boşluk kalmamasını sağlıyoruz.

• Sütun Yüksekliklerini Eşitle: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100
• İç Genişlik: %100
• İç Maks Genişlik: %100

aralık

Ayrıca, satır ve sütunların tüm varsayılan üst ve alt dolgularını kaldırıyoruz.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sütun 1 Üst Dolgu: 0px
• Sütun 1 Alt Dolgu: 0px
• Sütun 2 Üst Dolgu: 0px
• Sütun 2 Alt Dolgu: 0px
• Sütun 3 Üst Dolgu: 0px
• Sütun 3 Alt Dolgu: 0px

1. Satır Ekle

Sütun Yapısı

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

aralık

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Sütuna Metin Modülü Ekle

Paragraf ve H1 İçeriği Ekle

Modül eklemeye başlama zamanı! Seçtiğiniz bir paragraf ve H1 içeriği ile yeni bir Metin Modülü ekleyin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.9vw (Masaüstü), 1.6vw (Tablet), 2.2vw (Telefon)

H1 Metin Ayarları

H1 metin ayarlarını da değiştirin.

• Başlık Yazı Tipi: Açık Sans
• Başlık Yazı Tipi Ağırlığı: Yarı Kalın
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metni Rengi: #000000
• Başlık Metni Boyutu: 4vw
• Yön Çizgisi Yüksekliği: 1.1em

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 10.8vw
• Sol Dolgu: 4vw
• Sağ Dolgu: 4vw

2. Satır Ekle

Sütun Yapısı

İlk bölüm sütununda ihtiyacımız olan ikinci satır aşağıdaki sütun yapısını kullanır:

aralık

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve padding değerlerini değiştirin.

• Üst Dolgu: 3vw
• Sol Dolgu: 4vw
• Sağ Dolgu: 4vw

Metin Modülü #1'i Sütun 1'e ekleyin

H3 İçeriği Ekle

Satır ayarlarıyla işiniz bittiğinde, devam edip ilk sütuna yeni bir Metin Modülü ekleyebilirsiniz. Seçtiğiniz bazı H3 içeriğini girin.

H3 Metin Ayarları

Tasarım sekmesine gidin ve H3 metin ayarlarını buna göre değiştirin:

• Başlık 3 Yazı Tipi: Açık Sans
• Başlık 3 Yazı Ağırlığı: Yarı Kalın
• Başlık 3 Yazı Tipi Stili: Büyük Harf
• Başlık 3 Metin Rengi: #000000
• Başlık 3 Metin Boyutu: 1.5vw (Masaüstü), 2vw (Tablet), 2.5vw (Telefon)

aralık

Telefona biraz üst kenar boşluğu ekleyerek devam edin.

• Üst Marj: 2vw (Yalnızca Telefon)

Sütun 1'e Bölücü Modülü Ekle

görünürlük

İlk sütunda ihtiyacımız olan ikinci modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Sonraki çizgi rengini değiştirin.

• Çizgi Rengi: #000000

aralık

Ayırıcının etrafında boşluk oluşturmak için bazı özel kenar boşlukları değerleri ekleyin.

• Üst Marj: 2vw
• Alt Marj: 2vw
• Sağ Kenar Boşluğu: 2vw

Metin Modülü #2'yi Sütun 1'e ekleyin

İçerik Ekle

Bu sütunda ihtiyacımız olan sonraki ve son modül başka bir Metin Modülüdür. Seçtiğiniz bazı paragraf içeriğini girin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.6vw (Masaüstü), 1.1vw (Tablet), 2vw (Telefon)
• Metin Satır Yüksekliği: 2em

aralık

Biraz alt ve sağ dolgu da ekleyin.

• Alt Kenar Boşluğu: 5vw (Yalnızca Telefon)
• Sağ Kenar Boşluğu: 2vw

Sütun 1'deki Tüm Modülleri İki Kez Klonlayın ve Kopyaları Kalan Sütunlara Yerleştirin

1. sütundaki tüm modülleri tamamladıktan sonra devam edip her birini iki kez klonlayabilirsiniz. Kopyaları satırın kalan iki sütununa yerleştirin.

İçeriği Değiştir

Metin Modüllerindeki tüm içeriği değiştirdiğinizden emin olun.

3. Satır Ekle

Sütun Yapısı

İlk bölüm sütununda ihtiyacımız olan sonraki ve son satır aşağıdaki sütun yapısını kullanır:

aralık

Satır ayarlarını açın ve boşluk değerlerini değiştirin.

• Üst Marj: 2vw
• Üst Dolgu: 0px
• Alt Dolgu: 0px

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

İçerik Ekle

Seçtiğiniz bazı CTA kopyalarıyla ilk sütuna bir Metin Modülü ekleyerek devam edin.

Link ekle

Modülün tamamına da bir bağlantı ekleyin.

Arka plan rengi

Ayrıca Metin Modülünün arka plan rengini de değiştiriyoruz.

• Arka Plan Rengi: #000000

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Hizalama: Merkez
• Metin Rengi: #ffffff
• Metin Boyutu: 1vw (Masaüstü), 1.7vw (Tablet), 2.5vw (Telefon)

aralık

Ve bazı özel kenar boşluğu ve dolgu değerleri kullanarak modülün etrafında boşluk yaratın.

• Üst Marj: 4vw (Masaüstü), 11vw (Tablet), 0vw (Telefon)
• Üst Dolgu: 4vw
• Alt Dolgu: 4vw

Metin Modülünü Klonla ve Çoğaltmayı Sütun 2'ye Yerleştir

1. sütundaki Metin Modülünü tamamladığınızda, onu klonlayabilir ve kopyayı ikinci sütuna yerleştirebilirsiniz.

İçeriği Değiştir

İçeriği ve bağlantıyı değiştirdiğinizden emin olun.

Arka Plan Rengini Değiştir

Arka plan renginin yanı sıra.

• Arka Plan Rengi: #e5e5e5

Metin Rengini Değiştir

Ardından tasarım sekmesine geçin ve metin rengini değiştirin.

• Metin Rengi: #000000

Aralığı Değiştir

Son olarak, boşluk ayarlarının yalnızca aşağıdaki değerleri içerdiğinden emin olun:

• Üst Dolgu: 4vw
• Alt Dolgu: 4vw

Bölüm Sütun 2'ye Görüntü Modülü Ekle

Fotoğraf yükleniyor

Bir sonraki bölüm sütununa! Burada ihtiyacımız olan ilk modül bir Görüntü Modülü. Seçtiğiniz bir resmi yükleyin veya bu gönderinin başında paylaşılan sıkıştırılmış klasörde bulabileceğiniz bir resmi kullanın.

boyutlandırma

Boyutlandırma ayarlarına gidin ve 'Tam Genişliğe Zorla' seçeneğinin etkinleştirildiğinden emin olun. Bu, görüntünün boyutunu tüm ekran boyutlarında tutmasını sağlayacaktır.

• Tam Genişliği Zorla: Evet

Filtreler

Sonraki filtre ayarlarını değiştirin.

• Doygunluk: %0
• Parlaklık: %50

Bölüm Sütun 2'ye Metin Modülü Ekle

Paragraf ve H3 İçeriği Ekle

Bu sütunda ihtiyacımız olan ikinci modül bir Metin Modülüdür. Seçtiğiniz bir paragraf ve H3 içeriği girin.

Arka plan rengi

Modüle bir arka plan rengi ekleyin.

• Arka Plan Rengi: #000000

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #ffffff
• Metin Boyutu: 0.9vw (Masaüstü), 1.6vw (Tablet), 2.2vw (Telefon)

H3 Metin Ayarları

H3 metin ayarlarını da değiştirin.

• Başlık 3 Yazı Tipi: Açık Sans
• Başlık 3 Yazı Ağırlığı: Yarı Kalın
• Başlık 3 Yazı Tipi Stili: Büyük Harf
• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Metin Boyutu: 1.5vw (Masaüstü), 2.5vw (Tablet), 3vw (Telefon)

aralık

Ve boşluk ayarlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 3vw
• Alt Dolgu: 3vw
• Sol Dolgu: 2vw
• Sağ Dolgu: 2vw

Her İki Modülü de Klonla ve Kopyaları Bölüm Sütun 3'e Yerleştir (Ters Sıra)

Her iki modülü de tamamladıktan sonra devam edip onları klonlayabilirsiniz. Kopyaları ters sırada kalan bölüm sütununa yerleştirin.

Metin Modülünü Değiştir

Arka Plan Rengini Değiştir

Üçüncü bölüm sütununda yinelenen Metin Modülünü açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

Metin Rengini Değiştir

Sonraki metin rengini değiştirin.

• Metin Rengi: #000000

H3 Metin Rengini Değiştir

H3 metin rengiyle birlikte.

• Başlık 3 Metin Rengi: #000000

Görüntü Modülünü Değiştir

Resmi değiştir

Daha sonra yinelenen Görüntü Modülüne farklı bir görüntü yükleyin.

Filtreleri Değiştir

Ve filtre ayarlarını değiştirin.

• Doygunluk: %0
• Parlaklık: %147

Bölüm Sütun 2'ye Bölücü Modülü Ekleme

Konum

Ayrıca tasarımımıza ayrıntı eklemek için dönüştürülmüş bazı ayırıcılar ekliyoruz. İlk Bölücü Modülü tam buraya yerleştirin:

görünürlük

'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Ardından bir çizgi rengi ekleyin.

• Çizgi Rengi: #ffffff

Dönüştür Döndür

Ve sol dönüşüm döndürme değerini değiştirerek yatay bölücüyü dikey olana dönüştürün.

• Sol: 270 derece

Dönüştür Çeviri

Dönüştürme çevirme ayarlarında görüntü alanı genişlik birimini kullanarak Bölücü Modülü yeniden konumlandırın.

• Sağ: -19vw (Masaüstü)
• Alt: -11vw (Masaüstü), -24vw (Tablet)

görünürlük

Ve tüm modülü telefonda gizleyin.

Bölüm Sütun 3'e Bölücü Modülü Ekleme

Konum

Bir sonraki ve son Bölücü Modülün tam buraya eklenmesi gerekiyor:

görünürlük

'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Tasarım sekmesine gidin ve çizgi rengini değiştirin.

• Çizgi Rengi: #000000

Dönüştür Döndür

Yatay bölücüyü bir sonraki dikey bölücüye dönüştürün.

• Sol: 270 derece

Dönüştür Çeviri

Ve dönüştürme çevirme ayarlarını kullanarak bölücüyü yeniden konumlandırın.

• Sağ: 2vw
• Alt: -11vw (Masaüstü), -24vw (Tablet)

görünürlük

Bölücünün, altındaki Görüntü Modülünün üstünde göründüğünden emin olmak için, görünürlük ayarlarında Z İndeksini artıracağız. Ayrıca tüm modülü telefonda saklayacağız.

• Z İndeksi: 2

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

Son düşünceler

Bu gönderide, yalnızca Divi'nin yerleşik seçenekleriyle güzel ve benzersiz çok sütunlu kahraman bölümlerinin nasıl oluşturulacağını gösterdik. Bu, farklı türdeki web siteleri için kullanılabilecek harika bir tekniktir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.