Divi'de İki Katmanlı Gradyan, Maske ve Desenli Bir Arka Plan Nasıl Tasarlanır?
Yayınlanan: 2022-05-07Web siteniz için yaratıcı bir arka plan tasarlamak istiyorsanız, Divi'de keşfetmeniz için bazı güçlü yerleşik tasarım seçenekleri vardır. Tek bir bölüm için arka plan seçeneklerini kullanarak Divi'nin arka plan gradyanlarını, maskelerini ve desenlerini nasıl birleştireceğinizi zaten gösterdik. Ancak bugün, arka plan tasarımının sınırlarını zorluyoruz. Bu öğreticide, Divi'de iki katman degrade, maske ve desen içeren arka planları nasıl tasarlayacağınızı göstereceğiz. Bu, tek bir arka plan tasarımı için arka plan seçeneklerinin sayısını iki katına çıkarır. Ve tüm bu isteğe bağlı tasarım katmanlarıyla, olası tasarım kombinasyonları katlanarak artar.
Bu yazıda size aşağıdakilerle nasıl bir arka plan tasarlayacağınızı göstereceğiz:
- iki maske (her iki tarafta birer tane)
- iki üst üste binen gelişmiş gradyan
– tasarımla harmanlanan iki desen
Ayrıca, birkaç basit tıklamayla tasarım kombinasyonlarını değiştirmenin ne kadar kolay ve eğlenceli olabileceğini göstereceğiz.
Hadi biraz eğlenelim!
Youtube Kanalımıza Abone Olun
Gizlice Bakış
İşte bu öğreticiyi kullanarak oluşturabileceğimiz birkaç örnek tasarım.
Kavram
Bu tasarımın konsepti oldukça basittir. Divi'nin yerleşik arka plan tasarım seçeneklerine (gradyan, maskeler, desenler vb.) sahip bir bölümle başlıyoruz. Ardından, bölümü tamamen kaplayacak şekilde konumlandırılmış bir satır oluşturuyoruz (bir bindirme gibi). Bir Divi satırı aynı yerleşik arka plan tasarım seçeneklerine sahip olduğundan, içeriğimiz için bir arka plan tasarlamak için artık iki katman (bölüm ve satır) arka plan seçeneklerine sahibiz.
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki yerleşim tasarımına el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, aşağıdaki e-posta adresinizi yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Bölüm düzenini Divi Kitaplığınıza aktarmak için aşağıdakileri yapın:
- Divi Kitaplığına gidin.
- Sayfanın üst kısmındaki İçe Aktar düğmesini tıklayın.
- Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin
- Bilgisayarınızdan indirme dosyasını seçin (önce dosyayı açın ve JSON dosyasını kullanın).
- Ardından içe aktar düğmesini tıklayın.
Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.
Hadi öğreticiye geçelim, olur mu?
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
- WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
- “Sıfırdan Oluştur” seçeneğini seçin.
- Şimdi Divi'de tasarlamaya başlamak için boş bir tuvaliniz var!
İki Katmanlı Degrade, Maske ve Desenli Bir Arka Plan Nasıl Tasarlanır?
Bölüme Satır Ekle
Başlamak için, oluşturucudaki mevcut bölüme tek sütunlu bir satır ekleyin. Bu sıra sonunda arka plan tasarımının ikinci katmanı olacak.
Ardından, az önce oluşturduğunuz satırı çoğaltın. Bu ikinci (yinelenen) satır, normalde yaptığınız gibi içeriğimiz için kullanılacaktır. Artık ekstra arka plan katmanı için bir üst sıranız ve normal içerik için bir sıranız olmalıdır.
Daha sonra sıralara geri döneceğiz. Şimdilik, bölümü kullanarak arka plan tasarımımızın ilk katmanını tasarlamaya başlayacağız.
Bölüme Dikey Aralık Ekle
Arka plan tasarımımızın tarayıcıyı doldurması için bölüme biraz dikey yükseklik eklememiz gerekiyor. Bunu yapmanın kolay bir yolu, bölüme minimum yükseklik değeri eklemektir.
Bölüm için ayarları açın. Tasarım sekmesi altında, yüksekliği ve dolguyu aşağıdaki gibi güncelleyin:
- Min Yükseklik: 70vh
- Dolgu: 0 piksel üst, 0 piksel alt
Bölüm Arka Plan Tasarımını Oluşturun (İlk Katman)
Artık kesit yüksekliğimizi de ayarladığımıza göre, ilk arka plan tasarım katmanımızı oluşturmak için tuvalimiz var. Divi, arka plan tasarlamak için birçok seçeneğe sahiptir. Bu eğitim için arka plan gradyanları, maskeler ve desenlere odaklanacağız.
Bölüm için Arka Plan Gradyanı Tasarlayın
İlk arka plan tasarım öğemiz için bölüme özel bir arka plan gradyanı ekleyebiliriz. Bu gradyan için, oldukça eşit aralıklarla yerleştirilmiş 4 gradyan durağı ekleyeceğiz. Bu 4 renk, arka plan tasarımımızın ilk katmanı için çok renkli güzel bir gradyan oluşturacaktır.
İlk degrade duraklarını eklemek için içerik sekmesi altında bölüm ayarlarının açık olduğundan emin olun. Ardından degrade sekmesini seçin ve yeni bir degrade eklemek için tıklayın. Bu, iki varsayılan degrade rengi ekleyecektir. Soldaki ilk degrade durağı ile başlayarak, aşağıdaki degrade duraklarını bir renk ve konumla aşağıdaki gibi güncelleyin/ekleyin:
Gradyan Durağı #1
- Gradyan Durdurma Rengi: #bae9ff
- Gradyan Durdurma Konumu: %0
Gradyan Durağı #2
- Degrade Durdurma Rengi: #adfff1
- Gradyan Durdurma Konumu: %32
Gradyan Durağı #3
- Gradyan Durdurma Rengi: #ffffff
- Gradyan Durdurma Konumu: %64
Gradyan Durağı #4
- Gradyan Durdurma Rengi: #f9b8dd
- Gradyan Durdurma Konumu: %100
Ardından Gradyan Türü ve Konumunu güncelleyin:
- Gradyan Türü: Dairesel
- Gradyan Konumu: Merkez
Bölüm İçin Bir Arka Plan Deseni Oluşturun
Artık arka plan gradyanımız hazır olduğuna göre, tasarımı tamamlamak için bir arka plan deseni ekleyebiliriz. Bu örnekte, Dalgalar desenini kullanarak ince bir desen oluşturacağız.
Desenler 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: 10px
İPUCU: Arka plan desenlerinde, genellikle ince tutmak daha iyidir. Daha küçük desenler için özel boyutlar kullanmayı deneyin ve ardından rengin opaklığını azaltın. Bununla birlikte, kutunun dışında düşünmekten korkmayın.
Bölüm için Arka Plan Maskesi Oluşturun
Arka plan desenimiz yerindeyken, 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 sürü seçenek ve varyasyon var. Bu örnek için Diagonal Pills maskesini kullanacağız.
Maskeler sekmesi altında aşağıdakileri güncelleyin:
- Maske: Çapraz Haplar
- Maske Rengi: #ffffff
- Maske Dönüşümü: Dikey Çevirme, Ters Çevirme
- Maske Boyutu: Doldurmak için Uzat
İşte şimdiye kadarki sonuç…
Satırı İkinci Katman Olarak Konumlandırın
Artık bölüm arka plan tasarımımız hazır olduğuna göre, daha önce oluşturduğumuz satırı kullanarak ikinci katmanı ekleyebiliriz. Satırı düzenlemek için, bölümdeki en üst satırın dişli simgesine tıklayın.
Arka plan tasarımının içeriğimiz için belirlenen diğer satırı kaplamaması için en üst satırı kullanmak önemlidir (Z İndeksi ile uğraşmaktan kaçınmanın kolay bir yolu).
Gelişmiş sekmesi altında aşağıdakileri güncelleyin:
- Pozisyon: Mutlak
Bu, satırın belgede herhangi bir gerçek yer kaplamadan bölümün üzerine oturmasını (veya kaplamasını) sağlar. Şimdi tek yapmamız gereken yükseklik ve genişliği güncellemek, böylece bölümün tüm genişliğini ve yüksekliğini kaplayacak. Bu, ihtiyacımız olan kaplamayı ve ikinci arka plan tasarımı katmanımızı oluşturacaktır.
Tasarım sekmesi altında, boyutlandırma seçeneklerini aşağıdaki gibi güncelleyin:
- Sütun Yüksekliklerini Eşitle: EVET
- Genişlik: %100
- Maksimum Genişlik: %100
- Yükseklik: %100
Satırdan dolguyu da çıkardığınızdan emin olun.
- Dolgu: 0 piksel üst, 0 piksel alt
Satır Arka Plan Tasarımını Oluşturun (Tasarımın İkinci Katmanı)
Şimdi satırı göremeyebilirsiniz, ancak şimdi tüm bölümün arka planını mükemmel bir şekilde kaplıyor. Bu bize tasarımımızı tamamlamak için ikinci katmanımızı ve başka bir boş tuvali verir.
Satır için Arka Plan Gradyanı Tasarlayın
Bu bizim ikinci katman gradyanımız olduğundan, ilk katman gradyan renklerinin belirli alanlarda görünür kalması için şeffaf (veya yarı şeffaf) renk stopları kullanmamız önemlidir. Bu, tek bir degrade katmanıyla mümkün olmayan daha benzersiz bir renk karışımı oluşturmanıza olanak tanır.
Bu gradyan için, oldukça eşit aralıklarla yerleştirilmiş 3 gradyan durağı ekleyeceğiz. Orta gradyan durağı, ilk katman gradyan tasarımını ortaya çıkarmak için şeffaftır. Bu ince renkler birlikte, ilk katmandaki degradeyi güzel bir şekilde tamamlar.
İlk degrade duraklarını eklemek için içerik sekmesi altında bölüm ayarlarının açık olduğundan emin olun. Ardından degrade sekmesini seçin ve yeni bir degrade eklemek için tıklayın. Bu, iki varsayılan degrade rengi ekleyecektir. Soldaki ilk degrade durağı ile başlayarak, aşağıdaki degrade duraklarını bir renk ve konumla aşağıdaki gibi güncelleyin/ekleyin:
Gradyan Durağı #1
- Degrade Durdurma Rengi: #7fceff
- Gradyan Durdurma Konumu: %0
Gradyan Durağı #2
- Gradyan Durdurma Rengi: şeffaf
- Gradyan Durdurma Konumu: %40
Gradyan Durağı #3
- Gradyan Durdurma Rengi: #f1ddff
- Gradyan Durdurma Konumu: %100
Ardından Gradyan Türü ve Konumunu güncelleyin:
- Gradyan Türü: Eliptik
- Gradyan Konumu: Sağ Alt
Bölüm için bir Arka Plan Deseni Oluşturun
Artık ikinci katman gradyanımız yerine oturduğuna göre, tasarımı tamamlamak için bir arka plan deseni ekleyebiliriz. İkinci kat kalıbımız için Konfeti kalıbını kullanacağız.
Desenler sekmesi altında aşağıdakileri güncelleyin:
- Arka Plan Deseni: Konfeti
- Desen Rengi: #00ff4c
- Desen Boyutu: Özel Boyut
- Desen Genişliği: 45vw
- Desen Karışım Modu: Ekran
Bu desen, arkasındaki degrade renklerle karıştırılan desen renginin hafif bir versiyonuna Ekran karıştırma modunu kullanır. Tasarımı geliştirir ve deseni daha ince hale getirir.
Satır için bir Arka Plan Maskesi Oluşturun
İkinci katman desenimiz yerindeyken, iki katmanlı arka plan tasarımımızı tamamlamak için ikinci bir katman maskesi eklemeye hazırız. İkinci katman maskesi için, aynı Çapraz Hap maskesini, ilk katmandaki maskenin bitişiğindeki bölümün sol tarafında görünecek şekilde ters ve yatay olarak çevirerek kullanacağız.
Maskeler sekmesi altında aşağıdakileri güncelleyin:
- Maske: Çapraz Haplar
- Maske Rengi: #ffffff
- Maske Dönüşümü: Yatay Çevirme, Ters Çevirme
İşte şimdiye kadarki sonuç…
İki Katman (öncesi ve sonrası)
İkinci katman uygulanmadan önce ilk katmanın nasıl göründüğüne dair hızlı bir örnek.
Başlığı Ekle
İçeriğimiz için kaydettiğimiz satıra ana başlığınız için bir metin modülü ekleyin.
Ardından metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:
- Gövde Metni: [H1 etiketiyle başlık ekleyin]
- Başlık Yazı Tipi: Inter
- Başlık Yazı Tipi Ağırlığı: Kalın
- Başlık Metni Rengi: #000000
- Başlık Metni Boyutu: 8vw (masaüstü), 62px (tablet), 32px (telefon)
- Marj: 30vh üst, 30vh alt
Son sonuç
Masaüstü ve mobil cihazlarda tasarımımızın nihai sonucuna bir göz atalım.
Değiştir!
Farklı bir görünüm için her katmanda farklı maskeler ve desenler deneyebilirsiniz.
İşte birkaç örnek.
Daha Fazla Degrade Deneyin!
Degrade Oluşturucu, bu katmanlı arka plan tasarımlarını öne çıkarmak için kullanabileceğiniz çok daha fazla renk ve degrade türü oluşturabilir. Daha fazla arka plan gradyan tasarım olanağının canlı demolarına göz atabilirsiniz.
Daha Fazla Arka Plan Maskesi ve Desen Tasarımı Alın!
Arka plan maskelerini ve desenlerini nasıl kullanacağınız konusunda daha fazla ilham almak istiyorsanız, bu 12 arka plan maskesi ve desen tasarımını ücretsiz olarak indirin.
Son düşünceler
Divi'nin arka plan seçenekleriyle bu kadar güzel arka plan tasarımları oluşturmanın bu kadar kolay olması inanılmaz. Ve başka bir arka plan tasarımı katmanı eklemek, tasarım olanaklarını katlanarak artırır. Ayrıca, bu eğitimdeki tasarımda da bulunan üçüncü katmandan bahsetmedik bile. Bunun ne olduğunu tahmin edebilir misin?
Daha fazla bilgi için, degrade oluşturucu ve arka plan maskeleri ve desenleriyle ilgili özellik yayınlarımıza göz atın. Bir kahraman bölümü tasarlamak için maskeleri ve kalıpları nasıl kullanacağınızı bilmek de yararlı olabilir.
Yorumlarda sizden haber bekliyorum.
Şerefe!