Kahraman Bölümü için Divi Maske ve Arka Plan Deseni Nasıl Kullanılır
Divi’nin yeni arka plan maskesi ve arka plan deseni en ilginç yeni tasarım özelliklerimizden biridir. Her maske ve desen, birkaç tıklamada sayısız benzersiz kombinasyon için diğer arka plan öğeleriyle (renkler, görüntüler ve gradyanlar gibi) birleştirilebilir. Bugün size bir kahraman tasarlamak için nasıl yeni bir maske ve yeni arka plan deseni kullanacağınızı göstereceğiz. Bu öğreticide, maske ve arka plan kalıpları yapmak için gereken önemli adımları tartışacağız. Maske tasarımına uyacak şekilde bir arka plan görüntüsünün nasıl konumlandırılacağını bile göstereceğiz. Bu, siteniz için birkaç dakika içinde kahramanın mükemmel bir parçasını yapmak için ihtiyacınız olan araçları vermenize yardımcı olacaktır.
Hadi eğlenelim! Bu öğreticide yapacağımız tasarımda bir bakışta YouTube Kanalı Sneak Peek’e abone olun. Aşağıda maske ve beyaz desenli bir kahraman örneğidir.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Birlikte takip edin ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Parçanın düzenini divi kütüphanenize aktarmak için aşağıdakileri yapın:
Divi kütüphanesine gidin.
Sayfanın üst kısmındaki içe aktarma düğmesini tıklayın.
Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin
Bilgisayarınızdan indirme dosyasını seçin (önce dosyayı açtığınızdan emin olun ve json dosyasını kullanın).
Ardından İçe Aktar düğmesini tıklayın. Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakileri yapmanız gerekiyor:
Değilse, divi temasını yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı).
“Başından Uyan” seçeneğini seçin.
Şimdi Divi’de tasarım yapmaya başlamak için boş bir tuval var! Kahramanlarınızda Divi’nin Maske ve Arka Plan Deseni Nasıl Kullanılır 1. Bu kahraman için bir düzen yapısı oluşturun, solda ve görüntüde (veya görsel tasarım) başlık ve davetle klasik bir düzen yapısı kullanacağız. doğru. Bu tasarım için görsel tasarımımız Divi arka plan seçeneği kullanılarak yapılacaktır. Ancak girmeden önce, parça desenlerimizin arka plan maskesini ve tasarımını görüntülemek için sayfanın sağ tarafında yerden tasarruf edebilmemiz için iki sütun satırı yapmamız gerekir. Sol sütunda (sütun 1) hareket etmek için başlığı ve davetiyeyi ekleyin, ana başlığınız için metin modülünü, altyazılar metniniz için metin modülünü ve düğmeniz için düğme modülünü ekleyin. Bunun için özel tasarım ayarlarını bilmek istiyorsanız, lütfen düzeni indirin ve daha sonra kendinizi kontrol edin. Bugün için arka plan tasarımına odaklanacağız. 3. Arka plan tasarımımızın büyük ve güzel hale gelmesi için bölüme dikey boşluklar ekleyin, bu bölüme bazı dikey yükseklikler eklememiz gerekir. Bunu yapmanın kolay yolu, bölümün üstüne ve altına ped eklemektir. Sütun dikey olarak istiflendikten sonra arka plan tasarımımız için alan sağlamak için tablet ekran ve cep telefonu üzerindeki dolguyu ayarlamamız gerektiğini unutmayın. Bu bölümün ayarlarını açın. Tasarım sekmesinin altında, dolguları aşağıdaki gibi güncelleyin:
Dolgu: 20vw yukarıda, 20vw aşağıda
Dolgu (tablet): 8vw üst, 48vw aşağıda
Dolgu (Telefon): 8VW Top, 70VW Aşağı
4. Bir sonraki arka planı ve gradyan görüntüsünü ekleyin, bu bölüme arka plan resimleri ve degradeleri ekleyebiliriz. Arka plan görüntüsünün ana odak noktasının parçanın sağ tarafında ortaya çıkacağını unutmayın, bu nedenle sağ tarafta görmek istediğiniz görüntüleri kullanın. Bu örnek için, şehir ufukları ile görüntüler kullanıyoruz. Görüntünün sağ tarafında, düzgün çalışması için daha yakın ve daha estetik bir binaya sahiptir. Görüntü sekmesinin altında görüntüyü bölümün arka planına yükleyin. Divi’de, arka plan görüntüsünün üzerine kolayca renk gradyanları ekleyebilirsiniz. Degrade sekmesi altında, arka plan bölümüne aşağıdaki gradyanı ekleyin:
Sol gradyan rengi: #3e22ff
İpuçları: Arka plan deseni ile, pürüzsüz tutmak genellikle daha iyidir. Daha küçük bir desen için özel bir boyut kullanmaya çalışın ve sonra renk opaklığını düşürün. 6. Arka plan desenimiz olan parça için bir arka plan maskesi oluşturun, nihayet tasarımımız için yeni arka plan maskesini test etmeye hazırız. Aralarından seçim yapabileceğiniz birçok seçenek ve varyasyon var. Bu örnek için bir arı kovanı maskesi kullanacağız. Maske sekmesinin altında aşağıdakileri güncelleyin:
Maske: arı kovanı Maske rengi: #ffffff
Maske Boyutu: Kapanış 7. Arka plan görüntüsünün konumunu ayarlayın Bir arka plan maskesi kullandığımız için arka plan görüntülerimiz gizlidir (veya “maskeli”). Bu nedenle, arka plan görüntüsünün konumunu, görüntünün belirli bölümlerinin maskeden göründüğü yere ayarlamanız gerekebilir. Bunu yapmak için, arka plan görüntüsünü doğru yerde dürtmek için arka plan görüntüsü ve ofset seçeneğinin konumunu kullanabilirsiniz. Bu örnekte, en görünür görüntünün sağ altını sağlayacağız ve daha fazla bina göstermek için biraz sağa taşıyacağız.
Resim sekmesi altında aşağıdakileri güncelleyin:
Arka Plan Görüntü Pozisyonu: Sağ alt Yatay arka plan görüntüsü ofseti: -4vw
Arka plan görüntüsünün sağa nasıl taşınabileceğini unutmayın. 8. Karışım modunu kullanın Bir yol, tüm bu arka plan öğeleriyle yaratıcı olabilmemizin bir yolu karışık mod eklemektir. Karışık mod arka plan seçeneklerinden birine eklenebilir ve birkaç arka plan katmanını (görüntüler, gradyanlar, maskeler vb.) Yaratıcı bir şekilde birleştirmek için kullanılabilir. Bu örnek için, arka plan görüntülerini gradyan renkleriyle birleştireceğiz. Bunu yapmak için, arka plan görüntüsü sekmesini tıklayın ve gradyan rengini arka plan görüntüsüyle birleştirmek için bir karışım modu ekleyin:
Karışık Mod: çarpın
Not: Çarpma karışım modu Temel olarak geçerli katmanı (bu durumda arka plan görüntüsü) bir arka plan gradyanı ile çarpmak. Etkiyi düşünmenin kolay yolu, slayt projektöründe diğerinin arkasına istiflenmiş iki slayt hayal etmektir. Ekranda iki görüntü yansıtıyorsanız, biraz daha koyu bir kombinasyon elde edersiniz. Karışık mod hakkında daha fazla bilgi için 9. Arka plan maskesi tasarımının mobil cihazlarda da iyi görünmesini sağlamak için arka plan maskesini hücresel için ayarlayın. Neyse ki, varsayılan seçenek bu işlemi kolaylaştırır. Unutmayın, arka plan tasarımımız için alan sağlamak için tabletler ve cep telefonları üzerine ekstra rulmanlar ekledik. Şimdi, tek yapmamız gereken maskeyi hücresel olarak ayarlamak için arka plan dönüşümü seçeneğini ve en boy oranını kullanmaktır. Maske sekmesinin altında, aşağıdaki duyarlı ve güncelleme seçeneklerini etkinleştirin: tablette …
Maske Dönüşümü: Dikey Geri, Yatay, Dön
Maske en boy oranı: kare
Telefonda… Maske Dönüşümü: Dikey Geri, Yatay, Dön
Maske en boy oranı: portre
Sonuçlar şimdiye kadar yaptığımız tasarımı görüyor. Bir masa … Bir tablet …
Bir telefon …
10. Bu tasarımın karanlık bir versiyonunu istiyorsanız karanlık bir versiyon oluşturun, arka plan maskesinin rengini koyu bir renge (siyah gibi) değiştirin. Sonra desenin rengini siyah olarak değiştirin. Ardından başlık metnini ve altyazılarını beyaza değiştirin. Ve düğme rengini de güncellemek isteyebilirsiniz. Bu karanlık versiyonun görünümüdür. Buradaki nihai sonuç, nihai sonuçlarımızın başka bir göstergesidir. Bu kahramanın arka plan tasarımı ile farklı maskeleri ve dönüşüm seçeneklerini deneyin, listeden farklı bir maske seçerek arka plan maskeleri (ve desenler) deneyebiliriz.Daha sonra daha fazla arka plan maskesi ve desen tasarımı kullanabilirsiniz! Bunun gibi daha fazla tasarım istiyorsanız, 12 maske tasarımına bakın ve bu arka plan desenini indirmek ücretsizdir.Son zihin, web siteniz için kahraman bölümü tasarlar Divi’nin maskesi ve arka plan deseni ile çok hoş.Arka plan seçenekleri doğru tasarımı elde etmek için kolayca değiştirilir.Ve daha benzersiz bir arka plan tasarımı oluşturmak için kullanabileceğiniz (karışık modlar gibi) o kadar çok seçenek var.Ayrıca, sadece parçaları değil, herhangi bir divi öğesine maskeler ve desenler ekleyebilirsiniz.Çok mutlu deneyler!Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Parçanın düzenini divi kütüphanenize aktarmak için aşağıdakileri yapın:
Divi kütüphanesine gidin.
Sayfanın üst kısmındaki içe aktarma düğmesini tıklayın.
Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin
Bilgisayarınızdan indirme dosyasını seçin (önce dosyayı açtığınızdan emin olun ve json dosyasını kullanın).
Ardından İçe Aktar düğmesini tıklayın. Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakileri yapmanız gerekiyor:
Değilse, divi temasını yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı).
“Başından Uyan” seçeneğini seçin.
Şimdi Divi’de tasarım yapmaya başlamak için boş bir tuval var! Kahramanlarınızda Divi’nin Maske ve Arka Plan Deseni Nasıl Kullanılır 1. Bu kahraman için bir düzen yapısı oluşturun, solda ve görüntüde (veya görsel tasarım) başlık ve davetle klasik bir düzen yapısı kullanacağız. doğru. Bu tasarım için görsel tasarımımız Divi arka plan seçeneği kullanılarak yapılacaktır. Ancak girmeden önce, parça desenlerimizin arka plan maskesini ve tasarımını görüntülemek için sayfanın sağ tarafında yerden tasarruf edebilmemiz için iki sütun satırı yapmamız gerekir. Sol sütunda (sütun 1) hareket etmek için başlığı ve davetiyeyi ekleyin, ana başlığınız için metin modülünü, altyazılar metniniz için metin modülünü ve düğmeniz için düğme modülünü ekleyin. Bunun için özel tasarım ayarlarını bilmek istiyorsanız, lütfen düzeni indirin ve daha sonra kendinizi kontrol edin. Bugün için arka plan tasarımına odaklanacağız. 3. Arka plan tasarımımızın büyük ve güzel hale gelmesi için bölüme dikey boşluklar ekleyin, bu bölüme bazı dikey yükseklikler eklememiz gerekir. Bunu yapmanın kolay yolu, bölümün üstüne ve altına ped eklemektir. Sütun dikey olarak istiflendikten sonra arka plan tasarımımız için alan sağlamak için tablet ekran ve cep telefonu üzerindeki dolguyu ayarlamamız gerektiğini unutmayın. Bu bölümün ayarlarını açın. Tasarım sekmesinin altında, dolguları aşağıdaki gibi güncelleyin:
Dolgu: 20vw yukarıda, 20vw aşağıda
Dolgu (tablet): 8vw üst, 48vw aşağıda
Dolgu (Telefon): 8VW Top, 70VW Aşağı
4. Bir sonraki arka planı ve gradyan görüntüsünü ekleyin, bu bölüme arka plan resimleri ve degradeleri ekleyebiliriz. Arka plan görüntüsünün ana odak noktasının parçanın sağ tarafında ortaya çıkacağını unutmayın, bu nedenle sağ tarafta görmek istediğiniz görüntüleri kullanın. Bu örnek için, şehir ufukları ile görüntüler kullanıyoruz. Görüntünün sağ tarafında, düzgün çalışması için daha yakın ve daha estetik bir binaya sahiptir. Görüntü sekmesinin altında görüntüyü bölümün arka planına yükleyin. Divi’de, arka plan görüntüsünün üzerine kolayca renk gradyanları ekleyebilirsiniz. Degrade sekmesi altında, arka plan bölümüne aşağıdaki gradyanı ekleyin:
Sol gradyan rengi: #3e22ff
Sağ gradyan rengi: şeffaf
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
5. Arka plan için bir arka plan deseni oluşturun Arka planımız ve gradyan çizimlerimiz hazır olduktan sonra tasarımı tamamlamak için bir arka plan deseni ekleyebiliriz. Bu örnekte, daha benzersiz bir görünüm sağlamak için sadece küçük bir doku ekleyen ince bir desen kullanacağız.
Desen sekmesi altında aşağıdakileri güncelleyin:
İpuçları: Arka plan deseni ile, pürüzsüz tutmak genellikle daha iyidir. Daha küçük bir desen için özel bir boyut kullanmaya çalışın ve sonra renk opaklığını düşürün. 6. Arka plan desenimiz olan parça için bir arka plan maskesi oluşturun, nihayet tasarımımız için yeni arka plan maskesini test etmeye hazırız. Aralarından seçim yapabileceğiniz birçok seçenek ve varyasyon var. Bu örnek için bir arı kovanı maskesi kullanacağız. Maske sekmesinin altında aşağıdakileri güncelleyin:
Maske: arı kovanı Maske rengi: #ffffff
Maske Boyutu: Kapanış 7. Arka plan görüntüsünün konumunu ayarlayın Bir arka plan maskesi kullandığımız için arka plan görüntülerimiz gizlidir (veya “maskeli”). Bu nedenle, arka plan görüntüsünün konumunu, görüntünün belirli bölümlerinin maskeden göründüğü yere ayarlamanız gerekebilir. Bunu yapmak için, arka plan görüntüsünü doğru yerde dürtmek için arka plan görüntüsü ve ofset seçeneğinin konumunu kullanabilirsiniz. Bu örnekte, en görünür görüntünün sağ altını sağlayacağız ve daha fazla bina göstermek için biraz sağa taşıyacağız.
Resim sekmesi altında aşağıdakileri güncelleyin:
Arka Plan Görüntü Pozisyonu: Sağ alt Yatay arka plan görüntüsü ofseti: -4vw
Arka plan görüntüsünün sağa nasıl taşınabileceğini unutmayın. 8. Karışım modunu kullanın Bir yol, tüm bu arka plan öğeleriyle yaratıcı olabilmemizin bir yolu karışık mod eklemektir. Karışık mod arka plan seçeneklerinden birine eklenebilir ve birkaç arka plan katmanını (görüntüler, gradyanlar, maskeler vb.) Yaratıcı bir şekilde birleştirmek için kullanılabilir. Bu örnek için, arka plan görüntülerini gradyan renkleriyle birleştireceğiz. Bunu yapmak için, arka plan görüntüsü sekmesini tıklayın ve gradyan rengini arka plan görüntüsüyle birleştirmek için bir karışım modu ekleyin:
Karışık Mod: çarpın
Not: Çarpma karışım modu Temel olarak geçerli katmanı (bu durumda arka plan görüntüsü) bir arka plan gradyanı ile çarpmak. Etkiyi düşünmenin kolay yolu, slayt projektöründe diğerinin arkasına istiflenmiş iki slayt hayal etmektir. Ekranda iki görüntü yansıtıyorsanız, biraz daha koyu bir kombinasyon elde edersiniz. Karışık mod hakkında daha fazla bilgi için 9. Arka plan maskesi tasarımının mobil cihazlarda da iyi görünmesini sağlamak için arka plan maskesini hücresel için ayarlayın. Neyse ki, varsayılan seçenek bu işlemi kolaylaştırır. Unutmayın, arka plan tasarımımız için alan sağlamak için tabletler ve cep telefonları üzerine ekstra rulmanlar ekledik. Şimdi, tek yapmamız gereken maskeyi hücresel olarak ayarlamak için arka plan dönüşümü seçeneğini ve en boy oranını kullanmaktır. Maske sekmesinin altında, aşağıdaki duyarlı ve güncelleme seçeneklerini etkinleştirin: tablette …
Maske Dönüşümü: Dikey Geri, Yatay, Dön
Maske en boy oranı: kare
Telefonda… Maske Dönüşümü: Dikey Geri, Yatay, Dön
Maske en boy oranı: portre
Sonuçlar şimdiye kadar yaptığımız tasarımı görüyor. Bir masa … Bir tablet …
Bir telefon …
10. Bu tasarımın karanlık bir versiyonunu istiyorsanız karanlık bir versiyon oluşturun, arka plan maskesinin rengini koyu bir renge (siyah gibi) değiştirin. Sonra desenin rengini siyah olarak değiştirin. Ardından başlık metnini ve altyazılarını beyaza değiştirin. Ve düğme rengini de güncellemek isteyebilirsiniz. Bu karanlık versiyonun görünümüdür. Buradaki nihai sonuç, nihai sonuçlarımızın başka bir göstergesidir. Bu kahramanın arka plan tasarımı ile farklı maskeleri ve dönüşüm seçeneklerini deneyin, listeden farklı bir maske seçerek arka plan maskeleri (ve desenler) deneyebiliriz.Daha sonra daha fazla arka plan maskesi ve desen tasarımı kullanabilirsiniz! Bunun gibi daha fazla tasarım istiyorsanız, 12 maske tasarımına bakın ve bu arka plan desenini indirmek ücretsizdir.Son zihin, web siteniz için kahraman bölümü tasarlar Divi’nin maskesi ve arka plan deseni ile çok hoş.Arka plan seçenekleri doğru tasarımı elde etmek için kolayca değiştirilir.Ve daha benzersiz bir arka plan tasarımı oluşturmak için kullanabileceğiniz (karışık modlar gibi) o kadar çok seçenek var.Ayrıca, sadece parçaları değil, herhangi bir divi öğesine maskeler ve desenler ekleyebilirsiniz.Çok mutlu deneyler!Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
