Wix'te öncesi sonrası fotoğraf karşılaştırma kaydırıcısı nasıl eklenir

Potansiyel alıcıların ürününüzün faydalarını anında görmesini sağlamak, özellikle online satış yaparken büyük bir avantajdır. Burada bir satış danışmanı yoktur; markalama, mesaj ve görselleriniz tüm işi üstlenmek zorundadır. İşte öncesi sonrası kaydırıcının gücü tam da burada devreye girer.

Wix devasa bir tasarım öğeleri kütüphanesine sahip olsa da standart düzenleyici, özelleştirilebilir bir öncesi sonrası fotoğraf karşılaştırma kaydırıcısı içermez. Ancak bu, seçeneksiz olduğunuz anlamına gelmez. Wix App Market’ten üçüncü taraf bir uygulama yükleyebilir, ücretsiz bir harici widget gömebilir veya Velo by Wix ile sıfırdan bir tane oluşturabilirsiniz. İşte her birinin nasıl çalıştığı ve ücretsiz widget’ın neden çoğu kişinin tercih etmesi gereken seçenek olduğu.

Seçenek 1: Wix App Market eklentisi yükleyin

En bariz yol Wix App Market’tir. “Before and after slider” araması yapın, bir kez tıklayın ve sayfada çalışan bir görsel karşılaştırma kaydırıcısına sahip olun. Gömme kodu yok, geliştirici modu yok.

Asıl sorun kurulumdan sonra ortaya çıkar. Bu uygulamaların çoğu freemium modelle çalışır ve ücretsiz planda ödün vermeniz gerekir. Daha iyi değerlendirilen seçeneklerden biri olan 4,7 yıldızlı PURPLE Before & After Slider, ücretsiz planda filigran ekler. Filigranı kaldırmak ve özel ok stilleri ile düzen şekillerinin kilidini açmak aylık 2,50 dolara mal olur. İlk bakışta fazla değil gibi görünse de sitenizdeki her uygulama aboneliğiyle birlikte bu maliyet artar.

Daha büyük risk ise bakımdır. Bunlar küçük üçüncü taraf geliştiricilerdir ve biri güncelleme göndermeyi bıraktığında kaydırıcınız bozulur. Portföyünüz veya ürün sayfanız, bozuk bir öğe isteyeceğiniz en son yerdir.

Yine de üçüncü taraf bir uygulama denemek istiyorsanız, nasıl yükleyeceğiniz aşağıda açıklanmıştır:

1. Sitenizi Wix Düzenleyici’de açın ve sol kenar çubuğundaki Apps seçeneğine tıklayın, ardından App Market‘e tıklayın. “Before and after slider” araması yapın.

2. İstediğiniz uygulamaya tıklayın, ardından Add to Site seçeneğine tıklayın. Allow and Add ile onaylayın.
3. Kaydırıcı sayfanıza eklenir. Üzerine tıklayın, Settings‘i açın, önce ve sonra görsellerinizi ekleyin, tutamacı ve etiketleri ayarlayın, ardından Publish‘e tıklayın.

Wix, kurulum sürecinin tamamını sitenize uygulama ekleme konulu Yardım Merkezi kılavuzunda belgelemiştir.

Seçenek 2: Ücretsiz, kodsuz bir kaydırıcı widget kullanın (önerilen)

Aylık abonelik olmadan kaydırıcı üzerinde tam kontrol istiyorsanız, App Market’i atlayın ve bunun yerine ücretsiz bir harici widget gömün. Aynı sürükleyerek gösterme efektini, ücretli uygulama katmanlarının sunduğundan daha fazla özelleştirmeyi ve yenileme zorunluluğu olmadan elde edersiniz.

Jotform Öncesi Sonrası Kaydırıcı Widget’ı tam olarak bunun için tasarlanmıştır. Görsel bir düzenleyicide yapılandırırsınız, kısa bir gömme kodunu kopyalarsınız ve Wix’e yapıştırırsınız. Jotform Website Widget’ları kullanımı ücretsizdir; kullanım sınırı ve plan gereksinimi yoktur, bu nedenle kaydırıcınız yayına alındığında herhangi bir yükseltme istemi görünmez.

Ayrıca App Market seçeneklerinden daha fazlasını sunar. Yatay veya dikey olarak gösterim yapabilirsiniz; bu, tam boy bir oda veya bir kişinin öncesi sonrası fotoğrafını gösteriyorsanız önemlidir. Ziyaretçilerin istediğiniz çerçevelemeyle karşılaşması için ayırıcının başlangıç konumunu belirleyebilirsiniz. Ayrıca yerleşik gezinme ile üç adede kadar fotoğraf karşılaştırma çifti ekleyebilir, tek bir öğeyi statik bir karşılaştırma yerine kompakt bir vaka çalışması galerisine dönüştürebilirsiniz. Üç hasta sonucunu gösteren bir diş hekimi veya aşamalı bir renovasyonu anlatan bir iç mimar için bu, bir gömme ile üç gömme arasındaki farktır.

Jotform widget’ını Wix sitenize eklemek için şu adımları izleyin:

1. Jotform Öncesi Sonrası Kaydırıcı Widget’ını açın ve dosyalarınızı yükleyerek veya görsel URL’lerini yapıştırarak görsel çiftinizi ekleyin. Her karşılaştırma için önce ve sonra etiketleri ile bir başlık ekleyin.

2. Gösterim yönünü, başlangıç ayırıcı konumunu ve etkileşim stilini (sürükleme, tıklama veya üzerine gelme) ayarlayın. Sitenizle uyumlu olması için genişliği, görsel oranını, köşe yuvarlaklığını, ayırıcı boyutunu ve renkleri düzenleyin. Ziyaretçilerin ayrıntıları incelemesi gerekiyorsa tam ekran modunu etkinleştirin.

3. Gömme kodunu kopyalayın.

4. Wix Düzenleyici’de + Add seçeneğine tıklayın ve Embed Code‘u seçin. Kod parçacığınızı yapıştırın, öğeyi yeniden boyutlandırın ve Publish‘e tıklayın.

Wix’in site veya widget gömme kılavuzu, gömme kodunuzun HTTPS kullanması gereksinimi de dahil olmak üzere öğenin sınırlamalarını kapsar.

Seçenek 3: Velo by Wix kullanarak özel bir kaydırıcı oluşturun

Üçüncü taraf bir uygulamaya veya harici bir gömme koda bağımlı olmak istemiyorsanız, kaydırıcıyı Velo by Wix ile kendiniz kodlayabilirsiniz. Yaklaşım, iki görselinizi düzenleyicide üst üste yerleştirmek, sürükleme tutamacı olarak bir çizgi veya kutu öğesi eklemek, Geliştirici Modunu açmak ve ziyaretçi sürükledikçe üst görselin daha fazla veya daha az görünmesini sağlayan JavaScript yazmaktır.

Ancak bir sorun var. Velo’nun sayfa kodu, bir işaretçiyi bir öğe üzerinde hareket ederken takip edemez. Standart Wix öğelerinde kullanılabilen olay işleyicileri tıklamaları, odaklanmayı, bir öğeye girme ve çıkma ile görünüm alanı görünürlüğünü kapsar. Fare hareketi işleyicisi ve dokunma olayı desteği yoktur. Bir sürükleme kaydırıcısı her ikisine de ihtiyaç duyar.

İdeal yol, bir HTML iFrame öğesi içinde standart DOM JavaScript yazmak ve Velo’yu yalnızca veri aktarmak için kullanmaktır. Bu noktada Seçenek 2 ile aynı gömme mekanizmasını kullanırsınız; tek fark kodun, duyarlı davranışın ve her hatanın size ait olmasıdır.

Denemek istiyorsanız şu adımları izleyin:

1. Wix Düzenleyici’de üst çubuktaki Dev Mode‘a tıklayın ve geliştirici modunu açın. Wix Studio’da sol kenar çubuğundaki Start Coding‘e tıklayın.

2. Kaydırıcının olmasını istediğiniz yere, görsel boyutlarınıza uygun şekilde boyutlandırılmış bir Embed HTML öğesi ekleyin.

3. Karşılaştırma kaydırıcısı işaretlemenizi, stilinizi ve işaretçi olay yönetiminizi bu öğenin içine yazın; her kırılım noktasında hem fare sürükleme hem de dokunmatik kaydırma işlemini test edin.

Wix sitenizi akıllı, kodsuz widget’larla geliştirin

Jotform Öncesi Sonrası Kaydırıcı Widget’ı, dönüşümlerinizi aylık yazılım faturanıza ek yük bindirmeden veya Velo’da dokunma olaylarını hata ayıklamadan göstermenin en hızlı yoludur. Bir kez yapılandırın, kodu yapıştırın ve devam edin.

Ayrıca Jotform’un sunduğu 150’den fazla ücretsiz web sitesi widget’ından yalnızca biridir. Portföy veya hizmet sitesiyle iyi uyum sağlayan birkaç diğer widget şunlardır:

• Google Reviews: Müşteri puanlarını çalışmanın hemen yanına koyun; böylece kanıt ve övgü aynı sayfada yer alsın.
• FAQ: “Bu ne kadar sürer” ve “maliyeti nedir” sorularını, ziyaretçi size e-posta göndermek için sayfadan ayrılmadan önce yanıtlayın.
• Popup: Tüm galerinizi kaydırıp gezen ancak henüz randevu almaya hazır olmayan birinden e-posta adresi alın.
• Back to Top: Portföy sayfanız yukarı kaydırmanın zahmetli hale gelecek kadar uzadığında eklemeye değer bir widget’tır.

Her biri, kaydırıcı için kullandığınız aynı Embed HTML öğesi aracılığıyla kurulur; dolayısıyla ikinci veya üçüncü bir widget eklemek yalnızca birkaç dakika sürer.

Sitenizi hâlâ oluşturuyorsanız, Wix web sitesi yapma kılavuzumuz platformu baştan sona kapsar ve Jotform-Wix entegrasyonu sayfası iletişim ve randevu formları ekleme adımlarını anlatır. Tam widget dizinine göz atın ve sitenizde nelerin eksik olduğunu keşfedin.