Her Slaytla Belirli Öğeleri Değiştirmek için Divi Kaydırıcınızı Özelleştirme

Kaydırıcıların, web sitenizin ekranın üst kısmındaki bölümü en üst düzeye çıkarmak için harika olduğunu hepimiz biliyoruz. Onlar büyük! Kullanıcılar, sayfayı aşağı kaydırmak zorunda kalmadan görüntülenen birden fazla CTA ve önemli özelliklerle karşılanır. Ancak bazen slayttan slayta tasarım ve içerikte çok fazla değişiklik ziyaretçilerin dikkatini dağıtabilir veya bunaltabilir. Bu nedenle, bu öğreticide, her slayt geçişinde yalnızca belirli öğeleri değiştirmek için Divi kaydırıcınızı nasıl özelleştireceğinizi göstereceğim. Bu, her slaytta yalnızca belirli bir öğeyi (tek bir sözcük veya düğme gibi) değiştirirken kaydırıcınızın temel içeriğini ve tasarım bileşenlerini tutarlı tutmanıza olanak tanır. Ziyaretçiler, değişikliği kolayca işleyebilir ve harekete geçirici mesajınızı net bir şekilde anlayabilir.

Hadi dalalım!

Divi Slider Gizli Bakış

Hear, bugünün eğitiminde oluşturacağımız Divi kaydırıcısının tasarımına ve işlevselliğine kısa bir bakış.

Bunun, her slayttaki gövde metninde yalnızca bir kelimeyi nasıl değiştirdiğine dikkat edin.

Bu örnekte, her slaytta hem gövde metni kelimesinin hem de düğmelerin ve noktanın renklerinin nasıl değiştiğine dikkat edin.

Açıklanan Temel Kavram

Varsayılan olarak, Divi kaydırıcısı, her geçişte açıklama metnini canlandıracak ve içeriği hafifçe yukarı doğru hareket ettirerek yeni bir slayda geçiş yapacaktır.

Ancak, basit bir özel CSS satırı ile metnin yukarı doğru animasyonunu devre dışı bırakabiliriz. Ve slaydı çoğaltırsak, arka plandan kurtulursak ve öğelerden yalnızca birini değiştirirsek (gövde metnindeki tek kelime gibi), her slaytta yalnızca bir kelimenin değiştiğini göreceksiniz.

Tasarım öğelerinin geri kalanını her slaytta tutarken yalnızca belirli belirli metinleri, düğmeleri veya renkleri değiştirmek için bu konsepti kullanabilirsiniz.

Başlarken

Youtube Kanalımıza Abone Olun

Bu eğitim için ihtiyacınız olan tek şey kurulu ve aktif olan Divi Teması. Ön uçtaki Divi oluşturucuyu kullanarak Divi kaydırıcımızı sıfırdan oluşturacağız.

Başlamak için yeni bir sayfa oluşturun ve sayfanıza bir başlık verin. Ardından Divi Builder'ı kullanmak için tıklayın ve “Sıfırdan Oluştur” seçeneğini seçin. Ardından “Ön Uçta Oluştur” düğmesine tıklayın.

Artık tasarıma başlamaya hazırsınız.

Divi Kaydırıcı İçeriğini Ayarlama

Bu örnek için, tam genişlikte bir kaydırıcı modülü kullanacağım, ancak bu eğitim aynı zamanda normal kaydırıcı modülleri için de geçerlidir. Sayfanıza tam genişlikte bir kaydırıcı modül içeren tam genişlikte bir bölüm ekleyerek başlayalım.

Kaydırıcımızdaki içerik değişikliklerini görebilmemiz için, önce tam genişlik bölümüne geçici olarak koyu bir arka plan rengi ekleyelim. Bölüm ayarlarını açın ve ona siyah bir arka plan rengi verin (#222222).

Varsayılan kaydırıcı arka plan rengi onu kapattığı için bunu henüz göremeyeceksiniz. Öğreticide daha sonra bölüm arka plan tasarımını bitirmek için geri döneceğiz.

Şimdi Fullwidth Slider ayarlarına geçelim ve sadece bir tane bırakarak varsayılan slaytlardan birini silelim. Ardından slayt ayarlarını açın.

Slayt ayarlarını aşağıdaki gibi güncelleyin:

Başlık: “Size daha fazlasını veren web siteleri…”
Düğme Metni: “Başlayın”

İçerik altında aşağıdaki html'yi ekleyin:

Business<span style="color: #EE164D;">.</span>

(Bu, kelimeden sonraki noktaya (veya noktaya) özel bir renk ekler.)

Arka Plan Rengi: rgba(255,255,255,0)

Ayarları kaydet.

Şimdi, toplam üç slaytınız olacak şekilde slaydı iki kez çoğaltın.

İkinci slayt ayarlarını açın. İçerik altında, HTML, başlık ve düğme metninin geri kalanını aynı tutarak yalnızca "İş" kelimesini "Para" ile değiştirin. Her slaytta sadece bu kelimeyi değiştirmek istiyoruz. Ardından ayarları kaydedin.

Ardından üçüncü slayt ayarlarını açın. İçerik altında, "İş" kelimesini "Başarı" ile değiştirin ve ayarları kaydedin.

Hepsi tamam! Bu, kaydırıcı içeriğimizle ilgilenir.

Açıklama Metni Animasyonunu Optimize Etme

Kaydırıcı içeriğimiz yerleştirildikten sonra, metnimizin her slaytta zıplamaması için animasyonumuzu devre dışı bırakmamız gerekiyor. Bunu yapmak için tam genişlik kaydırıcı ayarlarına gidin ve Slayt Açıklaması altına aşağıdaki özel CSS'yi ekleyin:

animation-name: none;

Bu örnek için, kaydırıcı animasyonumuzu otomatik hale getirmek ve kullanıcıların her slayttaki kelime değişikliğini daha hızlı görebilmesi için animasyon hızını artırmak mantıklıdır. Bunu yapmak için tasarım sekmesine gidin ve aşağıdakileri güncelleyin:

Otomatik Animasyon: AÇIK
Otomatik Animasyon Hızı (ms cinsinden): 3000

Şimdi şimdiye kadarki sonucu kontrol edin. Yukarı doğru animasyon olmadan her kaydırıcı değişikliğinin içeriğinde yalnızca bir kelime görmelisiniz.

Kaydırıcıyı Tasarlamak

İçeriğimiz ve işlevselliğimiz yerinde olduğunda, kaydırıcımızı güzel ve zarif bir tasarımla şekillendirmeye başlayabiliriz.

Tam genişlik kaydırıcı ayarlarını açın ve aşağıdakileri güncelleyin:

Metin Yönü: sol
Başlık Yazı Tipi: Lato
Başlık Yazı Tipi Ağırlığı: Hafif
Başlık Metin Boyutu: 32px
Başlık Metin Gölgesi: ekran görüntüsüne bakın
Başlık Metin Gölge Bulanıklığı Gücü: 0em (bu, temel olarak varsayılan metin gölgesini ortadan kaldırır)

Gövde Yazı Tipi: Lato
Gövde Metni Boyutu: 5vw (masaüstü), 50px (tablet), 40px (akıllı telefon)
Gövde Çizgisi Yüksekliği: 1,6em
Gövde Metni Gölgesi: ekran görüntüsüne bakın
Gövde Metni Gölge Bulanıklığı Gücü: 0em (bu, temel olarak varsayılan metin gölgesini ortadan kaldırır)

Düğme Metin Boyutu: 16px
Düğme arka plan rengi: #ee164d
Düğme kenarlık genişliği: 8px
Düğme kenarlığı rengi: #ee164d
Düğme Sınır Yarıçapı: 0px
Düğme Harf Aralığı: 1px
Düğme Yazı Tipi: Lato
Düğme Hizalama: sağ

Genişlik: %70 (masaüstü), %100 (tablet), %100 (akıllı telefon)
Modül Hizalaması: merkez

Özel Dolgu (masaüstü): 19vw üst, 8vw alt
Özel Dolgu (tablet): 19vw üst, 4vw alt. 0px sol, 0px sağ
Özel Dolgu (akıllı telefon): 30vw üst, 4vw alt, 0px sol, 0px sağ

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: -190px
Kutu Gölgesi Dikey Konumu: 60px
Kutu Gölge Rengi: rgba(0,16,17,0.7)

Ve son bir adım olarak, kaydırıcı okları veya kontrolleri görmememiz için kaydırıcı öğelerimizi devre dışı bırakalım.

Bu bizim Divi kaydırıcı tasarımımızla ilgilenir!

Bölüm Stillerini Özelleştirme

Tüm slaytlarımız için statik bir arka plan görevi görecek arka plan resmimiz de dahil olmak üzere tasarımın geri kalanı bölümümüze eklenecektir. Bu kullanım için bölüme bir arka plan görüntüsü eklemek daha iyidir çünkü arka plan görüntüsünü kaydırıcı modülünüze eklediğinizde yaptığınız gibi bir görüntüden diğerine hafif geçişler görmezsiniz.

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Resmi: [resmi 1920 piksele 800 piksel civarında ekleyin] Arka Plan Gradyanı Sol Renk: rgba(0,16,17,0.45)
Arka Plan Gradyan sağ rengi: rgba(0,16,17,0.92)
Başlangıç ​​Konumu: %34
Bitiş Konumu: %0
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Ardından, bölümünüze aşağıdaki gibi bir sağ kenarlık verin:

Sağ Kenar Genişliği: 5vw
Sağ Kenar Rengi: #001011

Ve son olarak, tasarımın çerçevesini dengelemeye yardımcı olmak için size bir kutu gölgesi verin.

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: -200px
Kutu Gölgesi Dikey Konumu: -150px
Kutu Gölge Rengi: rgba(0,16,17,0.74)

Bu kadar!

Divi Slider'ın Son Tasarımı

İşte özel Divi kaydırıcısının son tasarımı.

Ve işte slaytların işlevselliği. Her slaytta yalnızca bir kelimenin nasıl değiştiğine dikkat edin.

Mobilde Son Tasarım

Tablet

akıllı telefon

Diğer Elemanları Değiştirerek Deney Yapın

Daha yaratıcı tasarımlar ve işlevsellik için her slaytta diğer öğeleri değiştirmeyi deneyebilirsiniz. Örneğin, slayt düğmelerinizin her birine her slaytta farklı bir renk verebilir ve her slaytta dönemin rengini yeni düğme rengiyle eşleştirebilirsiniz.

İşte böyle görünecek.

Slayt kutusu-gölge renginde veya başka bir tasarım öğesinde değişiklik yapmayı bile keşfedebilirsiniz. Sayısız olasılık var!

Son düşünceler

Bu özel Divi kaydırıcı tasarımı ve işlevselliği, oradaki geleneksel kaydırıcılara güzel bir alternatif sunar. Tasarımın özü değişmez; bu, CTA'nızın her slaytta değişen önemli yönünü daha da vurgular. Görünüşe göre bu, dönüşümleri artırıp artırmayacağını görmek için test edebileceğiniz bir şey olabilir!

Aşağıdaki yorumlarda ne düşündüğünüzü bana bildirin.

Şerefe!