Hero slayt gösterisi
Her birinin masaüstü ve mobil görseli, katmanı, metni ve düğmesi olan en fazla altı slaytlık tam genişlik hero; kaydırma, otomatik oynatma, ok ve noktalar.
- Kategori
- Hero ve bannerlar
- Kullanım yeri
- Ana sayfa, Açılış sayfaları
- Okuduğu veri
- Yalnızca içerik
- Boyut
- 49 KB, küçük bir betik içerir
- Lisans
- MIT, müşteri işlerinde ücretsiz
Kısaca
Hero slayt gösterisi, en fazla altı tam genişlik slaytı döndüren ücretsiz bir Shopify bölümüdür; her slaytın kendi görseli, mobil görseli, katmanı, başlığı, metni, düğmesi ve içerik konumu vardır. Dokunmatik ekranlarda doğal olarak kaydırılır, duraklatma düğmesi ve klavye kontrolleri vardır; Online Store 2.0 temalarında uygulama olmadan çalışır.
Ne zaman kullanılır
- Koleksiyonlar ya da sezonluk kampanyalar arasında dönen ana sayfa hero’su
- Birkaç ürün serisini sırayla tanıtan açılış sayfası girişi
- Kalıcı en çok satanlar slaytlarının yanında yeni bir seriyi duyurmak
Tema düzenleyicide
- En fazla 6 slayt bloğu: masaüstü ve mobil görsel, katman rengi ve opaklığı, üst başlık, başlık, metin, metin rengi
- Slayt başına: tek düğme (dolu, çerçeveli ya da metin bağlantısı, yeni sekme) ya da tüm slayt için bir bağlantı
- Slayt başına: masaüstünde 9 içerik konumu, mobilde üst/orta/alt ve hizalama
- Kaydırma ya da solma geçişi, döngü, oklar, noktalar ya da ilerleme çubukları
- Saniye cinsinden aralıkla otomatik oynatma, fare üzerindeyken ve klavye odağında duraklatma
- Cihaza göre yükseklik: küçük, orta, büyük, tam ekran ya da ilk görsele uyum
- İlk slayt başlık etiketi ve başlık boyutu; slayt gösterisinin ekran okuyucu adı
- Tam ya da sayfa genişliği, içerik azami genişliği; arka plan, düğme ve kontrol renkleri
- Cihaza göre üst ve alt boşluk, yalnızca masaüstünde/mobilde göster, çapa kimliği, metin animasyonu
Dosyalar
sections/lib-hero-slideshow.liquidKodu görün
snippets/lib-image.liquidKodu görün
snippets/lib-button.liquidKodu görün
Sade Liquid, CSS ve küçük bir betikle yazıldı. Uygulama da bağımlılık da yok.
Temanıza nasıl eklenir
- Bölüm dosyasını temanızın sections klasörüne, listelediği snippet’leri de snippets klasörüne kopyalayın.
- Tema düzenleyicide Add section’ı (Bölüm ekle) seçin ve adı “Lib ·” ile başlayan bölümü ekleyin.
- Örnek metni mağazanızın kendi metniyle değiştirin, renkleri markanıza göre ayarlayın.
Sık sorulan sorular
- Kaç slayt ekleyebilirim?
- En fazla altı. Her slayt; kendi masaüstü ve mobil görseli, katman rengi ve opaklığı, üst başlığı, başlığı, metni, düğmesi, içerik konumu ve metin rengi olan bir bloktur.
- Erişilebilir mi?
- Slayt gösterisi, etiketli slaytlarla bir carousel olarak işaretlenmiştir. Oklar ve noktalar gerçek düğmelerdir (noktalar "Go to slide 1" gibi okunur), kontroller odaktayken ok tuşları slaytlar arasında geçiş yapar ve gizli slaytlara Tab ile girilemez. Otomatik oynatma açıkken bir duraklatma düğmesi vardır; slayt değişiklikleri yalnızca otomatik oynatma çalışmıyorken ekran okuyuculara sessizce duyurulur.
- Azaltılmış hareket tercihinde ne olur?
- Cihazı azaltılmış hareket isteyen ziyaretçilerde otomatik oynatma başlamaz, slaytlar yumuşak kaydırma ya da solma olmadan değişir ve metin animasyonu kapanır. Ziyaretçi otomatik oynatmayı başlatmak için yine oynat düğmesine basabilir.
- Otomatik oynatma duraklar mı?
- Evet. Fare slayt gösterisinin üzerindeyken ya da klavye odağı içindeyken (bu kapatılabilir), slayt gösterisi görünümün dışına kaydırıldığında ya da tarayıcı sekmesi gizlendiğinde ve ziyaretçi duraklat düğmesine bastığında durur. Döngü kapalıysa son slaytta durur.
- Kaydırma nasıl çalışır?
- Kaydırma geçişi tarayıcının doğal scroll snapping özelliğini kullanır; böylece dokunmatik kaydırma ve trackpad hareketleri script yüklenmeden de çalışır. Solma geçişi yatay kaydırmaları pointer olaylarıyla işler.
- Sayfayı yavaşlatır mı?
- Bölüm sayfadaki ilk iki bölümden biriyse ilk slaytın görseli hemen ve yüksek fetch önceliğiyle yüklenir; diğer tüm slayt görselleri lazy-load ile yüklenir. Script küçüktür; kütüphane içermeyen vanilla JavaScript’tir.
Yayınlamadan önce
- Demolardaki metinler örnek içeriktir. Yayımlamadan önce kendi mağazanızın bilgileriyle değiştirin.
- Hareketin azaltılmasını isteyen ziyaretçilerde animasyonlar kapalıdır.
- Her dosya burada yayımlanmadan önce Shopify Theme Check ile kontrol edilir.
Temanıza uyarlanmış bir sürüme ya da burada olmayan bir bölüme mi ihtiyacınız var? Şu sayfaya bakın: Shopify tema geliştirme.
Diğer bölümler
Hero ve bannerlar
Koleksiyon bannerı
Koleksiyon sayfaları için başlık, açıklama, görsel ve ürün sayısı. Metin görselin üzerinde ya da yanında durur; içerik yolu (breadcrumb) isteğe bağlıdır.
Hero ve bannerlar
Hero banner
Üzerinde üst başlık, başlık, metin ve iki düğme olan tam genişlik görsel banner; ayrı mobil görsel, katman, dokuz içerik konumu ve cihaza göre yükseklik.
Hero ve bannerlar
İki sütunlu hero
İki sütunlu hero: rozet, başlık, destek metni, iki düğme, en fazla üç kısa istatistik ve iki yandan birinde görsel; mobil için ayrı görsel.
