Divi ile İnce Arka Plan Desenli Maskeler Nasıl Oluşturulur (3 Örnek)

Divi'nin yeni arka plan deseni maskeleri, arka planlar için birçok tasarım seçeneği açtı. Çok sayıda benzersiz tasarım oluşturmak için arka plan renkleri ve desenleriyle harika çalışırlar. Bu yazıda, Divi ile ince arka plan deseni maskelerinin nasıl oluşturulacağını göreceğiz. Ayrıca ince bir maske kullanmanın avantajlarını tartışacağız ve üç örnek oluşturacağız.

Başlayalım.

Youtube Kanalımıza Abone Olun

Arka Plan Deseni Maske Önizlemesi

Tasarlamaya başlamadan önce, bu Divi eğitiminde ne inşa edeceğimize bir göz atın.

Arka Plan Desenli Maske Örnek Bir

Maske Örneği İki

Maske Örneği Üç

Arka Plan Maskesi Nasıl Oluşturulur

Arka plan maskesi, arka plan desenini kaplayacak ve desenin bölümlerinin görünmesine izin verecektir. Arka plan renkleri ve desenleriyle harika çalışıyor. Arka planı içeriğe uyacak şekilde ayarlayabilir, içeriği arka plana sığacak şekilde ayarlayabilir veya her ikisini de ayarlayabilirsiniz.

İlk olarak arka plan maskesini eklemek istediğiniz bölüm için ayarları açın.

Ardından, bölüm için bir arka plan rengi seçmeniz gerekecek. Arka Plan'a ilerleyin. Arka Plan sekmesi seçiliyken, renk seçiciden arka plan renginizi seçin .

Ardından, bir arka plan deseni seçmeniz ve boyutunu ve konumunu ayarlamanız gerekir. Arka Plan Deseni sekmesini seçin ve Arka Plan Deseni Ekle'yi tıklayın.

Bu, desen seçeneklerinin bir listesini açar. Listeden deseninizi seçin . Bölümü dolduracaktır.

Ardından, bir arka plan maskesi seçmeniz ve rengini ve ayarlarını tasarımınıza uyacak şekilde ayarlamanız gerekir. Arka Plan Maskesi sekmesini seçin ve Arka Plan Maskesi Ekle'yi tıklayın.

Maske seçenekleriyle başka bir modal açılacaktır. Listeden arka plan maskenizi seçin . Siz bir renk seçene kadar maske beyaz olacaktır.

İstediğiniz görünümü elde etmek için arka plan maskesi ayarlarını yapın. Maskenin boyutunu, konumunu, yönünü, dönüşünü ve daha fazlasını değiştirebilirsiniz. Bu ayarlarla oynamak, bazı ilginç tasarımlar oluşturmanıza yardımcı olabilir.

İşte herhangi bir modül olmadan az önce oluşturduğum arka plana bir bakış. Renkler benzer, ancak biraz öne çıkacak kadar farklılar. Bu, fazla dikkat dağıtmasını engeller.

İnce Bir Arka Plan Deseni Maskesi Nasıl Oluşturulur

Bir arka plan maskesi için en iyi tasarım direktiflerinden biri, onu ince yapmaktır. Sayfa tasarımının odak noktası olmamalıdır. Az miktarda görsel varyasyon oluşturmak için arka plan dokusu için kullanın. İçeriğiniz odak noktası olmalıdır. İçeriği desteklemeye yardımcı olması için arka plan maskesini kullanın. İnce bir arka plan deseni maskesi oluştururken göz önünde bulundurulması gereken birkaç nokta.

Eşleşen Renkleri Seçin

Desenleriniz ve maskeleriniz için bölümün arka plan renginden çok farklı olmayan renkler seçin. Renkler birbiriyle yüksek kontrasta sahip olmamalıdır. Renkler, maskeyi ve desenleri görebilecek kadar farklı olmalı, ancak baskın olacak kadar da değil. Desen ve arka plan için aynı rengi kullanın ve ardından maske için biraz daha açık veya daha koyu bir renk seçin.

Okunabilirlik için Ayarla

Tasarımınızda okunabilirliğe öncelik verin. Okunabilirlik, tasarımın iyi görünmesini sağlamaktan her zaman bir öncelik olmalıdır. Bir tasarımda iyi görünen ancak okunması zor olan içerik göz ardı edilir.

Farklı Desen Boyutları Deneyin

Ne oluşturabileceğinizi görmek için farklı desen boyutlarıyla oynayın. Özel boyutlar size tasarım üzerinde daha fazla esneklik sağlayabilir ve size daha benzersiz bir tasarım verebilir.

Tüm Arka Plan Maskesi Ayarlarını deneyin

Ne oluşturabileceğinizi görmek için tüm arka plan maskesi ayarlarıyla oynayın. Ayrıca, neyi sevdiğinizi görmek için ayarları arka plan deseni ayarlarıyla deneyin. Tüm bu ayarlar, bazı ilginç tasarımlar oluşturmak için birlikte çalışabilir.

İnce Arka Plan Deseni Maske Örnekleri

Şimdi, üç ince arka plan deseni maskesi örneğine bakalım. Divi'de bulunan ücretsiz Kurumsal açılış sayfasının kahraman bölümüne arka plan maskesini ekliyorum. Arka plan deseni maskelerini eklemeden önce orijinal sayfaya bir göz atın.

Ayrıca düğmelerin arka plan renklerini de değiştireceğiz. Aynı ince tasarım konseptlerini kullanarak, onları arka planda olduğundan daha fazla öne çıkaracağız. Ayırıcı, renk değiştirdiğini göreceğimiz başka bir öğedir, ancak bu öğe rengini arka plandan almak için saydamlığı kullanır, bu nedenle renginde değişiklik yapmamıza gerek kalmaz.

Arka Plan Desenli Maske Örnek Bir

Bu örnekte orijinal arka plan ve düğme renkleri kullanılacaktır.

Arka plan rengi

İlk örneğimiz için, bu düzenin orijinal Arka Plan Rengini kullanıyoruz – #1d1d25. Orijinal Düğme Rengini de koruyacağız – #4c594c

• Arka Plan Rengi: #1d1d25
• Düğme Rengi: #4c594c

Arka Plan Deseni

Arka Plan Deseni sekmesini seçin ve Çapraz Çizgiler 2'yi seçin. Desen Rengini #383838 olarak değiştirin.

• Arka Plan Deseni: Çapraz Çizgiler 2
• Desen Rengi: #383838
• Desen Boyutu: Gerçek Boyut
• Desen Tekrar Menşei: Sol Üst
• Desen Tekrarı: Tekrarla

Arka Plan Maskesi

Ardından, Arka Plan Maskesi sekmesini seçin. Caret'i seçin ve rengi #383838 olarak ayarlayın.

• Maske: Şapka
• Maske Rengi: #383838

Maske Rengi altında, yatay Dönüştür seçeneğini ve dikey En Boy Oranı'nı seçin. Bölümün ayarlarını kapatın ve çalışmanızı kaydedin.

• Dönüştür: Yatay
• En Boy Oranı: Uzun (portre)

Arka Plan Desenli Maske Örnek İki

İkinci örneğimiz için arka plan ve düğme renklerini mor olarak değiştireceğiz.

Arka plan rengi

Bölüm ayarlarını açın. Arka Plan Rengi sekmesinde olduğunuzdan emin olun ve Arka Plan Rengini #483c56 olarak değiştirin.

• Arka Plan Rengi: #483c56

Arka Plan Deseni

Ardından, Arka Plan Deseni sekmesini seçin ve Arka Plan Deseni için Tufted'i seçin. Desen Rengini #635c84 olarak değiştirin.

• Arka Plan Deseni: Tepeli
• Desen Rengi: #635c84

Ardından, Özel Boyut'u seçin. Bu, başka bir seçenek kümesi açar. Genişliği 10vw olarak değiştirin.

• Boyut: Özel Boyut
• Genişlik: 10vw
• Desen Tekrar Menşei: Sol Üst
• Desen Tekrarı: Tekrarla

Arka Plan Maskesi

Şimdi arka plan maskemizi kurma zamanı. Arka Plan Maskesi sekmesini seçin ve Arch adlı Maskeyi seçin. Rengini #67557a olarak değiştirin.

• Maske: Kemer
• Maske Rengi: #67557a

Ardından, Dönüştür seçeneklerini Yatay, Dikey ve Döndür olarak ayarlayın. En Boy Oranı için geniş veya yatay seçeneğini belirleyin. Bölümün ayarlarını kapatın.

• Dönüştür: Yatay, Dikey ve Döndür
• En Boy Oranı: Geniş (yatay)

Buton

Son olarak bu kahraman bölümündeki CTA butonunu ayarlayalım. Tasarımla bütünleşmesini istiyoruz, ama aynı zamanda öne çıkmasını da istiyoruz. Düğmenin ayarlarını açın. Yalnızca Arka Plan Rengini değiştirmemiz gerekecek. Arka plana benzer bir renk olabilir, ancak sayfada kaybolmaması için yeterince farklı olabilir. Arka plan için daha parlak bir renkle gideceğiz. Metin Rengini aynı bırakacağız.

Tasarım sekmesini seçin, Arka Plan seçeneğine ilerleyin ve Düğme Arka Plan Rengini #8b4dc1 olarak değiştirin. Bu bize istediğimiz kontrastı sağlar ve mor arka planla harika çalışır. Düğmenin ayarlarını kapatın ve sayfanızı kaydedin.

• Düğme Arka Plan Rengi: #8b4dc1

Arka Plan Desenli Maske Örneği Üç

Üçüncü örneğimiz için, önceki iki örnekle aynı kavramları kullanarak arka plan ve düğme renklerini yeşile çevireceğiz.

Arka plan rengi

İlk olarak, bölümün ayarlarını açın. Arka Plan Rengi sekmesi seçiliyken, Arka Plan Rengini #497762 olarak değiştirin.

• Arka Plan Rengi: #497762

Arka Plan Deseni

Ardından, Arka Plan Deseni sekmesini seçin, Kareler'i seçin ve Rengi #3a604e olarak değiştirin. Kareleri orijinal boyutlarında bırakacağız ve çoğunun üzerine maske uygulayacağız.

• Arka Plan Deseni: Kareler
• Desen Rengi: #3a604e
• Desen Boyutu: Gerçek Boyut
• Desen Tekrar Menşei: Sol Üst
• Desen Tekrarı: Tekrarla

Arka Plan Maskesi

Ardından, Arka Plan Maskesi sekmesini seçin. Maske için Çapraz Çizgiler'i seçin ve Rengi #3a604e olarak değiştirin.

• Maske: Çapraz Çizgiler
• Maske Rengi: #3a604e

Ardından, Dönüştür öğesini Yatay olarak ayarlayın ve En Boy Oranı için geniş veya yatay seçeneğini belirleyin. Boyutu Örtecek ve Maske Konumunu Üst Orta olarak ayarlayın. Bölümün ayarlarını kapatın.

• Dönüştür: Yatay
• En Boy Oranı: Geniş (yatay)
• Boyut: Kapak
• Maske Konumu: Üst Merkez

Buton

Son olarak, düğmenin ayarlarını açın ve tasarım sekmesini seçin. Aşağı kaydırın ve Düğme Arka Plan Rengini #61a380 olarak değiştirin. Modülün ayarlarını kapatın ve çalışmanızı kaydedin.

• Düğme Arka Plan Rengi: #61a380

Arka Plan Deseni Maske Sonuçları

Arka plan deseni maskelerimiz, düzenimizin kahraman bölümünde şöyle görünür.

Arka Plan Deseni Maske Örneği Bir Sonuç

Maske Örneği İki Sonuç

Maske Örneği Üç Sonuç

Biten Düşünceler

Divi ile ince arka plan desenli maskeleri nasıl oluşturacağımıza bakışımız bu. İnce bir maske, arka plana biraz görsel doku verecek kadar öne çıkıyor. CTA'larınızdan ve diğer unsurlardan dikkat çekmeden harika görünüyorlar. Divi'nin arka plan deseni maskelerinin kullanımı kolaydır ve ayarları benzersiz bir şey yaratabilmenizi sağlar. Kendi arka plan deseni maskelerinizi oluşturmak için ayarlarla denemeler yapın.

Senden duymak istiyoruz. Divi arka planlarınız için kendi ince arka plan deseni maskelerinizi yaratıyor musunuz? Yorumlarda deneyiminizi bize bildirin.