Webflow'da önce-sonra fotoğraf karşılaştırma kaydırıcısı nasıl eklenir

Önce sonra kaydırıcısı, yaptığınız işin sonuçlarını göstermenin en hızlı yollarından biridir. Kullanıcının tek yapması gereken, yeniden tasarımınızın, tadilatınızın veya rötuşunuzun etkisini ortaya çıkarmak için ayırıcıyı sürüklemektir. Yan yana konmuş bir fotoğrafa bakıp fark bulmaya çalışmalarına gerek yoktur — sonuçlar doğrudan gözlerinin önündedir.

İster bir ajans yönetiyor olun ister serbest çalışan, tasarımcı, fotoğrafçı, sanatçı, müteahhit ya da çalışmalarını sergilemek isteyen herhangi biri olun, önce sonra kaydırıcısı bunu yapmanın harika bir yoludur. Ne yazık ki, en gelişmiş web sitesi oluşturma araçlarından biri olmasına (ve tasarımcılar arasında popüler olmasına) rağmen Webflow’da yerleşik bir önce sonra kaydırıcısı bulunmaz. Bir tane eklemek istiyorsanız üç seçeneğiniz vardır: Topluluktan bir “cloneable” yüklemek, ücretsiz barındırılan bir widget yerleştirmek veya Webflow’un yerleşik etkileşim motoru (IX2) ile sıfırdan bir tane oluşturmak.

Aşağıda bu seçeneklerin her birini ayrıntılı olarak inceliyoruz.

Seçenek 1: Webflow cloneable kullanın

İlk içgüdünüz muhtemelen Made in Webflow vitrininde veya Flowbase gibi bir sitede “cloneable” aramak olacaktır. Bu işe yarayabilir, ancak sorunsuz değildir.

En büyük dezavantajı, başka birinin çalışma yöntemine bağımlı kalmanızdır. Cloneable’ın mevcut mimarisine ve adlandırma kurallarına sıkı sıkıya uymanız gerekir. Bu; özel niteliklere, CSS kurallarına ve mutlak konumlandırmaya bağımlılığı içerebilir. Bunlardan herhangi birini yanlış yaparsanız kaydırıcı çalışmaz. Tasarımınızın sonuna eklerseniz, diğer öğelerin bazılarını yeniden düşünmeniz gerekebilir.

Ancak bu yolu tercih etmeye kararlıysanız, bir cloneable’ı şu şekilde ekleyebilirsiniz:

1. Aktif olarak güncellenen ve kullanmanıza izin veren bir lisansa sahip bir önce sonra kaydırıcısı cloneable’ı bulun. Bunu kendi projenize klonlayın.

2. Kendi görsellerinizi yerleştirin. İç içe geçmiş div’leri yeniden düzenlemeyin, herhangi bir şeyin adını değiştirmeyin veya düzenlemeye çalışmayın — bu kaydırıcıyı bozabilir.
3. Sitenizi yayınlayın ve test edin. Hem masaüstü hem de mobil cihazlarda çalıştığından emin olun. Yanlışlıkla bir şeyi değiştirdiyseniz, JavaScript farklı koşullarda çalışmayabilir.

Sonuç olarak bu yöntem işe yarar, ancak basit bir görsel bileşen için oldukça zahmetlidir — ve muhtemelen istediğiniz kadar kontrol sahibi olamazsınız. Kaydırıcıyı kontrol eden betiği yeniden yazmak istemiyorsanız, yaptığınız her tasarım değişikliğinin orijinal yapıya uygun olması gerekir.

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

İç içe geçmiş div bloklarıyla uğraşmaktan, özel nitelikleri yapılandırmaktan ve işler ters gittiğinde başka birinin yazdığı JavaScript’i hata ayıklamaktan kaçınmak istiyorsanız, en kolay yol Jotform Önce Sonra Kaydırıcı Widget’ı gibi barındırılan bir gömme bileşeni kullanmaktır. Kurulumu son derece kolaydır ve cloneable’larla yaşanan birçok sorunu çözer.

Jotform ile Webflow’a önce sonra kaydırıcısı eklemenin yolu şöyledir:

1. Jotform Önce Sonra Kaydırıcı Widget’ına gidin ve Jotform hesabınıza giriş yapın. Henüz bir hesabınız yoksa kurulum sırasında ücretsiz olarak kaydolabilirsiniz.

2. Widget’ınıza bir başlık verin ve fotoğraf karşılaştırma çiftlerinizi ekleyin. Görselleri doğrudan yükleyebilir veya bir URL’den ekleyebilirsiniz. İsterseniz her görsel çiftine bir açıklama ekleyebilir ve etiketlerini değiştirebilirsiniz. Ardından, kullanıcının önce ve sonra görsellerini görmek için tutamacı sürüklemesi mi gerektiğini yoksa üzerine gelince mi tetikleneceğini belirleyin. İşiniz bittiğinde Devam‘a tıklayın. 

3. Şimdi kaydırıcınızı stillendirme zamanı. Renklerini, markalamasını, yazı tipini ve görünümünü ayarlayabilirsiniz. Sonuçtan memnun olduğunuzda tekrar Devam‘a tıklayın.

4. Son olarak düzeni yapılandırın. Yatay mı yoksa dikey mi bir kaydırıcı istediğinizi, ayırıcının başlangıç konumunu, genişliğini ve mobil cihazlarda mı, masaüstü cihazlarda mı yoksa her ikisinde birden mi görüntüleneceğini seçin. Ardından Web sitenizde ücretsiz deneyin‘e tıklayın.

5. Gömme kodunu panonuza kopyalamak için Kodu Kopyala‘ya tıklayın ve ardından Webflow sitenize geri dönün.

6. Add menüsünü açın ve Code Embed‘i seçin. Gömme kodunu yapıştırın ve bloğu sitenizde konumlandırın. Publish‘e tıkladığınızda sitenizde yayına alınacaktır. Bu kadar basit.

Gördüğünüz gibi, ücretsiz kodsuz yöntem cloneable seçeneğinden çok daha basittir. Stillendirmesi daha kolaydır, özel nitelikler, katı sınıf adları veya JavaScript konusunda endişelenmenize gerek yoktur ve sorunsuz çalışır. Herhangi bir şeyi değiştirmek isterseniz Jotform’a geri dönün ve önce sonra kaydırıcı ayarlarınızı düzenleyin.

Seçenek 3: Webflow Interactions ile manuel olarak oluşturun

Tam kontrol isteyen ve başkalarının yazdığı JavaScript’i veya harici bir widget’ı kullanmak istemeyen Webflow tutkunları için Webflow’un yerleşik etkileşim motoru IX2’yi kullanarak bir kaydırıcı oluşturmak mümkündür. Webflow’da özel kodla kaydırıcı oluşturmak açık ara en gelişmiş ve karmaşık yöntemdir, ancak görünümü ve davranışı üzerinde tam kontrol sağlar.

IX2 kullanarak kendi Webflow görsel karşılaştırma kaydırıcınızı oluşturmak için, göreceli konumlandırılmış bir kapsayıcı içinde iki görseli, her biri kendi div bloğunda olacak şekilde üst üste yerleştirmeniz gerekir. Üstteki görsel için div bloğu maske görevi görür.

Ardından, Webflow önce sonra etkileşimi için bir Mouse Move Interaction oluşturmanız gerekir. Trigger‘ı Mouse X olarak, hedefi ise maske div’i olarak ayarlayın. Animasyonlu özelliği Width olarak belirleyin ve yüzde 0 ile 100 arasında değişmesini sağlayın. Bu sayede farenin X ekseni hareketi, iki görsel arasındaki örtüşmeyi kontrol eder.

Elbette iki görsel arasında bir ayırıcı istiyorsanız bunu da oluşturmanız gerekir. Ayırıcıyı fare hareketiyle mükemmel şekilde senkronize etmek ise ileri düzey Webflow animasyon becerileri gerektirir.

Webflow’un yerleşik araçları işe yarayabilir, ancak her şeyi doğru ayarlamak çok fazla ince ayar ve Webflow’un nasıl kullanılacağına dair derin bir bilgi gerektirir. Ayrıca mobil cihazlarda çalışmasını istiyorsanız ayrı bir animasyon kurmanız gerekir. Kontrol açısından kazandığınızı, kolaylık açısından kaybedersiniz.

Webflow sitenizi akıllı, kodsuz widget’larla güçlendirin

Webflow’a önce sonra kaydırıcısı eklemenin en hızlı, en kolay ve en pratik yolu Jotform Önce Sonra Kaydırıcı Widget’ını kullanmaktır. Webflow fotoğraf karşılaştırma cloneable’ı kullanmanın dezavantajlarından hiçbirine sahip değildir ve IX2 ile kendi kaydırıcınızı oluşturmaktan çok daha basittir. Sağlam, sunucusuz bir çözüm kullanmak size saatlerce geliştirme süresinden tasarruf sağlar ve her seferinde kusursuz bir duyarlı tasarım sunar.

Dahası, Jotform sitenizi bir üst seviyeye taşıyabilecek çeşitli ücretsiz web sitesi widget’larına sahiptir. Google yorumları, erişilebilirlik kontrolleri, basit bir başa dön düğmesi veya düzinelerce başka kullanışlı işlev eklemek istiyorsanız dizine göz atın. Ayrıca Jotform’un güçlü veri toplama araçlarını doğrudan sitenize bağlamak için Jotform-Webflow entegrasyonunu kullanabilirsiniz.