Çarpıcı Bölüm Geçişleri Oluşturmak için Divi'nin Yeni Sütun Yapıları Nasıl Kullanılır?

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, çarpıcı kesit geçişleri oluşturmak için Divi'nin yeni sütun yapılarını nasıl kullanacağınızı göstereceğiz. Sayfa tasarımımızı bir sonraki seviyeye taşımak için farklı sütun yapılarını Divi'nin bazı yerleşik seçenekleriyle birleştireceğiz.

Hadi hadi bakalım!

Ön izleme

Sadece Divi'nin yerleşik seçeneklerini kullanarak sıfırdan oluşturacağımız üç farklı örneğe bir göz atarak başlayalım. Bu örnekler, daha küçük ekran boyutlarında eşit derecede iyi görünüyor.

Divi'nin Makyaj Sanatçısı Düzen Paketinin Açılış Sayfasını Kullanın

Divi's Makeup Artist Layout Pack'in açılış sayfasını kullanacağız. Düzen paketine göz atmak isterseniz, aşağıdaki blog gönderisine gidin. Bu öğreticiyi belirli bir düzen paketi kullanarak göstersek de, teknikleri diğer düzenlerde de kolayca kullanabilirsiniz.

Bölüm Geçişi #1

Yeni Bölüm Ekle

bul

Divi's Visual Builder'ı kullanarak Makeup Artist Layout Pack'in açılış sayfasını açın. Ardından, kahraman bölümünün hemen altına yeni bir normal bölüm ekleyin:

aralık

Sonraki bölümünüzün tüm varsayılan boşluklarını 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 bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Satırın genişliğini de artırın:

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

aralık

Sonraki varsayılan üst ve alt dolguyu kaldırın:

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

Filtre

Satırı daha canlı hale getirmek için Filtre ayarlarında doygunluğu artırın:

• Doygunluk: %200

Bölücü Modül #1'i Sütun 1'e ekleyin

Bölücüyü Gizle

Tasarımımızdaki ilk kareyi oluşturmak için 1. sütuna bir Bölücü Modül ekleyeceğiz. 'Show Divider' seçeneğini devre dışı bırakın.

Degrade Arka Plan

Ardından, Bölücü Modülüne bir degrade arka planı ekleyin:

• Renk 1: rgba(255,255,255,0)
• Renk 2: rgba(176.182,219,0.34)

aralık

Kareyi oluşturmak için Aralık değerlerini değiştirin:

• Üst Kenar Boşluğu: -120px
• Üst Dolgu: 120px
• Alt Dolgu: 120px

Klon Bölücü Modülü ve Sütun 2'deki Yeri

DIvider Modülünü değiştirmeyi bitirdikten sonra klonlayın ve ikinci sütuna yerleştirin.

Degrade Arka Planını Değiştir

Degrade arka planından başlayarak bu kopyada bazı değişiklikler yapılması gerekiyor:

• Renk 1: rgba(228.237,234,0.58)
• Renk 2: rgba(255,255,255,0)

Aralığı Değiştir

Aralık ayarlarını da değiştirin. Bu, bu Bölücü Modül ile ilk sütundaki arasındaki mesafeyi artıracaktır.

• Üst Kenar Boşluğu: 142px
• Üst Dolgu: 120px
• Alt Dolgu: 120px

Klon Bölücü Modülü #1 İki Kez ve Sütun 3 ve 5'e Yerleştirin

Mor Bölücü Modülü iki kez klonlayın ve kopyaları sütun 3 ve 5'e yerleştirin.

Klon Bölücü Modül #2 ve Sütun 4'teki Yeri

Yeşil Bölücü Modülü de klonlayın ve 4. sütuna yerleştirin.

Tablet ve Telefonda Sütun 3, 4 ve 5'te Bölücü Modülü Gizle

Sütun 3'te Bölücü Modülünü Açın

Tabii ki, bu bölüm geçişlerinin daha küçük ekran boyutlarında eşit derecede iyi görünmesini istiyoruz. Bu yüzden kullandığımız bazı modülleri saklayacağız. Sütun 3'te Bölücü Modülün ayarlarını açarak başlayın.

Tablette ve Telefonda Gizle

Gelişmiş sekmesine gidin ve modülü telefon ve tablette devre dışı bırakın.

Görünürlük Stillerini Kopyala

4. ve 5. sütundaki ayırıcıları da gizlememiz gerekecek. İşlemi hızlandırmak için, sütun 3'teki ayırıcının görünürlük ayarlarını kopyalayın:

Görünürlük Stillerini Yapıştır

Ve bunları sütun 4 ve 5'teki Bölücü Modüllere yapıştırın.

Bölüm Geçişi #2

Yeni Bölüm Ekle

bul

İkinci bölüm geçişini oluşturmak için buraya yeni bir bölüm ekleyin:

Üst Bölücü

Bölüm ayarlarını açın ve aşağıdaki üst ayırıcıyı ekleyin:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #ffffff
• Bölücü Yüksekliği: 236px
• Bölücü Çevirme: Dikey
• Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Alt Bölücü

Aynı şekilde, bir alt bölücü de ekleyin:

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

aralık

Daha sonra Aralık ayarlarını değiştirin:

• Üst Kenar Boşluğu: 100 piksel
• Alt Kenar Boşluğu: 100 piksel
• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Yeni bölüme bir satır ekleme zamanı! Aşağıdaki sütun yapısını seçin:

boyutlandırma

Herhangi bir modül eklemeden satır ayarlarını açın ve genişliği 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

Tüm varsayılan üst ve alt dolguyu da kaldırın:

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

Bölücü Modül #1'i Sütun 1'e ekleyin

Arka plan rengi

Ardından, ilk sütuna bir Bölücü Modül ekleyin. Ayarlarını açın ve bir arka plan rengi ekleyin:

• Arka Plan Rengi: rgba(176.182,219,0.34)

Bölücü Renk

Ayırıcı rengini de değiştirin:

• Bölücü Rengi: #ffffff

Bölücü Stili

Ardından, Stiller ayarlarına gidin ve aşağıdaki Bölücü Stilini kullanın:

• Bölücü Tarzı: Çift

Bölücü Ağırlığı

Bölücünün ağırlığı aşağıdaki gibi olmalıdır:

• Bölücü Ağırlığı: 18px

aralık

Son olarak, özel dolgu kullanarak Bölücü Modülün boyutunu artırın:

• Üst Dolgu: 50px
• Alt Dolgu: 50px

Klon Bölücü Modülü ve Sütun 2'deki Yeri

İlk sütundaki Bölücü Modül ile işiniz bittiğinde, kopyalayın ve kopyayı ikinci sütuna yerleştirin.

Arka Plan Rengini Değiştir

Bu kopyanın arka plan rengini uygun şekilde değiştirin:

• Arka Plan Rengi: #e4edea

Klon Bölücü Modülü #1 ve Sütun 3 ve 5'teki Yeri

Mor Bölücü Modülü iki kez klonlayarak ve kopyaları sütun 3 ve 5'e yerleştirerek devam edin.

Klon Bölücü Modül #2 ve Sütun 4'teki Yeri

Yeşil Bölücü Modülü de klonlayın ve kopyayı 4. sütuna yerleştirin.

Tablet ve Telefonda Sütun 3, 4 ve 5'te Bölücü Modülü Gizle

Tablette ve Telefonda Gizle

İlk bölüm geçiş örneği için yaptığımızın aynısını yapacağız. 3. sütundaki Bölücü Modülün ayarlarını açın ve telefonda ve tablette gizleyin.

Görünürlük Stillerini Kopyala

Bu Görünürlük Stillerini kopyalayın.

Görünürlük Stillerini Yapıştır

Ve bunları sütun 4 ve 5'teki Bölücü Modüllere yapıştırın.

Bölüm Geçişi #3

Yeni Bölüm Ekle

bul

Sayfanıza son bölüm geçişini eklemek için buraya yeni bir bölüm ekleyin:

Üst Bölücü

Bölüm ayarlarını açın ve bir üst ayırıcı ekleyin:

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

Alt Bölücü

Sonra bir alt ekleyin:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #ffffff
• Bölücü Yüksekliği: 150px
• Bölücü Çevirme: Dikey
• Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

aralık

Ardından, Aralık ayarlarına gidin ve bazı değişiklikler yapın:

• Üst Kenar Boşluğu: 100 piksel
• Alt Kenar Boşluğu: 100 piksel
• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Bu bölümde ihtiyaç duyacağımız satır aşağıdaki sütun yapısına sahiptir:

boyutlandırma

Herhangi bir modül eklemeden satır ayarlarını açın ve satırınızın genişliğini artırın:

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

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın:

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

Bölücü Modül #1'i Sütun 1'e ekleyin

Bölücüyü Gizle

İlk sütuna bir Bölücü Modül ekleyerek devam edin. 'Bölücüyü Göster' seçeneğini devre dışı bırakın.

Arka plan rengi

Bunun yerine ayırıcıya bir arka plan rengi ekleyin:

• Arka Plan Rengi: rgba(176.182,219,0.34)

aralık

Üst ve alt dolguyu kullanarak modülün boyutunu artırın:

• Üst Dolgu: 100 piksel
• Alt Dolgu: 100px

Klon Bölücü Modülü ve Sütun 2'deki Yeri

Arka Plan Rengini Değiştir

İlk sütundaki Bölücü Modülü klonlayın ve kopyayı ikinci sütuna yerleştirin. Ayarlarını açın ve arka plan rengini değiştirin:

• Arka Plan Rengi: rgba(228.237,234,0.58)

Klon Bölücü Modülü #1 ve Sütun 3 ve 5'teki Yeri

Mor Bölücü Modülü iki kez klonlayın ve 3. ve 5. sütuna yerleştirin.

Klon Bölücü Modül #2 ve Sütun 4'teki Yeri

Yeşil Bölücü Modülü de klonlayın ve kopyayı 4. sütuna yerleştirin.

Tablet ve Telefonda Sütun 3, 4 ve 5'te Bölücü Modülü Gizle

Tablette ve Telefonda Gizle

Bölücü Modülü tablet ve telefonda 3. sütunda saklayın.

Görünürlük Stillerini Kopyala

Bu Görünürlük Stillerini kopyalayın.

Görünürlük Stillerini Yapıştır

Ve bunları 4. ve 5. sütundaki Bölücü Modüle yapıştırın ve işiniz bitti!

Ön izleme

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

Son düşünceler

Bu kullanım örneği blog gönderisinde, çarpıcı bölüm geçişleri oluşturmak için Divi'nin yeni sütun yapılarını nasıl kullanacağınızı gösterdik. Bu eğitim, her hafta tasarım araç kutunuza bir şeyler koymaya çalıştığımız devam eden Divi tasarım girişimimizin bir parçasıdır. Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!