Güçlü e-Ticaret Kaydırıcıları Nasıl Oluşturulur

Yayınlanan: 2021-09-21

Kaydırıcıları her yerde çevrimiçi olarak görürsünüz. Yeni ürünler sergiliyorlar, güzel fotoğraflar çekiyorlar, alışveriş yapanları satın almaya teşvik ediyorlar ve güncellemeleri paylaşıyorlar. Ancak siteniz için en iyi şey bir kaydırıcı mı? Ve gerçekten çalışan kaydırıcıları nasıl yaratırsınız?

Kaydırıcıların artıları ve eksileri

WooCommerce mağazanıza bir kaydırıcı eklemeden önce, geri adım atmak ve hem faydaları hem de sakıncaları anlamak önemlidir. Sonuçta, bir kaydırıcı her web sitesi ve her durum için doğru değildir. Ancak birkaç olumlu şey var:

  • Hiper-görseldirler ve dikkat çekerler. Çoğu durumda, birinin sitenizi ziyaret ettiğinde gördüğü ilk şey bir kaydırıcıdır. Ürünlerinizi, konumunuzu veya ekibinizi öne çıkaran cesur, çekici görseller anında bir açıklama yapma fırsatı sunar.
  • Sitenizde yerden tasarruf sağlarlar. Bir sayfada aynı noktaya birden fazla içerik parçası ekleyerek, değerli web sitesi mülkünden tasarruf edebilirsiniz.
  • Ürün turları için harikalar. Çeşitli yeni ürünleri veya en çok satanlarınızı tek bir yerde görüntüleyin.
  • Yeni bilgileri ve güncellemeleri vurgulayabilirler . En son blog gönderilerinizi, satışlarınızı ve mağaza haberlerinizi içeren slaytlar ekleyin.
  • Portföy görüntülerini sindirilebilir bir şekilde sunabilirler. Bir fotoğrafçı, grafik tasarımcı veya sanatçıysanız, büyük bir galeri olmadan en son çalışmalarınızı sergilemek için bir kaydırıcı mükemmeldir.

Tabii ki, bazı olumsuzluklar da var:

  • Sitenizi yavaşlatabilirler. Hız için optimize edilmemiş dev görüntü dosyası boyutlarına sahip kaydırıcılar, yükleme süresinde gecikmeye neden olabilir.
  • Kafa karıştırıcı olabilirler. Kaydırıcılar genellikle aynı anda birden fazla teklif sunar ve bunların tümü bir web sitesi ziyaretçisi için geçerli değildir. Birine çok fazla seçenek sunmak, tek bir statik teklif sunmaktan daha az etkili olabilir.
  • Mobil cihazlar için her zaman mükemmel değildirler. Seçtiğiniz kaydırıcının duyarlı olması ve masaüstlerinde, tabletlerde ve telefonlarda harika görünmesi gerekir. Aksi takdirde etkisiz bir kullanıcı deneyimi yaratabilir.
  • Tıklamaları artırmanın en iyi yolu olmayabilirler . Gerçekte, çok az sayıda web sitesi ziyaretçisi genellikle bir kaydırıcıya tıklar ve neredeyse tüm tıklamalar ilk slaytta gerçekleşir.

Özetle, bir kaydırıcıya sahip olmak için bir kaydırıcı kullanmayın. Belirli bir amacı olduğundan emin olun ve analizlerinize göre bir şeyleri değiştirmeye istekli olun. Ve belirli hedef kitleniz ve içeriğiniz için hangi düzen ve formatın en iyi olduğunu düşünün.

WooCommerce ile bir kaydırıcı nasıl oluşturulur

Bir kaydırıcı oluşturmak için başlamak için en iyi yer bir eklentidir. Hem WordPress hem de WooCommerce için hem ücretsiz hem de ücretli çeşitli seçenekler vardır, bu nedenle düşündüğünüz her birini anlamak için zaman ayırın. İşte kendinize sormanız gereken birkaç soru:

  • İhtiyacınız olan işlevselliğe sahip mi? İstediğiniz içeriği (ürünler, blog gönderileri, resimler, videolar vb.) görüntüleyebildiğinden emin olun. Ayrıca kaydırıcınıza herhangi bir animasyon, düğme, metin veya başka özellikler eklemek isteyip istemediğinizi de düşünün.
  • Fiyatı nedir? Eklenti ücretsiz mi yoksa ücretli mi? Ek şablon ücretleri var mı? Yıllık mı yenileniyor yoksa tek seferlik bir yatırım mı?
  • Kullanımı ne kadar kolay? Bazı kaydırıcı eklentilerin çok sayıda özelliği vardır, ancak öğrenme eğrisi diktir veya geliştirme bilgisi gerektirir.
  • Her boyuttaki cihazda iyi çalışıyor mu? Elbette, kaydırıcınızın masaüstü, tablet veya telefon kullanan tüm site ziyaretçileriniz için harika görünmesini istersiniz. Seçtiğiniz eklentinin, karmaşık CSS gerektirmeden mobil için otomatik olarak yeniden boyutlandırıldığından emin olun.
  • Hız için optimize edilmiş mi? Eklenti geliştiricileri hızı düşündü mü? Kaydırıcı demoları ve örnekler hızlı yükleniyor mu? İncelemeleri ve özellik listelerini okumak, öğrenmenin harika bir yoludur.
  • İyi değerlendirmeleri var mı? Eklenti derecelendirmelerini kontrol edin. İnsanlar bundan hoşlanıyor mu ve en yaygın şikayetleri neler?
  • İyi destekleniyor mu? Destek forumları veya biletleme sistemi var mı? Premium bir seçenek seçerseniz, destek ne kadar süreyle dahildir? WordPress'in en son sürümüyle çalışacak şekilde düzenli olarak güncelleniyor mu?

Daha fazla ayrıntı için, en iyi WordPress eklentilerini seçmeyle ilgili Jetpack'teki bu kılavuzu okuyun.

Sadece çalışan basit, etkili bir kaydırıcı için WooSlider uzantısını öneririz. WooCommerce tarafından özellikle çevrimiçi mağazalar için geliştirilmiştir ve Mutluluk Mühendislerimizin rakipsiz desteğiyle desteklenmektedir.

iş başında bir WooSlider örneği

WooSlider uzantısıyla bir kaydırıcı oluşturmak için:

  1. Uzantıyı satın alın, ardından mağazanıza kurun ve etkinleştirin.
  2. Slayt Gösterisi → Ayarlar'a gidin ve kaydırıcınız için seçenekleri belirleyin. Birkaç kategori vardır:
    • Genel ayarlar: Varsayılan animasyonu, slayt yönünü, slayt gösterisi hızını ve animasyon hızını seçin. Site ziyaretçilerinin içeriğinizi özümseyebilmesi için kaydırıcınızın yeterince yavaş geçiş yaptığından emin olun.
    • Kontrol ayarları: Site ziyaretçilerinin kaydırıcınızı nasıl kontrol edebileceğini belirleyin. Oynat/duraklat düğmeleri, klavye gezintisi, önceki/sonraki okları ve daha fazlasını ekleyin.
    • Düğme ayarları: Kaydırıcı düğmelerin her biri için metni özelleştirin.
  3. Bir slayt gösterisi türü seçin ve ayarlarınızı seçin. Birkaç seçenek var:
    • Ekli resimler: Kaydırıcıyı eklediğiniz belirli sayfaya veya gönderiye eklenmiş resimleri gösterir.
    • Gönderiler: Sitenizdeki en son blog gönderilerini görüntüler.
    • Slaytlar: Oluşturduğunuz resimlerle özel slaytları gösterir.
    • Ürünler: En son, öne çıkan veya stokta bulunan ürünleri yükler. Bu seçeneği etkinleştirmek için WooCommerce Ürünleri Slayt Gösterisi uzantısına da ihtiyacınız olacağını unutmayın.
  4. Kaydırıcınızı sitenize ekleyin. Bunu bir kısa kod, widget veya şablon dosyası değişikliği ile yapabilirsiniz.

Slayt oluşturma hakkında bilgiler de dahil olmak üzere daha fazla ayrıntı için belgelerimizi okuyun.

Kaydırıcınız üzerinde özel düğmeler ve metin ekleme yeteneğinin yanı sıra daha fazla kontrol istiyorsanız, Görüntü ve Video Kaydırıcı uzantısını denemek isteyebilirsiniz. Kurulumu hala çok kolaydır, ancak ihtiyaçlarınıza bağlı olarak faydalı olabilecek ek işlevler ekler.

Çekici kaydırıcı görüntüleri nasıl oluşturulur

Slaytlarınızı tasarlamak için Photoshop veya Canva gibi bir fotoğraf düzenleme aracı kullanmak isteyebilirsiniz. Veya slaytları doğrudan birlikte çalıştığınız eklentinin içinde oluşturabilirsiniz. Çekici slaytlar tasarlamak için birkaç en iyi uygulama:

Yüksek kaliteli görüntülerle başlayın

Slaytınızın temeli kaliteli bir görüntü olmalıdır. Konunun odakta olduğundan ve hiçbir şeyin bulanık olmadığından emin olun. Kaydırıcınız tam genişlikteyse, resimlerinizin büyük ekranlarda bile alanı dolduracak kadar büyük olduğundan emin olun.

Endişelenmeyin - harika görüntüler elde etmek için mutlaka bir profesyonel kiralamanız gerekmez. İşte kendi başınıza harika ürün fotoğrafları çekmenin yolu.

İçerik yerleşimi ile yaratıcı olun

Kaydırıcınıza metin ve düğmeler eklerseniz, tipik merkez hizalamasının ötesine genişletmeyi düşünün. Bu, bazı durumlarda doğru seçim olsa da, içeriğinizi görüntünün sol veya sağ yarısına (veya üçüncü!) yerleştirmek, resminizin önemli kısımlarını öne çıkarabilir.

Her slaytta çeşitli metin yerleşimine sahip https://mystore.msi.com/ kaydırıcı
https://mystore.msi.com/ her slayttaki metin yerleşimini değiştirir

Mümkünse yüzleri kullanın

Beynimizin bir kısmı özellikle yüzlere yanıt vermek üzere tasarlanmıştır - onlara çekiliyoruz. Ve sadece yüz resimleri site ziyaretçilerinin dikkatini çekmekle kalmaz, aynı zamanda onları belirli bir duygu hissetmeye sevk edebilir. Örneğin, birisi gülümseyen birini görürse, markanızla olumlu duyguları ilişkilendirme olasılığı daha yüksektir.

Bu nedenle, ürünlerinizi kullanan mutlu insanların fotoğraflarınız varsa, bunları slaytlarınızda öne çıkarın!

Doğru yazı tiplerini ve renkleri seçin

Kaydırıcınız için yazı tiplerini ve renkleri seçerken, markanıza ve bir bütün olarak web sitenizin tasarımına uygun olduğundan emin olarak başlayın.

Ardından, okunması kolay olduklarından emin olun. Yeterince büyük ve yeterince kalın olan yazı tiplerini seçin. Ama aynı zamanda resminizin üzerinde nasıl çalıştıklarını da düşünün. Yazı tiplerini arka plan resminizden farklı kılmanın birkaç yolu vardır:

  • Görüntüyü koyulaştırın veya aydınlatın. Resmin konusu çok önemli değilse (belki bir doku veya desen), bu harika bir seçenek olabilir. Resme koyu bir kaplama ekleyin, ardından üstte beyaz metin kullanın. Veya koyu metin içeren beyaz bir kaplama kullanın.
  • Beyaz boşluk kullanın. İşler darmadağın olduğunda, herhangi bir şeyin öne çıkması zordur. Metni şehirdeki tek gösteri yaparak, çok daha fazla dikkat çekecek. Beyaz alan, önemli hiçbir şeyin bulunmadığı, görüntünün düzenli bir alanıdır. Bu alana metin ekleyerek hem görsele hem de metne hak ettiği ilgiyi vermiş olursunuz.
  • Metnin arkasına bir renk ekleyin. Sözcüklerinizin arkasındaki renkli bir arka plan - beyaz metnin arkasında siyah veya lacivert veya siyah metnin arkasında açık gri veya pembe düşünün - hile yapabilir.
  • Kalın bir yazı tipi rengi seçin. Resme bağlı olarak, insanların kelimelerinizi kolayca okuması için parlak bir metin rengi yeterli olabilir.
  • Bir gölge kullanın. Küçük bir gölge, yazı tiplerinin görüntü arka planlarınızdan öne çıkmasına neden olabilir.
https://yourbenefitstore.com/ adresindeki bu slayt, tuğladaki beyaz alanın üstünde metin içerir.
https://yourbenefitstore.com/ adresindeki bu slayt, tuğladaki beyaz alanın üstünde metin içerir.

En önemli şey, metninizle slaydın geri kalanı arasında yeterli renk kontrastı olmasıdır. Bu, renk körlüğü veya görme bozukluğu olan kişiler de dahil olmak üzere herkes için görsel deneyimi iyileştirir. WebAIM'in kontrast denetleyicisi, slaytlarınızı değerlendirmenin harika bir yoludur.

Kaydırıcı ile dönüştürme ipuçları

Bir kaydırıcının amacı her zaman satış yapmak değildir. Örneğin, site ziyaretçilerini bilgilendirmek veya çalışmalarınızı sergilemek olabilir. Ancak dönüştürmek istiyorsanız, aklınızda bulundurmanız gereken bazı şeyler şunlardır:

İyi harekete geçirici mesajlar seçin

Siz istemedikçe insanlar harekete geçmeyecek. Bu nedenle, site ziyaretçilerine ne yapmalarını istediğinizi söyleyen net, aktif metin içeren slaytlarınıza bir düğme veya başka bir görünür bağlantı eklediğinizden emin olun. İşte bazı örnekler:

  • Yıllık satışımızdan alışveriş yapın
  • Ücretsiz kahve rehberinizi alın
  • Özel indirimler için e-posta listemize katılın
  • Sürecimiz hakkında daha fazla bilgi edinin

CTA'nız ayrıca parlak renk, farklı yazı tipi veya kalın metinle slaydın geri kalanından öne çıkmalıdır.

Net gezinmeyi kullanın

Site ziyaretçileri, bir slayttan diğerine kolayca geçebilmeli ve daha fazlasını görebilmeleri veya okuyabilmeleri için kaydırıcıyı duraklatabilmelidir. Bu, kaydırıcınızı otomatik olarak geçiş yapacak şekilde ayarlamamanız gerektiği anlamına gelir!

Bunun yerine görünür oklar, sayılar veya gezinme madde işaretleri kullanın ve bir duraklatma düğmesi ekleyin.

çok karmaşık olma

Eşsiz animasyonlar, canlı renkler ve düzgün görsel efektlerle oynamak kesinlikle eğlenceli olabilir. Ancak hemen hemen tüm durumlarda, daha basit daha iyidir. Kaydırıcınız yine de eğlenceli olabilir, ancak iletmek istediğiniz mesajın gerçekten parlaması için sesini kısın.

Erişilebilirliği hatırla

Erişilebilir bir kaydırıcı, fiziksel veya zihinsel engelli olanlar da dahil olmak üzere herkesin kullanması kolaydır. İyi bir başlangıç, daha önce tartıştığımız uygun renk kontrastına sahip olmanızı sağlamaktır. Ancak, her görüntü için alternatif metin eklediğinizden, kaydırıcınızın mobil cihazlarda iyi çalıştığından ve klavyeyle gezinmeyi açtığınızdan emin olmak istersiniz.

E-Ticaret erişilebilirliği hakkında daha fazla bilgi edinin.

Kısa mesajları seçin

Slaytlarınıza metin paragrafları eklemek istemezsiniz - kimse hepsini okumak için duramaz! Bunun yerine, amacınızı mümkün olduğunca az kelimeyle açık ve net bir şekilde belirtin.

Joe Coffee kaydırıcısı, ücretsiz ödül uygulamalarını yalnızca birkaç kelimeyle tanıtıyor
Joe Coffee birkaç kelimeyle ücretsiz ödül uygulamasının reklamını yapıyor

Hız için bir kaydırıcı nasıl optimize edilir

Daha önce de belirttiğimiz gibi, kaydırıcılar ağır olabilir ve web sitenizi yavaşlatabilir. Bu yüzden bunu mümkün olduğunca en aza indirmek önemlidir. Hıza öncelik veren bir kaydırıcı eklentisi seçmenin yanı sıra, atabileceğiniz birkaç adım:

  • Gereken en küçük boyutlu resmi kullanın. Kaydırıcınız 1500 piksel genişliğe ayarlanmışsa, 6000 piksel genişliğinde bir resim kullanmayın. Bunun yerine, doldurmaya çalıştığınız kutuya tam olarak uyacak şekilde yeniden boyutlandırın.
  • Yüklemeden önce resimlerinizi sıkıştırın. Görüntülerinizi medya kitaplığınıza eklemeden önce dosya boyutunu küçültmek için ImageOptim gibi bir araç kullanın.
  • Çok fazla gösterişli özellik eklemeyin. Tonlarca animasyon, gösterişli geçişler ve diğer ekstralar sadece dikkati dağıtmakla kalmaz, aynı zamanda işleri yavaşlatabilir. Unutmayın: basit genellikle en iyisidir.
  • Videolarınızı site dışında barındırın. Kaydırıcınız destekliyorsa, kullanmak istediğiniz videoları web sitenizde saklamak yerine YouTube veya Vimeo'dan gömün. Videolar çok ağırdır ve sitenizi biraz yavaşlatabilir.
  • Eklentiye özel hız ayarlarını açın . Birçok kaydırıcı eklentisi, etkinleştirmeniz gereken hız optimizasyonu özellikleri sunar. Geç yükleme, önbelleğe alma ve küçültme gibi şeyleri arayın.
  • Bir görüntü CDN'si kullanın. Bir görüntü CDN'si, görüntülerinizi site dışında süper hızlı sunuculardan depolar ve sunar. Jetpack, resimlerinizi mobil cihazlar için yeniden boyutlandıracak ve telefonlarda ve tabletlerde yıldırım hızında olmasını sağlayacak ücretsiz bir WordPress CDN'sine sahiptir.

Düşünceli ve kasıtlı olun

WooCommerce mağazanıza bir kaydırıcı eklerken, gerçekten doğru yapmak için zaman ayırın. Neyi sergilemek istediğinizi, kime ulaşmak istediğinizi ve kaydırıcınızı bu insanlar için özel olarak nasıl optimize edebileceğinizi düşünün.

Sitenizde etkili bir kaydırıcı var mı? Yorumlarda paylaşın!