WordPress'te Görüntü Karşılaştırma Kaydırıcısı Nasıl Yapılır
Yayınlanan: 2025-03-12Genel Bakış ➣ Görüntü karşılaştırma kaydırıcısı, kullanıcıların bir kaydırıcıyı hareket ettirerek iki görüntüyü yan yana karşılaştırmasını sağlayan kullanışlı bir araçtır. Bu işlevsellik, öncelikli ve sonrasında değişiklikler, ürün karşılaştırmaları ve tasarım iyileştirmelerini görüntülemek için yaygın olarak kullanılır, bu da onu fotoğraf, e-ticaret ve yaratıcı web siteleri için olmazsa olmaz bir özellik haline getirir.
WordPress'te bir görüntü karşılaştırma kaydırıcısı nasıl oluşturulacağını öğrenmek ister misiniz? Doğru yere geldin!
Bu basit öğreticide, WordPress'te bir görüntü karşılaştırmasının nasıl kolayca oluşturulacağını göstereceğim.
Görüntü karşılaştırma kaydırıcısı, kullanıcıların bir kaydırıcıyı kaydırarak iki görüntüyü yan yana karşılaştırmasını sağlayan harika bir özelliktir.
Öncesi ve sonrası gösteriler, ürün karşılaştırmaları ve tasarım değişikliklerini vurgulamak için özellikle kullanışlıdır.
Bu öğreticide, Elementor için Elemento Addons ile WordPress'te bir görüntü karşılaştırma kaydırıcısının nasıl yapılacağı konusunda size rehberlik edeceğiz.
İçindekiler
WordPress'te görüntü karşılaştırma kaydırıcısı nedir?
Bir görüntü karşılaştırma kaydırıcısı, kullanıcıların aralarında kayarak iki görüntüyü karşılaştırmalarını sağlar. Tasarım, fotoğraf, tıbbi ve e-ticaret web siteleri için önceki ve sonrası görüntüleri sergilemek için yaygın olarak kullanılır.
Neden bir görüntü karşılaştırma kaydırıcısı kullanmalıyım?
Bir görüntü karşılaştırma kaydırıcısı, iki görüntü arasındaki farkların görsel bir temsilini sağlayarak kullanıcı katılımını artırır.
Dönüşümlerin, düzenlemelerin, ürün geliştirmelerin veya diğer karşılaştırmaların gösterilmesine yardımcı olabilir.
WordPress'te Görüntü Karşılaştırma Kaydırıcısı Nasıl Yapılır
Adım 1: Elementor için Elemento eklentilerini yükleyin ve etkinleştirin
Kurulumdan önce, hem WooCommerce hem de Elementor'un gösterge panelinizde etkinleştirildiğinden emin olun.
Eklentiyi indirin : Elemento Addons eklentisi sayfasını ziyaret edin ve eklentiyi indirin.
WordPress Gösterge Tablonuza Git → Eklentiler → Yeni Ekle → Yükle Eklentisi.
İndirilen dosyayı yükleyin ve "Şimdi Yükle" yi tıklayın.
Yüklendikten sonra, eklentiyi etkinleştirmek için “Etkinleştir” i tıklayın.
Elemento Addons'ı yüklemek için lütfen aşağıdaki video öğreticisini izleyin:
2. Adım: Elementor ile bir sayfa oluşturun veya düzenleyin :
Yeni başlıyorsanız sayfa> Yeni Ekle'ye gidin veya mevcut bir sayfayı düzenleyin veya gerektiği gibi herhangi bir sayfaya bir kaydırıcı ekleyin.
Elementor Page Builder'ı başlatmak için Elementor ile Düzenle'yi tıklayın.
Adım 3: Görüntü karşılaştırma widget'ı ekleyin
Elementor Editor'da, kenar çubuğunda Elemento Addons widget'larını arayın veya widget panelinde görüntü karşılaştırmasını arayın.
Görüntü karşılaştırma widget'ını sayfanın herhangi bir yerinde sürükleyip bırakın.
4. Adım: Resimlerinizi Yükle
Burada, aşağıdaki resimde yeni eklenen görüntü karşılaştırma widget'ını görebilirsiniz.
Görüntü bölümüne görüntü ekleyerek görüntüler bölümünü düzenlemek için sol kenar çubuğunu kullanın.
Referansınız için örnek görüntüler ekledim.
Adım 5: Kaydırıcıyı özelleştirin
Sol kenar çubuğunu kullanarak ayarları düzenleyebilir ve özelleştirebilirsiniz.
Sol taraftaki menüyü kullanarak ayarları değiştirebilir ve kişiselleştirebilirsiniz.
Adım 6: Sayfayı yayınlayın
Ayarlarınızdan memnun kaldığınızda, resim karşılaştırma kaydırıcılarınızı canlı hale getirmek için Publish'i tıklayın.
Ayarlamalarınızdan memnun olduğunuzda, görüntü karşılaştırma kaydırıcılarınızı başkalarına görünür hale getirmek için “Yayınla” yı tıklayın.
“Sayfayı Görüntüle” ye tıklayarak sayfayı görüntüleyebilirsiniz.
Yanınızda canlı görüntü karşılaştırma kaydırıcısını görüntüleyebilirsiniz.
Dükkan Mania Woocommerce Tema
Woocommerce mağazanızı geliştirmek için güzel, özellik dolu bir tema mı arıyorsunuz?
Sakinsiz ve görsel olarak çekici bir alışveriş deneyimi için mağaza mani temasını tavsiye ediyoruz.
Şık tasarımı, kolay özelleştirme seçenekleri ve WooCommerce uyumluluğu, Shop Mania'yı müşteri memnuniyetini artırmayı ve dönüşümleri artırmayı amaçlayan mağazalar için mükemmel bir seçim haline getiriyor. Buradan kontrol edebilirsiniz.
Shop Mania'nın Özellikleri:
- İthalat Hazır Siteler: Demo sitelerini kolayca içe aktarın ve mağazanızın ihtiyaçlarına uyacak şekilde özelleştirin.
- Birden çok ürün arabası şablonu: Mağazanızın tasarımına uyacak beş yüksek kaliteli araba şablonu arasından seçim yapın.
- Hızlı Görünüm: Kullanıcıların geçerli sayfadan ayrılmadan ürün ayrıntılarını önizlemelerine izin verin.
- Canvas dışı kenar çubuğu: Ana sayfayı karıştırmadan ek ürünler ve widget'lar görüntüleyin.
- Yüzen Sepet: Kullanıcı deneyimini uygun bir yüzer alışveriş sepeti ile geliştirin.
- Ürün Geri Yükseltme Etkileri: Etkileşimli ürün ekranları için zoom, solma, görüntü takası ve slayt efektlerini içerir.
- Mobil başlık stilleri: Kesintisiz bir mobil deneyim için tasarlanmış optimize edilmiş başlık tasarımları.
- Özelleştirilebilir tek ürün düzenleri: Izgara ve kaydırıcı seçenekleri dahil esnek galeri düzenleri.
- Gelişmiş Ödeme ve Sepet Stilleri: Pürüzsüz, dikkat dağıtıcı bir deneyim için kişiselleştirilmiş ödeme ve sepet sayfaları.
SSS
S: Görüntü karşılaştırma kaydırıcıları web sitesi hızını etkiler mi?
ANS: Hafif bir eklenti kullanıyorsanız ve görüntüleri optimize ederseniz minimal etki oluşur.
S: Kaydırıcı herhangi bir WordPress temasıyla çalışacak mı?
Ans: Görüntü karşılaştırma kaydırıcı eklentileri popüler WordPress temalarıyla uyumludur, ancak uyumluluk için eklenti belgelerini kontrol etmek her zaman en iyisidir.
S: Görüntü karşılaştırma kaydırıcımla ilgili sorunları nasıl gideririm?
Ans: Kaydırıcınız düzgün çalışmıyorsa:
1. Eklentinin güncellendiğinden emin olun.
2. Diğer eklentilerle çatışmaları kontrol edin.
3. Önbelleği temizleyin ve web sitenizi yenileyin.
4. Eklentiyi devre dışı bırakmayı ve yeniden etkinleştirmeyi deneyin.
Son Düşünceler
Bir WordPress sitesinde bir görüntü karşılaştırma kaydırıcısı eklemek, Elementor için Elemento Addons ile daha görsel olarak çekici hale getirmesi için çok kolaydır.
Bir fotoğraf web siteniz, çevrimiçi mağazanız veya bir tasarım portföyünüz varsa, bu eklenti içeriğinizi etkili bir şekilde sunmaya yardımcı olabilir.
Bu eklentinin nasıl kullanılacağı hakkında herhangi bir sorunuz var mı? Aşağıdaki yorumlarda bize bildirin!
Bu makaleyi yararlı bulursanız, arkadaşlarınızla paylaşın. Herhangi bir sorunuz varsa, aşağıya bir yorum bırakın ve size yardımcı olmaktan memnuniyet duyarız. Okuduğunuz için teşekkürler!
Lütfen YouTube kanalımıza abone olun; Ayrıca oraya harika içerik yüklüyoruz. Ayrıca, bizi Facebook ve Twitter'da takip edin
Daha yararlı okumalar:
- WooCommerce Sepetine Ekle düğmesine nasıl eklenir. Sayfadaki herhangi bir yere?
- WooCommerce için Elementor'a bir ürün kaydırıcısı nasıl eklenir?
- Elementor'a bir ürün kaydırıcısı nasıl eklenir