Arka plan gradyan üreticileri, maskeleri ve divi desenleri nasıl birleştirilir
Divi’nin yeni arka plan seçeneği, Divi kullanıcıları için çekici olan yeni bir dünya açtı. Yeni gradyan üreticisi, istediğimiz kadar renkle istediğimiz her türlü gradyanı yapmayı kolaylaştırmayı kolaylaştırıyor. Ama bu sadece bir yaratıcılık katmanı. Web siteniz için sayısız benzersiz ve şaşırtıcı arka plan tasarımı oluşturmak için gradyan oluşturucu tasarımını maskeler ve arka plan desenleriyle birleştirebiliriz. Bugün size güzel bir arka plan tasarımı oluşturmak için Divi’nin arka plan gradyan üreticisini bir maske ve arka plan deseniyle nasıl birleştireceğinizi göstereceğiz. Bölüme her bir arka plan tasarım öğesinin (arka plan gradyanı, maske ve desen) nasıl ekleneceğinizi göstereceğiz. Buna ek olarak, tasarım kombinasyonunu birkaç basit tıklamayla değiştirmenin ne kadar kolay ve eğlenceli olduğunu göstereceğiz.
Hadi eğlenelim! Sneak Peek Burada, bu öğreticiyi kullanarak yapabileceğimiz bazı tasarım örnekleri.
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. Başarılı bir şekilde abone oldunuz. 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!
Nasıl Kullanılır Divi 1’deki arka plan gradyanlarını, maskelerini ve desenleri birleştirin. Bu tasarım için bir düzen yapısı oluşturun, solda hareket etmek için başlık ve davetiye bir parça oluşturacağız. Görsel tasarımımız Divi arka plan seçeneklerinin bir kombinasyonu kullanılarak yapılacaktır. Ama girmeden önce iki sütun yapmamız gerekiyor. 2. 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 metninizin metin modülünü ve düğmeniz için düğme modülünü ekleyin. Özel özelliği bilmek istiyorsanız Tasarım Ayarları Bunun için lütfen bulunduğu Tata’yı 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 tarayıcıyı karşılayacak şekilde bölüme dikey boşluklar ekleyin, bu bölüme dikey yükseklik eklememiz gerekir. Bunu yapmanın kolay yolu, bölümün üstüne ve altına ped eklemektir. Bu bölümün ayarlarını açın. Tasarım sekmesinin altında, dolguları aşağıdaki gibi güncelleyin: Dolgu: 10vw üst, 30vw aşağıda
Sütun dikey olarak istiflendikten sonra arka plan tasarımını ayarlamak istiyorsanız, tablet ekranındaki ve cep telefonundaki yatakları ayarlamanız gerekebileceğini unutmayın. 4. Bir arka plan gradyanı ekleyin Bir sonraki gradyan oluşturucuyu kullanarak, o bölüme özel bir arka plan gradyanı ekleyebiliriz. Bu gradyan için, oldukça eşit bir mesafe verilen 5 gradyanların sonlandırılmasını ekleyeceğiz. İlk ve son gradyan durağı aynı pembeye sahip olacaktır. İkinci ve dördüncü gradyan durakları aynı mavi renge sahip olacaktır. Ve üçüncü (orta) gradyan durağı yeşil bir renge sahip olacaktır. Bu 5 renk, arka plan tasarımımız için güzel renkli gradyanlar yaratacaktır.
DEĞERLENDİRİM DURUMU 1 İlk gradyan durağını eklemek için, içerik sekmesinin altındaki parçanın ayarlarını açtığınızdan emin olun. Ardından Derneği sekmesini seçin ve yeni bir gradyan eklemek için tıklayın. Bu, iki varsayılan gradyan rengi ekleyecektir. Soldaki ilk gradyana tıklayın ve rengi ve konumu şu şekilde güncelleyin: Renk Durdurulma Derneği: #FA8BFF Gradyan Durma Konumu:% 10
Gradien Stop #2 İkinci gradyan durağı eklemek için yeni bir gradyan durağı eklemek için gradyan renk hattına tıklayın. Ardından rengi güncelleyin ve aşağıdaki konuma sürükleyin:
Renk Durdurulması: #2BD2FF
Gradyan Durma Konumu:% 30 Gradien Stop #3 Üçüncü bir gradyan durağı eklemek için yeni bir gradyan durağı eklemek için (hattın ortasında) gradyan renk hattına tıklayın. Ardından rengi güncelleyin ve aşağıdaki konuma sürükleyin:
Renk Durdurulması: #2BFF88
Gradyan Durma Konumu:% 55
Renk Durdurulma Derneği: #FA8BFF
Gradyan Durma Konumu:% 100 GÜNCELLEME GÜNCELLEME Bu tasarım için varsayılan doğrusal gradyan türünü koruyoruz. Doğrusal renk desenlerinin yönünü değiştirmek için aşağıdakileri güncelleyin:
Gradyan yönü: 90 derece
Şimdi gradyan soldan sağa akacaktır. Arka plan için bir arka plan deseni oluşturun Arka plan gradyanımız hazır olduktan sonra tasarımı tamamlamak için bir arka plan deseni ekleyebiliriz. Bu örnekte, bir elmas deseni kullanarak benzersiz bir şekilde ince bir desen yapacağız. Desen sekmesi altında aşağıdakileri güncelleyin: Arka plan deseni: elmaslar
Desen rengi: RGBA (255,255,255.0.52)
Desen Boyutu: Özel Boyut Desen genişliği: 8px
Yüksek desen: 15vw
Bu size doğuştan gelen bir desenle ne kadar yaratıcı olabileceğinizin bir resmini verecektir. Burada elmas desenleri kullanıyoruz. Bununla birlikte, özel ve yüksek bir desen sağladığımız için, elmaslar ses dalgalarına benzeyen benzersiz bir tasarım sağlamak için dikey olarak gerilir. Ancak, bu tasarımla iyi görünecek olan daha fazla desen var ve sadece bir tıklama. İ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. Bu örnekte olduğu gibi kutunun dışında düşünmekten korkmayın.
6. Arka plan desenimiz olan parça için bir arka plan maskesi oluşturun, sonunda arka plan kombinasyon tasarımımızı tamamlamak için bir arka plan maskesi eklemeye hazırız. Aralarından seçim yapabileceğiniz birçok seçenek ve varyasyon var. Bu örnek için bir boya maskesi kullanacağız (en azından başlamak için). Maske sekmesinin altında aşağıdakileri güncelleyin:
Maske: Boya
Maske rengi: #ffffff Dönüşüm Maskesi: Döndür
Maske Boyutu: Kapanış
Şimdiye kadarki sonuç bu …
Ve desen gibi, bu tasarımla iyi görünecek olan daha fazla maske var ve sadece bir tıklama. Daha fazla olasılık maskeyi farklı bir görünüm için açar, maskeyi maske dönüşümü seçeneğinin altına çevirebilirsiniz. Bu, arka planda daha fazla gradyan gösterecek ve metni biraz daha belirgin hale getirecektir. İşte ters maskelerin bazı örnekleri …
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. Desenin rengini daha koyu bir renge verin. Ardından başlık metnini ve altyazılarını beyaza değiştirin. Ve düğme rengini de güncellemek isteyebilirsiniz. Bu, birkaç farklı maske kullanarak karanlık versiyonun görünümüdür.
Ve bu, ters maskeli karanlık bir versiyon örneğidir. Daha fazla gradyan deneyin! Gradient Builder, bu katmanlı arka plan tasarımını öne çıkarmak için kullanabileceğiniz daha fazla renk ve gradyan türü yapabilir. Diğer arka plan gradyan tasarımlarının olasılığı hakkındaki doğrudan demomumuzu görebilirsiniz. Daha fazla arka plan maskesi ve desen tasarımı alın! Bir maske ve arka plan deseninin nasıl kullanılacağı hakkında daha fazla ilham almak istiyorsanız, 12 arka plan maskesine bakın ve bu desenin indirilmesi ücretsizdir. Buradaki nihai sonuç, yukarıdaki adımları kullanarak kolayca yapabileceğimiz tasarımın başka bir görüntüsü.
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!
Nasıl Kullanılır Divi 1’deki arka plan gradyanlarını, maskelerini ve desenleri birleştirin. Bu tasarım için bir düzen yapısı oluşturun, solda hareket etmek için başlık ve davetiye bir parça oluşturacağız. Görsel tasarımımız Divi arka plan seçeneklerinin bir kombinasyonu kullanılarak yapılacaktır. Ama girmeden önce iki sütun yapmamız gerekiyor. 2. 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 metninizin metin modülünü ve düğmeniz için düğme modülünü ekleyin. Özel özelliği bilmek istiyorsanız Tasarım Ayarları Bunun için lütfen bulunduğu Tata’yı 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 tarayıcıyı karşılayacak şekilde bölüme dikey boşluklar ekleyin, bu bölüme dikey yükseklik eklememiz gerekir. Bunu yapmanın kolay yolu, bölümün üstüne ve altına ped eklemektir. Bu bölümün ayarlarını açın. Tasarım sekmesinin altında, dolguları aşağıdaki gibi güncelleyin: Dolgu: 10vw üst, 30vw aşağıda
Sütun dikey olarak istiflendikten sonra arka plan tasarımını ayarlamak istiyorsanız, tablet ekranındaki ve cep telefonundaki yatakları ayarlamanız gerekebileceğini unutmayın. 4. Bir arka plan gradyanı ekleyin Bir sonraki gradyan oluşturucuyu kullanarak, o bölüme özel bir arka plan gradyanı ekleyebiliriz. Bu gradyan için, oldukça eşit bir mesafe verilen 5 gradyanların sonlandırılmasını ekleyeceğiz. İlk ve son gradyan durağı aynı pembeye sahip olacaktır. İkinci ve dördüncü gradyan durakları aynı mavi renge sahip olacaktır. Ve üçüncü (orta) gradyan durağı yeşil bir renge sahip olacaktır. Bu 5 renk, arka plan tasarımımız için güzel renkli gradyanlar yaratacaktır.
DEĞERLENDİRİM DURUMU 1 İlk gradyan durağını eklemek için, içerik sekmesinin altındaki parçanın ayarlarını açtığınızdan emin olun. Ardından Derneği sekmesini seçin ve yeni bir gradyan eklemek için tıklayın. Bu, iki varsayılan gradyan rengi ekleyecektir. Soldaki ilk gradyana tıklayın ve rengi ve konumu şu şekilde güncelleyin: Renk Durdurulma Derneği: #FA8BFF Gradyan Durma Konumu:% 10
Gradien Stop #2 İkinci gradyan durağı eklemek için yeni bir gradyan durağı eklemek için gradyan renk hattına tıklayın. Ardından rengi güncelleyin ve aşağıdaki konuma sürükleyin:
Renk Durdurulması: #2BD2FF
Gradyan Durma Konumu:% 30 Gradien Stop #3 Üçüncü bir gradyan durağı eklemek için yeni bir gradyan durağı eklemek için (hattın ortasında) gradyan renk hattına tıklayın. Ardından rengi güncelleyin ve aşağıdaki konuma sürükleyin:
Renk Durdurulması: #2BFF88
Gradyan Durma Konumu:% 55
Gradien Stop #4 İkinci gradyan durağı eklemek için yeni bir gradyan durağı eklemek için gradyan renk hattına tıklayın. Ardından rengi güncelleyin ve aşağıdaki konuma sürükleyin:
Renk Durdurulması: #2BD2FF
Gradyan Durma Konumu:% 80
Renk Durdurulma Derneği: #FA8BFF
Gradyan Durma Konumu:% 100 GÜNCELLEME GÜNCELLEME Bu tasarım için varsayılan doğrusal gradyan türünü koruyoruz. Doğrusal renk desenlerinin yönünü değiştirmek için aşağıdakileri güncelleyin:
Gradyan yönü: 90 derece
Şimdi gradyan soldan sağa akacaktır. Arka plan için bir arka plan deseni oluşturun Arka plan gradyanımız hazır olduktan sonra tasarımı tamamlamak için bir arka plan deseni ekleyebiliriz. Bu örnekte, bir elmas deseni kullanarak benzersiz bir şekilde ince bir desen yapacağız. Desen sekmesi altında aşağıdakileri güncelleyin: Arka plan deseni: elmaslar
Desen rengi: RGBA (255,255,255.0.52)
Desen Boyutu: Özel Boyut Desen genişliği: 8px
Yüksek desen: 15vw
Bu size doğuştan gelen bir desenle ne kadar yaratıcı olabileceğinizin bir resmini verecektir. Burada elmas desenleri kullanıyoruz. Bununla birlikte, özel ve yüksek bir desen sağladığımız için, elmaslar ses dalgalarına benzeyen benzersiz bir tasarım sağlamak için dikey olarak gerilir. Ancak, bu tasarımla iyi görünecek olan daha fazla desen var ve sadece bir tıklama. İ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. Bu örnekte olduğu gibi kutunun dışında düşünmekten korkmayın.
6. Arka plan desenimiz olan parça için bir arka plan maskesi oluşturun, sonunda arka plan kombinasyon tasarımımızı tamamlamak için bir arka plan maskesi eklemeye hazırız. Aralarından seçim yapabileceğiniz birçok seçenek ve varyasyon var. Bu örnek için bir boya maskesi kullanacağız (en azından başlamak için). Maske sekmesinin altında aşağıdakileri güncelleyin:
Maske: Boya
Maske rengi: #ffffff Dönüşüm Maskesi: Döndür
Maske Boyutu: Kapanış
Şimdiye kadarki sonuç bu …
Ve desen gibi, bu tasarımla iyi görünecek olan daha fazla maske var ve sadece bir tıklama. Daha fazla olasılık maskeyi farklı bir görünüm için açar, maskeyi maske dönüşümü seçeneğinin altına çevirebilirsiniz. Bu, arka planda daha fazla gradyan gösterecek ve metni biraz daha belirgin hale getirecektir. İşte ters maskelerin bazı örnekleri …
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. Desenin rengini daha koyu bir renge verin. Ardından başlık metnini ve altyazılarını beyaza değiştirin. Ve düğme rengini de güncellemek isteyebilirsiniz. Bu, birkaç farklı maske kullanarak karanlık versiyonun görünümüdür.
Ve bu, ters maskeli karanlık bir versiyon örneğidir. Daha fazla gradyan deneyin! Gradient Builder, bu katmanlı arka plan tasarımını öne çıkarmak için kullanabileceğiniz daha fazla renk ve gradyan türü yapabilir. Diğer arka plan gradyan tasarımlarının olasılığı hakkındaki doğrudan demomumuzu görebilirsiniz. Daha fazla arka plan maskesi ve desen tasarımı alın! Bir maske ve arka plan deseninin nasıl kullanılacağı hakkında daha fazla ilham almak istiyorsanız, 12 arka plan maskesine bakın ve bu desenin indirilmesi ücretsizdir. Buradaki nihai sonuç, yukarıdaki adımları kullanarak kolayca yapabileceğimiz tasarımın başka bir görüntüsü.
