Öğeler arasında arka plan geçişleri oluşturmak istiyor musunuz? Divi ?
Öğeler arasında sorunsuz arka plan tasarımı geçişleri oluşturun Divi tasarımınızı geliştirmenin harika bir yoludur. Site Web Divi.
Bu, bir çizgi ve bir bölüm arasında bir degrade, desen ve arka plan maskesini yaratıcı bir şekilde sorunsuz bir şekilde değiştirmenize olanak tanır.
Örneğin, tasarımın genel hizasını ve simetrik görünümünü kaybetmeden farklı renklerde desen veya maske geçişi yapabilirsiniz.
Bu öğreticide, Divi bölümü ve çizgisi 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.
anket
İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.
Maskelerde ve arka plan desenlerinde yalnızca birkaç basit değişiklikle yapılabilecek diğer bazı örnek tasarımlar burada.
Divi Builder ile yeni bir sayfa oluşturun
Başlamak için aşağıdakileri yapmanız gerekir:
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın
Ardından İnşaata Başla (Sıfırdan Oluşturun)
Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Bir Divi bölümü ve bir çizgi arasında arka planda kesintisiz bir geçiş oluşturma
Yer tutucu içerik olarak bir başlık oluşturma
Ayrıca Oku: Divi: Çizgilerden vurgulu efektli sekmeler nasıl oluşturulur
İçeri girmeden önce şu şekilde bir başlık eklememiz gerekiyor: içindekiler hayali. 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.
H1 boyutunda metin ekleyin.
Sekmenin altında Dizayn, başlık metni tasarımını istediğiniz gibi güncelleyin.
- Yazı Tipi: Roboto Yoğun
- Yazı Ağırlığı: Kalın
- stil: TT
- Metin Hizalama: Ortalanmış
- Metin Rengi: #000000
- Başlık Metni Boyutu: 4vw
- Harf Aralığı: 0.1em
- Çizgi Yüksekliği: 1.3em
Bölüm arka plan tasarımı
Bölüme dolgu eklendi
Sahte başlık yerleştirildiğinde, bölüm ayarlarını açın ve aralığı aşağıdaki gibi güncelleyin:
- Dolgu (Üst ve Alt): 15vw
Bölüme arka plan gradyanı eklendi
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. sekmenin altında Arka Plan Gradyanı, aşağıdaki degrade noktalarını ekleyin:
- Gradyan Durakları:
- %0: #4f0f75 (%0'da)
- %25: #2843c9 (%25'te)
- %50: #4ae2e0 (%50'de)
- %75: #3881ff (%75'te)
- %100: #4f0f75 (%100'da)
Bölüme bir arka plan deseni ekleme
Sekmenin altında Arka Plan Deseni, aşağıdakileri güncelleyin:
- Desen: Çapraz Çizgiler
- Desen Rengi: rgba(79,15,117,0.23)
- Dönüştür: Döndür
- Desen Boyutu: Özel Boyut
- Genişlik: 7vw
- Yükseklik: 5vw
- Desen Tekrar Menşei: Merkez
Not: Desenin 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
Sekmenin altında Arka Plan Maskesi, şunları ekleyin:
- Arka Plan Maskesi: Katman Blobu
- Maske Rengi: rgba(0,0,0,0.7)
- Maske Genişliği: 100vw
- Pozisyon: Merkez
Not: Tıpkı desende olduğu gibi, VW uzunluk birimini kullanarak maskeyi boyutlandırmamız gerekiyor. Ayrıca maskeye merkezi bir konum vermemiz gerekiyor.
Satır arka plan tasarımı
Bölüm arka planını satır arka planına kopyalayıp yapıştırın
Çizgi arka plan tasarım sürecini hızlandırmak için bölüm arka plan ayarlarını kopyalayın.
Ardından arka planı mevcut satıra yapıştırın.
Bu noktada zaten arka plan deseninin ve çizgi üzerindeki maskenin bölümün arka planına nasıl sorunsuz bir geçiş yaptığını görebilirsiniz.
Çizgi ş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 boyutunu ve dolguyu 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 (Üst, Alt, Sol ve Sağ): 10vw
Hat üzerinde gradyan duraklarını ayarlayın
Ardından, kesit arka planı gradyanına kesintisiz bir geçiş için çizgi arka planındaki gradyan duraklarını ayarlamamız gerekiyor.
Sekmenin altında Arka Plan Gradyanı, bölüm arka planından miras alınan üç orta gradyan noktasını koruyacağız) ve ilk ve son gradyan duraklarını kaldıracağız.
Ardından ilk durağı %0'a ve üçüncü durağı %100'e ayarlayın. Tamamlandığında, aşağıdaki degradelere sahip olmalısınız.
- Gradyan Durakları
- %0: #2843c9
- %50: #4ae2e0
- %100: #3881ff
Satıra kutu gölgesi ekle
Tasarıma biraz ağırlık vermek 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
- Dikey Konum: 0px
- Kutu Gölge Bulanıklığı Gücü: 4vw
- Gölge Rengi: rgba(0,0,0,0.5)
Çizgi arka plan desen rengini ayarla
Artık tüm arka plan öğelerini yerleştirdiğimize göre, daha yaratıcı bir tasarım için renkleri ayarlamaya başlayabiliriz.
Seçeneğin altında Arka Plan Deseni satır, aşağıdakileri güncelleyin:
- Desen Rengi: rgba(255,255,255,0.23)
Çizgi arka plan maskesi rengini ayarla
Tasarımın gerçekten öne çıkmasını sağlamak için çizginin maske rengini de güncelleyebiliriz.
Sekmenin altında Arka Plan Maskesi, aşağıdakileri güncelleyin:
- Maske Rengi: #ffffff
- Maske Dönüşümü: ters
Nihai sonuç
Son sonucu görelim.
DIVI'yı şimdi indirin!!!
Daha fazla olasılık
Maskelerde ve arka plan desenlerinde yalnızca birkaç basit değişiklikle yapılabilecek diğer bazı örnek tasarımlar burada.
Ayrıca bakınız: Divi: Resimlerinizi güzelleştirmek için "Gradient Builder" nasıl kullanılır?
DIVI'yı şimdi indirin!!!
Sonuç
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ünüm alanının genişliğine (sayfada ortalanmış bir konumdan) uyan bir bölüm arka plan tasarımı oluşturmamız gerekiyor. Bir kez bittiğinde, aynı tek satırlık arka plan tasarımını kullanabiliriz. Bundan sonra, harika bir tasarım için bazı gradyan ve renk düzenlemelerimiz var.
Umarım bu teknik, gelecekteki projeler için başka bir yararlı tasarım becerisi katacaktır.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.
Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...