Her slaytla belirli öğeleri değiştirmek için divi kaydırıcısınızı nasıl ayarlayabilirsiniz?
Hepimiz biliyoruz ki, web sitenizin üst kısmını en üst düzeye çıkarmak için vardiya çok iyi. Onlar büyük! Kullanıcılar, sayfayı aşağı kaydırmak zorunda kalmadan ekrana kayan birkaç CTA ve önemli özelliklerle karşılanır. Bununla birlikte, bazen slaytlardan slaytlara kadar tasarım ve içerikte çok fazla değişiklik dikkatini dağıtabilir veya ziyaretçileri bunalabilir. Bu nedenle, bu öğreticide, her slayt geçişinde yalnızca belirli öğeleri değiştirecek şekilde divi kaydırıcısınızı nasıl ayarlayacağınızı göstereceğim. Bu, çekirdek içeriği korumanızı sağlar ve her slaytla yalnızca belirli öğeleri (tek kelime veya düğme gibi) değiştirdiğinizde kaydırıcı tasarım bileşenleriniz tutarlı kalır. Ziyaretçiler değişimi kolayca işleyebilecek ve oyunculuk davetinizi açıkça anlayabilecekler.
Bölünelim! Divi Slider Sneak Peek Bugünün öğreticisinde yapacağımız divi kaydırıcısının tasarımına ve işlevselliğine bir bakış. Bunun sadece her slayttaki içerik metnindeki bir kelimeyi nasıl değiştirdiğine dikkat edin.
Kaydırıcımızdaki içerikteki değişikliği görebilmemiz için, önce karanlık arka plan rengini tam genişliğe ekleyelim. Set ayarlarını açın ve siyah arka plan rengini verin (#222222). Bunu göremediniz çünkü varsayılan kaymanın arka plan rengi onu kapsar. Eğitici bölümünün arka plan tasarımını tamamlamak için geri döneceğiz. Şimdi tam genişlik kaydırıcı ayarlarını girelim ve yalnızca 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 fazla şey veren web sitesi …” Metin Düğmesi: “Başlat” İçeriğin altındaki aşağıdaki html: Business . (Bu, kelimeden sonra noktaya (veya noktaya) özel bir renk ekler.) Arka plan rengi: RGBA (255,255,255.0) Ayarları kaydedin. Şimdi iki kez yinelenen slaytlar, böylece toplam üç slayt var. İkinci slayt ayarlarını açın. İçeriğin altında, kalan HTML, başlık ve metin düğmesini koruyarak “iş” kelimesini “para” ile değiştirmeniz yeterlidir. Sadece her slaytta bu tek kelimeyi değiştirmek istiyoruz. Ardından ayarları kaydedin. Ardından üçüncü slayt ayarlarını açın. İçerik altında, “iş” kelimesini “başarı” ile değiştirin ve ayarları kaydedin. Herşey bitti! Kaydırıcı içeriğimizi işler. Açıklama metin animasyonunu optimize etmek Kaydırıcı içeriğimiz yerinde olduktan sonra, metnimiz her slaytla atlamaması için animasyonumuzu devre dışı bırakmamız gerekir. Bunu yapmak için, tam geniş kaydırıcı ayarlarını açın ve slayt açıklamasının altına aşağıdaki özel CSS ekleyin: animasyon adı: yok; Bu örnek için, kaydırıcı animasyonumuzu otomatik olarak yapmak ve animasyon hızını arttırmak mantıklıdır, böylece kullanıcılar her slayttaki değişiklikleri daha hızlı görebilir. Bunu yapmak için tasarım sekmesini açın ve aşağıdakileri güncelleyin: Otomatik Animasyon: Aktif Otomatik Animasyon Hızı (MD’de): 3000 Şimdi sonuçlara bakın. Animasyon ve üstü olmadan her kaydırıcı değişikliğinin içeriğinde yalnızca bir kelime görmelisiniz.
Kaydırıcıları içeriğimiz ve işlevselliğimizle tasarlarken, kaydırıcımızı güzel bir zarif tasarımla düzenlemeye başlayabiliriz. Aşağıdaki tam ve güncellenmiş kaydırıcı ayarları açın: Metin Yönlendirme: Sol Yazı Tipi Başlık: Lato Heavy Yazı Tipi Başlık: Işık Boyutu Metin Başlık: 32px Gölge Metin Başlığı: Ekran yakalama başlığı Gölge Bulanıklık Gücü Metin Başlık: Bu temel olarak varsayılan metin gölgesini ortadan kaldırır ) Gövde yazı tipi: lato gövde metin boyutu: 5VW (masaüstü), 50px (tablet), 40px (akıllı telefon) Vücut çizgilerinin yüksekliği: 1.6em gövde metin gölgesi: bkz. Vücut metni bulanıklık gücü: Bu temel olarak metin gölgelerini varsayılan olarak kaldırır)
Metin Boyutu Düğmesi: 16px Renk Arka Plan Anahtar Düğmesi: #EE164D Genişlik Düğmesi Sınırı: 8px Renk Düğmesi Sınırı: #EE164D RADIUS Sınır Sınır: 0PX Mesafe Mektup: 1px Yazı Tipi Yazı Tipi Düğmesi: Lato Seks. % (Tablet), % 100 (Akıllı Telefon) Hizalama Modülü: Orta Özel Dolgu (Masaüstü): 19VW Top, 8VW daha düşük özel dolgu (tablet): 19VW üst, 4VW aşağıda. 0px sol, 0px sağ dolgu özel (akıllı telefon): 30VW üst, 4vw aşağıda, 0px sol, 0px sağ Gölge Kutusu: Bkz. Yatay Korkunç Konum Yakalama Gölge Kutusu: -190px Dikey Konum Gölge Kutusu: 60px Renk Gölge Kutusu: RGBA (0.16,17.0.7) Ve son adım için, okları veya kaydırıcı kontrolünü görmememiz için kaydırıcı öğelerimizi devre dışı bırakalım. Divi kaydırıcı tasarımımızı ele alıyor! Tasarımın kalan tasarımının stilini ayarlamak, tüm slaytlarımız için statik bir arka plan olarak işlev görecek arka plan görüntüsümüz de dahil olmak üzere kendi parçamıza eklenecektir. Bu kullanım için daha iyi bir bölüme bir arka plan görüntüsü ekleyin çünkü kaydırıcı modülünüze bir arka plan görüntüsü eklerseniz bir görüntüden diğerine küçük bir geçiş görmeyeceksiniz. Görüntüleri yaklaşık 1920px kat 800px] sol renk gradyan arka plan: rgba (0.16,17,0.45) Sağ renk arka plan gradyanı: RGBA (0.16,17,0.92) Başlangıç Pozisyonu:% 34 Nihai Pozisyon: 0% Gradyanı arka plan görüntüsünün üzerine yerleştirin : Evet Ardından, doğru sınırın bir kısmını aşağıdaki gibi verin: Sağ Sınır Genişliği: 5VW Sağ Sınır Renk: #001011 Ve son olarak, tasarım çerçevesini dengelemeye yardımcı olmak için size kutunun gölgesini verin. Gölge Kutusu: Bkz. Yatay Korkunç Konum Yakalama Gölge Kutusu: -200px Dikey Konum Gölge Kutusu: -150px Renk Gölge Kutusu: RGBA (0.16,17.0.74) İşte burada! Divi Slider Final Tasarım Aşağıdakiler özel bir divi kaydırıcısının son tasarımıdır.Ve bu slaytın işlevidir. Her slaytta sadece bir kelimenin nasıl değiştiğini unutmayın. Hücresel tablette son tasarım Akıllı telefon
Diğer unsurları değiştirerek deneyin, daha yaratıcı tasarım ve işlevsellik için her slaytla diğer öğeleri değiştirerek deney yapabilirsiniz. Örneğin, slayt düğmelerinizin her birini her slayttan farklı bir renk verebilir ve dönemin rengini her slayttaki yeni düğmenin rengiyle eşleştirebilirsiniz. Böyle görünecek olan budur.
