Divi’de iki kat gradyan, maske ve desen içeren bir arka plan nasıl tasarlanır
Web siteniz için yaratıcı bir arka plan tasarlamak istiyorsanız, Divi’nin keşfetmeniz için birkaç güçlü varsayılan tasarım seçeneği vardır. Bir bölüm için bir arka plan seçeneği kullanarak bir arka plan gradyanını, maskeyi ve divi desenini nasıl birleştireceğinizi gösterdik. Ancak bugün, arka plan tasarım sınırlarını teşvik ediyoruz. Bu öğreticide, Divi’de iki kat gradyan, maske ve desen içeren bir arka plan tasarlayacağınızı göstereceğiz. Bu, bir arka plan tasarımı için arka plan seçeneklerinin sayısını iki katına çıkarır. Ve tüm isteğe bağlı tasarım katmanlarında, tasarım kombinasyonunun olasılığı katlanarak artar.
Bu yazıda size bir arka planla nasıl tasarlanacağını göstereceğiz: – İki maske (her iki tarafta bir) – iki gelişmiş gelişmiş gradyan – Tasarımla harmanlanan iki desen, tasarım kombinasyonunu değiştirmek ne kadar kolay ve hoş göstereceğiz bazı basit tıklamalarla. Hadi eğlenelim! YouTube Kanalı Sneak Peek’imize abone olun Bu öğreticiyi kullanarak yapabileceğimiz bazı tasarım örnekleri.
Bu öğreticinin düzen tasarımını öğrenmek için düzeni ücretsiz indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone Olmayacak” veya Ek E -posta Almayacaksınız. Dosyayı indirin
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.
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’ı (görsel yapımcı) kullanın. “Uyan” seçeneğini seçin.
Şimdi Divi’de tasarım yapmaya başlamak için boş bir tuval var!
Başlangıçta bölüme iki katman, maske ve desen ekleme satırları ile bir arka plan nasıl tasarlanır, yapımcadaki parçaya bir satır bir sütun ekleyin. Bu çizgi sonunda arka plan tasarımının ikinci katmanı olacak.
Dahası, yeni yaptığınız çift çizgiler. İkinci sıra (kopya) içeriğimiz için her zamanki gibi kullanılacaktır. Artık ek bir arka plan katmanı için bir satır ve sıradan içerik için bir satırınız olmalı. Daha sonra çizgiye geri döneceğiz. Şimdilik, bu bölümü kullanarak arka plan tasarımımızın ilk katmanını tasarlamaya başlayacağız. 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, o bölüme minimum yükseklik değeri eklemektir. Bu bölümün ayarlarını açın. Tasarım sekmesinin altında, yüksekliği ve yatakları aşağıdaki gibi güncelleyin: Yükseklik min: 70vh Dolgu: 0px üst, 0px aşağıda
Bir arka plan tasarımı oluşturun (ilk katman) Şimdi parçanın yüksekliğine sahip olduktan sonra, ilk arka plan tasarımı katmanımızı yapmak için bir tuvalimiz var. Divi, arka plan tasarlamak için birçok seçeneğe sahiptir. Bu öğretici için arka plan gradyanına, maskeye ve desen üzerine konsantre olacağız.
Arka plan gradyan tasarımı Parçalar için ilk arka plan tasarım öğelerimiz için, bu bölüme özel arka plan gradyanları ekleyebiliriz. Bu gradyan için, oldukça eşit bir mesafe verilen 4 gradyanların sonlandırılmasını ekleyeceğiz. Bu 4 renk, arka plan tasarımımızın ilk katmanı için güzel renkli gradyanlar yapacak. İlk gradyan durağını eklemek için, içerik sekmesinin altındaki ayarları 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 birinci gradyanın sonlandırılmasıyla başlayarak, aşağıdaki renk ve konumla aşağıdaki gradyan durağını güncelleyin/ekleyin: DEĞERLENDİRME DURUMU NOK 1 Renk Durdurulma Derneği: #BAE9FF
Gradyan Durma Konumu:% 0
Gradien Stop #2
Renk Durdurulma Derneği: #ADFFF1
Gradyan Durma Konumu:% 32
Gradien Stop #3
Renk Durdurulması: #ffffff
Gradyan Durma Konumu:% 64
Gradien Stop #4
Renk Durdurulması: #F9B8DD
Gradyan Durma Konumu:% 100
Ardından gradyanın türünü ve konumunu güncelleyin:
Gradyan Türü: Dairesel
Gradyan Konumu: Orta
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 dalga deseni kullanarak ince bir desen yapacağız.
Desen sekmesi altında aşağıdakileri güncelleyin:
Arka plan deseni: dalgalar Desen rengi: RGBA (127,206,255.0.59)
Desen Boyutu: Özel Boyut
Desen genişliği: 30vw
Desen Yüksekliği: 10 piksel
İ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. Kim dedi ki, kutunun dışında düşünmekten korkmayın. Bir arka plan maskesi oluşturun Parça arka plan desenimiz yerinde, ilk katman için arka plan 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, çapraz haplar maskesi kullanacağız. Maske sekmesinin altında aşağıdakileri güncelleyin:
Maske: Çapraz haplar
Maske rengi: #ffffff
Dönüşüm maskesi: dikey yanma, gerçekten dön
Maske Boyutu: Doldurmak için geriliyor
Şimdiye kadarki sonuç bu …
Sırayı ikinci katman olarak konumlandırın Parçamızın arka plan tasarımı kullanıma hazır olduktan sonra, daha önce yaptığımız satırı kullanarak ikinci katmanı ekleyebiliriz. Satırları düzenlemek için, o bölümdeki üst satırdan dişli simgesini tıklayın.
Arka plan tasarımı, içeriğimiz için belirlenen diğer çizgileri kaplamaması için üst sırayı kullanmak önemlidir (Z ile uğraşmaktan kaçınmanın kolay bir yolu).
Gelişmiş sekmesi altında aşağıdakileri güncelleyin:
Genişlik:% 100
Maksimum genişlik:% 100 Yükseklik:% 100
Yatağı da hattan çıkardığınızdan emin olun. Dolgu: 0px üst, 0px aşağıda
Satırın bir arka plan tasarımını oluşturun (ikinci katman tasarımı) artık çizgiyi göremeyebilirsiniz, ancak satır şimdi arka planın tüm bölümlerini mükemmel bir şekilde kaplıyor. Bu bize tasarımımızı tamamlamak için ikinci katmanı ve diğer boş tuvalleri verir. Satırlar için arka plan gradyan tasarımı Bu ikinci katman gradyanımız olduğundan, şeffaf (veya yarı saydam) sonlandırma kullanmamız önemlidir, böylece gradyanın ilk gradyan rengi belirli alanlarda görünür kalır. Bu, yalnızca bir gradyan katmanı ile yapılması imkansız olan daha benzersiz bir renk kombinasyonu yapmanızı sağlar. Bu gradyan için, oldukça eşit bir mesafe verilen 3 gradyanların sonlandırılmasını ekleyeceğiz. Gradyan tasarımının ilk katmanını ortaya çıkarmak için şeffafın orta gradyan durağı. Birlikte, bu ince renkler ilk katmandaki gradyanı tamamlar. İlk gradyan durağını eklemek için, içerik sekmesinin altındaki ayarları 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 birinci gradyanın sonlandırılmasıyla başlayarak, aşağıdaki renk ve konumla aşağıdaki gradyan durağını güncelleyin/ekleyin: DEĞERLENDİRME DURUMU NOK 1
Renk Durdurulması: #7FCEFF
Gradyan Durma Konumu:% 0 Gradien Stop #2
Renk Durdurulması: Şeffaf Gradyan Durma Konumu:% 40
Gradien Stop #3
Renk Durdurulma Derneği: #F1DDFF
Gradyan Durma Konumu:% 100
Ardından gradyanın türünü ve konumunu güncelleyin:
Gradyan Türü: Elipse
DEĞERLENDİRİM POZİSYONU: Sağ Alt Sağda Bir Arka Plan Deseni Yapar İkinci Katman gradyanımız yerine geldikten sonra, tasarımı tamamlamak için bir arka plan deseni ekleyebiliriz. İkinci katman desenimiz için konfeti desenlerini kullanacağız. Desen sekmesi altında aşağıdakileri güncelleyin:
Arka plan deseni: konfeti
Desen rengi: #00ff4c
Desen Boyutu: Özel Boyut
Desen genişliği: 45VW
Karışık Desen Modu: Ekran Bu desen, arkasındaki gradyan rengi ile karıştırılmış desen renginin hafif bir versiyonuna bir ekran karışımı modu kullanır. Bu tasarımı artırır ve deseni daha pürüzsüz hale getirir. İkinci katman desenimizle sıralar için bir arka plan maskesi oluşturun, iki katman arka plan tasarımımızı tamamlamak için ikinci katman maskesini eklemeye hazırız. İkinci maske tabakası için, aynı diyagonal hap maskesini ters olarak kullanacağız ve yatay olarak tersine döneceğiz, böylece parçanın sol tarafında, birinci kattaki maskeye bitişik. Maske sekmesinin altında aşağıdakileri güncelleyin:
Maske: Çapraz haplar
Maske rengi: #ffffff
Dönüşüm Maskesi: Geri Yatay, Treet
Şimdiye kadarki sonuç bu …
İki kat (önce ve sonra) aşağıdakiler, ikinci katman uygulanmadan önce birinci katmanın görünümünün kısa bir örneğidir. İçeriğimiz için kaydettiğimiz satırdaki başlığı ekleyin, ana başlığınız için metin modülünü ekleyin. Ardından metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:
İçindekiler Metin: [H1 etiketi ile başlığı ekleyin]
Yazı Tip Başlığı: Inter
Başlık Mektubu Ağırlığı: Kalınlık Başlık Metin Rengi: #000000 Başlık Metin Boyutu: 8VW (masaüstü), 62px (tablet), 32 piksel (cep telefonu) Marj: 30vh üst, 30vh aşağıda
Nihai sonuç Masaüstü ve mobil cihazdaki tasarımımızın nihai sonuçlarına bakalım. Değiştir! Farklı bir görünüm için, her katmanda farklı maskeler ve desenler deneyebilirsiniz. İşte bazı örnekler.
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. Son zihin, divi arka plan seçeneği ile çok güzel bir arka plan tasarımı yapmanın ne kadar kolay olduğu gerçekten şaşırtıcı. Ve üstel tasarım olasılığını artırmak için başka arka plan tasarım katmanları eklemek. Ayrıca, bu öğreticinin tasarımında da mevcut olan üçüncü katmandan bile bahsetmiyoruz. Bunun ne olduğunu tahmin edebilir misin? Daha fazla bilgi için, gradyan üreticileri, arka plan maskesi ve desenleri hakkında özellik yayınlarımız. Ayrıca bir kahraman tasarlamak için bir maskenin ve desenin nasıl kullanılacağını öğrenmeye yardımcı olabilirsiniz. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!