Divi ile Arka Plan Görüntü Maskeleri Olarak Degrade Arka Planlar Nasıl Kullanılır

Photoshop gibi görüntü düzenleme yazılımlarına aşinaysanız, muhtemelen maskelere de aşinasınızdır. Maskeler, iki katmanı bir araya getirmenize ve benzersiz bir sonuç oluşturmanıza yardımcı olur. Divi ile yaratıcı olabilir ve arka plan resimleriyle birlikte degrade arka planları kullanarak sayfalarınızın içinde kendi tür maskelerinizi oluşturabilirsiniz. Bu eğitimde, üzerinde çalıştığınız her türlü tasarım için 8 farklı arka plan maskesinin nasıl oluşturulacağını adım adım göstereceğiz. Bu eğitim, herhangi bir resim düzenleme yazılımına dokunmak zorunda kalmadan sayfalarınızda hızlı tasarım değişiklikleri yapmanıza yardımcı olacaktır.

Hadi hadi bakalım!

Ön izleme

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

Hadi Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

aralık

Sayfanıza yeni bir bölüm ekleyin, bölüm ayarlarını açın ve bazı özel üst ve alt dolgular ekleyin.

• Üst Dolgu: 150 piksel
• Alt Dolgu: 150 piksel

Yeni Satır Ekle

Sütun Yapısı

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

1 Numaraya Bulanıklık Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! Toplamda 8 Blurb Modülüne ihtiyacımız olacak. İlki ile başlayacağız, genel değişiklikleri yapacağız ve her Blurb Modülünde benzersiz değişiklikler yapmadan önce 7 kez klonlayacağız. İlk sütuna yeni bir Blurb Modülü ekleyin ve istediğiniz içeriği ekleyin.

Metin Ayarları

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

• Metin Yönü: Merkez
• Metin Rengi: Koyu

Başlık Metni Ayarları

Başlık metni ayarlarını da açın ve etrafındakileri değiştirin.

• Başlık Yazı Tipi: Antik Didone
• Başlık Metin Boyutu: 23px
• Başlık Satırı Yüksekliği: 1.5em

Kutu Gölge

Son olarak, Blurb Module'e de ince bir kutu gölgesi ekleyin.

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

Blurb Modülünü 7 Kez Klonla ve İkinci Sütuna 4 Kopya Yerleştir

Tüm genel değişiklikleri yaptıktan sonra, Blurb Modülünü 7 kez klonlayabilirsiniz. Dört kopyayı satırın ikinci sütununa yerleştirin ve üçünü ilk sütunda bırakın.

Blurb Modülünü Değiştir #1

Degrade Arka Plan

Artık Blurb Modüllerinin her birine benzersiz ayarlar eklemeye başlayabiliriz. Sütun 1'deki ilk Blurb Modülünü açın ve buna degrade bir arka plan ekleyin.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Alt
• Başlangıç ​​Konumu: %45
• Bitiş Konumu: %45
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Degrade arka planı ekledikten sonra arka plan görüntüsünü de ekleyebilir ve aşağıdaki arka plan ayarlarıyla birleştirebilirsiniz:

• Arka Plan Resmi Konumu: Üst Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok

aralık

Son olarak, her şeyin yerine oturması için biraz özel dolgu ekleyin.

• Üst Dolgu: 100 piksel
• Alt Dolgu: 350px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Blurb Modülü #2'yi Değiştirin

Degrade Arka Plan

Bir sonraki Blurb Modülüne geçelim (ikinci sütundaki ilk modül) ve bir degrade arka planı ekleyelim.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Sağ Üst
• Başlangıç ​​Konumu: %45
• Bitiş Konumu: %45
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Aşağıdaki arka plan ayarlarıyla birleştirilmiş bir arka plan resmi ekleyerek devam edin.

• Arka Plan Resmi Konumu: Sağ Üst
• Arka Plan Resmi Tekrarı: Tekrar Yok

aralık

Ve boşluk ayarlarına özel dolgu değerleri ekleyerek tasarımı tamamlayın.

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

Blurb Modülü #3'ü Değiştirin

Degrade Arka Plan

Üçüncü Blurb Modülüne (ilk sütundaki ikinci tanıtım modülü) geçiyoruz. Ayarları açın ve bir degrade arka planı ekleyin.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Sol Üst
• Başlangıç ​​Konumu: %45
• Bitiş Konumu: %45
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Daha sonra bir arka plan resmi ekleyerek devam edin.

• Arka Plan Resmi Konumu: Sol Üst
• Arka Plan Resmi Tekrarı: Tekrar Yok

aralık

Ve modüle şeklini alması için bazı özel dolgular ekleyin.

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

Blurb Modülü #4'ü Değiştirin

Degrade Arka Plan

İkinci sütundaki ikinci modüle geçin! Blurb Module'ün ayarlarını açın ve degrade bir arka plan ekleyin.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Üst
• Başlangıç ​​Konumu: %45
• Bitiş Konumu: %45
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Daha sonra bir arka plan resmi ekleyerek devam edin.

• Arka Plan Resmi Konumu: Üst Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok

aralık

Ve boşluk ayarlarına özel dolgu değerleri ekleyerek tasarımı tamamlayın.

• Üst Dolgu: 350px
• Alt Dolgu: 100px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Blurb Modülü #5'i Değiştirin

Degrade Arka Plan

İlk sütundaki üçüncü modül olan bir sonraki modüle geçin. Modülü açın ve bir degrade arka planı ekleyin.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Sol
• Başlangıç ​​Konumu: %35
• Bitiş Konumu: %35
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Aşağıdaki arka plan ayarlarıyla birlikte bir arka plan resmi ekleyerek devam edin:

• Arka Plan Resmi Konumu: Sol Üst
• Arka Plan Resmi Tekrarı: Tekrar Yok

aralık

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

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

Blurb Modülü #6'yı Değiştirin

Degrade Arka Plan

İkinci sütundaki üçüncü modüle geçin! Ayarları açın ve bir degrade arka planı ekleyin.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #ffffff
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 140deg
• Başlangıç ​​Konumu: %60
• Bitiş Konumu: %60
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Sonraki eşleşen arka plan ayarlarıyla bir arka plan resmi ekleyin.

• Arka Plan Resmi Konumu: Üst Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok

aralık

Ve boşluk ayarlarında bazı özel dolgu değerleri kullanarak tasarımı tamamlayın.

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

Blurb Modülü #7'yi Değiştirin

Degrade Arka Plan

Sütun 1'deki sonraki Blurb Modülü aşağıdaki gradyan arka planını kullanır:

• Renk 1: rgba(255,255,255,0)
• Renk 2: #ffffff
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 220deg
• Başlangıç ​​Konumu: %60
• Bitiş Konumu: %60
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Bir arka plan resmi de ekleyin.

• Arka Plan Resmi Konumu: Üst Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok

aralık

Ve boşluk ayarlarına gerekli özel dolgu değerlerini ekleyin.

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

Blurb Modülü #8'i Değiştirin

Degrade Arka Plan

Son Blurb Modülüne! Ayarları açın ve bir degrade arka planı ekleyin.

• Renk 1: rgba(255,255,255,0)
• Renk 2: #ffffff
• Gradyan Türü: Radyal
• Radyal Yön: Sağ
• Başlangıç ​​Konumu: %35
• Bitiş Konumu: %35
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Sonraki arka plan resmini yükleyin.

• Arka Plan Resmi Konumu: Sol Üst
• Arka Plan Resmi Tekrarı: Tekrar Yok

aralık

Modülün boşluk ayarlarına bazı özel dolgular ekleyerek tasarımı ve öğreticiyi tamamlayın.

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

Ön izleme

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

Son düşünceler

Bu eğitimde, Divi'nin yerleşik seçenekleriyle nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, arka plan maskeleri oluşturmak için radyal arka planlar ve arka plan görüntüleri kullandık. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!