Çarpıcı Bir Takım Bölümü Oluşturmak için Divi'nin Yeni Opaklık Filtresi Seçeneği Nasıl Kullanılır

Divi'nin yerleşik seçenekleri, sonsuz çarpıcı ve benzersiz tasarımlar oluşturmanıza olanak tanır. Ne tür bir web sitesi kuruyor olursanız olun, ayarları web sitenizin ve ziyaretçilerinizin ihtiyaçlarını sorunsuz bir şekilde karşılayacak şekilde ayarlayabilirsiniz. Bu gönderide, özellikle, bir sonraki projeniz veya kendi web siteniz için güzel bir ekip bölümü elde etmek için yeni opaklık filtresini nasıl kullanacağınızı göstereceğiz. Bu öğreticiyi iyi bir sona getirmek için aşağıdakilere ihtiyacınız olacak:

• Tüm satır(lar)ınızın bir parçası olacak ince bir arka plan resmi
• İnce bir arka plana, '800 piksel' genişliğe ve '455 piksel' yüksekliğe sahip ekip üyesi resimleri

Sonuç

Öğreticiye dalmadan önce, adım adım nasıl yeniden oluşturacağınızı göstereceğimiz örneğe bir göz atalım.

Masaüstünde

Tablette

Mobilde

Standart Bölüm Ekle

Arka plan rengi

Yapmanız gereken ilk şey, mevcut veya yeni bir sayfaya yeni bir standart bölüm eklemektir. Yeni bölümü ekledikten sonra, arka plan rengini '#a8a8a8' veya Arka Plan alt kategorisinde istediğiniz herhangi bir renkle değiştirin.

aralık

Ardından, bölümünüzün Tasarım sekmesine gidin ve Aralık alt kategorisine aşağıdaki özel dolguyu ekleyin:

• Üst: 115 piksel
• Sağ: 0 piksel
• Alt: 115 piksel
• Sol: 0 piksel

Satır ekle

Sütun Yapısı

Bölümünüze iki eşit sütunlu yeni bir satır ekleyerek devam edin.

Arka plan rengi

Satır ayarlarını açın ve satır arka plan rengi olarak '#666666'yı seçin.

Arka plan görüntüsü

Ardından, ince bir gradyan arka planı ekleyin ve aşağıdaki ayarları uygulayın:

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Yer Paylaşımı

hizalama

Tasarım sekmesine gidin ve ardından bir orta Satır Hizalama kullanın.

boyutlandırma

Ardından, Boyutlandırma alt kategorisini açın, Özel Cilt Payı Genişliği'ni etkinleştirin ve satırınızın Cilt Payı Genişliği için '1' değerini kullanın.

aralık

Ardından, Aralık alt kategorisine geçin ve tüm dolgu seçeneklerinin '0px' olarak ayarlandığından emin olun. Bu, bu yazının altındaki satırı klonladığınızda, satırlarınız arasında boşluk kalmamasını sağlayacaktır.

Kutu Gölge

Son olarak, satırınıza aşağıdaki kutu gölgesini ekleyin:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Kutu Gölge Bulanıklığı Gücü: 18 piksel
• Kutu Gölge Yayılma Gücü: 0px
• Gölge Rengi: rgba(0,0,0,0.71)

İlk Metin Modülü

Metin Ayarları

Satır ayarlarınızla işiniz bittiğinde, çeşitli modülleri her iki sütuna da eklemeye başlayabilirsiniz. Aşağıdaki metin ayarlarıyla ilk sütuna bir Metin Modülü ekleyerek başlayın:

• Metin Yazı Tipi: Varsayılan
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Boyutu: 11px
• Metin Rengi: #dbdbdb
• Metin Yönü: Merkez

boyutlandırma

Ardından Boyutlandırma alt kategorisini açın ve aşağıdaki değişiklikleri yapın:

• Genişlik: %61
• Modül Hizalaması: Merkez

aralık

Son olarak, Aralık alt kategorisine '60 piksel'lik bir üst dolgu ekleyin.

İkinci Metin Modülü

Metin Ayarları

Oluşturduğunuz önceki Metin Modülünün hemen altına, aşağıdaki metin ayarlarıyla başka bir Metin Modülü ekleyin:

• Yazı Tipi: Aladin
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Boyutu: 70px
• Metin Rengi: #FFFFFF
• Metin Yönü: Merkez

aralık

Aralık alt kategorisine geçin ve aşağıdaki özel dolguyu da kullanın:

• Üst: 50 piksel
• Alt: 0px (Masaüstü), 120px (Tablet ve Telefon)

Filtreler

Son olarak, satır arka planınızı ve Görüntü Modülünüzü birlikte eritmek için Filtre alt kategorisindeki opaklık filtresi seçeneğini '%40' olarak değiştirin.

Görüntü Modülü

Görüntü Boyutları

Bu gönderinin girişinde belirtildiği gibi, bu eğitimin parçası olan ekip üyesi resimleri için belirli resim boyutları kullanacağız. Aynı sonucu elde etmek için "800 piksel" genişlik ve "455 piksel" yükseklik kullanın. Devam edin, ikinci sütuna bir Resim Modülü ekleyin ve ekip üyelerinizden birinin resmini yükleyin.

Filtreler

Ardından Tasarım sekmesine gidin ve Filtreler alt kategorisini açın. İstediğiniz sonucu elde edene kadar sahip olduğunuz farklı seçeneklerle oynayın. Bu örnekte, Görüntü Modülünde aşağıdaki değişiklikleri yaptık:

• Kontrast: %122
• Opaklık: %45

Klon Satırı

Şimdi, bir satırı tamamen bitirdikten sonra, satırın ikinci versiyonunu oluşturmak için onu klonlayabilirsiniz.

Arka Plan Rengini Değiştir

Değiştireceğimiz klonlanmış satırın ilk şeyi arka plan rengidir. Satırları birbirinden biraz farklı kılmak için biraz daha açık bir arka plan kaplama rengi olan '#adadad' seçiyoruz.

Modüllerin Konumunu Değiştir

Ayrıca modüllerimizin konumunu da değiştireceğiz. Görüntü Modülünüzü ilk sütuna ve her iki Metin Modülünü de ikinci sütuna yerleştirin.

Resmi değiştir

Ardından, Görüntü Modülünüz için kullandığınız görüntüyü değiştirin. Bu resmin önceki resminizle aynı boyutlara sahip olduğundan emin olun (tercihen "800 piksel" genişlik ve "455 piksel" yükseklik).

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

Bu satır için daha açık bir arka plan kaplaması kullandığımızdan, metnin okunabilir kalması için daha koyu bir metin rengi kullanmamız gerekecek. İlk Metin Modülünün rengini '#5b5b5b' olarak değiştirin.

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

İkinci Metin Modülünün de daha koyu olması gerekiyor, onu '#000000' olarak değiştirin. Opaklık filtresini ekledikten sonra metnimizin hala okunabilir olduğundan emin olmak için en koyu rengi kullanıyoruz.

Satırları Gerektiği Kadar Kez Klonlayın

Artık, sayfanızda sergilemek istediğiniz ekip üyesi sayısıyla eşleşmesi için her iki satırı da gerektiği kadar çoğaltabilirsiniz. Satır ayarlarına eklediğimiz özel dolgu, ne kadar benzer satır kullanırsanız kullanın, yine de bir varlık gibi görünmesini sağlayacaktır.

Sonuç

Bu gönderide nasıl yeniden oluşturacağınızı gösterdiğimiz örneğe son bir göz atalım.

Masaüstünde

Tablette

Mobilde

Son düşünceler

Bu gönderide, bir sonraki projeniz veya kendi web siteniz için çarpıcı bir ekip bölümü oluşturmak için Divi'nin yeni opaklık filtresi seçeneğini nasıl kullanacağınızı gösterdik. Nasıl yeniden oluşturacağınızı gösterdiğimiz örnek, yazılı içerik ve görsellik arasında büyük bir dengeye sahiptir. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!