Divi’nin yeni tasarım özelliğini kullanarak güzel bir bölüm geçişi nasıl yapılır
Bu Divi öğreticisinde, varsayılan Divi seçeneğinden başka hiçbir şeyi kullanarak nasıl güzel bir bölüm geçiş yapacağınızı göstereceğiz. Bölüm, web sitenizde paylaştığınız tüm içeriğin temelidir. Her bölüm bir bölümdür ve bir kısımdan diğerine hareket eder hikaye anlatma sürecinin bir parçasıdır. Bu geçişi mümkün olduğunca pürüzsüz hale getirin, iletmeye çalıştığınız mesajı vurgulayacaktır. Bu konuda size yardımcı olmak için, bir sonraki web sitesi projeniz için nasıl güzel bir bölüm geçişi oluşturabileceğinizi göstereceğiz. Geçişin tüm farklı bölümlerini tek tek teslim etmeden önce gizlice göz atın, bakalım ne bekleyebilirsiniz:
YouTube kanalımıza abone olan yeni bir tasarım özelliği divi kullanarak güzel bir bölüm geçişi nasıl yapılır. Bu iki bölümde, geçişin en iyisini elde etmek için gereken dolguyu kullandık. Bununla birlikte, farklı bir yüksekliğe sahip parçalar kullanıyorsanız, belki de parçaya mükemmel bir şekilde uyacak şekilde kullanılan gradyanın arka planını hafifçe ayarlamanız gerekir. İlk standart parçayı yaparak ve tam geniş bir çizgi seçerek başlayın.Parçalarımızın ayarları, tasarım sekmesinde uzay alt kategorisine ekleyebileceğiniz üst ve alt dolgu ‘300 piksel’ gerektirecektir. İlk metin modülü daha sonra metin modülünü tam geniş satırımıza ekleyeceğiz. Görüntülemek istediğiniz metni yazın ve Tasarım sekmesini açın. Tasarım sekmesinin içinde, metin alt kategorileri için aşağıdaki ayarları kullanın:
Metin yazı tipi: Comforta
Metin yazı tipi boyutu: 50
Yüksek satır metin: 1.7 Yönetim Metni: Orta
İkinci metin modülü ikinci metin modülü için aynı şeyi yapar, ancak bunun yerine aşağıdaki ayarları kullanın: Metin yazı tipi: Comforta
Metin yazı tipi boyutu: 16
Hat yüksekliği metni: 1.7em
Metin Oryantasyonu: Orta
Son düğme modülü, bir düğme modülü de ekleyeceğiz. Tasarım sekmesinde orta seviyeyi seçerek başlayın. Ardından, düğme alt kategorisini açın, ” düğmesi ‘için özel stil kullanın ve düğme metninin boyutu olarak’ 20 ‘seçeneğini etkinleştirin. Düğme alt kategorisindeyken, düğme için aşağıdaki gradyan arka planını kullanın: İlk renk: #2B87da
Renk İkinci: #29C4A9
Gradyan Türü: Doğrusal
Gradyan yönü: 162deg
Başlangıç pozisyonu:% 0
Son pozisyon:% 100
İkinci parçayı oluşturun Diğer standart parçayı ekleyin, bunun yerine üç sütun satırını seçin. İkinci parçanın ayarlanması, üst ve alt için 300 piksel dolguyu da kullanacaktır. Bir sonraki bulanıklık modülü, satırın ilk sütununa bir bulanıklık modülü ekleyeceğiz. Görüntülemek istediğiniz metne karar verdikten sonra, içerik sekmesini aşağı kaydırın, ‘Icon Kullan’ seçeneğini etkinleştirin ve simgeyi seçin. Bunu yapmayı bitirdikten sonra, Tasarım sekmesine devam edin ve Icon alt kategorisi için aşağıdaki ayarları kullanın: Renk simgesi: #515151
Resim Yerleştirme/Simge: Üst
Simge yazı tipi boyutu kullanın: evet
İkon yazı tipi boyutu: 55px
Ardından, başlık metninin alt kategorisi için aşağıdaki ayarların uygulandığından emin olun: Yazı tipi başlığı: Comforta
Başlık metninin hizalanması: orta
Editör yazı tipi boyutu: 18
Ve son olarak, bu vücut metninin alt kategorisi için bir düzenlemedir: Body Font: Comforta
Vücut metninin hizalanması: orta
Vücut Boyutu: 14
Vücut Hattı Yüksekliği: 1.7EM
Blurb Modül Klonları Bir bulanıklık modülü yaptıktan sonra iki kez klon ve diğer iki sıra sütuna yerleştirin. 1. Bir rol oynadıktan sonra yol boyunca diyagonal, bölümün geçişini eklemeye başlamanın zamanı geldi. İlk örnek size basit diyagonal çizgilerden nasıl oluşacağını göstereceğiz. Gradyan Arka Plan Ayarları İlk bölüm ilk bölüm ayarlarını açın ve aşağıdaki gradyan arka planını ekleyin: İlk renk: #dddddd Renk İkinci: #F7F7F7
Gradyan Türü: Doğrusal
Gradyan yönü: 183 derece
Başlangıç Pozisyonu:% 85
Son pozisyon:% 70.05
Gradyan Arka Plan Ayarları İkinci parçanın ikinci kısmı aşağıdaki gradyan arka plan ayarlarını gerektirecektir:
Birinci renk: #f7f7f7 İkinci renk: #dddddd
Gradyan Türü: Doğrusal
Gradyan yönü: 183 derece
Başlangıç Pozisyonu:% 85
Son pozisyon:% 69.05
Bu örnek için yapmanız gereken son şeyin ikinci kısmındaki dolguları kaldırın, üst yatağı ikinci kısımdan çıkarmaktır.
2. Yolun ortasında benimle buluşmak, paylaşmak istediğimiz bir sonraki örnek, karşıt iki gradyan arka planının kullanıldığı yerde çok zarif. Bu etkiyi kullanarak, bu parçalar birbirini takip etmek gibi hissederler. Gradyan Arka Plan Ayarları İlk bölüm için ilk bölüm, aşağıdaki gradyan arka plan ayarlarına ihtiyacımız olacak: Birinci Renk: RGBA (255,255,255.0) İkinci renk: RGBA (224,43,32.0.07)
Gradyan Türü: Radyal
Radyal yön: sol üst
Başlangıç Pozisyonu:% 60
Son pozisyon:% 50
Gradyan Arka Plan Ayarları İkinci bölümün ikinci kısmı aşağıdaki gradyan arka planının tadını çıkaracaktır:
Birinci Renk: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal yön: sağ alt
Başlangıç Pozisyonu:%58 Son Pozisyon:%50
3. Bir sonraki örneği birleştirmek diğerlerinden biraz farklıdır. Bu, aşağıdaki resimde görebileceğiniz sonuçları elde etmek için iki parça arasında ek bir parça gerektirecektir.
Gradyan Arka Plan Ayarları İlk bölümünüz için ilk bölüm, aşağıdaki gradyan arka planına ihtiyacınız olacaktır:
Birinci Renk: RGBA (12.113.195.0.19) İkinci renk: RGBA (255,255,255.0.39) Gradyan Türü: Radyal
Radyal yön: sol alt
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Gradyan Arka Plan Ayarı İkinci kısım ikinci bölüm için aşağıdaki gradyan arka plan ayarlarını kullanacağız:
Birinci Renk: RGBA (224,43,32.0.17)
İkinci renk: RGBA (255,255,255.0.39) Gradyan Türü: Radyal
Radyal yön: sağ üst
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Her iki parçaya da degradenin arka planını ekledikten sonra yeni bir standart parça ekleyin, ikisi arasında doğru kısmı ekleme zamanı.
Aşağıdaki ayarları kullanarak, gradyanın arka plan rengini yeni parçanın yeni kısmının yeni kısmına da ekleyin:
Birinci Renk: RGBA (12.113.195.0.19) İkinci renk: RGBA (224,43,32.0.17) Gradyan Türü: Doğrusal
Gradyan yönü: 92deg
Başlangıç Pozisyonu:% 43
Son pozisyon:% 62
4. Daha sonra tersine döndüğümüzde, diğerleri gibi kontrolsüz bir geçişimiz var, ancak yine de sizin tarafınıza sorunsuz bir dokunuş eklemeyi başardık.
Gradyan Arka Plan Ayarları İlk bölüm için gradyanın arka planının ilk kısmı aşağıdaki gibidir:
Birinci renk: #f2f2f2 İkinci renk: RGBA (104.153.193.0.58) Gradyan Türü: Radyal
Radyal yön: sağ alt
Başlangıç Pozisyonu:% 7.9
Son pozisyon:% 7.9
Gradyan Arka Plan Ayarları İkinci gradyanın ikinci kısmı ve arka planı aşağıdaki gradyan arka plan ayarlarını gerektirecektir: Birinci renk: RGBA (104.153.193.0.58)
Renk İkinci: #F2F2F2
Gradyan Türü: Radyal Radyal yön: sağ üst
Başlangıç Pozisyonu:% 8
Son pozisyon:% 8
5. Beşinci örnek talimatları diğerlerinden biraz daha temiz ve minimalist görünüyor. Bir işaretçi veya daireye (veya her ikisine) bakarak geçişi iki şekilde görebilirsiniz.
Gradyan Arka Plan Ayarları İlk bölüm ilk bölüm için aşağıdaki gradyan arka planını kullanın:
Birinci renk: #f4f4f4
Renk İkinci: #ffffff Gradyan Türü: Radyal Radyal Yön: Üst
Başlangıç Pozisyonu:% 88
Son pozisyon:% 88.05
Gradyan Arka Plan Ayarları İkinci bölüm son olarak, aşağıdaki arka plan ayarlarını ikinci parçaya uygulayın:
Birinci Renk: RGBA (43,135,218.0)
İkinci renk: RGBA (12.113.195.0.43)
Gradyan Türü: Radyal Radyal yön: aşağıda
Başlangıç Pozisyonu:% 87
Son pozisyon:% 87
6. KAMU BULUKLARI Son örnek, parçaları paylaşılmış gibi hissettirmelidir.
Gradyan Arka Plan Ayarları İlk bölüm ilk bölüm ayarlarını açın ve aşağıdaki gradyan arka planını kullanın:
Birinci renk: RGBA (160.181.193.0.46)
İkinci renk: RGBA (255,255,255.0) Gradyan Türü: Radyal Radyal Yön: Üst
Başlangıç pozisyonu:% 56.3
Son pozisyon:% 43
DEĞERLENDİRİM GİRİŞİ İKİNCİ BÖLÜMÜ AYARLAMAYIN İkinci kısım için aşağıdaki gradyan arka plan ayarlarını kullanın:
Birinci Renk: RGBA (242,242,242.0)
İkinci renk: RGBA (160.181.193.0.46)
Gradyan Türü: Radyal Radyal Yön: Üst
Başlangıç Pozisyonu:% 56
Son pozisyon:% 40
İki parçayı daha uygun hale getirmek için dolgunun ilk bölümünü değiştirin, üst ve alt dolguyu birinci bölümden ‘150 piksel’ olarak değiştireceğiz. İkinci parçanın üst kısmını çıkarın, ayrıca üst dolguyu da sileceğiz. ikinci kısım.
Geçiş bölümünün son zihni farklı parçaları ve hedeflerini birleştirmeye yardımcı olur.Bu yazıda, Divi varsayılan seçeneğini kullanarak yeniden yapabileceğiniz 6 örnek paylaştık.Sorularınız veya önerileriniz varsa;Aşağıdaki yorumlar bölümünde yorum bırakmaktan çekinmeyin!Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!Nikvector / Shutterstock.com tarafından Üstün Görüntü
