Stilist, dekoratör, rötuşçu veya çalışmalarınızın görsel sonuçlarını göstermeniz gereken başka bir profesyonel misiniz? Web sitenizde yer alan bir öncesi-sonrası kaydırıcısı kullanımı kolaydır ve değeri anında aktarır. Ne yazık ki WordPress kullanıcıları için platformun yerel bir kaydırıcı özelliği bulunmuyor.
Ancak WordPress’e kaydırıcı eklemek imkânsız değil. Üç seçeneğiniz var: Üçüncü taraf bir eklenti kullanabilir, ücretsiz ve hafif bir harici widget kullanabilir ya da özel kod yazarak sıfırdan bir kaydırıcı oluşturabilirsiniz.
Bu makalede, hangisinin ihtiyaçlarınıza uygun olduğunu bilmeniz için üç yöntemi de kullanarak WordPress’te öncesi-sonrası kaydırıcısının nasıl ekleneceğini anlatıyoruz.
Seçenek 1: WordPress kaydırıcı eklentisi yükleyin
Öncesi-sonrası kaydırıcısı eklemenin en yaygın yollarından biri WordPress eklentisi kullanmaktır. Ancak bu yaklaşımın birkaç dezavantajı vardır.
Bazı eklentiler sitenizin genelinde ekstra CSS ve JavaScript ekleyerek sayfa yüklenme sürelerini uzatır. Ayrıca Elementor gibi “ağır” sayfa oluşturucular, kaydırıcıyı karmaşık kısa kodlar (metin tabanlı, WordPress’e özgü kodlar) üzerinden yönetmenizi gerektirir; bu da yeni başlayan kullanıcılar için tam bir kabusa dönüşebilir. Kodun bir kısmını yanlışlıkla silerseniz kaydırıcı anında bozulur. Üstelik bazı eklentiler freemium iş modeliyle çalışır ve gelişmiş özellikleri ücretli sürümün arkasına kilitler.
Eklentiler her kullanıcıya uygun değildir, ancak teknolojiye hâkimseniz ve WordPress’te kendinizi rahat hissediyorsanız sağlam bir çözümdür. WordPress öncesi-sonrası eklentisini yüklemek için şu adımları izleyin:
- Eklentiyi yükleyin: WordPress kontrol paneline gidin ve Eklentiler seçeneğine tıklayın. Ara çubuğuna “öncesi-sonrası kaydırıcısı” yazın ve arama sonuçlarından kullanmak istediğiniz eklentiyi seçin. (Düzinelerce seçenek var. Diğer görev türleri için en iyi WordPress eklentilerinin listesine göz atın.)
Eklentiyi yüklemek için ekrandaki komutları izleyin. (Kesin yükleme talimatları, seçtiğiniz eklentiye göre değişir.)
Birçok eklentinin ücretsiz olduğunu, bazılarının ise tek seferlik bir ücretle sunulduğunu unutmayın. Çoğu durumda bunları yalnızca ücretli bir WordPress planıyla kullanabilirsiniz.
- Öncesi-sonrası kaydırıcısını oluşturun: Eklentiyi WordPress kontrol panelinden açın. Yeni bir öncesi-sonrası kaydırıcısı oluşturma seçeneğini belirleyin. Öncesi ve sonrası görsellerinizi yükleyin. En iyi uygulamaları takip etmek için kadrajı ve boyutları aynı olan görseller kullanın.
- Öncesi-sonrası kaydırıcısını özelleştirin: Çoğu eklenti; görsel etiketleri, başlangıç konumu, tutamaç görünümü ve kaydırıcı yönü gibi ayarları düzenlemenize olanak tanır. Ayarlarınızı yapın ve kaydedin.
- Öncesi-sonrası kaydırıcısını WordPress sitenize ekleyin: Kaydırıcının görünmesini istediğiniz WordPress sayfasını açın. Eklentiye bağlı olarak kaydırıcıyı, özel bir WordPress bloğu oluşturarak ya da sayfaya kısa kod ekleyerek yerleştirebilirsiniz.
Pro Tip
WordPress eklentilerini kullanma konusunda daha fazla rehberliğe mi ihtiyacınız var? “WordPress nasıl kullanılır” rehberi; WordPress eklentilerini, formları, temaları ve daha fazlasını kullanmaya ilişkin önemli bilgiler sunan ayrıntılı bir eğitimdir.
Seçenek 2: Ücretsiz, kodlama gerektirmeyen bir kaydırıcı widget’ı kullanın (önerilen)
Sıkıcı kısa kodlarla ya da WordPress sitenizin yavaş yüklenmesine neden olan ağır eklentilerle uğraşmak istemiyorsanız en iyi seçeneğiniz, kodlama gerektirmeyen bir kaydırıcı widget’ı kullanmaktır. Jotform Öncesi-Sonrası Kaydırıcı Widget’ı tamamen ücretsizdir ve kullanımı kolaydır. Widget sunucusuz çalıştığı için sitenizin hızını hiçbir şekilde etkilemez. Ayrıca masaüstünde ve akıllı telefonda kusursuz çalışır.
Jotform’un Öncesi-Sonrası Kaydırıcı Widget’ı, hiçbir kod yazmadan kullanabileceğiniz görsel bir arayüz sunar. Widget oluşturucuya iki görsel yüklemeniz, sürükleme tutamacının renklerini özelleştirmeniz ve varsayılan başlangıç konumunu ayarlamanız yeterlidir. Ardından kodu kopyalayıp WordPress’e ekleyin.
İşte daha fazla ayrıntı:
- Görsel çiftlerini ekleyin: Jotform Öncesi-Sonrası Kaydırıcı Widget’ı sayfasına gidin ve öncesi ile sonrası görsellerinizi widget ayarları kutusuna yükleyin. Widget başlığınızı düzenleyin ve sunmak istediğiniz etkileşim türünü belirleyin (sürükle ve tıkla ya da üzerine gelme). Devam düğmesine tıklayın veya dokunun.
- Kaydırıcı ayarlarını özelleştirin: Görsel oranı, köşe yarıçapı, ayırıcı kalınlığı ve kaydırıcı renkleri gibi ayarları düzenleyebilirsiniz. Tüm tercihlerinizi seçmek için aşağı kaydırın.
- Kaydırıcı widget’ının yerleştirme kodunu alın: Web Sitenizde Ücretsiz Deneyin düğmesine tıklayın veya dokunun. Jotform, kaydırıcı widget’ı için bir yerleştirme kodu sağlayacaktır. Kopyala düğmesine tıklayın veya dokunun. Jotform, kodu almak için sizden kaydolmanızı veya giriş yapmanızı isteyecektir.
- Kaydırıcı yerleştirme kodunu WordPress’e yapıştırın: WordPress sitenize gidin ve Blok Ekleyici‘den bir Özel HTML bloğu ekleyin. Yerleştirme kodunu HTML bloğuna yapıştırın. Güncelle düğmesine tıklayın veya dokunun. WordPress, öncesi-sonrası kaydırıcı widget’ını WordPress sitenize otomatik olarak ekleyecektir.
Seçenek 3: Özel bir HTML/CSS kaydırıcısı kodlayın
Üçüncü taraf eklentilerden veya harici widget’lardan kaçınmayı tercih eden bir WordPress tutkunuysanız, ham kod kullanarak sıfırdan bir kaydırıcı oluşturabilirsiniz.
Bu yöntem teknik olarak ücretsiz ve WordPress’e özgü olsa da kolay değildir. Özellikle web sitesi ziyaretçilerinin kaydırıcıyı akıllı telefonda da kullanabilmesini istiyorsanız, kod yazma konusunda ileri düzeyde deneyime sahip olmanız gerekir. Ayrıca tek bir kodlama hatası, kaydırıcıyı bozabilir ve diğer sorunların yanı sıra akıllı telefon uyumluluğunu da olumsuz etkileyebilir.
WordPress’te özel kodla öncesi-sonrası kaydırıcısını şu şekilde ekleyebilirsiniz:
- Öncesi-sonrası görsellerini yükleyin: Her iki görseli de WordPress Medya Kütüphanesi‘ne ekleyin.
- Kaydırıcı için özel HTML/CSS kodunu oluşturun: Kaydırıcının yapısını ve stilini oluşturmak için HTML/CSS kodunu yazın. Etkileşimli sürükleme ve kaydırma özelliklerini eklemek için JavaScript’e de ihtiyaç duyabilirsiniz.
Bu kodu kendiniz yazabilir, kodlama deneyimi olan bir meslektaşınızla çalışabilir ya da kodu oluşturmak için bir yapay zeka aracı kullanabilirsiniz.
Kodu kopyalayın.
- Kodu WordPress sitenize ekleyin: WordPress sitenizde bir Özel HTML bloğu ekleyin ve kodunuzu bu bloğa yapıştırın. Gerektiğinde CSS ve JavaScript’i WordPress teması veya site kurulumu üzerinden ekleyin.
WordPress sitenizi akıllı, kodlama gerektirmeyen widget’larla geliştirin
Site hızına ve güvenliğine öncelik vermek, maliyetleri düşük tutmak ve karmaşık kodlardan kaçınmak istiyorsanız Jotform’un Öncesi-Sonrası Kaydırıcı Widget’ı, web sitenize zengin ve etkileşimli medya eklemenin harika bir yoludur. Kullanımı tamamen ücretsizdir, hem yeni başlayanlar hem de profesyoneller için idealdir ve hiçbir kod yazmayı gerektirmez.
Ancak Jotform’un sunduğu yalnızca bu değil!
Jotform Web Sitesi Widget’ları dizininde, WordPress sitenizi geliştirebilecek 150’den fazla ücretsiz web sitesi widget’ı bulabilirsiniz. Örneğin Ziyaretçi Sayacı Widget’ı, sitenizin ne kadar popüler olduğunu göstermenin harika bir yoludur; Geri Sayım Zamanlayıcı Widget’ı ise önemli etkinlikler ve kampanyalar için aciliyet hissi oluşturmanıza yardımcı olur.
Jotform ayrıca iletişim formları, müşteri kazanma formları ve sipariş formları gibi binlerce WordPress formu sunar. Önemli ziyaretçi bilgilerini toplamak için bunları sitenize ekleyin.
Jotform’un ücretsiz bir planı var. Widget’ları keşfetmeye başlamak ve performanstan ödün vermeden ya da kod yazmadan WordPress sitenizin işlevselliğini geliştirmenin ne kadar kolay olduğunu görmek için deneyin.
Bu makale; fotoğraf rötuşu, arayüz yeniden tasarımları veya yenileme çalışmaları gibi görsel dönüşümleri ağır eklentilerle sitesini yavaşlatmadan ya da karmaşık kısa kodlarla uğraşmadan sergilemek isteyen WordPress blog yazarlarına, portfolyo sahiplerine ve ajanslara yöneliktir.
Yorum Gönder: