Divi ile Elegant Temanın Bölüm Bölücü Örneklerini Yeniden Oluşturma

Bölüm ayırıcılar, herhangi bir web sitesinin tüm görünümünü ve verdiği hissi değiştiren uzun zamandır beklenen Divi güncellemesinin bir parçasıdır. Divi güncelleme duyurusu blog gönderisinde, dahil ettiğimiz bir ton tasarım örneği var ve bunlar bizi havaya uçurdu.

Bu yeni bölüm ayırıcıları kullanmaya başlamanıza yardımcı olmak için size bu örneklerin her birini nasıl yeniden oluşturacağınızı göstereceğiz. Bunları yalnızca kendi web siteniz veya bir sonraki projeniz için kullanmakla kalmaz, aynı zamanda Divi'deki bölüm ayırıcıların nasıl çalıştığını anlamanıza da yardımcı olurlar.

Ne bilmek istiyorsun

Size tüm örnekleri ve bunları nasıl yeniden oluşturacağınızı göstermeden önce, başlamadan önce bilmeniz (ve anlamanız) gereken bazı şeyler var:

• Her bölüme her zaman bir arka plan rengi seçerek başlayın
• Arka plan renginizin üzerine her zaman bir degrade arka plan ekleyebilirsiniz, ancak arka plan renginin orada olması gerekir
• Komşu bölümler arasındaki renk farkı, bir alt ayırıcının bir sonraki bölümün rengini almasına izin verir.
• Aynı şekilde, bu renk farkı, bir üst ayırıcının önceki bölümün rengini almasına izin verir.
• Yalnızca her örneğin bölüm ayırıcılarını yeniden oluşturuyoruz

İyi Şeyleri Görelim

Yeniden oluşturacağımız farklı örneklere hızlıca bir göz atalım. Her örnek vitrinden sonra, sizi o belirli örneğin eğitim adımlarına götürecek bir düğme bulabilirsiniz.

Örnek 1

Bu Örneği Yeniden Oluştur

Örnek #2

Bu Örneği Yeniden Oluştur

Örnek 3

Bu Örneği Yeniden Oluştur

Örnek 4

Bu Örneği Yeniden Oluştur

Örnek #5

Bu Örneği Yeniden Oluştur

Örnek #6

Bu Örneği Yeniden Oluştur

Örnek #7

Bu Örneği Yeniden Oluştur

Örnek #8

Bu Örneği Yeniden Oluştur

Divi ile Bölüm Bölücü Örnekleri Nasıl Yeniden Oluşturulur

Youtube Kanalımıza Abone Olun

Örnek 1'i Yeniden Oluştur

Bölüm 1

Arka plan rengi

Bu yazının başında, üstüne bir degrade arka plan ekleyecek olsanız bile, her zaman bölümünüz için bir arka plan rengi seçerek başlamanız gerektiğini belirtmiştik. Bu örnek için '#ff8790' kullanın.

Degrade Arka Plan

Arka plan renginin üzerine aşağıdaki güzel degrade arka planı ekliyoruz:

• İlk Renk: #ff56f0
• İkinci Renk: #ffbe28
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 28deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

Üst Bölücü

Üzerinde çalıştığınız ilk bölüm, hem üst hem de alt bölüm ayırıcı içerir. Ayırıcı stili ve ayarları hemen hemen aynıdır. Bununla birlikte, üst bölücü, bir tür yansıma efekti veren çok daha incedir. Tam olarak aynı üst bölüm ayırıcıyı elde etmek için aşağıdaki ayarları kullanın:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: rgba(255,255,255,0.13)
• Bölücü Yüksekliği: 200px

Bölücünün bölüm içeriğinin altında mı yoksa üstünde mi görünmesini istediğinizi, kullandığınız modüllere ve satırlara bağlı olarak kendiniz seçebilirsiniz.

Alt Bölücü

Bu örneğin alt ayırıcısı aşağıdaki ayarları içerir:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 149px

Bölüm 2

Arka plan rengi

Her iki bölüm arasında güzel bir geçiş oluşturmak için, ayırıcı için bir renk ayarlamak zorunda kalmadan, bu örneğin ikinci bölümüne bir arka plan rengi ekleyeceğiz. İstediğiniz rengi kullanabilmenize rağmen, her iki bölüm arasındaki kontrastı vurgulamak için '#FFFFFF' beyaz renk kodunu seçtik.

Örnek 2'yi Yeniden Oluştur

Bölüm 1

Arka plan rengi

Yine, ilk bölümünüz için bir arka plan rengi seçerek başlayın. Bu durumda, '#ff2a00' kullanıyoruz.

Degrade Arka Plan

Bölümünüzün arka plan renginin üstüne aşağıdaki gradyan arka planını ekleyin:

• İlk Renk: #ff2a00
• İkinci Renk: #ffc9c9
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

Üst Bölücü

Bölümünüzün Tasarım sekmesine gidin, Bölücüler alt kategorisini açın ve aşağıdaki üst bölüm ayırıcıyı kullanın:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 274px
• Bölücü Yatay Tekrar: 0.6x

Alt Bölücü

Kullandığımız alt bölücü neredeyse aynı. Farklı olan şeylerden biri, bu bölücünün yatay olarak çevrilmesi gerektiğidir. Aynı alt ayırıcıyı elde etmek için aşağıdaki ayarları kullanın:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #ff2a00
• Bölücü Yüksekliği: 277px
• Bölücü Yatay Tekrar: 0.7x
• Bölücü Çevirme: Yatay

Bölüm 2

Arka plan rengi

İkinci bölümümüz için arka plan rengi olarak yine '#ff2a00' kullanıyoruz.

Degrade Arka Plan

Arka plan rengimizin üstüne bir degrade arka plan ekleyelim. İkinci bölümün degrade arka planını, önceki bölümde kullanılan alt ayırıcı rengiyle eşleştiriyoruz. Bu, yumuşak bir geçiş yapmamızı sağlayacaktır. Kullanılan tam degrade arka planı şudur:

• İlk Renk: #ff2a00
• İkinci Renk: #9b47ef
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %87

Alt Bölücü

Bu örnek için ihtiyaç duyacağımız sonraki ve son bölücü aşağıdaki alt bölücüdür:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 300px
• Bölücü Yatay Tekrar: 1x
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

Bölüm ayırıcıyı, dizüstü bilgisayar maketinin ayırıcıyla örtüşmesi için sağlanan bölüm içeriğinin altına yerleştiriyoruz.

Örnek 3'ü Yeniden Oluştur

Bölüm 1

Arka plan rengi

Paylaştığınız tüm içeriği içeren ilk bölüme '#FFFFFF' beyaz renk kodunu ekleyerek başlayın.

Alt Bölücü

Bu bölüme ekleyeceğiniz alt ayırıcı, bir sonraki bölümle mükemmel şekilde eşleşmesi içindir. Bunu yapmanıza yardımcı olacak bir şey, ayırıcı rengini net tutmaktır. İlk bölümünüzün alt ayırıcısı için ihtiyacınız olan ayarlar şunlardır:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 282px
• Bölücü Yatay Tekrar: 0x
• Bölücü Çevirme: Yatay
• Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Bölüm 2

Arka plan rengi

Bir sonraki bölümümüzün arka plan rengi olarak '#7d3bd2'yi seçiyoruz. Bu, önceki bölümünüzün alt ayırıcısının devralacağı renktir.

Degrade Arka Plan

Arka plan rengimizin üzerine aşağıdaki gradyan arka planını ekliyoruz:

• İlk Renk: #7125ce
• İkinci Renk: #150044
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

Üst Bölücü

Bölümünüzün Tasarım sekmesine gidin, Bölücüler alt kategorisini açın ve aşağıdaki üst ayırıcıyı kullanın:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: rgba(255,255,255,0.05)
• Bölücü Yüksekliği: 337px
• Bölücü Yatay Tekrar: 0.75x
• Bölücü Çevirme: Yatay
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

Alt Bölücü

Ardından, aşağıdaki ayarlarla üst bölücümüzle eşleşen bir alt bölücü kullanıyoruz:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 337px
• Bölücü Yatay Tekrar: 0.75x
• Bölücü Çevirme: Yatay
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

3. Bölüm

Arka plan rengi

Bu örneğin son bölümü için arka plan rengi olarak '#474ab6' ekleyin.

Degrade Arka Plan

Örneğimizin daha da iyi görünmesi için, arka plan renginin üstünde aşağıdaki gradyan arka planını kullanıyoruz:

• İlk Renk: #474ab6
• İkinci Renk: #9271f6
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

Alt Bölücü

Son olarak, bu bölüm için aşağıdaki alt ayırıcıyı uyguluyoruz:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 200px
• Bölücü Yatay Tekrar: 1x
• Bölücü Çevirme: Yatay
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

Örnek 4'ü Yeniden Oluştur

Bölüm 1

Arka plan rengi

Yeni bir bölüm ekleyin (ihtiyacınız olan tüm satırlar ve modüller ile) ve o bölümü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 keyfine varacak.

Degrade Arka Plan

Üstünde aşağıdaki gradyan arka planı ile:

• İlk Renk: #00fff6
• İkinci Renk: #5824f4
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 167deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

Üst Bölücü

Tasarım sekmesine gidin, Bölücüler alt kategorisini açın ve bölümünüze aşağıdaki üst ayırıcıyı ekleyin:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 204px
• Bölücü Yatay Tekrar: 1

Alt Bölücü

Alt ayırıcı için bunun yerine aşağıdaki ayarları kullanıyoruz:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 407px
• Bölücü Yatay Tekrar: 1x
• Bölücü Çevirme: Yatay

Örnek 5'i Yeniden Oluştur

Bölüm 1

Arka plan rengi

Bu örnek için kullandığımız ilk bölüm, arka plan rengi olarak '#FFFFFF' içeriyor.

Alt Bölücü

Ayrıca aşağıdaki ayarları kullanarak dalgalı alt ayırıcıyı bu bölüme uyguluyoruz:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 192 piksel (Masaüstü), 140 piksel (Tablet ve Telefon)
• Bölücü Yatay Tekrar: 0x

Bölüm 2

Arka plan rengi

Kullandığımız ikinci bölüm hiç bölüm bölücü içermiyor. Yapmanız gereken tek şey arka plan rengi olarak '#00c9ed' eklemek.

3. Bölüm

Arka plan rengi

Son bölüm, arka plan rengi olarak '#64bde0' kullanır.

Degrade Arka Plan

Bunun da ötesinde, degrade bir arka planı arka plan görüntüsüyle birleştiriyoruz. Bölümünüze aşağıdaki gradyan arka planını ekleyin:

• İlk Renk: rgba(30,135,255,0.3)
• İkinci Renk: #ffffff
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %39
• Bitiş Konumu: %100
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Degrade arka planını ekledikten hemen sonra, aşağıdaki ayarlarla birlikte bölümünüze istediğiniz bir arka plan görüntüsü ekleyin:

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Normal

Üst Bölücü

Tasarım sekmesine gidin, Bölücüler alt kategorisini açın ve bölümünüz için aşağıdaki üst ayırıcıyı kullanın:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 300px (Masaüstü), 180px (Tablet ve Telefon)
• Bölücü Yatay Tekrar: 0.9x

Alt Bölücü

Bu örneği bitirmek için, bu son bölüm için aşağıdaki alt ayırıcıyı kullanın:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: rgba(247,247,247,0,29)
• Bölücü Yüksekliği: 300px (Masaüstü), 180px (Tablet ve Telefon)
• Bölücü Yatay Tekrar: 0.9x

Örnek #6'yı Yeniden Oluştur

Bölüm 1

Arka plan rengi

Bu örneğin ilk bölümü için arka plan rengi olarak '#166dde'yi seçin.

Degrade Arka Plan

Ardından, aşağıdaki degrade arka planını da bu bölüme ekleyin:

• İlk Renk: #1e87ff
• İkinci Renk: #001f77
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 216deg
• Başlangıç ​​Konumu: %42
• Bitiş Konumu: %100

Üst Bölücü

Bu bölüm için kullandığımız üst ayırıcı aşağıdaki ayarlara sahiptir:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #FFFFFF
• Bölücü Yüksekliği: 300px (Masaüstü), 100px (Tablet ve Telefon)
• Bölücü Yatay Tekrar: 1x
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

Alt Bölücü

Ve ayrıca bir alt bölücü içerir:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 300px
• Bölücü Yatay Tekrar: 0x
• Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Bölüm 2

Arka plan rengi

İkinci bölüm, arka plan rengi olarak '#1e87ff' içerir.

Degrade Arka Plan

Aşağıdaki ince gradyan arka planıyla birlikte:

• İlk Renk: #1e87ff
• İkinci Renk: #1e4fff
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

Alt Bölücü

Ve son ama en az değil; Örneğimizi tamamlamak için bu ikinci bölüme de bir alt ayırıcı ekliyoruz:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 500px (Masaüstü), 280px (Tablet), 200px (Telefon)

Örnek #7'yi Yeniden Oluştur

Bölüm 1

Arka plan rengi

Yeni bir bölüm ekleyin, buna gerekli satırları ve modülleri ekleyin ve arka plan rengi olarak '#FFFFFF' seçeneğini seçin.

Alt Bölücü

Hemen Tasarım sekmesine geçin, Bölücüler alt kategorisini açın ve aşağıdaki alt ayırıcıyı kullanın:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 400px (Masaüstü), 180px (Tablet), 120px (Telefon)
• Bölücü Yatay Tekrar: 0x
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

Bölüm 2

Arka plan rengi

(Ayırıcı rengi açık ise) size ikinci bölümüne uygulamak arka plan rengini otomatik olarak bir önceki bölümde alt bölücü uygulanacaktır. İkinci bölümümüzün arka plan rengi olarak '#fcd21d' renk kodunu kullanıyoruz.

Alt Bölücü

Son olarak, ikinci bölümünüze aşağıdaki alt bölüm ayırıcıyı ekleyin:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: #FFFFFF
• Bölücü Yüksekliği: 700px (Masaüstü), 140px (Tablet ve Telefon)
• Bölücü Yatay Tekrar: 1x
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

Örnek #8'i Yeniden Oluştur

Bölüm 1

Arka plan rengi

İlk bölümün arka plan rengi olarak '#fcfcfc' ekleyerek başlayın.

Alt Bölücü

Tasarım sekmesine gidin, Bölücü alt kategorisini açın ve aşağıdaki alt ayırıcıyı kullanın:

• Bölücü Stili: Listede Bul
• Bölücü Rengi: Açık
• Bölücü Yüksekliği: 69px (Masaüstü), 46px (Tablet), 38px (Telefon)

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.

Son düşünceler

Bu yazıda, her tür web sitesine ekleyebileceğiniz harika bölüm ayırıcıları inceledik. Bu örnekleri yeniden oluşturmak, bölüm ayırıcıların nasıl çalıştığını ve ziyaretçileri etkilemek ve oluşturduğunuz web sitesinden herhangi bir fotoğraf düzenleme yazılımı kullanmadan en iyi şekilde yararlanmak için bunları nasıl kullanabileceğinizi hızlı bir şekilde anlamanıza olanak tanır. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!