Divi ile zarif bir tema bölücü örneği nasıl yeniden
Divisor, herhangi bir web sitesinin tüm görünümünü ve hissini değiştiren uzun zamandır beklenen Divi güncellemesinin bir parçasıdır. Divi güncellemelerinin blog yazısında, dahil ettiğimiz birçok tasarım örneği ve bizi büyülüyor. Bölücünün bu yeni bölümüyle başlamanıza yardımcı olmak için, bu örneklerin her birini nasıl yeniden oluşturacağınızı göstereceğiz. Sadece kendi web siteniz veya bir sonraki projeniz için kullanamazsınız, aynı zamanda Divisor’un Divi’de nasıl çalıştığını anlamanıza da yardımcı olurlar. Size tüm örnekleri ve nasıl geri döneceğinizi göstermeden önce ne bilmeniz gerekir, başlamadan önce bilmeniz (ve anlamanız) gereken bazı şeyler vardır:
Arka plan rengini seçerek her zaman başlar
Gradyanın arka planını arka plan rengin üzerine ekleyebilirsiniz, ancak arka plan rengi orada olmalıdır
Bitişik parçalar arasındaki renk farkı, alt bölücünün bir sonraki rengi almasını sağlar
Aynı şekilde, bu renk farkı, üst bölücünün rengi önceki bölümden almasını sağlar
Sadece her örneğin bölücü kısmını yeniden yapıyoruz
İyi şeylere bakalım, yeniden yapacağımız farklı bir örneğe bakalım. Her örnek görüntülenmeden sonra, sizi belirli örnekten öğretici adımlara götürecek düğmeyi bulabilirsiniz.
örnek 1
Renk İkinci: #FFBE28
Gradyan Türü: Doğrusal
Gradyan yönü: 28 derece
Başlangıç pozisyonu:% 0
Son pozisyon:% 100
Üzerinde çalıştığınız ilk bölümün üst bölücüsü, üst ve alt böcekleri içerir. Stil ve bölücü ayarları neredeyse aynı. Bununla birlikte, üst bölücü çok daha pürüzsüzdür, bu da bir tür yansıma etkisi verir. Tam üst bölücüye ulaşmak için aşağıdaki ayarları kullanın: Bölme Stili: Listede bulun
Renk Renk: RGBA (255,255,255.0.13)
Bölme Yüksekliği: 200px
Bölümcünün parçanın içeriğinin altında veya üstünde görünmesini isteyip istemediğinizi, kullandığınız modüle ve satıra bağlı olarak kendinizi seçebilirsiniz.
Bu örneğin alt bölücü alt bölücüsü aşağıdaki ayarları içerir: Bölme Stili: Listede bulun
Renk Renk: Açık
Böcek Yüksekliği: 149px
Bölüm 2 arka plan rengi İki parça arasında güzel bir geçiş yapmak için, bölücü için rengi ayarlamak zorunda kalmadan, arka plan rengini bu örneğin ikinci kısmına ekleyeceğiz. İstediğiniz rengi kullanabilmenize rağmen, iki parça arasındaki kontrastı vurgulamak için ‘#ffffff’ beyaz kodunu seçtik. Yeniden yap -Örnek # Bölüm 1 Arka Plan Rengi Bir kez daha, ilk bölümünüz için arka plan rengini seçerek başlayın. Bu durumda ‘#ff2a00’ kullanıyoruz. Birinci renk: #ff2a00 Renk İkinci: #FFC9C9
Gradyan Türü: Doğrusal
Gradyan yönü: 90 derece
Başlangıç pozisyonu:% 0
Son pozisyon:% 100
Üst bölücü tasarım sekmenize geçer, Divisor alt kategorisini açar ve aşağıdaki üst bölücüyü kullanır:
Bölme Stili: Listede bulun Renk Renk: Açık
Böcek Yüksekliği: 274 piksel
Yatay bölücü tekrar: 0.6x
Kullandığımız alt bölücü neredeyse aynı. Ayırt edilen şeylerden biri, bu bölücünün yatay olarak tersine çevrilmesi gerektiğidir. Aynı alt bölücüye ulaşmak için aşağıdaki ayarları kullanın:
Bölme Stili: Listede bulun Renk Renk: #FF2A00
Böcek Yüksekliği: 277px
Yatay bölücü tekrar: 0.7x
Flip Bölüğer: Yatay
Arka plan rengimizin 2. Bölümü, bir kez daha, ikinci bölümümüz için arka plan rengi olarak ‘#ff2a00’ kullanın.
Arka Plan Gradyan Arka planımızın renginin üzerindeki gradyan, gradyanın arka planını ekleyelim. İkinci kısımdaki gradyanın arka planını, önceki bölümde kullanılan alt bölücü rengi ile eşleştiriyoruz. Bu, sorunsuz bir geçiş yapmamızı sağlayacaktır. Kullanılan tam gradyanın arka planı aşağıdaki gibidir: Birinci renk: #ff2a00 Renk İkinci: #9B47EF
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç pozisyonu:% 0
Son pozisyon:% 87
Sonraki ve son olarak bu örnek için ihtiyacımız olan alt bölücü aşağıdaki alt bölücüdür:
Bölme Stili: Listede bulun Renk Renk: Temizlik Yüksekliği: 300 piksel
Yatay bölücü tekrar: 1x
Bölme Ayarları: Altını doldurun
Divisor, dizüstü bilgisayarın bölünme ile örtüşmesini sağlamak için sağlanan bölümün içeriğinin altına koyduk.
Yeniden yap -Örnek #3
Bölüm 1 arka plan rengi, paylaştığınız tüm içeriği içeren ilk bölüme beyaz bir kod ‘#ffffff’ ekleyerek başlayın.
Bu bölüme ekleyeceğiniz alt bölücünün bir sonraki bölüme uyması amaçlanmıştır. Yapmanıza yardımcı olacak bir şey, bölücünün rengini net tutmaktır. Bu, ilk bölümünüzün alt bölücüleri için ihtiyacınız olan ayarlardır: Bölme Stili: Listede bulun Renk Renk: Açık Böcek Yüksekliği: 282px
Yatay bölücü tekrar: 0x
Flip Bölüğer: Yatay
Bölme Ayarları: Yukarıdaki İçerik Bölümü
Bölüm 2 Renk Arka Planı Bir sonraki bölümün arka plan rengi olarak ‘#7d3bd2’yi seçtik. Bu, önceki bölümünüzün alt bölücüleri tarafından miras alınacak renktir.
Arka Plan Arka plan rengimizin üzerindeki gradyan, aşağıdaki gradyan arka planını ekliyoruz:
İlk renk: #7125CE Renk İkinci: #150044 Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç pozisyonu:% 0
Son pozisyon:% 100
Üst bölücü bölümünüzdeki tasarım sekmesine geçer, bölücü alt kategorisini açar ve aşağıdaki üst bölücüyü kullanır:
Bölme Stili: Listede bulun
Renk Renk: RGBA (255,255,255,0,05) Böcek Yüksekliği: 337px
Yatay bölücü tekrar: 0.75x
Flip Bölüğer: Yatay
Bölme Ayarları: Altını doldurun
Bir sonraki alt bölücü, üst bölücümüzü aşağıdaki ayarlarla eşleştiren alt bölücüyü kullanıyoruz: Bölme Stili: Listede bulun
Renk Renk: Açık
Böcek Yüksekliği: 337px Yatay bölücü tekrar: 0.75x
Flip Bölüğer: Yatay
Bölme Ayarları: Altını doldurun
Bölüm 3 Arka Plan Rengi Bu örneğin son kısmı için, arka plan rengi olarak ‘#474ab6’ ekleyin.
Gradyan Arka Planımız örneğimizin daha iyi görünmesi için, arka plan renginin üzerindeki aşağıdaki gradyan arka planını kullanırız:
Birinci renk: #474ab6
Renk İkinci: #9271F6 Gradyan Türü: Doğrusal Gradyan yönü: 180 derece
Başlangıç pozisyonu:% 0
Son pozisyon:% 100
Alt bölücü son olarak, ancak en az değil, bu bölüm için aşağıdaki alt böcekleri uyguluyoruz:
Bölme Stili: Listede bulun
Renk Renk: Açık
Bölme Yüksekliği: 200px
Yatay bölücü tekrar: 1x
Flip Bölüğer: Yatay
Bölme Ayarları: Altını doldurun
Yeniden yap -örnek #4
Bölüm 1 Arka plan rengi Yeni bir parça ekleyin (ihtiyacınız olan tüm satırlar ve modüllerle) ve parçanın arka plan rengi olarak ‘#ffffff’ ekleyin.
Bölüm 2 Arka Plan Rengi Bir sonraki bölüm arka plan rengi olarak ‘#24A5f6’ nın tadını çıkaracaktır.
Üzerinde gradyan arka plan, aşağıdaki gradyan arka planı:
Başlangıç pozisyonu:% 0
Son pozisyon:% 100
Üst bölücü tasarım sekmesine geçer, bölme alt kategorisini açar ve bölümünüze aşağıdaki üst bölücüyü ekler:
Bölme Stili: Listede bulun
Renk Renk: Açık
Böcek Yüksekliği: 204px Yatay bölücü tekrar: 1
Alt Böcek Altını Alt Bölücü için aşağıdaki ayarları kullanırız: Bunun yerine Divider Style: Listede bulun
Renk Renk: Açık
Böcek Yüksekliği: 407px
Yatay bölücü tekrar: 1x Flip Bölüğer: Yatay
Yeniden yap -Örnek #5
Bölüm 1 Arka Plan Rengi Bu örnek için kullandığımız ilk bölüm, arka plan rengi olarak ‘#ffffff’ içerir.
Alt bölücümüz ayrıca aşağıdaki ayarları kullanarak bu bölüme engebeli bir alt bölücü uygular:
Bölme Stili: Listede bulun
Renk Renk: Açık Böcek Yüksekliği: 192px (masaüstü), 140px (tablet ve cep telefonu) Yatay bölücü tekrar: 0x Bölüm 2 Kullandığımız ikinci bölümün arka plan rengi, bölücüyü hiç içermez. Yapmanız gereken tek şey, arka plan rengi olarak ‘#00c9ed’ eklemektir.
Bölüm 3 Son bölümün arka plan rengi, arka plan rengi olarak ‘#64bde0’ kullanır.
Gradyan Arka Plan ek olarak, gradyanın arka planını bir arka plan görüntüsü ile birleştiriyoruz. Bölümünüze aşağıdaki gradyan arka planını ekleyin:
Birinci Renk: RGBA (30,135,255.0.3)
Renk İkinci: #ffffff Gradyan Türü: Doğrusal Gradyan yönü: 180 derece Başlangıç Pozisyonu:% 39
Son pozisyon:% 100
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Arka plan görüntüsü, gradyanın arka planını ekledikten hemen sonra, arka plan görüntüsünü aşağıdaki ayarlarla kombinasyon halinde bölümünüze ekleyin:
Arka Plan Görüntü Boyutu: Kapak
Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Arka Plan Görüntü Karışımı: Normal Üst bölücü Tasarım sekmesine geçer, Divisor alt kategorisini açar ve bölümünüz için aşağıdaki üst bölücüyü kullanın: Bölüm Stili: Listede bulun
Renk Renk: Açık
Ekran Yüksekliği: 300 piksel (masaüstü), 180px (tablet ve cep telefonu)
Yatay bölücü tekrar: 0.9x
Alt Böcek Bu örneği tamamlamak için, bu son bölüm için aşağıdaki alt bölücüyü kullanın: Bölme Stili: Listede bulun
Renk Renk: RGBA (247,247,247.0.29)
Ekran Yüksekliği: 300 piksel (masaüstü), 180px (tablet ve cep telefonu)
Yatay bölücü tekrar: 0.9x
yeniden örnek #6 Bölüm 1 Arka Plan Rengi Bu örneğin ilk kısmı için arka plan rengi olarak ‘#166DDE’ seçin.
Gradyan arka planı, bu bölüme aşağıdaki gradyan arka planını da ekleyin:
İlk renk: #1E87ff
Renk İkinci: #001F77
Gradyan Türü: Doğrusal Gradyan yönü: 216 derece Başlangıç Pozisyonu:% 42 Son pozisyon:% 100
Bu bölüm için kullandığımız üst bölücünün aşağıdaki ayarları vardır:
Bölme Stili: Listede bulun
Renk Renk: #ffffff
Böcek Yüksekliği: 300 piksel (masaüstü), 100 piksel (tablet ve cep telefonu)
Yatay bölücü tekrar: 1x
Bölme Ayarları: Altını doldurun Alt bölücü ve alt bölücüyü de içerir:
Bölme Stili: Listede bulun
Renk Renk: Açık
Böcek Yüksekliği: 300 piksel
Yatay bölücü tekrar: 0x
Bölme Ayarları: Yukarıdaki İçerik Bölümü Bölüm 2 Arka Plan Rengi İkinci kısım arka plan rengi olarak ‘#1E87ff’ içerir.
Aşağıdaki ince gradyan arka planı ile birlikte gradyan arka plan:
İlk renk: #1E87ff
Renk İkinci: #1E4FFFF
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece Başlangıç pozisyonu:% 0 Son pozisyon:% 100
Alt bölücü ve son ama daha az önemli değil; Örneğimizi tamamlamak için ikinci bölüme alt bölücüyü ekledik: Discover Style: Listede bulun
Renk Renk: Açık
Ekran Yüksekliği: 500 piksel (masaüstü), 280 piksel (tablet), 200px (cep telefonu)
Yeniden yap -Örnek #7
Bölüm 1 Arka Plan Rengi Yeni bir parça ekleyin, buna gereken satırları ve modülleri ekleyin ve arka plan rengi olarak ‘#ffffff’ seçin.
Alt bölücü hemen tasarım sekmesine geçer, Divisor alt kategorisini açar ve aşağıdaki alt bölücüyü kullanır: Bölme Stili: Listede bulun
Renk Renk: Açık
Böcek Yüksekliği: 400 piksel (masaüstü), 180px (tablet), 120px (cep telefonu)
Yatay bölücü tekrar: 0x Bölme Ayarları: Altını doldurun Bölüm 2 Arka Plan Rengi İkinci bölümünüze uyguladığınız arka plan rengi, önceki parçanızın alt bölücülerine otomatik olarak uygulanır (bölücünün rengi açıksa). İkinci bölümümüzün arka plan rengi olarak ‘#fcd21d’ renk kodunu kullanıyoruz. Son alt bölücü, ikinci bölümünüze alt bölücüyü ekleyin:
Bölme Stili: Listede bulun
Renk Renk: #ffffff
Bölüsün yüksekliği: 700 piksel (masaüstü), 140 piksel (tablet ve cep telefonu)
Yatay bölücü tekrar: 1x
Bölme Ayarları: Altını doldurun yeniden örnek #8 Bölüm 1 arka plan rengi, ilk bölümün arka plan rengi olarak ‘#FCFCFC’ ekleyerek başlar.
Alt bölücü Tasarım sekmesine geçer, Divisor alt kategorisini açar ve aşağıdaki alt bölücüyü kullanır:
Bölme Stili: Listede bulun
Renk Renk: Açık
Böcek Yüksekliği: 69px (masaüstü), 46px (tablet), 38px (cep telefonu)
Bölüm 2 Arka Plan Rengi Bu örneği tamamlayın, ikinci bölümünüzün arka plan rengi olarak ‘#770fff’ ekleyin. Bu yazıdaki son zihin, her tür web sitesine ekleyebileceğiniz birkaç şaşırtıcı kısımdan geçtik.Bu örnekleri yeniden yapmak, bölümü nasıl böleceğinizi ve ziyaretçileri etkilemek ve herhangi bir fotoğraf düzenleme yazılımı kullanmak zorunda kalmadan yaptığınız web sitesinden en iyisini almak için bunları nasıl kullanabileceğinizi hızlı bir şekilde anlamanıza olanak tanır.Sorularınız veya önerileriniz varsa;Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
