Divi Öğeleri Arasında Kusursuz Arka Plan Tasarım Geçişleri Nasıl Oluşturulur

Divi öğeleri arasında sorunsuz arka plan tasarım geçişleri oluşturmak, Divi web sitenizin tasarımını yükseltmenin harika bir yoludur. Buradaki fikir, tarayıcı genişliğine göre aynı boyutu ve konumu paylaşan (vw uzunluk birimlerini kullanarak) eşleşen arka plan tasarımları (hem satır hem de bölüm için) oluşturmaktır. Bu, yaratıcı yollarla bir satır ve bölüm arasında arka plan gradyanını, desenini ve maskesini sorunsuz bir şekilde geçiş yapmanızı sağlar. Örneğin, tasarımın genel hizalamasını ve simetrik yönünü kaybetmeden farklı renklere bir desen veya maske geçişine sahip olabilirsiniz.

Bu öğreticide, Divi bölümü ve satırı arasında sorunsuz bir arka plan tasarımı geçişi oluşturmak için Divi'nin yerleşik arka plan tasarım seçeneklerini kullanacağız. Bu tasarımın uygulaması ve çok yönlülüğü sınırsızdır ve Divi'nin arka plan tasarım seçeneklerini tamamen yeni bir düzeye taşır!

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Arka plan maskelerinde ve desenlerinde yalnızca birkaç basit değişiklikle mümkün olan birkaç örnek tasarım daha.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarıma el koymak için önce aşağıdaki düğmeyi kullanarak onu indirmeniz gerekecek. İ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.

Dosyaları İndir

Ü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.

İNDİRMEK

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:

1. Divi Kitaplığına gidin.
2. Sayfanın üst kısmındaki İçe Aktar düğmesini tıklayın.
3. Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin
4. Bilgisayarınızdan indirme dosyasını seçin (önce dosyayı açın ve JSON dosyasını kullanın).
5. 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:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Bir Bölme Bölümü ve Satır Arasında Kusursuz Bir Arka Plan Tasarım Geçişi Oluşturma

Bölüm 1: Sahte İçerik Olarak Başlık Oluşturma

Arka planlarımızı tasarlamaya başlamadan önce, sahte içerik olarak bir başlık eklememiz gerekiyor. Başlamak için sayfanın varsayılan bölümüne tek sütunlu bir satır ekleyin.

Ardından satıra bir metin modülü ekleyin.

Gövde içeriğine bir H1 başlığı ekleyin.

Tasarım sekmesi altında, Başlık Metni tasarımını istediğiniz gibi güncelleyin. Bu tasarım için, tasarımın geri kalanıyla akıcı bir şekilde ölçeklenmesi için başlık metninin boyutu için bir VW uzunluk birimi eklenmesine yardımcı olur.

2. Bölüm Arka Planının Tasarlanması

Bölüme VW Dolgusu Ekleme

Sahte başlık yerleştirildiğinde, bölüm ayarlarını açın ve aralığı aşağıdaki gibi güncelleyin:

• Dolgu: 15vw üst, 15vw alt

Arka Plan Gradyanını Bölüme Ekleme

Artık çalışmak için daha fazla alanımız olduğuna göre, arka plan tasarımımızı bölüme eklemeye hazırız. Degrade sekmesinin altına aşağıdaki degrade duraklarını ekleyin:

• Gradient Stop 1: #4f0f75 (%0'da)
• Gradient Stop 2: #2843c9 (%25'te)
• Gradient Stop 3: #4ae2e0 (%50'de)
• Gradient Stop 4: #3881ff (%75'te)
• Gradient Stop 5: #4f0f75 (%100'de)

Bölüme Arka Plan Deseni Ekleme

Kalıp sekmesi altında aşağıdakileri güncelleyin:

• Desenler: Çapraz Çizgiler
• Desen Rengi: rgba(79,15,117,0.23)
• Desen Dönüşümü: Döndür
• Desen Boyutu: Özel Boyut
• Desen Genişliği: 7vw
• Desen Yüksekliği: 5vw
• Desen Tekrar Menşei: Merkez

Not: Model genişliği ve yüksekliği için VW uzunluk birimini kullandığınızdan emin olun. Ayrıca tekrarlanan orijini "merkez" olarak ayarladığınızdan emin olun. Bu, arka plan desenini daha sonra satıra ekleyeceğimiz arka plan deseni ile aynı yerde tutacaktır.

Bölüme Arka Plan Maskesi Ekleme

Maske sekmesinin altına aşağıdakileri ekleyin:

• Arka Plan Maskesi: Katman Blobu
• Maske Rengi: rgba(0,0,0,0.7)
• Maske Boyutu: 100vw
• Maske Konumu: Merkez

Not: Tıpkı kalıpta olduğu gibi, VW uzunluk birimini kullanarak maskeye bir boyut vermeliyiz. Ayrıca maskeye bir merkez pozisyonu vermeliyiz.

3. Satır Arka Planının Tasarlanması

Bölüm Arka Planını Kopyalayıp Satır Arka Planına Yapıştırın

Satır arka planı tasarlama sürecini hızlandırmak için bölümün arka plan ayarlarını kopyalayın.

Ardından arka planı mevcut satıra yapıştırın.

Bu noktada zaten arka plan deseninin nasıl olduğunu ve satırdaki maskenin bölüm arka planına sorunsuz bir geçiş olarak görebilirsiniz. Satır şeffaf bir arka plana sahip gibi görünüyor, ancak aslında aynı boyut ve konumdaki bölümde kullanılan desen ve maskenin aynısı.

VW kullanarak Satırın Boyutunu ve Dolgusunu Ayarlayın

Ardından, VW uzunluk birimini kullanarak sıramıza özel bir genişlik vermemiz gerekiyor. Aşağıdakileri güncelleyin:

• Genişlik: 75vw
• Maksimum Genişlik: 75vw
• Dolgu: 10vw üst, 10vw alt, 10vw sol, 10vw sağ

VW Uzunluk Birimlerinde Aralık ve Boyutlandırmaya Genel Bakış

Şimdiye kadar, VW uzunluk birimini kullanarak düzenimize boşluk ve konum değerleri ekledik. İşte şu anda kullanılan değerlerin hızlı bir örneği.

Şimdiye kadar, desenler ve maskeler için satır arka planı ile bölüm arka planı arasında kesintisiz bir geçişe sahibiz. Ardından, satırın arka plan gradyanını da sorunsuz olacak şekilde güncelleyeceğiz.

Satırdaki Gradyan Duruşlarını Ayarlayın

Ardından, bölüm arka plan gradyanına sorunsuz bir geçiş için satır arka planındaki gradyan duraklarını ayarlamamız gerekiyor. Degrade sekmesi altında, bölüm arka planından miras alınan üç orta degrade durağını tutacağız ve ilk ve son degrade durağını sileceğiz. Ardından ilk durağı %0'a ve üçüncü durağı %100'e konumlandırın. Bittiğinde, aşağıdaki gradyanlara sahip olmalısınız.

• Gradyan Durdurma 1: #2843c9 (%0'da)
• Gradient Stop 2: #4ae2e0 (%50'de)
• Gradient Stop 3: #3881ff (%100'de)

Satıra Kutu Gölgesi Ekle

Tasarıma biraz yükseklik kazandırmak ve arka planın kesintisiz geçişini vurgulamak için satıra bir kutu gölgesi ekleyebiliriz.

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölgesi Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 4vw
• Kutu Gölge Rengi: rgba(0,0,0,0.5)

Satır Arka Plan Deseni Rengini Ayarlayın

Artık tüm arka plan öğelerini uygun yerlerine yerleştirdiğimize göre, daha yaratıcı bir tasarım için renkleri ayarlamaya başlayabiliriz. Satırın desen seçeneğinin altında aşağıdakileri güncelleyin:

• Desen Rengi: rgba(255,255,255,0.23)

Satır Arka Plan Maskesi Rengini Ayarlayın

Ayrıca tasarımı gerçekten öne çıkarmak için satırın maske rengini de güncelleyebiliriz! Maske sekmesi altında aşağıdakileri güncelleyin:

• Maske Rengi: #ffffff
• Maske Dönüşümü: Ters çevrilmiş

Son sonuç

Nihai sonucu kontrol edelim.

Daha Fazla Olasılık

Arka plan maskelerinde ve desenlerinde yalnızca birkaç basit değişiklikle mümkün olan birkaç örnek tasarım daha.

Son düşünceler

Divi'de kusursuz arka plan tasarımı geçişleri yaratmanın anahtarı, bu VW uzunluk birimlerini akıllıca kullanmaktır. İlk olarak, tarayıcı görüntü alanı genişliğiyle (sayfada ortalanmış bir konumdan) ölçeklenen bir bölüm arka plan tasarımı oluşturmamız gerekiyor. Bittiğinde, aynı arka plan tasarımını arka arkaya kullanabiliriz. Bundan sonra, harika bir tasarım için gradyan ve renklerde birkaç ayar yapmamız yeterli. Umarım, bu teknik gelecekteki projeler için başka bir faydalı tasarım becerisi katacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!