Bulanıklık modülü divi ile nasıl zaman çizgisi yapılır
Bu yazıda, bulanık modül Divi’nizle nasıl kolayca basit ama zarif bir zaman çizgisi oluşturabileceğinizi göstereceğiz. Aşağıda görebileceğiniz sonuçları elde etmek için modüller ve satırlar tarafından sağlanan çeşitli seçenekleri birleştireceğiz. Paylaşacağımız örnek varsayılan Divi seçeneğine dayanmaktadır, yani herhangi bir ek CSS kodu eklemeniz gerekmez! Ayrıca masaüstünde veya mobil cihazlarda iyi göründüğünden emin oluruz. Zaman çizgisi ekranının sonuçları iki tasarım öğesi ile elde edilir; Üç bulanık modülü ve sayılarını geçen çizgiler. Masaüstü sürümü şöyle görünüyor:
Ve hücresel versiyon şöyle görünüyor: Başlayalım! YouTube kanalına abone olan bir divi bulantı modülü ile bir zaman çizgisi nasıl yapılır Yeni bir standart parça ekleyerek ve arka plan rengi olarak ‘RGBA (0.0,0,0.0.12)’ kullanarak arka plan renginin standart kısmını ekliyoruz . Dolgu bölümü Tasarım sekmesini açar ve ‘300 piksel’ üst dolguyu kullanır. Bir parça yaptıktan sonra üç sütun satırı (zaman çizgisi) arka plan sütunu ekleyin, üç sütun satırı ekleyin. Satırdaki İçerik sekmesinde, sütun 2 ve ‘#8300e9’ sütunlarının arka plan rengi olarak ‘#E09900’, sütun 3’ün arka plan rengi olarak ‘#0c71c3’ olarak kullanın. Tasarım sekmesine yapışkan hareket edin ve alt kategori boyutu için aşağıdaki ayarları kullanın:Bu satır genişliğini dolu hale getirin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet Bir sonraki özel marj ve dolgu, hatta özel dolgu ve özel marjlar ekleyin:
Üst dolgu: 1 piksel
Aşağıda dolgu: 0px
Alt kenar boşluğu: -200 piksel
Ve her sütunun üst ve alt dolgusuna ‘3px’ ekleyin. İlk üç sütunu yaptıktan sonra diğer üç sütun (Blurb modülü) arka plan gradyan sütunu ekleyin, devam edebilir ve ikinci satırı hemen aşağıda yapabilirsiniz (aynı kısmı paylaşırlar). Her sütun, aynı ayarlara sahip ancak farklı bir ilk renge sahip bir gradyan arka plan gerektirir: Birinci renk: #E09900 (sütun 1), #0c71c3 (sütun 2), #8300e9 (sütun 3)
İkinci renk: RGBA (255, 255, 255, 0)
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç Pozisyonu:% 73
Son pozisyon:% 92
Tam bir çizgi oluşturun, Tasarım sekmesini açın ve ‘Bu Sıra Fullwidth Olun’ seçeneğini etkinleştirin. Pilding Custom Line Alan alt kategorisini açın ve hatlar için aşağıdaki özel ve özel marj dolgusunu kullanın: Üst dolgu: 0px
Sağ dolgu: 60 piksel
Dolgu Alt: 100 piksel
Sol dolgu: 60 piksel
Üst Marj: -100 piksel
Her sütunun üst dolgusuna ‘5 piksel’ ekleyin.
Blurb Modülü Satır ayarlarını tamamladıktan sonra, yeni oluşturduğunuz satırın ilk sütununa bir bulanıklık modülü ekleyebilirsiniz. İçerik sekmesindeki Resim ve Icon Alt Kategorisinde, ‘Icon Kullan’ seçeneğini etkinleştirin ve seçilen simgeyi seçin. Aynı sekmeyi aşağı kaydırın ve arka plan rengi olarak ‘#f4f4f4’ kullanın. Tasarım sekmesini açın ve görüntü ve simge alt kategorisinde aşağıdaki ayarlamaları yapın: Renk simgesi: #E09900
Görüntünün/simgenin yerleştirilmesi: sol
Simge yazı tipi boyutu kullanın: evet
Ikon yazı tipi boyutu: 50px
Metin alt kategorisinde, sol metnin yönünün etkinleştirildiğinden emin olun. Alt kategori başlık metni için seçenekler aşağıdaki gibidir:
Editoryal Yazı Tipi: Yuvarlak Kretapereanan Metin Başlığı: Sol
Yazı Tipi Boyutunu Kopyala: 32px
Gölgelik çizgisinin yüksekliği: 1em
Ardından, gövde metni alt kategorisini açın ve aşağıdaki ayarları kullanın:
Vücut metninin hizalanması: sol
Vücut Hattı Yüksekliği: 1.7EM
Sınırı aşağıdaki ayarlarla da kullanacağız:
Sınırı kullanın: Evet Sınır rengi: #000000
Sınır Genişliği: 2 piksel
Sınır Tarzı: Başlayın
Ardından, alt kategori boyutlandırmasını açın ve içerik genişliği için ‘279px’ ve genişlik için ‘%100′ kullanın.
Son olarak, üst, sağ, alt ve sol dolguya ’30px’ ekleyin. Metin Modülü Blurb modülünü ekledikten ve değiştirdikten sonra, devam edin ve metin modülünü hemen altına ekleyin. Metin modülü de gradyan bir arka plan gerektirecektir: İlk renk: #E09900 İkinci renk: RGBA (255, 255, 255, 0)
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 20
Son pozisyon:% 24
Tasarım sekmesine geçin ve metin alt kategorileri için aşağıdaki ayarları kullanın:
Metin yazı tipi boyutu: 21px Metin rengi: #ffffff
Hat yüksekliği metni: 1.7em
Metin Oryantasyonu: Orta
Alt kategori boyutlandırmasını açın, ’48’ genişliğini kullanın ve doğru hizalama modülünü seçin.
Son olarak, üst kenar boşluğunu kullanın ‘-100px’ ve üst ve alt dolguya ’50px’ ekleyin. Klon Blurb ve Modül Metni İlk sütunu bitirdikten sonra, her iki modülü de klonlayabilir ve diğer iki sütuna yerleştirebilirsiniz. Değiştirmeniz gereken tek şey, açıklama simgesi, açıklama rengi ve metin modülünün ilk gradyan rengi ikinci sütun için ‘#0c71c3’ ve son sütun için ‘#8300e9’. Tabletlerde ve Cep Telefonlarında Devre Dışı Bırakın Bu ikinci sırayı bitirdikten sonra, cep telefonları ve tabletler için de devre dışı bıraktığınızdan emin olun. Tabletler ve cep telefonlarındaki üç sütun klon (tablet ve cep telefonu) zaman çizelgesi versiyonları biraz farklıdır. Bu yazının önceki bölümünde oluşturduğunuz açıklama ile satırları klonlama ve cep telefonunuza ve tabletinize sığdırmak için bir sonraki adımı izleyin. Sıra gradyanının arka planını tablete ekleyin ve cep telefonu aşağıdaki gradyan arka planını gerektirecektir: Birinci renk: RGBA (0.0,0,0,7)
İkinci renk: RGBA (255, 255, 255, 0) Gradyan Türü: Doğrusal
Gradyan yönü: 90 derece
Başlangıç Pozisyonu:% 1
Son pozisyon:% 0
Dolgu satırı, masaüstü sürümünde kullanılan tüm özel dolgu ve kenar boşluklarını kaldırır ve üst dolguya ‘100px’ ekler.
Cep telefonları ve tabletlerdeki satırları devre dışı bırakmak yerine son masaüstünü devre dışı bırakın, bunun yerine masaüstünde devre dışı bırakın.
Sonuçlar Gönderideki tüm adımları izledikten sonra, masaüstünde aşağıdaki sonuçları elde edebilmeniz gerekir: Ve işte tabletler ve cep telefonları üzerindeki sonuçlar: Bu yazıdaki son zihin, varsayılan Divi seçeneğinden başka bir şey kullanmadan bulanık modülünüzden nasıl basit bir zaman çizgisi yapabileceğinizi gösterdik. Blurb modülünü zaman çizgisi olarak tanımlamaya yardımcı olan iki faktör, üç bulanık modül ve sayıları birbirine bağlayan çizgilerdir. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! 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!
