WordPress'e Öncesi ve Sonrası Fotoğraf Kaydırıcısı Nasıl Eklenir (Kodsuz)

Yayınlanan: 2022-10-20

WordPress web sitenize önce ve sonra fotoğraf kaydırıcısı eklemek ister misiniz?

Bir resim karşılaştırma kaydırıcısı, ürünlerinizin veya hizmetlerinizin müşterilerin bunları kullanmadan önce ve kullandıktan sonra nasıl çalıştığını göstermeye yardımcı olabilir. Bunu yapmak markanıza daha fazla güvenilirlik sağlar ve potansiyel müşterileri satın almaya yönlendirebilir.

Bu yazıda, WordPress'e kod kullanmadan önce ve sonra resim kaydırıcılarını nasıl kolayca ekleyeceğinizi göstereceğiz.

Öncesi ve Sonrası Fotoğraf Efekti Nasıl Çalışır?

Fotoğraf öncesi ve sonrası efekti, web sitesi ziyaretçilerinin bir görüntüyü diğerine geçiren etkileşimli bir ayırıcıya tıklamasına olanak tanır.

Diyelim ki aynı fotoğrafın küçük farklılıklarla 2 versiyonu var: fotoğraf A ve fotoğraf B. Önce ve sonra A kaydırıcısı bunları merkezi bir ayırma çizgisiyle yan yana veya üst üste yerleştiriyor.

Kaydırıcı yönünü hareket ettirdiğinizde, bir resmi daha çok, diğerini daha az görürsünüz.

Fotoğraf kaydırıcı örneğinden önce ve sonra

Bu, farklı görüntüleri yan yana karşılaştırmanın harika bir yoludur. Örneğin, diş hekimliği web siteleri, diş hekimliği çalışmasından önce ve sonra bir müşterinin dişlerini gösterebilir. Veya belirli bir güzellik bakımının öncesi ve sonrası etkilerini karşılaştırabilirsiniz.

Alternatif olarak, e-Ticaret web siteleri, farklı ürünlerin özelliklerini karşılaştırmak için önce ve sonra fotoğraf kaydırıcılarını kullanabilir.

Soru şu ki, WordPress'e fotoğraf kaydırıcılarından önce ve sonra nasıl eklenir? Hadi bulalım.

WordPress'te Öncesi ve Sonrası Fotoğraf Kaydırıcıları Nasıl Eklenir

Tipik olarak, web sitenize fotoğraf kaydırma widget'ları ve slayt gösterileri eklemek Javascript, Jquery, HTML, CSS ve diğer kodlama dillerini kullanmayı içerir. Birçok web sitesi sahibi bu kodu nasıl yazacağını bilemez, bu nedenle yardım için web geliştiricilerine başvururlar, bu da oldukça maliyetli olabilir.

Neyse ki, WordPress sitenize yeni özellikler eklemenin daha ucuz yolları var. En iyi WordPress eklentilerinden bazılarıyla, bir servet harcamadan web sitenizi kolayca geliştirebilirsiniz.

Aşağıdaki öğretici, SeedProd ile önce ve sonra fotoğraf kaydırıcılarını nasıl ekleyeceğinizi gösterir.

SeedProd WordPress web sitesi oluşturucu

SeedProd, sürükle ve bırak işlevine sahip en iyi WordPress web sitesi oluşturucusudur. Kodsuz esnek WordPress mizanpajları oluşturmak için önceden hazırlanmış şablonlar ve görsel bir sayfa oluşturucu kullanmanıza olanak tanır.

Sürükle ve bırak WordPress bloklarıyla web sitenizi aşağıdakiler de dahil olmak üzere değerli özelliklerle geliştirebilirsiniz:

  • Kaydırıcılardan önce ve sonra
  • Gelişmiş resim galerileri
  • Fiyatlandırma tabloları
  • İsteğe bağlı formlar
  • Harekete geçirici mesaj düğmeleri
  • geri sayım sayaçları
  • Sekmeli içerik
  • eşantiyonlar
  • İletişim formları
  • Ve daha fazlası.

Yakında bir sayfa oluşturmak ve WordPress'i bakım moduna geçirmek için SeedProd'u da kullanabilirsiniz. Ayrıca, yaptığınız her şey %100 mobil uyumludur ve sitenizin mobil cihazlarda kullanımının kolay olmasını sağlar.

SeedProd eklentisini indirmek için aşağıdaki düğmeyi tıklayın, ardından web sitenize önce ve sonra fotoğraf kaydırıcısını yerleştirmek için adımları izleyin.

SeedProd'u Hemen Kullanmaya Başlayın
  • Adım 1. SeedProd'u Kurun ve Etkinleştirin
  • Adım 2. WordPress Düzeninizi Oluşturun
  • Adım 3. WordPress Bloğundan Önce ve Sonra Ekleyin
  • Adım 4. Değişikliklerinizi Etkinleştirin

Adım 1. SeedProd'u Kurun ve Etkinleştirin

Eklentiyi indirdikten sonra, SeedProd hesabınızda İndirilenler sekmesini bulun ve lisans anahtarınızı kopyalayın.

SeedProd lisans anahtarınızı bulun

Şimdi devam edin ve eklentiyi WordPress sitenize yükleyin. Yardıma ihtiyacınız varsa, bir WordPress eklentisinin nasıl kurulacağına ilişkin bu adım adım kılavuzu takip edebilirsiniz.

SeedProd yüklendikten sonra, WordPress yöneticinizden SeedProd »Ayarlar'a gidin ve daha önce kopyaladığınız lisans anahtarını yapıştırın.

Lisans kodunuzu girin

Lisansınızı etkinleştirmek için Anahtarı Doğrula düğmesini tıklayın, ardından 2. adıma geçin.

Adım 2. WordPress Düzeninizi Oluşturun

SeedProd'u kurduktan sonra, ne tür bir düzen oluşturmak istediğinize karar vermeniz gerekecek. SeedProd'un bırak ve bırak düzenleyicisiyle özel bir WordPress teması oluşturabilir veya yüksek dönüşüm sağlayan açılış sayfaları oluşturabilirsiniz.

Tema Oluşturucu seçeneği, mevcut web sitesi tasarımınızı iş ihtiyaçlarınıza göre uyarlanmış yeni bir WordPress temasıyla değiştirmenin harika bir yoludur. Tipik bir WordPress temasının tüm şablon dosyalarını oluşturur ve güçlü sayfa oluşturucu ile her bir parçayı görsel olarak özelleştirmenize olanak tanır.

Seedprod tema oluşturucu şablon dosyaları

SeedProd ile özel bir WordPress teması oluşturmak için bu öğreticiyi izleyin.

Alternatif olarak, mevcut WordPress temanızla sorunsuz çalışan bağımsız açılış sayfaları oluşturmak için Açılış Sayfası Oluşturucu'yu kullanabilirsiniz. Tema oluşturucu ile aynı görsel düzenleyiciyi kullanır ve herhangi bir web sitesi için harika bir müşteri adayı oluşturma taktiğidir.

SeedProd sürükle ve bırak açılış sayfası oluşturucu

İşte SeedProd kullanarak WordPress'te bir açılış sayfasının nasıl oluşturulacağına dair bir kılavuz.

Yeni bir düzen oluşturduktan sonra 3. adıma geçebilir ve tasarımınıza bir öncesi ve sonrası kaydırıcısı ekleyebilirsiniz.

Not: Bu kılavuz için özel bir WordPress teması oluşturacağız ve ana sayfa şablonunu düzenleyeceğiz.

Adım 3. WordPress Bloğundan Önce ve Sonra Ekleyin

Mizanpajınızı oluşturduktan sonra, düzenlemek istediğiniz sayfayı SeedProd'un sayfa oluşturucusu ile açın.

WordPress temamızın ana sayfasını düzenlediğimizden, SeedProd »Tema Oluşturucu'ya gideceğiz ve Ana Sayfa şablonunun altındaki Tasarımı Düzenle'yi tıklayacağız.

ana sayfa tasarımını düzenle

Aşağıdaki ekranda aşağıdakine benzer bir düzen göreceksiniz:

SeedProd sürükle ve bırak sayfa oluşturucu

Sağda 2. adımda seçtiğiniz şablonun canlı bir önizlemesi, solda ise tasarımınıza sürükleyip bırakabileceğiniz bloklar ve bölümler var.

Herhangi bir öğeyi özelleştirmek çok kolaydır.

Örneğin, başlıkları tıklayarak ve yeni içeriğinizi doğrudan canlı önizlemede yazarak düzenleyebilirsiniz.

SeedProd oluşturucu ile başlıkları düzenleyin

Veya metni, sayısız özelleştirme seçeneği içeren sol taraftaki ayarlar panelinde düzenleyebilirsiniz.

Bu nedenle, şablonunuzu istediğiniz gibi görünmeye başlayana kadar özelleştirin.

Şimdi şablonunuzun otomatik olarak içermeyebileceği özellikleri eklemeye bakalım. Örneğin, seçtiğimiz Web Sitesi Kitinde önce ve sonra fotoğraf kaydırıcısı yok, bu yüzden onu kendimiz eklememiz gerekecek.

Bunu yapmak için, Before After Toggle öğesini bulana kadar soldaki WordPress bloklarını kaydırın. Ardından, canlı önizlemenizdeki konumuna sürükleyin.

WordPress bloğunu Değiştirmeden Önce Sonra Ekle

Bloğu tıkladığınızda, sol taraftaki ayarlar panelinde özelleştirme seçeneklerini açacaksınız. Burası, öncesi ve sonrası resimlerinizi ekleyebileceğiniz, stili değiştirebileceğiniz ve daha fazlasını yapabileceğiniz yerdir.

Ayarları Değiştirmeden Önce Sonra

Tipik olarak "önceki" fotoğrafınız olacak olan ilk resmi ekleyerek başlayalım. Bunu Kendi Resminizi Kullan seçeneğine tıklayarak ve yeni bir fotoğraf yükleyerek veya WordPress medya kitaplığınızdan bir fotoğraf seçerek yapabilirsiniz.

Önce resminizi yükleyin

Şimdi "sonra" görüntüsü için bu adımı tekrarlayın. Metin alanlarındaki adları değiştirerek her görüntünün etiketlerini düzenleyebilirsiniz.

Resimleriniz yerindeyken, birkaç ayara daha bakalım.

Oryantasyon başlığı altında, önce ve sonra kaydırıcısını yatay yerine dikey yapabilirsiniz.

Önce Sonra Oryantasyon ayarlarını değiştir

İmlecinizle görüntünün üzerine geldiğinizde kaydırıcıyı hareket ettirebilir ve fotoğraflara bir renk katmanı uygulayabilirsiniz.

Karşılaştırma Kolu başlığını açtığınızda, kaydırıcı rengini, genişliğini, yarıçap piksel boyutunu ve daha fazlasını değiştirmeye yönelik ayarları göreceksiniz.

Önce Sonra Geçiş Karşılaştırma Tutamaç ayarları

Gelişmiş sekmesine tıklayarak daha da fazla ayar bulabilirsiniz. Örneğin, etiket tipografisini ve rengini değiştirebilir, blok aralığını ve niteliklerini ayarlayabilir ve mobil ekranlarda belirli öğeleri gizleyebilirsiniz.

Gelişmiş Önce Sonra Geçiş ayarları

Öncesi ve sonrası fotoğraf kaydırıcısının görünümünden memnun olduğunuzda, ekranınızın sağ üst köşesindeki Kaydet düğmesini ve ardından Yayınla'yı tıklayın.

Değişikliklerinizi kaydedin

Bir açılış sayfası oluşturuyorsanız, artık sayfanızı önizleyebilir ve öncesi ve sonrası resim kaydırıcınızı çalışırken görebilirsiniz. Ancak özel bir WordPress teması yapıyorsanız 4. adımı tamamlamanız gerekir.

Adım 4. Değişikliklerinizi Etkinleştirin

Değişiklikleriniz kaydedilip yayınlansa bile, yine de WordPress temanızı canlı hale getirmeniz gerekiyor. Merak etme; bu adım hızlı ve kolaydır.

WordPress panonuzdan SeedProd »Theme Builder'a gidin ve SeedProd Temasını Etkinleştir geçiş düğmesini "Evet" konumuna getirin. Bu kadar!

seedprod temasını etkinleştir

Artık web sitenizin ön ucuna gidebilir ve yeni resim kaydırıcınızı bir tur atabilirsiniz.

Fotoğraf kaydırıcı örneğinden önce ve sonra

İşte aldın!

Artık WordPress web sitenize önce ve sonra fotoğraf kaydırıcılarını nasıl ekleyeceğinizi biliyorsunuz. Bu özelliği işletmenizin başarısı için çalıştırmanın pek çok yolu vardır.

Peki ne bekliyorsun?

SeedProd'u Hemen Kullanmaya Başlayın

Okuduğunuz için teşekkürler. İşinizi büyütmek için daha yararlı içerik için lütfen bizi YouTube, Twitter ve Facebook'ta takip edin.