Arka plan maskesi ayarlarını ve desen dönüştürme seçeneklerini birleştirmek ister misiniz? Divi benzersiz arka planlar oluşturmak için?

Arka plan tasarımları, Site Web görsel yetenek ve kalabalığın arasından sıyrılın. Yeni Arka Plan Maskesi ve Desen Dönüştürme ayarları, Divi bu arka plan desenlerini oluşturmak için birçok şekilde birleştirilebilir. 

Bu yazıda, arka plan maskesi ve desen dönüştürme ayarlarının nasıl kullanılacağını göreceğiz. Divi düzenleriniz için ilginç arka planlar oluşturmak için Divi.

Başlayalım.

anket

İlk olarak, farklı ekran boyutlarında (telefon ve masaüstü) her örneğin bir önizlemesini burada bulabilirsiniz.

Ayrıca Oku: Divi: Etkileşimli içerik oluşturmak için gölge ve vurgu efektleri nasıl kullanılır?

Örnek 1

Masaüstünde Sürüm 1

Telefonda sürüm 1

DIVI'yı Şimdi İndirin !!!

Masaüstünde Sürüm 2

Telefonda sürüm 2

Örnek 2

Masaüstünde Sürüm 1

Telefonda sürüm 1

DIVI'yı Şimdi İndirin !!!

Masaüstünde Sürüm 2

Telefonda sürüm 2

Örnek 3

Masaüstünde Sürüm 1

Telefonda Sürüm 1

DIVI'yı Şimdi İndirin !!!

Masaüstünde Sürüm 2

Telefonda sürüm 2

Divi Arka Plan Maskesi ve Desen Dönüştürme Seçenekleri

Divi'nin yeni maskesi ve arka plan deseni özellikleri, bunları ayarlamak için çeşitli seçenekler içerir. Ayarlamalar, yatay ve dikey çevirme, döndürme ve ters çevirmeyi içerir. Seçenekleri görmek için bir bölümün veya çizginin arka plan ayarlarına gidin ve Arka plan deseni veya Arka plan maskesi sekmelerini seçin.

Bir desen veya maske ekledikten sonra dönüştürme ayarları görünür. Kullanmak istediğiniz seçeneklere tıklamanız yeterlidir. Bunları birlikte ve istediğimiz kombinasyonda kullanabiliriz.

Divi's Mask ve Pattern Transform Ayarları Nasıl Çalışır?

Aşağıdaki desen, varsayılan ayarlarla Zig Zag'dir.

Divi Arka Plan Maskesi ve Desen Dönüştürme Seçenekleri

Aşağıdaki resimde Layer Blog mask ekliyoruz. Arka Plan Maskesi ve Desen Dönüştürme ayarlarının nasıl çalıştığını göstermek için bunları kullanalım.

Divi Arka Plan Maskesi ve Desen Dönüştürme Seçenekleri

Yatay dönüş

Yatay dönüş budur. Dönüştürme ayarlarını hem desene hem de maskeye uyguladık.

Yatay dönüş

Dikey çevirme

Bu, desen ve maske için dikey çevirmedir.

Dikey çevirme

rotasyon

Bu, desen ve maske için Döndürmeyi gösterir.

dönüm

Ters

Bu örnek, desen ve maske için Ters Çevir'i gösterir.

Ters

Arka plan maskesi ve desen dönüştürme kombinasyonları

Elbette dönüşüm parametrelerini çeşitli kombinasyonlarda da kullanabiliriz. İşte bazı örnekler.

Bu, deseni döndürür ve maskeyi tersine çevirir.

Arka plan maskesi ve desen dönüştürme kombinasyonları

Bu örnek, arka plan deseni için dikey çevirme, döndürme ve ters çevirme kullanır. Arka plan maskesi yatay çevirme, dikey çevirme ve döndürme kullanır.

Arka plan maskesi ve desen dönüştürme kombinasyonları

Bu örnekte, arka plan deseni için yatay çevirme ve döndürme ve arka plan maskesi için dikey çevirme ve döndürme kullandık.

Arka plan maskesi ve desen dönüştürme kombinasyonları

Arka plan maskesi ve desen dönüştürme ayarları örnekleri

Şimdi bu ayarların Divi düzenleriyle nasıl kullanılabileceğini görelim. Başlangıç ​​noktası olarak bir bölümü kullanacağız ve üç örnek oluşturacağız. Bunu özelleştireceğiz ve ardından her örnek için değiştirmek üzere dönüştürme ayarlarını kullanacağız.

Örneklerimiz için, mizanpaj açılış sayfasının Kahraman bölümünün değiştirilmiş bir sürümünü kullanıyoruz. Emlak Planlama Divi'de mevcuttur. 

İşte söz konusu bölüme genel bir bakış. Arka plan rengini kullanır: #92a5ab.

  • Arka plan: #92a5ab
Arka plan maskesi ve desen dönüştürme ayarları örnekleri

Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 1

İlk örneğimiz bize ekranın ortasına dikey olarak oturan bir kemer veriyor. Ekranın bir tarafı püsküllü bir desene sahiptir. Ardından, yay diğer yöne bakacak şekilde alternatif bir sürüm oluşturacağız.

arka plan deseni

Bölüm ayarlarını açın, aşağı kaydırın Olayın Arka Planı ve sekmeyi seçin Arka Plan Deseni. Arka plan deseni için Tufted'i ve Desen Dönüşümü için Ters Çevirme'yi seçin.

  • Arka Plan Deseni: Tepeli
  • Desen Dönüşümü: Ters
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 1

Arka plan maskesi

Sekme seç Arka Plan Maskesi ve Seç Kemer arka plan maskesi için. Maske rengini #616d72 olarak değiştirin ve maske dönüşümünü Ters Çevir olarak ayarlayın. Bu, püsküllü pruvanın ilk versiyonunu tamamlıyor.

  • Arka Plan Maskesi: Kemer
  • Maske Rengi: #616d72
  • Maske Dönüşümü: Ters Çevir
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 1

Örnek 1 Sürüm 2

Ardından, tasarımımızın bir varyasyonunu oluşturalım. sadece değiştir maske dönüşümü yatay çevirme ve dikey çevirmede arka plan deseni için. Bu, yayı diğer yöne bakacak şekilde değiştirir ve deseni dengeler, böylece sadece bir ayna görüntüsü gibi görünmez.

  • Maske Dönüşümü: yatay çevir, dikey çevir
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 1

Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 2

İkinci örneğimiz için, ekranın ortasında ovalin içinde bir desen bulunan bir oval oluşturacağız. Ardından, desenin yerleşimini değiştireceğiz. Bunu farklı ekran boyutları için de değiştireceğiz.

Arka plan deseni

Arka plan ayarlarında sekmeyi seçin Arka Plan Deseni ve Seç Shippo motif için. Desen dönüşümünü Ters Çevir olarak ayarlayın.

  • Desen Arka Planı: Shippo
  • Desen Dönüşümü: Ters
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 2

Arka plan maskesi

Ardından sekmeyi seçin Arka Plan Maskesi ve aşağıdaki ayarları değiştirin.

  • Arka Plan Maskesi: Elips
  • Renk: #758489
  • Maske Dönüşümü: yatay çevirme, döndürme
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 2
Tablet ve telefon

Hem tablet hem de telefon aynı ayarları kullanacağından sadece tablet ayarlarını değiştirmemiz gerekecek. seçin Tablet sekmesi ve değiştir maske dönüşümü yatay dönüşte.

  • Maske Dönüşümü: yatay çevirme, ters çevirme
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 2

Örnek 2 Sürüm 2

Ardından, ikinci örneğimiz için varyasyonu oluşturacağız. İlk önce sekmeyi seçin Arka Plan Deseni ve Desen Rengi'ni rgba(0,0,0,0.06) olarak ayarlayın.

  • Desen Rengi: rgba(0,0,0,0.06)
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 2

Ardından sekmeyi seçin Arka Plan Maskesi ve maske dönüşümü için Yatay Çevir, Döndür ve Ters Çevir'i seçin.

  • Maske Dönüşümü: yatay çevirme, döndürme, ters çevirme
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 2
Tablet ve telefon

Tablet ve telefon seçenekleri için simgesini seçin. tablet . Değiştirmek maske dönüşümü yatay ters çevirme ve ters çevirme. İkinci örneğin alternatif versiyonu şimdi tamamlandı.

  • Maske Dönüşümü: yatay çevirme, ters çevirme
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 2

Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 3

Üçüncü maske ve desen dönüştürme ayarları örneğimiz için, boya maskeli bir petek deseni kullanacağız. Bunun için ayrıca bir mobil sürüm oluşturacağız.

arka plan deseni

İlk önce Cihaz Ayarları sekmesini seçin ve Cihaz simgesini seçin. çalışma masası. Sekme seç Arka Plan Deseni ve arka plan deseni için Petek'i seçin. Rengi rgba(0,0,0,0.42) olarak değiştirin. Bunun için seçenekleri bırakacağız Desen Dönüşümü devre dışı bırakıldı. Bunları alternatif sürüm için ekleyeceğiz.

  • Arka Plan Deseni: Petek
  • Desen Rengi: rgba(0,0,0,0.42)
  • Desen Dönüşümü: yok
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 3

Arka plan maskesi

Ardından sekmeyi seçin Arka Plan Maskesi. Seçmek Boya arka plan maskesi için. Rengi #697b82 olarak değiştirin. Maske dönüşümü için Dikey Çevir'i seçin.

  • Arka Plan Maskesi: Boya
  • Maske Rengi: #697b82
  • Maske Dönüşümü: dikey çevirme
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 3

Sonra seçin kapak boyut için. Bu, birkaç seçenek daha açar. Seçmek Sağ alt konum için. Masaüstü sürümü için bu kadar. Ardından, mobil sürümü oluşturacağız.

  • Maske Boyutu: Kapak
  • Maske Konumu: Sağ Alt
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 3
Tablet ve telefon

Ardından sekmeyi seçin tablet ve dönüşümünü değiştirmek maskeli piyes dikey çevirme ve döndürmede arka plan. Bu, üçüncü örneğimizin stilini tamamlıyor. Ardından, alternatif sürümü oluşturacağız.

  • Maske Dönüşümü: dikey çevirme, döndürme
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 3

Örnek 3 Sürüm 2

Bu örneğin alternatif versiyonu için hem arka plan desenini hem de arka plan maskesini ayarlayacağız.

arka plan deseni

Arka plan deseni için desen rengini rgba(0,0,0,0.11) olarak değiştirin. Yatay çevirmek, dikey çevirmek ve döndürmek için desen dönüşümünü değiştirin.

  • Maske Rengi: rgba(0,0,0,0.11)
  • Maske Dönüşümü: yatay çevirme, dikey çevirme, döndürme
Divi desen dönüştürme seçenekleri
arka plan maskesi

Ardından sekmeyi seçin Arka Plan Maskesi. Rengi beyaza ve maskenin dönüşümünü yatay çevirme, dikey çevirme ve ters çevirme olarak değiştirin.

  • Maske Rengi: #ffffff
  • Maske Dönüşümü: yatay çevirme, dikey çevirme, ters çevirme
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 3

Ardından, kaplanacak maskenin boyutunu değiştirin, ardından maskenin konumu için Merkez'i seçin.

  • Maske Boyutu: Kapak
  • Maske Konumu: Merkez
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 3
Tablet ve telefon

Son olarak sekmeyi seçin Tablet mobil sürümü oluşturmak için. Sekme seç arka plan maskesi ve dört maske dönüştürme seçeneğini seçin. Bu, üçüncü örneğin alternatif versiyonunu tamamlar.

  • Maske Dönüşümü: yatay çevirme, dikey çevirme, döndürme, ters çevirme
Arka Plan Maskesi ve Desen Dönüştürme Parametreleri Örnek 3

Nihai sonuçlar

Burada, farklı ekran boyutlarında (Masaüstü ve Telefon) her bir örneğe genel bir bakış yer almaktadır.

Örnek 1

Masaüstünde Sürüm 1

Telefonda Sürüm 1

Masaüstünde Sürüm 2

Telefonda sürüm 2

Örnek 2

Masaüstünde Sürüm 1

Telefonda Sürüm 1

arka plan maskesi ayarlarını ve Divi desen dönüştürme seçeneklerini birleştirin

Masaüstünde Sürüm 2

arka plan maskesi ayarlarını ve Divi desen dönüştürme seçeneklerini birleştirin

Telefonda Sürüm 2

arka plan maskesi ayarlarını ve Divi desen dönüştürme seçeneklerini birleştirin

Örnek 3

Masaüstünde Sürüm 1

arka plan maskesi ayarlarını ve Divi desen dönüştürme seçeneklerini birleştirin

Telefonda Sürüm 1

arka plan maskesi ayarlarını ve Divi desen dönüştürme seçeneklerini birleştirin

Masaüstünde Sürüm 2

arka plan maskesi ayarlarını ve Divi desen dönüştürme seçeneklerini birleştirin

Telefonda Sürüm 2

arka plan maskesi ayarlarını ve Divi desen dönüştürme seçeneklerini birleştirin

DIVI'yı Şimdi İndirin !!!

Ayrıca bakınız: Divi: Atlıkarınca olarak ekip üyeleri bölümü nasıl oluşturulur

Sonuç

Bu, birçok ilginç arka plan deseni oluşturmak için Divi'nin arka plan maskesini ve desen dönüştürme ayarlarını nasıl kullanacağımıza bakışımızdır. 

Kalıplar ve maskeler birlikte kullanılabildiğinden dönüştürme ayarları da birlikte kullanılabilir. Bu, size daha da fazlasını vererek birçok tasarım seçeneğini açararaçları Divi arka planlarınıza zarafet katmak için. 

Bunları nasıl kullanacağınızı öğrenmenin en iyi yolu, ayarlamalarla oynamak ve neler yaratabileceğinizi görmektir.

Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.

Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...