Yeni Bir Divi Tasarım Seçeneği Kullanarak Bölüm Nasıl Oluşturulur
Bugünün Divi öğreticisinde, web siteniz için nasıl inanılmaz bir bölüm oluşturabileceğinizi göstereceğiz. Bu bölümler ziyaretçileriniz için yönergeler olarak işlev görür. Bu, bir sayfanın başka bir bölümüne girdiklerinde onları gösterecektir. Genellikle, bölüm tüm parçalarda belirli bir arka plan rengi ile birlikte kullanılır. Web sitenizdeki bölümü kullanmayı düşünüyorsanız, bu yazı ilham almak için iyi bir yer olabilir. Bu yazıyı takip ederek kolayca yapabileceğiniz 4 bölüm stilini göstereceğiz.
Sonuçlar Dördüncü bölümün pratik tarafına girmeden önce, sonuçtan ne bekleyebileceğinizi görelim. Stil #1 Bölümü
Yükseklik: 23px
Genişlik:% 62
Modül hizalaması: sol
Bölme modülünü ekledikten sonra ilk metin modülü, ilk metin modülünü hemen altına ekleme zamanı. Bölüm numarasını seçtikten sonra aşağıdaki gradyan arka planını kullanın: Birinci Renk: RGBA (96,150,193.0.16)
İkinci renk: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 51
Son pozisyon:% 51
Ardından, Tasarım sekmesine devam edin ve metin alt kategorisinde aşağıdaki değişiklikleri yapın: Metin Yazı Tipi: Mutlu Maymun
Metin yazı tipi boyutu: 53 (masaüstü ve tablet), 25 (telefon)
Metin rengi: #000000
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Alt kategori boyutlandırmasını açın, ‘%40’ genişliğini seçin ve hizalama modülünün ortasını seçin. Metin modülünün gerekli olduğu son şey aşağıdaki özel marj ve dolgudur: Üst kenar: -40px
Üst dolgu: 40 piksel
Sağ dolgu: 50px
Dolgu Alt: 40 piksel
Sol dolgu: 50 piksel
İkinci metin modülü, aşağıdaki metin alt kategorisi ayarlarına sahip başka bir metin modülü ekler: Metin Yazı Tipi: Arimo
Metin yazı tipi boyutu: 19px
Metin rengi: #000000
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Aynı sekmeyi aşağı kaydırın, ‘%97’ genişliğini kullanın ve orta modülün hizalama seçeneğini etkinleştirin. Son olarak, üst marjı ‘-15px’ de ekleyin. Metin Modülü Üçüncü Metin Modülü Bölüm bölümündeki son metin modülü aşağıdaki alt kategorize metin ayarlarına sahiptir: Metin Yazı Tipi: Arimo
Metin yazı tipi stili: kalınlık
Metin yazı tipi boyutu: 19px
Metin Rengi: #000000 Yüksek Çizgi Metin: 1EM
Metin Oryantasyonu: Orta
Boyut alt kategorisinin içinde ‘%99’ genişliğini kullanın ve orta modülün hizalamasını seçin.
Bu bölümün bölümü için yapmanız gereken son şey, üst marj ‘-20px’ eklemektir. Stil #2 için Bölüm İkinci örnek satır seçeneği ekranın sağ tarafında bulunur. Bir kez daha, iki sütun ekleyin, ancak satırın doğru seviyesini seçin. Aralık alt kategorisini açın ve ‘0px’ üst, sağ, alt ve sol dolguya ayarlayın. Bölücü modülü, bölücü modülünü sağdaki sütuna ekler ve ‘bölücü göster’ seçeneğini etkinleştirir. Bölücü için aşağıdaki gradyan arka planını kullanacağız: Birinci Renk: RGBA (132.132.132.0.61) İkinci renk: RGBA (224,43,32.0.86)
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç Pozisyonu:% 43
Son pozisyon:% 100
Tasarım sekmesine geçin ve bölücünün rengi olarak ‘RGBA’yı (0.0,0,0,26)’ seçin.
Ardından, bir bölücü stili olarak ‘katı’ ve bölücü konumu olarak ‘üst’ kullanın. Ardından, boyut alt kategorisini açın ve aşağıdaki ayarların uygulanmasını sağlayın: Bölücü ağırlığı: 3px Yükseklik: 11 piksel
Genişlik:% 68
Modül hizalaması: doğru
İlk Metin Modülü İlk metin modülü aşağıdaki metin alt kategorisi ayarlarına sahiptir:
Metin yazı tipi: Cantata One Metin yazı tipi boyutu: 100px
Metin rengi: #000000
Hat yüksekliği metni: 1.7em
Metin Oryantasyonu: Doğru
Aralık alt kategorisini açın ve aşağıdaki özel marj ve dolguyu kullanın:
Üst Marj: -95px Üst dolgu: 40 piksel
Sağ dolgu: 50px
Dolgu Alt: 40 piksel
Sol dolgu: 50 piksel
İkinci metin modülü başka bir metin modülü ekler ve bunun yerine aşağıdaki metin alt kategorisi ayarlarını kullanır:
Metin Yazı Tipi: Arimo Metin yazı tipi boyutu: 20px
Metin rengi: #000000
Dönem Yüksekliği: 1 Madenli Metin: Orta
Ardından, üst marjı ‘-50px’ ekleyin.
Bu örneğin üçüncü ve son metin modülünün üçüncü metin modülü aşağıdaki metin alt kategorisi ayarlarına sahiptir:
Metin yazı tipi: ıstakoz iki Metin yazı tipi boyutu: 43px Metin rengi: #000000
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Son olarak, üst marjı ‘-30px’ ekleyin.
Stil #3’ün Bölümü
Üçüncü örnek için satır seçeneği, aşağıdaki sütun 1 gradyan arka planına sahip iki sütun satırı kullanacağız:
Sütun 1 Degrade Yönü: 139deg
Sütun 1 Başlangıç Pozisyonu:% 11
Sütun 1:% 36’nın son konumu
Tasarım sekmesini açın ve sol satır seviyesini seçin.
Bir kez daha, üst, sağ ve sol kenar boşlukları için ‘0px’ kullanacağız.
Geçerli bölücü modülü, bölücü modülünü sol sütuna ekleyin ve ‘Ekran göster’ seçeneğini etkinleştirin. Arka plan alt kategorisini açın ve aşağıdaki gradyan arka planını kullanın: İlk renk: #4B61AF İkinci renk: RGBA (255,255,255.0) Gradyan Türü: Doğrusal
Gradyan yönü: 161deg
Başlangıç Pozisyonu:% 18
Son pozisyon:% 38
Tasarım sekmesini açın ve bölücü rengi olarak ‘#000000’ seçeneğini seçin.
Kuvvet alt kategorisinde, bir bölücü stili olarak ‘katı’ ve bölücü pozisyonu olarak ‘yukarı’ kullanın.
Ardından, alt kategori boyutu için aşağıdaki ayarların geçerli olduğundan emin olun: Bölücü ağırlığı: 6px Yükseklik: 100 piksel Genişlik:% 70
Modül hizalaması: sol
İlk Metin Modülü, bölücü modülünün hemen altına ilk metin modülünü ekleyerek ve aşağıdaki gradyan arka planını seçerek devam edin:
Birinci Renk: RGBA (131,0,233.0.58)
İkinci renk: RGBA (255,255,255.0) Gradyan Türü: Doğrusal
Degrade yönü: 151 derece Başlangıç Pozisyonu:% 20
Son pozisyon:% 40
Tasarım sekmesini açın ve aşağıdaki metin alt kategorisi ayarlarını kullanın:
Metin yazı tipi: Poiret One
Metin yazı tipi stili: kalınlık
Metin yazı tipi boyutu: 69px Metin rengi: #000000
Hat yüksekliği metni: 1.7em
Metin Oryantasyonu: Orta
Alt kategori boyutlandırmasını açın, ‘%70’ genişliğini kullanın ve sol hizalama modülünü seçin.
Son olarak, aşağıdaki özel marjı ve dolguyu kullanın:
Üst kenar boşluğu: 124px
Üst dolgu: 60 piksel Dolgu Alt: 150 piksel Sol dolgu: 50 piksel
İkinci metin modülü devam edin ve aşağıdaki metin alt kategorisi ayarlarıyla diğer metin modüllerini ekleyin:
Metin Yazı Tipi: Arimo
Metin yazı tipi boyutu: 20px
Metin rengi: #000000 Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Alt kategori boyutlandırmasını açın, ‘%80’ genişliğini seçin ve sol hizalama modülünü seçin.
Son olarak, üst marjı ‘-150px’ ekleyin.
Üçüncü metin modülü, son metin modülünü ilk sütuna ekler ve aşağıdaki metin alt kategorisi ayarlarının geçerli olduğundan emin olun:
Metin Yazı Tipi: Arimo Metin yazı tipi stili: kalınlık Metin yazı tipi boyutu: 20px Metin rengi: #000000
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Alt kategori boyutlandırmasını açın, ‘%80’ genişliğini kullanın ve sol hizalama modülünü seçin.
Son olarak, ‘-20px’ üst marjını seçin ve alt ’50px’ yığını seçin.
Stil #4 için Bölüm
Satır Seçenekleri Son örnek için, sağ satır seviyesini tekrar kullanacağız. Ardından, uzay alanını açın ve ‘0px’ üst, sağ, alt ve sol dolgulara ayarlayın. İlk Metin Modülü Bu son örnek bölücü modülünü içermez, bu nedenle devam edin ve metin modülünü sol sütuna ekleyin. Bunu bitirdikten sonra aşağıdaki gradyan arka planını seçin: Birinci Renk: RGBA (255,255,255.0) Renk İkinci: #92D84B Gradyan Türü: Doğrusal Gradyan yönü: 55deg
Başlangıç Pozisyonu:% 25
Son pozisyon:% 100
Ardından, Tasarım sekmesini açın ve aşağıdaki metin alt kategorisi ayarlarının geçerli olduğundan emin olun:
Metin yazı tipi: Cantata One
Metin yazı tipi boyutu: 220 (masaüstü ve tablet), 100 piksel (telefon)
Metin rengi: #f2f2f2 (arka plan rengiyle eşleşen) Hat yüksekliği metni: 1.7em
Metin Oryantasyonu: Doğru
Alt kategori boyutlandırmasını açın, ‘%82’ genişliğini kullanın ve doğru hizalama modülünü seçin.
Son olarak, aşağıdaki özel dolguyu kullanın:
Yukarıda: 60px
Doğru: 50 piksel Aşağıda: 60px Sol: 50 piksel
İkinci metin modülü başka bir metin modülü ekler ve metin alt kategorisinde aşağıdaki ayarları kullanır:
Metin Yazı Tipi: Arimo
Metin yazı tipi boyutu: 20px
Metin rengi: #000000 Hat yüksekliği metni: 1em
Metin Oryantasyonu: Doğru
Alt kategori boyutlandırmasını açın, geniş ‘%39’ genişliğini seçin ve hizalama modülünün ortasını seçin.
Son olarak, üst kenar boşluğuna ‘-130px’ ekleyin.
Bu bölüm örneğindeki son metin modülünün üçüncü metin modülü aşağıdaki metin alt kategorisi ayarlarına sahiptir:
Metin Yazı Tipi: Dans Etme Komut Dosyası Metin yazı tipi boyutu: 45px Metin rengi: #000000 Hat yüksekliği metni: 1em
Metin Oryantasyonu: Doğru
Alt kategori boyutlandırmasını açın, ‘%50’ genişliğini seçin ve hizalama modülünün ortasını seçin.
Son fakat en az değil, ‘-30px’ üst dolgusunu seçin ve bitti!
