Divi'nin Arka Plan Maskesi ve Desen Dönüştürme Ayarları Nasıl Kullanılır

Yayınlanan: 2022-05-21

Arka plan desenleri, web sitenize biraz görsel yetenek kazandırmanın ve kalabalığın arasından sıyrılmanın harika bir yoludur. Divi'nin yeni arka plan maskesi ve desen dönüştürme ayarları, bu arka plan desenlerini oluşturmak için birçok şekilde birleştirilebilir. Bu gönderide, Divi mizanpajlarınız için bazı ilginç arka planlar oluşturmak için Divi'nin arka plan maskesini ve desen dönüştürme ayarlarını nasıl kullanacağınızı göreceğiz.

Başlayalım.

Ön izleme

İlk olarak, masaüstü, telefon ve her biri için alternatif seçeneklerle her örneğe bir göz atın.

Örnek Bir Sonuçlar

Normal Sürüm Masaüstü

Normal Sürüm Telefon

Alternatif Sürüm Masaüstü

Alternatif Sürüm Telefon

Örnek İki Sonuç

Normal Sürüm Masaüstü

Normal Sürüm Telefon

Alternatif Sürüm Masaüstü

Alternatif Sürüm Telefon

Örnek Üç Sonuç

Normal Sürüm Masaüstü

Normal Sürüm Telefon

Alternatif Sürüm Masaüstü

Alternatif Sürüm Telefon

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

Divi'nin yeni arka plan maskesi ve desen ö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 satırın Arka Plan ayarlarına gidin ve Arka Plan Deseni veya Arka Plan Maskesi sekmelerini seçin.

Bir desen veya maske eklediğinizde dönüştürme ayarları görünecektir. Kullanmak istediğiniz seçenekleri 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 bir Layer Blog maskesi ekledim. Bunları, arka plan maskesi ve desen dönüştürme ayarlarının nasıl çalıştığını göstermek için kullanalım.

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

Yatay Çevirme

Bu Yatay Çevirme. Dönüştürme ayarlarını hem desene hem de maskeye uyguladım.

Yatay Çevirme

Dikey Çevirme

Bu, desen ve maske için Dikey Çevirme'dir.

Dikey Çevirme

Dönen

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

Dönen

ters çevirme

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

ters çevirme

Arka Plan Maskesi ve Desen Dönüşüm Kombinasyonları

Elbette dönüştürme ayarlarını çeşitli kombinasyonlarda da kullanabiliriz. İşte birkaç örnek.

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

Arka Plan Maskesi ve Desen Dönüşüm 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üşüm 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ım.

Arka Plan Maskesi ve Desen Dönüşüm 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ıç ​​noktamız olarak bir bölüm kullanacağız ve üç örnek oluşturacağız. Biçimlendireceğiz ve ardından her örnek için değiştirmek için dönüştürme ayarlarını kullanacağız.

Örneklerim için, Divi'de bulunan Emlak Planlama açılış sayfasındaki kahraman bölümünün değiştirilmiş bir sürümünü kullanıyorum. İşte bölümüme bir göz atın. Değişiklik, ihtiyaçlarımız için kahraman bölümünü basitleştirir. Arka Plan Rengi Arka Planı 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 Ayarları Örnek Bir

İ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, kemer diğer yöne bakacak şekilde alternatif bir versiyon oluşturacağız.

Arka Plan Deseni

Bölüm ayarlarını açın, Arka Plan'a gidin ve Arka Plan Deseni sekmesini seçin. Arka Plan Deseni için Tufted'i ve Desen Dönüşümü için Ters Çevirmeyi seçin.

  • Arka Plan Deseni: Tepeli
  • Desen Dönüşümü: Ters Çevirme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek Bir

Arka Plan Maskesi

Arka Plan Maskesi sekmesini seçin ve Arka Plan Maskesi için Kemer'i seçin. Maske Rengini #616d72 olarak değiştirin ve Maske Dönüşümünü Ters Çevirmeye ayarlayın. Bu, püsküllü kemerin ilk versiyonunu tamamlıyor.

  • Arka Plan Maskesi: Kemer
  • Renk: #616d72
  • Maske Dönüşümü: Ters Çevirme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek Bir

Örnek Bir Varyasyon

Ardından, tasarımımızın bir varyasyonunu oluşturalım. Arka Plan Deseni için Maske Dönüşümünü Yatay Çevirme ve Dikey Çevirme olarak değiştirmeniz yeterlidir. Bu, yayı diğer yöne bakacak şekilde değiştirir ve deseni değiştirir, böylece sadece bir ayna görüntüsü gibi görünmez.

  • Maske Dönüşümü: Yatay Çevirme, Dikey Çevirme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek Bir

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek İki

İ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 Arka Plan Deseni sekmesini seçin ve desen için Shippo'yu seçin. Desen Dönüşümünü Tersine Çevirmeye ayarlayın.

  • Arka Plan Deseni: Shippo
  • Desen Dönüşümü: Ters Çevirme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek İki

Arka Plan Maskesi

Ardından, Arka Plan Maskesi sekmesini seçin. Arka Plan Maskesi için Tutulma'yı seçin ve Arka Plan seçeneklerinin üzerine gelin. Görüntülenen tablet simgesini seçin. Bu, cihaz ayarlarını açar. Masaüstü ayarları için Renk'i #758489 olarak ayarlayın. Maske Dönüşümü için Yatay Çevirme ve Döndürme'yi seçin. Bu, masaüstü sürümünü tamamlar. Mobil sürüm için değiştirelim.

  • Arka Plan Maskesi: Tutulma
  • Renk: #758489
  • Maske Dönüşümü: Yatay Çevirme, Döndürme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek İki

Tablet ve Telefon

Tablet ve Telefon aynı ayarları kullanacağından, yalnızca Tablet ayarlarını değiştirmemiz gerekecek. Tablet sekmesini seçin ve Maske Dönüşümünü Yatay Çevirme olarak değiştirin.

  • Maske Dönüşümü: Yatay Çevirme, Ters Çevirme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek İki

Örnek İki Varyasyon

Ardından, ikinci örneğimiz için varyasyonu oluşturacağız. İlk olarak, Arka Plan Deseni sekmesini seçin 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 Ayarları Örnek İki

Ardından, Arka Plan Maskesi sekmesini seçin ve Maske Dönüşümü için Yatay Çevirme, Döndürme ve Ters Çevirme'yi seçin.

  • Maske Dönüşümü: Yatay Çevirme, Döndürme, Ters Çevirme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek İki

Tablet ve Telefon

Tablet ve telefon seçenekleri için tablet simgesini seçin. Maske Dönüşümünü Yatay Çevirme ve Ters Çevirme olarak değiştirin. İkinci örneğin alternatif versiyonu şimdi tamamlandı.

  • Maske Dönüşümü: Yatay Çevirme, Ters Çevirme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek İki

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek Üç

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

Arka Plan Deseni

İlk olarak, cihaz ayarları sekmesini seçin ve masaüstü simgesini seçin. Arka Plan Deseni sekmesini seçin ve Arka Plan Deseni için Petek'i seçin. Rengi rgba(0,0,0,0.42) olarak değiştirin. Bunun için, Desen Dönüştürme seçeneklerini devre dışı bırakacağız. 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 Ayarları Örnek Üç

Arka Plan Maskesi

Ardından, Arka Plan Maskesi sekmesini seçin. Arka Plan Maskesi için Paint'i seçin. Rengi #697b82 olarak değiştirin. Maske Dönüşümü için Dikey Çevirme'yi seçin.

  • Arka Plan Maskesi: Boya
  • Renk: #697b82
  • Maske Dönüşümü: Dikey Çevirme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek Üç

Ardından, Boyut için Kapak'ı seçin. Bu, birkaç seçenek daha açar. Konum için Sağ Alt'ı seçin. Masaüstü sürümü için bu kadar. Ardından, mobil sürümü oluşturacağız.

  • Boyut: Kapak
  • Pozisyon: Sağ Alt

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek Üç

Tablet ve Telefon

Ardından, tablet sekmesini seçin ve Arka Plan Maskesi Dönüşümünü Dikey Çevirme ve Döndürme olarak değiştirin. Bu, üçüncü örneğimizin stilini tamamlıyor. Ardından, alternatif sürümü oluşturacağız.

  • Arka Plan Maskesi Dönüşümü: Dikey Çevirme, Döndürme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek Üç

Örnek Üç Varyasyon

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 Rengi'ni rgba(0,0,0,0.11) olarak değiştirin. Desen Dönüşümünü Yatay Çevirme, Dikey Çevirme ve Döndürme olarak değiştirin.

  • Desen Rengi: rgba(0,0,0,0.11)
  • Desen Dönüşümü: Yatay Çevirme, Dikey Çevirme, Döndürme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek Üç

Arka Plan Maskesi

Ardından, Arka Plan Maskesi sekmesini seçin. Rengi beyaza ve Maske Dönüşümünü Yatay Çevirme, Dikey Çevirme ve Ters Çevirme olarak değiştirin.

  • Renk: #ffffff
  • Maske Dönüşümü: Yatay Çevirme, Dikey Çevirme, Ters Çevirme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek Üç

Ardından, Maske Boyutunu Kapak olarak değiştirin ve ardından Maske Konumu için Merkez'i seçin.

  • Maske Boyutu: Kapak
  • Maske Konumu: Merkez

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek Üç

Tablet ve Telefon

Son olarak, mobil sürümü oluşturmak için tablet sekmesini seçin. Arka Plan Maskesi sekmesini seçin ve Maske Dönüşümü için dört seçeneğin tümünü seçin. Bu, üçüncü örneğin alternatif sürümünü tamamlar.

  • Arka Plan Maske Dönüşümü: Yatay Çevirme, Dikey Çevirme, Döndürme, Ters Çevirme

Arka Plan Maskesi ve Desen Dönüştürme Ayarları Örnek Üç

Sonuçlar

Masaüstü, telefon ve her biri için alternatif seçeneklerle her örneğe bir göz atın.

Örnek Bir Sonuçlar

Normal Sürüm Masaüstü

Normal Sürüm Telefon

Alternatif Sürüm Masaüstü

Alternatif Sürüm Telefon

Örnek İki Sonuç

Normal Sürüm Masaüstü

Normal Sürüm Telefon

Alternatif Sürüm Masaüstü

Alternatif Sürüm Telefon

Örnek Üç Sonuç

Normal Sürüm Masaüstü

Normal Sürüm Telefon

Alternatif Sürüm Masaüstü

Alternatif Sürüm Telefon

Biten Düşünceler

Bu, birçok ilginç arka plan tasarımı oluşturmak için Divi'nin arka plan maskesini ve desen dönüştürme ayarlarını nasıl kullanacağımıza bakışımız. Kalıplar ve maskeler birlikte kullanılabildiği için dönüştürme ayarları da birlikte kullanılabilir. Bu, birçok tasarım seçeneği açar ve size Divi arka planlarınıza zarafet katmak için daha fazla araç sunar. Bunları kullanmayı öğrenmenin en iyi yolu, ayarlamalarla oynamak ve neler yaratabileceğinizi görmektir.

Senden duymak istiyoruz. Divi düzenlerinizde Divi'nin arka plan maskesini ve desen dönüştürme ayarlarını denediniz mi? Yorumlarda bize bildirin.