Yeni bir divi seçeneğiyle bölücü modülünü kullanmanın 10 eğlenceli yolu
Bugünün Divi öğreticisinde, önceki güncellemede Divi’ye eklenen yeni seçeneklerle neler yapabileceğinize dair bir bakışta sizinle paylaşacağız. Daha doğru; Bu yeni değişiklik ile bölücü modülünü organize etmenin 10 ilginç yolunu paylaşacağız. Olasılık gerçekten sınırsızdır, ancak bu yazı bir sonraki projeniz için ihtiyacınız olan ilhamı bulmanıza yardımcı olabilir. Sneak Peek Bu öğretici ile ilgili en iyi şeylerden biri, ek CSS (veya bu durumda herhangi bir kod) kullanmayacağımız gerçeğidir. Yapacağımız tüm örnekler yalnızca bölücü modülünde yer alan seçenekleri kullanacaktır. Her adım adım nasıl yapacağımızı göstermeden önce yapacağımız bölücüye bakalım:
10 örnekte kullanacağınız ilk şey için yeniden kullanılabilecek kısım için YouTube kanalımıza abone olan yeni bir divi seçeneği ile bölücü modülünü kullanmanın eğlenceli yolu 10 örnekte kullanacağımız parçayı yapmaktır. Tabii ki, böcekleri diğer bağlamlarda da kullanabilirsiniz, ancak önce bu bölümü oluşturarak, kendi Divi oluşturucunuzla oynama ve hangisini sevdiğinizi görme fırsatına sahip olacaksınız. WordPress gösterge panelinizde yeni bir sayfa oluşturarak, Divi Builder’ı etkinleştirerek ve görsel oluşturucuyu açarak yeni bir sayfa oluşturun.Yeni bir sayfadayken üç sütunlu parça oluşturun, standart bir bölüm oluşturun ve standart bölümde üç sütun satırı kullanın. Arka plan rengi olarak ‘#f4f4f4’ kullandık. İlk metin modülünü ekleyin, ardından ilk metin modülünü satırın ilk sütununa ekleyin. Ayarları açın, görüntülemek istediğiniz metni yazın ve Tasarım sekmesini açın. Tasarım sekmesinde, alt kategori metninde aşağıdaki değişiklikleri yapın: metin yazı tipi: ıstakoz
Metin yazı tipi boyutu: 35
Metin rengi: #000000
Hat yüksekliği metni: 1.7em
Metin Oryantasyonu: Orta
İkinci metin modülünü ekleyin Birinci metin modülünü ekledikten sonra, diğerlerini hemen ekleyebilirsiniz. Görüntülemek istediğiniz metni ekleyin ve Tasarım sekmesini açın. Tasarım sekmesinin içinde, aşağıdaki değişikliğin geçerli olduğundan emin olun: Metin yazı tipi: Roboto
Metin yazı tipi boyutu: 14
Hat yüksekliği metni: 1.7em
Metin Oryantasyonu: Orta
Metin modülünü klonlamak ve bu iki metin modülü yaptıktan sonra diğer iki sütuna yerleştirerek, diğer iki satır sütuna da koyabilirsiniz. Başlamadan önce divi bölücü modülleri tasarlamanın 10 eğlenceli yolunu paylaşacağız. Her örneğin birbiriyle uyumlu üç böceğe sahip olacaktır. Ayarların çoğu üç modül için aynıdır. Size her biri için düzenlemeleri göstererek başlayacağız ve diğer iki bölücüde yapmanız gereken değişiklikleri göstererek devam edeceğiz. Böylece, ilk bölücüyü her bitirdiğinizde, klonlar ve diğer iki sütuna yerleştirin. Bunu yapmayı bitirdikten sonra, diğer iki bölende değişiklik yapabilirsiniz. Not: Her bölücü için, içerik sekmesindeki ‘Ekran göster’ seçeneğini etkinleştirmeniz gerekir.
1. Üçgen Bulanık İlk Anayasal Modül sekmesinin ayarları İçerik sekmesinde aşağıdaki arka plan ayarlarını kullanacağız: İlk renk: #E09900
İkinci Renk: RGBA (255,255,255.0) Gradyan Türü: Doğrusal
Gradyan yönü: 176deg
Başlangıç Pozisyonu:% 13
Son pozisyon:% 31
Tasarım sekmesi tasarım sekmesine geçer ve aşağıdaki ayarların alt kategori boyutu için geçerli olduğundan emin olun:
Bölücü ağırlığı: 0 Yükseklik: 25px
Genişlik:% 35
Modül hizalaması: merkez
Aynı sekmeyi aşağı kaydırın ve animasyon alt kategorisinde aşağıdaki animasyon ayarlarını kullanın:
Animasyon Stili: Slayt Animasyon tekrarlama: bir kez
Animasyon yönü: merkez
Animasyon Süresi: 1200ms
Animasyon yoğunluğu:% 80
İçerik sekmesinin ikinci bölücü modülünün ayarları İçerik sekmesinde, yapmanız gereken tek şey birinci gradyanın rengini ‘#0c71c3’ olarak değiştirmektir.
Bir sonraki tasarım sekmesi, animasyonlu alt kategoriye ‘250ms’ animasyon gecikmeleri eklemeniz gerekir. Üçüncü Bölme Modülü Sekmesi İçeriğinin Ayarları İlk gradyan rengini son bölücü için ‘#8300e9’ olarak değiştirin. Son bölücünün animasyonlu alt kategorisine eklemeniz gereken animasyonlu gecikme tasarımı sekmesi ‘500ms’tir. 2. Renk Gölgesi İlk Anayasal Modül sekmesinin ayarları İçerik İçerik sekmesinde aşağıdaki gradyan arka plan ayarlarını kullanın: İlk renk: #E09900 İkinci renk: RGBA (255,255,255.0)
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç pozisyonu:% 0
Son pozisyon:% 72
Tasarım Sekmesi Tasarım sekmesinde yapmanız gereken ilk şey, bölücünün rengini ‘#000000’ olarak değiştirmektir.
Aynı sekmedeki kuvvetin alt kategorisinde, bölücü stili olarak ‘katı’ ve bir bölücü konumu olarak ‘yukarıda’ kullanın. Aşağı kaydırmaya devam edin ve alt kategori boyutu için aşağıdaki değişikliklerin geçerli olmasını sağlayın: Bölücü ağırlığı: 2 Yükseklik: 20 piksel
Genişlik:% 70
Modül hizalaması: merkez
Ve son olarak, animasyonlu alt kategoriler için aşağıdaki seçenek ayarlarını kullanın: Animasyon Stili: Bounce
Animasyon tekrarlama: bir kez Animasyon yönü: merkez
Animasyon Süresi: 2000ms
İkinci Bölme Modülü sekmesinin ayarları, gradyanın arka planından ‘#0c71c3’ olarak birinci gradyan rengi değiştirin.
Animasyon alt kategorisindeki tasarım sekmesi, animasyon gecikmesi seçeneğine ‘350ms’ ekleyin.
Üçüncü bölücüde aynı değişiklikler için üç içerik bölücü modüllerinin ayarları, ancak bunun yerine ‘#8300e9’ rengini kullanın. Tasarım sekmesi ve son olarak, ‘700ms’ animasyonunun ertelenmesini ekleyin. 3. Gradyan Serisi İlk bölücü için ilk Anayasal Modül sekmesinin ayarları, aşağıdaki gradyan arka plan ayarlarını kullanın: Birinci renk: #0970a0 İkinci renk: RGBA (255,255,255.0) Gradyan Türü: Doğrusal
Gradyan yönü: 119deg
Başlangıç pozisyonu:% 0
Son pozisyon:% 86
Tasarım sekmesindeki Tasarım sekmesi, bölücü renginiz olarak ‘#ffffff’ seçeneğini seçin.
Ardından, Styles alt kategorisinde aşağıdaki değişiklikleri yapın:
Bölücü kuvveti: katı Dikey merkezli pozisyon: Hala aynı sekmede iken, alt kategori boyutu için aşağıdaki ayarların geçerli olduğundan emin olun:
Bölücü ağırlığı: 3
Yükseklik: 10 piksel Genişlik:% 25
Modül hizalaması: sol
Uzay alt kategorisindeki alt dolguya ’15px’ ekleyin.
Ve son olarak, animasyonlu alt kategoriler için aşağıdaki ayarları kullanın:
Animasyon Stili: Slayt Animasyon tekrarlama: bir kez Animasyonlu Yön: Sol
Animasyon Süresi: 2000ms
Animasyon yoğunluğu:% 100
İkinci Bölme Modülü Sekmesi Ayarları İkinci bölücü için gradyan arka plan ayarlarının içeriği biraz farklıdır:
Birinci renk: #0970a0
İkinci renk: RGBA (255,255,255.0) Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç pozisyonu:% 0
Son Konum: Alt Kategori Boyutlandırmasında%100 Tasarım Sekmesi, Hizalama Modülünü bir merkeze değiştirin.
Son olarak, animasyonun yönünü de odaklayın.
Diğer gradyanların arka planını da içeren Üçüncü Bölme İçeriği sekmesi için üçüncü bölücü modülünün ayarları:
Birinci Renk: RGBA (255,255,255.0) Renk İkinci: #0970A0 Gradyan Türü: Doğrusal Gradyan yönü: 119deg
Başlangıç Pozisyonu:% 14
Son pozisyon:% 100
Tasarım sekmemiz ikinci bölücüde yaptığımızla aynı değişikliği yapacak, ancak merkez yerine doğru kullanacak.
4. yuvarlanma çemberi
İlk Bölme Modülünün Ayarları İçerik sekmesi, aşağıdaki gradyan arka plan ayarlarını uygularken başlar:
İlk renk: #E09900 İkinci renk: RGBA (255,255,255.0) Gradyan Türü: Radyal Radyal Yön: Merkez
Başlangıç Pozisyonu:% 20
Son pozisyon:% 21
Tasarım sekmesi Tasarım sekmesinde yapmanız gereken ilk şey, divisor için ‘#000000’ rengini kullanmaktır.
Ardından, bölücü stiliniz olarak ‘katı’ ve bölücü konumunuz olarak ‘dikey olarak ortalanmış’ seçin.
Ardından, boyut alt kategorisinde aşağıdaki değişiklikleri yapın:
Bölücü ağırlığı: 2 Yükseklik: 50 piksel Genişlik:% 40 Modül hizalaması: merkez
Son olarak, animasyon alt kategorileri aşağıdaki ayarları gerektirir:
Animasyon Stili: Rulo
Animasyon tekrarlama: bir kez
Animasyon yönü: merkez Animasyon Süresi: 1500ms
Animasyon gecikmesi: 850ms
Animasyon yoğunluğu:% 60
İkinci Bölme Modülü Sekmesi İçeriğinin Ayarları Birinci Gradyan Rengi ‘#0C71C3’ olarak değiştirin.
Tasarım sekmesi ve animasyon gecikmesini ‘0ms’ olarak değiştirin.
Üçüncü Bölme Modülünün Ayarları Son Bölücü için Son İçerik sekmesi için, yalnızca ilk gradyanın arka plan rengini ‘#8300e9’ olarak değiştirmeniz gerekir.
5. Parantez İlk Anayasal Modül Sekmesi İçeriğinin Ayarları Aşağıdaki gradyan arka plan ayarlarını kullanın: İlk Renk: #E0D1B1 Renk İkinci: #E09900 Gradyan Türü: Radyal Radyal Yön: Merkez Başlangıç Pozisyonu:% 36
Son pozisyon:% 100
Tasarım sekmesi Bölücünün renginin parçanın arka plan rengi ile aynı olduğundan emin olun. Bu durumda, yani ‘#f4f4f4’.
Tasarım sekmesini aşağı kaydırın ve bölücü stiliniz olarak ‘merkez’i ve bölücü konumunuz olarak’ üst ‘kullanın.
Boyut Alt Kategorisi için aşağıdaki ayarları oluşturun:
Bölücü ağırlığı: 100
Yükseklik: 18px
Genişlik:% 60
Modül hizalaması: merkez Ayrıca üst, sağ ve sol dolguya ’15px’ eklemeniz gerekir.Son olarak, aşağıdaki animasyon ayarlarını kullanın:
Animasyon Stili: Zoom
Animasyon tekrarlama: bir kez
Animasyon yönü: merkez Animasyon Süresi: 1000ms Animasyon yoğunluğu:% 80
İkinci Bölme Modülü sekmesinin ayarları, gradyanın arka plan rengini ‘#87ACC1’ ve ‘#0C71C3’ olarak değiştirir.
Bir sonraki tasarım sekmesi, animasyon süresini ‘1300ms’ ve animasyon gecikmesini ‘250ms’ olarak değiştirin.
Üçüncü bölücüde kullanılan gradyan renk içeriği sekmesinin üçüncü bölücü modülünün ayarları ‘#c9a4e8’ ve ‘#8300e9’dur.
Tasarım sekmesi animasyon süresini ‘1300ms’ olarak değiştirir ve animasyonun ‘500ms’ olarak gecikmesini değiştirir.
6. Doububline İlk Bölme Modülünün Ayarları İçerik sekmesi aşağıdaki gradyan arka plan ayarlarını uygulayın: İlk renk: #E09900 İkinci renk: RGBA (255,255,255.0) Gradyan Türü: Doğrusal Gradyan yönü: 179deg Başlangıç pozisyonu:% 0
Son pozisyon:% 45
Tasarım sekmesi bölücü renginiz olarak ‘#000000’ seçeneğini seçin.
Stil alt kategorisinde, bölme stiliniz olarak ‘çift’ kullanın ve bölücü konumunuz olarak ‘dikey olarak ortalanmış’ kullanın. Ardından, alt kategori boyutu için aşağıdaki ayarları kullanın:
Bölücü ağırlığı: 5
Yükseklik: 25px
Genişlik:% 35 Modül hizalaması: sol Son olarak, aşağıdaki animasyon ayarlarını kullanın: Animasyon Stili: Rulo
Animasyon tekrarlama: bir kez
Animasyonlu Yön: Sol
Animasyon Süresi: 1000ms
Animasyon yoğunluğu:% 50 İkinci Bölme Modülü Sekmesi İçeriğinin Ayarları Birinci Gradyan Rengi ‘#0C71C3’ olarak değiştirin.
Bir sonraki tasarım sekmesi, ikinci bölücü için farklı animasyonlar kullanın:
Animasyon Stili: Fades
Animasyon tekrarlama: bir kez
Animasyon Süresi: 1400ms
Ayarlar Üçüncü bölücü için üçüncü bölücü modülünü, birinci gradyanın arka plan rengi olarak ‘#8300e9’ kullanın. Tasarım sekmesi, tasarım sekmesinde değiştirmeniz gereken tek şey, bu durumda ‘doğru’ olan animasyon yönüdür. 7. Köprü
İlk Bölme Modülünü Ayarla İçerik sekmesi ‘#8300e9’ arka plana ayarlayarak başlar.
Tasarım sekmesi, bu durumda ‘#f4f4f4’ olan bölücünüzün arka plan rengini kullanmaya devam eder.
Ardından, bölücü stiliniz olarak ‘noktalı’ ve bölücü konumunuz olarak ‘üst’ kullanın. Boyut alt kategorisinde aşağıdaki ayarları kullanın: Bölücü ağırlığı: 15 Yükseklik: 7 piksel Genişlik:% 70 Modül hizalaması: sol Ayrıca bazı özel pedlere ihtiyacımız var: Üst Dolgu: 7 piksel
Sağ dolgu: -7px
Sol dolgu: -7px
Kullanacağımız animasyonun aşağıdaki ayarları vardır:
Animasyon Stili: Slayt Animasyon tekrarlama: bir kez
Animasyonlu Yön: Sol
Animasyon Süresi: 800ms
Animasyon gecikmesi: 400ms Animasyon yoğunluğu:% 30
Ayarlar İkinci bölücü modülünü ikinci bölücü için, arka planı ‘#0c71c3’ olarak değiştirin. Tasarımımız da farklı animasyonlar kullanacaktır:
Animasyon Stili: Zoom
Animasyon tekrarlama: bir kez
Animasyon yönü: merkez
Animasyon Süresi: 800ms
Animasyon yoğunluğu:% 30 Üçüncü Bölme sekmesi için üçüncü bölücü modül ayarları, arka plan rengi olarak ‘#8300e9’ kullanır. Üçüncü bölücü için animasyonlu tasarım sekmesi de biraz farklıdır:
Animasyon Stili: Zoom
Animasyon tekrarlama: bir kez
Animasyonlu yön: doğru
Animasyon Süresi: 800ms
Animasyon gecikmesi: 400ms Animasyon yoğunluğu:% 30 8. zarafet
İlk Anayasal Modül sekmesi içeriğinin ayarları, ilk bölücüye aşağıdaki gradyan arka plan ekleyerek başlar:
İlk renk: #000000
İkinci renk: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 20 Son pozisyon:% 20 Tasarım sekmesi, bölücünüz için ‘#8300e9’ rengini kullanır.
Ardından, bölücü stiliniz olarak ‘noktalı’ ve bölücü konumunuz olarak ‘dikey olarak ortalanmış’ kullanın.
Ayrıca ’40 piksel’ üzerinde dolgulamaya ihtiyacımız var.
Ve aşağıdaki ayarlarla animasyon:
Animasyon Stili: Bounce
Animasyon tekrarlama: bir kez
Animasyonlu yön: aşağıda Animasyon Süresi: 1000ms Ayarlar İkinci bölücü modülünü ikinci bölücü için, rengi ‘0c71c3’ olarak değiştirin. Animasyon da bazı değişiklikler gerektirecektir: Animasyon yönü: merkez
Animasyon süresi 1500ms
Üçüncü Bölüm Tasarım sekmesi için üçüncü bölücü modül ayarları, renk olarak ‘#8300e9’ kullanır.
Ve animasyonun yönü olarak ‘yükselen’ olacak.
9. Daha ince Ayarlar İlk Bölme Modülü Sekmesi İçerik Degrendinin arka planı için aşağıdaki ayarları seçin: İlk Renk: #8300E9 İkinci renk: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Merkez Başlangıç pozisyonu:% 0 Son pozisyon:% 38 Boyut Alt Kategorisinde Tasarım sekmesi, aşağıdaki ayarlara ihtiyacınız var: Bölücü ağırlığı: 0
Yükseklik: 4px
Genişlik:% 100
Son olarak, kullanacağımız animasyonun aşağıdaki ayarları vardır:
Animasyon Stili: Bounce
Animasyon tekrarlama: bir kez
Animasyonlu yön: üst Animasyon süresi 1800ms
Ayarlar İkinci bölücü modülünü ikinci bölücü için, birinci gradyanın arka plan rengini ‘#0c71c3’ olarak değiştirin.
Üçüncü bölücüdeki aynı değişiklik için üç içerik bölücü modüllerinin ayarları, ancak bunun yerine mor ‘#8300e9’ rengini kullanın.
10. Işık İlk Anayasal Modül Sekmesi İçeriğinin Ayarları Son devre için aşağıdaki gradyan arka plan ayarlarından yararlanır:
İlk renk:
İkinci renk:
Gradyan Türü: Radyal
Radyal Yön: Merkez Başlangıç pozisyonu:% 0 Son pozisyon:% 38 Tasarım sekmesi, bölücü renginiz olarak parçanın arka plan rengini de seçin, bu durumda ‘#f4f4f4’. Ardından, bölücü stiliniz olarak ‘kesikli’ ve bölücü konumunuz olarak ‘dikey olarak ortalanmış’ kullanın.
Boyut alt kategorisinde aşağıdaki ayarları kullanın:
Bölücü ağırlığı: 70
Yükseklik: 20 piksel
Genişlik:% 100
Son olarak, animasyonu aşağıdaki seçeneklerle kullanacağız:
Animasyon Stili: Fades Animasyon tekrarlama: bir kez Animasyon Süresi: 1800ms Animasyon gecikmesi: 800ms
Ayarlar İkinci bölücü modülünü ikinci bölücü için, ikinci gradyanın arka plan rengini ‘#0c71c3’ olarak değiştirin.
Tasarım sekmesi ve animasyon ‘250ms’ ertelemesini ekleyin. Üçüncü içerik merkezleme modülünün son bölücü için ayarları, ikinci gradyanın arka plan rengini ‘#8300e9’ olarak değiştirin.
‘0ms’ e animasyon gecikmesi koyarak sekme ve son tasarım. Yeni Divi seçeneği ile son zihin, her modülün doğuştan gelen ayarlarında birçok yeni yaratıcı şey mümkündür.Bu yazıda, özellikle bu seçeneğin bölücü modülü aracılığıyla tasarımınızı geliştirmenize nasıl yardımcı olabileceğini gösteriyoruz.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!Vikivector / Shutterstock.com tarafından Üstün Görüntü
