Divi'nin Dönüştürme Seçenekleriyle Arka Plan Şekilleri Oluşturmak için Bölücü Modülleri Kullanma

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, Divi'nin dönüştürme seçenekleri ve Paralegal Düzen Paketi ile arka plan şekilleri oluşturmak için Bölücü Modüllerini nasıl kullanacağınızı göstereceğiz. Bölücü Modüller çok yönlüdür ve sayfalarınızın genel tasarımını gerçekten yükseltebilir. Özellikle Paralegal Layout Pack ile eşleşen bazı örnekleri yeniden oluşturacak olsak da, Divi ile oluşturduğunuz her tür web sitesi için bu tekniği kullanabilirsiniz.

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

Paralegal Layout Pack'in Açılış Sayfasını Kullanarak Yeni Sayfa Oluşturun

Yeni bir sayfa oluşturun ve Paralegal Layout Pack'in açılış sayfasını bu sayfaya yükleyin.

Örnek 1'i Yeniden Oluştur

Bölüm Taşması

İlk örneği oluşturmaya başlayalım! Devam edin ve kahraman bölümü ayarlarını açın ve tasarım sekmesine gidin. Burada, hiçbir şeyin bölüm kapsayıcısını aşmadığından emin olmak istiyoruz. Bunu yapmak için ana öğeye tek bir CSS kodu satırı ekleyeceğiz.

overflow: hidden;

Sütun 2'ye Bölücü Modülü Ekle

görünürlük

Ardından, devam edin ve uzmanlık bölümünün ikinci sütununa bir Bölücü Modül ekleyin. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Arka plan rengi

Ayırıcı için arka plan rengi olarak mizanpaj paketinin renk paletinden bir renk kullanacağız.

• Arka Plan Rengi: #d94144

Renk

Ardından tasarım sekmesine gideceğiz ve ayırıcının rengini de değiştireceğiz.

• Renk: #f3f1f2

Stiller

Stil ayarlarına geçin ve ayırıcı stili değiştirin.

• Bölücü Stili: Noktalı

boyutlandırma

Boyutlandırma ayarlarıyla da oynayın. Bu Bölücü Modülü istediğiniz gibi gösterebilirsiniz, ancak tam olarak bu yazının önizlemesinde gösterildiği gibi görünmesini istiyorsanız, aşağıdaki ayarları kullanın:

• Bölücü Ağırlığı: 4px
• Yükseklik: 0 piksel

aralık

Şimdi, bazı özel kenar boşluğu ve dolgu değerleri kullanarak Bölücü Modülün konumunu ve boyutunu değiştireceğiz. Her şeyin duyarlı kalması için değerleri farklı ekran boyutlarına göre değiştirdiğinizden emin olun.

• Üst Kenar Boşluğu: -30vw (Masaüstü), -100vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: -100vw (Masaüstü), -138vw (Tablet), -300vw (Telefon)
• Üst Dolgu: 0px
• Alt Dolgu: 1.3vw (Masaüstü), 2.2vw (Tablet), 3vw (Telefon)

dönüştürmek

Ölçeği Dönüştür

Modülü dönüştürme zamanı! Dönüştürme ayarlarında yapacağımız ilk şey, aşağıdaki dönüştürme ölçeği değerlerini ekleyerek bölücü boyutunu artırmaktır:

• Alt: %153
• Sağ: %500

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

Dönüştürme döndürme ayarlarında Ayırıcı Modülü de döndüreceğiz. Fark edebileceğiniz gibi, Bölücü Modül, bu öğreticinin başına eklediğimiz tek satırlık CSS kodu sayesinde bölümü aşamaz.

• Sol: 348 derece

Örnek 2'yi Yeniden Oluştur

Bölüm Taşması

Bir sonraki örneğe geçelim! Yine, bölümün ana öğesine tek bir CSS kodu satırı ekleyerek hiçbir şeyin bölüm kapsayıcısını aşmadığından emin olmak istiyoruz.

overflow: hidden;

Bölümün Sonuna Yeni Satır Ekle

Sütun Yapısı

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

aralık

Satırın kapladığı boyutu azaltmak için, boşluk ayarlarındaki varsayılan üst ve alt dolguyu kaldıracağız.

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

Bölücü Modülü Ekle

görünürlük

Bölücü Modülü ekleme ve stil verme zamanı! 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Arka plan rengi

Yine, düzen paketinin renk paletindeki renklerden birini arka plan rengi olarak kullanıyoruz.

• Arka Plan Rengi: #d94144

Renk

Tasarım sekmesine geçin ve ayırıcı rengini de değiştirin.

• Renk: #f3f1f2

boyutlandırma

Boyutlandırma ayarlarıyla da oynuyoruz.

• Bölücü Ağırlığı: 10px
• Yükseklik: 0 piksel

aralık

Ve farklı ekran boyutlarında değiştireceğimiz bazı özel dolguları kullanarak tam istediğimiz şekli oluşturacağız.

• Üst Dolgu: 2vw
• Alt Dolgu: 2.5vw (Masaüstü), 3vw (Tablet), 3.9vw (Telefon)

dönüştürmek

Ölçeği Dönüştür

Dönüşüm zamanı! Yapacağımız ilk şey, Bölücü Modülü ölçeklendirmek. Bunu, bölümün başında veya sonunda boşluk olmadığından emin olmak için yapıyoruz. Bölücü Modülünüzü çok fazla ölçeklendirme konusunda endişelenmeyin, bölümü aşan hiçbir şey tasarımınızda görünmeyecektir.

• Alt: %153
• Sağ: %153 (Masaüstü), %250 (Tablet), %500 (Telefon)

Dönüştür Çeviri

Ardından, Sağ tarafta görünmesi için Bölücü Modülün konumunu da değiştireceğiz. Bu değerleri farklı ekran boyutlarıyla eşleştirdiğinizden emin olun.

• Alt: 25vw (Masaüstü), 27vw (Tablet ve Telefon)
• Sağ: 0px (Masaüstü), -32vw (Tablet ve Telefon)

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

Son olarak, dönüşüm döndürme ayarlarıyla oynayarak yatay bölücüyü dikey bölücüye çevireceğiz.

• Sol: 270 derece

Örnek 3'ü Yeniden Oluştur

Bölüm Taşması

Bir sonraki ve son örneğe geçelim! Yine, bölümün ana öğesine tek bir CSS kodu satırı ekleyerek hiçbir şeyin bölüm kapsayıcısını aşmadığından emin olun.

overflow: hidden;

Bölüm Başına Yeni Satır Ekle

Sütun Yapısı

Bölümün en üstüne yeni bir satır ekleyerek devam edin. Satırın en üste yerleştirilmesi önemlidir, böylece öğreticide daha sonra altındaki içerikle çakışmaz.

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve sütunun 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

Bölücü Modülü Ekle

görünürlük

Ardından Bölücü Modülünüzü ekleyin. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

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

Arka plan rengi

Arka plan ayarlarına geçin ve istediğiniz bir arka plan rengi ekleyin.

• Arka Plan Rengi: #d94144

Renk

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

• Renk: #f3f1f2

Stiller

Ve stil ayarlarında bölücü stilini değiştirin.

• Bölücü Stili: Noktalı

boyutlandırma

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

• Bölücü Ağırlığı: 4px
• Yükseklik: 0 piksel

aralık

Ve boşluk ayarlarında bazı üst ve alt dolguları kullanarak istediğiniz şekli oluşturun.

• Üst Dolgu: 3vw
• Alt Dolgu: 3vw

Kutu Gölge

Ayırıcıya ince bir kutu gölgesi vererek sayfamıza biraz derinlik katacağız.

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

dönüştürmek

Ölçeği Dönüştür

Bölücüyü şekillendirdiğimize göre artık onu dönüştürmeye başlayabiliriz. Yapacağımız ilk şey, dönüştürme ölçeği ayarlarında Bölücü Modülün boyutunu artırmak.

• Alt: 140%
• Sağ: %140

Dönüştür Çeviri

Ardından, transform translate ayarlarına gideceğiz ve Divider Module'ün konumunu değiştireceğiz. Satırı bölümün en üstüne yerleştirmek, onun altındaki satırdan daha düşük bir z-endeksini korumamıza yardımcı olur, bu da bu güzel örtüşmeyi yaratır!

• Alt: 4vw
• Sağ: 16vw (Masaüstü), 26vw (Tablet), 35vw (Telefon)

Ön izleme

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

masaüstü

Mobil

Son düşünceler

Bu gönderide, arka plan şekilleri oluşturmak ve sayfalarınızın genel görünümünü ve hissini geliştirmek için Bölücü Modülü ve Divi'nin yeni dönüştürme seçeneklerini nasıl kullanacağınızı gösterdik. Bu eğitim, devam eden Divi tasarım girişimimizin bir parçasıdır ve her hafta tasarım araç kutunuza fazladan bir şey koymaya çalışıyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!