WordPress'te Önce ve Sonra Fotoğrafı Nasıl Gösterilir (Kaydırma Efektiyle)

Statik, yan yana görüntülerle dramatik bir dönüşümü sergilemeye çalışmak biraz sönük hissettirebilir. Harika bir iş çıkarmışsınız, ancak ziyaretçiler değişiklikle kendileri etkileşime giremediğinde 'vay canına' faktörü kaybolur.

Bir ürün veya hizmetin etkisini vurgulamanın en iyi yollarından birinin, etkileşimli bir önce-ve-sonra kaydırıcısı olduğunu gördük. Sonuçların kendi adına konuşmasına izin vermek için kendi projelerimizde kullandığımız güçlü bir araç.

Bu makalede, WordPress sitenize bir önce-sonra fotoğraf kaydırıcısı eklemek için denenmiş ve test edilmiş iki yöntemimizi paylaşacağız. Yeni başlayanlar için kolay bir seçeneğimiz ve daha fazla kontrol isteyenler için daha özelleştirilebilir bir seçeneğimiz var.

WordPress'te Önce-Sonra Fotoğraf Kaydırıcısını Ne Zaman Kullanmalı

Önce-sonra resmi, tipik olarak bir tür değişikliği gösteren etkileşimli bir resimdir.

Ziyaretçiler, görüntünün farklı 'sürümleri' arasında ilgi çekici ve etkileşimli bir şekilde geçiş yapmak için bir kaydırıcı kullanabilir.

Çevrimiçi bir mağaza çalıştırıyorsanız ve WooCommerce gibi bir eklenti kullanıyorsanız, öncesi ve sonrası fotoğrafı ürünlerinizin veya hizmetlerinizin etkisini gösterebilir.

Müşterinin ilişki kurabileceği bir 'öncesi' fotoğrafı ve istenen bir 'sonrası' fotoğrafı göstermeniz yeterlidir. Bu, alışveriş yapanların onları 'öncesi' durumdan 'sonrası' duruma götüren şeyi satın almak istemelerini sağlayacaktır.

Eğer bir satış ortağı pazarlamacısıysanız, web sitenizde ikna edici önce ve sonra fotoğrafları göstermek, satış ortağı bağlantılarınızı tanıtmak ve daha fazla satış elde etmek için harika bir yoldur.

Bir kaydırıcıyı ‘sonra’ fotoğrafını ortaya çıkarmak için sürüklemek de daha fazla etkileşim elde etmenin kolay bir yoludur, bu da ziyaretçileri sitenizde daha uzun süre tutabilir. Bu ayrıca sayfa görüntülemelerinizi artırmanıza ve WordPress'te hemen çıkma oranını düşürmenize yardımcı olabilir.

Bunu söyledikten sonra, kaydırma efekti kullanarak WordPress'te nasıl bir önce-ve-sonra fotoğraf oluşturabileceğinizi görelim. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

• Yöntem 1: Ücretsiz Bir Eklenti Kullanarak Bir Önce ve Sonra Fotoğraf Gösterin (Kolay)
• Yöntem 2: SeedProd Kullanarak Önce ve Sonra Fotoğrafı Gösterin (Daha Özelleştirilebilir)
• Frequently Asked Questions About Before and After Sliders

Yöntem 1: Ücretsiz Bir Eklenti Kullanarak Bir Önce ve Sonra Fotoğraf Gösterin (Kolay)

Önce ve sonra fotoğrafları oluşturmanın en kolay yolu, Ultimate Before After Image Slider & Gallery – BEAF eklentisini kullanmaktır.

BEAF eklentisi, yatay ve dikey kaydırıcılar oluşturmanıza ve görüntüyü farklı etiketler ve renklerle özelleştirmenize olanak tanır.

Önemli İpucu: Kaydırıcı efektinin mükemmel çalışması için, 'önce' ve 'sonra' resimlerinizin tam olarak aynı boyutta (piksel cinsinden aynı genişlik ve yükseklik) olması gerekir. Bu, doğru şekilde hizalandıklarından emin olur. Yüklemeden önce resimlerinizi kırpmak veya yeniden boyutlandırmak için herhangi bir fotoğraf düzenleme aracını kullanabilirsiniz.

Yapmanız gereken ilk şey, Ultimate Before After Image Slider & Gallery (BEAF) eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, kontrol panelinizde Önce ve Sonra Kaydırıcı » Yeni Ekle bölümüne gidin.

Başlamak için resim kaydırıcısı için bir ad yazın. Bu yalnızca sizin başvurunuz içindir, bu nedenle onu tanımlamanıza yardımcı olacak herhangi bir şeyi kullanabilirsiniz.

Bu yapıldıktan sonra, ‘Önceki Resim’ bölümüne kaydırarak ‘önce’ resmini ekleyebilirsiniz.

Buradayken, ‘Yükle’ye tıklayın ve ardından WordPress medya kütüphanesinden bir resim seçin veya bilgisayarınızdan yeni bir resim yükleyin.

Arama motorlarının bu resmi anlamasına ve doğru kişilere göstermesine yardımcı olmak için, bazı resim alt metni eklemek iyi bir fikirdir. Bunu yapmak için, ‘Resim Alt’ alanına yazmanız yeterlidir.

Alt metin hakkında daha fazla bilgi için görsel SEO başlangıç kılavuzumuza bakabilirsiniz.

Bu işlem bittikten sonra, 'Görüntü Sonrası' bölümüne gidin.

'Sonra' resmini yukarıda açıklanan aynı işlemi izleyerek ekleyebilirsiniz. Bu resme de bazı alt metin eklemeyi unutmayın, çünkü WordPress SEO için önemlidir.

Ayrıca bir başlık ve açıklama ekleyerek (bir başlık gibi) resmin altına metin gösterebilirsiniz.

Örneğin, ziyaretçileri kaydırıcıyla etkileşime geçmeye teşvik edebilirsiniz. Bu, etkileşimli kaydırıcıların nasıl çalıştığına aşina olmayan ziyaretçilere yol göstermenin harika bir yoludur.

Bu aynı zamanda resme biraz bağlam eklemenin kolay bir yoludur.

Metin eklemek için 'Kaydırıcı Başlığı' veya 'Kaydırıcı Açıklaması' alanlarına yazmanız yeterlidir.

Ayrıca, kaydırıcıdaki resimde yer alan ürünü satın alabilecekleri bir sayfaya ziyaretçileri gönderebilirsiniz. Örneğin, bir ‘Daha Fazla Oku’ URL'si ekleyebilirsiniz; bu, WordPress web sitenizdeki veya hatta harici bir web sitesindeki herhangi bir gönderiye veya sayfaya bağlanabilir.

Bu bağlantı, öncesi/sonrası görüntüsünün altında ve kullandığınız herhangi bir kaydırıcı başlığının veya açıklamasının altında görünecektir.

Başka bir web sitesine bağlantı veriyorsanız, ziyaretçileri WordPress blogunuzdan uzaklaştırmadığınızdan emin olmak için ‘Yeni sekme’ seçeneğini tercih etmenizi öneririz.

Bu yapıldıktan sonra, ‘Yönlendirme Stili’ bölümündeki küçük resimlerden birine tıklayarak dikey veya yatay bir kaydırıcı oluşturmak isteyip istemediğinizi seçebilirsiniz.

Bundan sonra, ekranın üst kısmına kaydırın ve 'Seçenekler'e tıklayın.

Burada, ‘Varsayılan ofset’in 0.5 olarak ayarlandığını göreceksiniz. Bu, ziyaretçinin sayfa ilk yüklendiğinde ‘öncesi’ görselinin yarısını gördüğü anlamına gelir.

Önceki görüntünün daha fazlasını göstermek istiyorsanız, 0.6, 0.7 veya daha yüksek gibi daha büyük bir sayı girin.

Tüm önceki resmi göstermek istiyorsanız, 1 yazın.

Bu, kaydırıcıyı aşağıdaki resimde görebileceğiniz gibi, önceki resmin üstüne veya sağına yerleştirecektir.

Varsayılan olarak eklenti, ziyaretçi faresini resmin üzerine getirdiğinde 'Önce' ve 'Sonra' etiketlerini gösterir.

Bu etiketleri daha açıklayıcı bir şeyle değiştirmek isteyebilirsiniz.

Bunu yapmak için, 'Önce Etiketi' ve 'Sonra Etiketi' alanlarına yazmanız yeterlidir.

Varsayılan olarak, ziyaretçiler kaydırıcıyı sürükle ve bırak ile hareket ettirecektir. Bazı insanlar, özellikle hareketlilik sorunları varsa veya akıllı telefonlar veya tabletler gibi daha küçük cihazlar kullanıyorlarsa bunu zor bulabilir.

Bunu söyledikten sonra, ziyaretçilerin kaydırıcıyı nasıl hareket ettireceğini değiştirmek isteyebilirsiniz.

‘Fare İmleciyle Kaydır’ seçeneğinin yanındaki ‘Açık’ düğmesini etkinleştirirseniz, ziyaretçiler kaydırıcıyı yalnızca farelerini görüntünün üzerine getirerek hareket ettirebilirler.

'Tıklayarak Taşı' düğmesini etkinleştirirseniz, ziyaretçiler kaydırıcıyı o noktaya taşımak için resmin herhangi bir yerine tıklayabilir.

Bu seçenekler erişilebilirliği artırabilse de, standart kaydırıcı davranışını değiştirirler. Web sitenizin ziyaretçileri için en sezgisel olanı görmek üzere bunları test etmenizi öneririz.

Ardından, 'Stil' sekmesine tıklayın.

Burada, farklı etiketler, arka planlar, başlıklar, açıklamalar ve daha fazlasını oku düğmesi için kullanılan renkleri değiştirebilirsiniz. Bu, öncesi/sonrası resminin WordPress temanızla uyumlu olmasına veya hatta web sitenizin geri kalan tasarımından sıyrılmasına yardımcı olabilir.

Ayrıca yazı tipi boyutunu ve metin hizalamasını da değiştirebilirsiniz.

Kaydırıcının nasıl ayarlandığından memnun kaldığınızda, 'Yayınla' düğmesine tıklayın.

Bu, önce/sonra resmini ve kaydırıcıyı herhangi bir sayfaya, gönderiye veya widget'a hazır alana eklemenizi sağlayan bir kısa kod oluşturur.

Kısa kodu nasıl yerleştireceğiniz hakkında daha fazla bilgi için lütfen WordPress'te kısa kod ekleme kılavuzumuza bakın.

Kısa kodu sitenize ekledikten sonra, önce/sonra görselini ve kaydırıcı efektini canlı hale getirmek için 'Yayınla' veya 'Güncelle' düğmesine tıklamanız yeterlidir.

Yöntem 2: SeedProd Kullanarak Önce ve Sonra Fotoğrafı Gösterin (Daha Özelleştirilebilir)

Mevcut bir gönderiye basit bir kaydırıcı eklemek istiyorsanız, 1. yöntemdeki ücretsiz eklenti harika bir seçenektir. Ancak, yüksek dönüşüm sağlayan bir açılış sayfası, satış sayfası veya hatta öncesi ve sonrası karşılaştırması içeren özel bir tema oluşturmak istiyorsanız, SeedProd kullanmanızı öneririz. Bu, size tam tasarım kontrolü sağlayan güçlü bir web sitesi oluşturucudur.

WPBeginner olarak, Awesome Motive ailesindeki birçok iş ortağı markamız için özel web siteleri tasarlamak üzere SeedProd'u yoğun bir şekilde kullanıyoruz. Sürükle ve bırak arayüzü, yüksek dönüşüm sağlayan sayfaları hızla oluşturmamız için bize esneklik sağlıyor.

SeedProd, en iyi sürükle ve bırak WordPress sayfa oluşturucusudur. Yüksek dönüşüm sağlayan açılış sayfaları, satış tasarımları, özel WordPress temaları ve daha fazlasını oluşturmak için kullanabileceğiniz 300'den fazla hazır şablonla birlikte gelir.

Ayrıca, kullanıcılarınızın etkileşimde bulunabileceği güzel öncesi-sonrası resimler oluşturmak için kullanabileceğiniz hazır bir 'Before After Toggle' bloğuna sahiptir.

Sol taraftaki menüden bloğu sürükleyip bırakın ve üzerinde çalıştığınız herhangi bir sayfa tasarımına, satış sayfaları dahil olmak üzere bırakın.

Ürünlerinizi satmak için WooCommerce kullanıyorsanız, SeedProd WooCommerce ile entegre olur ve hatta özel e-ticaret blokları ile birlikte gelir. Ürünlerinizi tanıtmak için önce ve sonra görüntüleri kullanmayı planlıyorsanız bu mükemmeldir WooCommerce ürünleri.

SeedProd'u nasıl kullanacağınız hakkında bilgi için lütfen WordPress'te özel sayfa oluşturma rehberimize bakın.

Bir sayfa oluşturduktan sonra, tasarımınıza bir önce-sonra resmi eklemek kolaydır. SeedProd sayfa düzenleyicisinde, 'Önce Sonra Geçişi' bloğunu bulun.

Ardından, sayfaya eklemek için bu bloğu tasarımınızda istediğiniz yere sürükleyip bırakabilirsiniz.

Bu işlem bittikten sonra, 'Önce Sonra Geçişi' bloğunu seçmek için tıklamanız yeterlidir. Sol menü şimdi öncesi ve sonrası görüntünüzü oluşturmak için kullanabileceğiniz tüm ayarları gösterecek şekilde güncellenecektir.

Başlamak için, öncesi görseli olarak kullanmak istediğiniz resmi eklemeniz gerekecektir. ‘Öncesi Görseli’ altında, ‘Kendi Görselini Kullan’ veya ‘Stok Görseli Kullan‘ seçeneğine tıklayın ve kullanmak istediğiniz resmi seçin.

Varsayılan olarak SeedProd, bu resmin üzerinde bir 'Before' etiketi gösterir. Ancak, bunu 'Before Label' alanına yazarak daha açıklayıcı bir şeye değiştirebilirsiniz.

Bu işlem bittikten sonra, 'Görüntü Sonrası' bölümüne gidin.

Artık yukarıda açıklanan aynı işlemi izleyerek bir resim ekleyebilir ve varsayılan ‘Sonra’ etiketini özelleştirebilirsiniz.

SeedProd dikey veya yatay kaydırma efekti ekleyebilir.

Bu iki stil arasında geçiş yapmak için ‘Kaydırıcı Yönü’ bölümüne gidin ve ardından ‘Dikey’ veya ‘Yatay’ seçeneğine tıklayın.

Varsayılan olarak, ziyaretçiler kaydırıcıyı sürükleyerek önceki ve sonraki resimler arasında hareket eder.

Ancak, bazı kullanıcılar kaydırıcıyı fareleriyle görüntünün üzerine getirerek hareket ettirmeyi daha kolay bulabilir. Bu, özellikle ziyaretçinin kaydırıcıyı daha uzağa sürüklemesi gereken daha büyük görüntüler için geçerlidir.

Bu ayarı denemek için sol menüden 'Fare Üzerine Gelince Hareket Et' seçeneğini etkinleştirin.

Ardından, hem önce hem de sonra görsellerine renkli bir kaplama eklemek isteyebilirsiniz. Bu, görselin geri kalan renk şemasıyla uyumlu olmasına veya arka plandan sıyrılmasına yardımcı olabilir.

Daha ince bir etki yaratmak için renkli kaplamayı yarı saydam hale bile getirebilirsiniz.

Farklı renkleri denemek için 'Overlay Color' bölümüne tıklayın ve ardından görünen açılır pencerede değişikliklerinizi yapın.

Bu işlem tamamlandıktan sonra, 'Comparison Handle' bölümünü genişletmek için tıklayarak kaydırıcı tutamacını özelleştirebilirsiniz.

Varsayılan olarak SeedProd, 'önceki' resmin yarısını ve 'sonraki' resmin yarısını gösterir. Bunu değiştirmek için 'Handle Initial Offset' kaydırıcısını sürüklemeniz yeterlidir.

Önceki resmin daha azını göstermek için, kaydırıcıyı sola sürükleyerek daha düşük bir sayı gösterin. Önceki resmin daha fazlasını göstermek için, kaydırıcıyı sağa sürükleyin, bu da sayıyı artırır.

Ardından, 'Tutamak Rengi' ayarlarını kullanarak kaydırıcının rengini değiştirebilirsiniz.

'Tutamak Kalınlığı' kaydırıcısını kullanarak tutamacı daha kalın veya daha ince de yapabilirsiniz.

Bu şekilde, tutamacı öne çıkarabilir veya daha ince bir efekt oluşturabilirsiniz.

Tutamaçtan memnun kaldığınızda, daireyi değiştirmek isteyebilirsiniz. ‘Daire Genişliği’ ayarlarını kullanarak daireyi büyütebilir veya küçültebilir ve keskin veya yuvarlak köşeler oluşturmak için ‘Daire Yarıçapı’nı değiştirebilirsiniz.

Değişiklikler yaptıkça canlı önizleme otomatik olarak güncellenir, böylece en iyi görüneni görmek için farklı ayarları deneyebilirsiniz.

Çemberden memnun kaldığınızda, o çemberin içindeki üçgenlerin boyutunu değiştirmek isteyebilirsiniz. Örneğin, çemberi büyüttüyseniz, üçgenlerin boyutunu da artırmak isteyebilirsiniz.

Bu değişikliği yapmak için, görünümünden memnun kalana kadar ‘Üçgen Boyutu’ kaydırıcısını sürükleyin.

Bu yapıldıktan sonra, SeedProd sayfanızda yeni bloklar eklemeye ve içeriği özelleştirmeye devam edebilirsiniz.

Sayfanın görünümünden memnun kaldığınızda, 'Kaydet' düğmesinin yanındaki oka tıklayın ve ardından 'Yayınla'yı seçin.

Şimdi web sitenizi ziyaret ederseniz, sayfa tasarımınızı canlı olarak önce ve sonra görselleriyle göreceksiniz.

Öncesi ve Sonrası Kaydırıcıları Hakkında Sıkça Sorulan Sorular

WordPress'te öncesi ve sonrası fotoğraf kaydırıcıları oluşturma hakkında okuyucularımızın en sık sorduğu bazı soruları yanıtladık.

Öncesi ve sonrası fotoğraflar için eklentiler ücretsiz mi?

Yöntem 1'de yer alan Nihai Önce Sonra Resim Kaydırıcı ve Galeri eklentisi tamamen ücretsizdir. SeedProd'un da ücretsiz bir sürümü mevcuttur, ancak ‘Önce Sonra Geçişi’ bloğuna erişmek için premium planlarından birine ihtiyacınız olacaktır.

Bir önce-sonra kaydırıcı oluşturmak için hangi yöntem daha iyidir?

En iyi yöntem ihtiyaçlarınıza bağlıdır. Bir blog yazısına hızlıca basit bir kaydırıcı eklemek için ücretsiz eklenti harika bir seçenektir. Daha fazla tasarım kontrolü istiyorsanız veya özel bir açılış sayfası oluşturuyorsanız, esnekliği nedeniyle SeedProd'u öneririz.

İkiden fazla resimle bir kaydırıcı oluşturabilir miyim?

Bu kılavuzdaki araçlar, iki görüntüyü karşılaştırmak için özel olarak tasarlanmıştır. Birden çok görüntüyü bir sırada göstermeniz gerekiyorsa, Soliloquy gibi özel bir WordPress kaydırıcı eklentisi kullanmak isteyeceksiniz.

Önce-ve-sonra kaydırıcısı web sitemi yavaşlatır mı?

Herhangi bir resim gibi, büyük dosyalar da sitenizin yüklenme hızını etkileyebilir. Bunu önlemek için, WordPress'e yüklemeden önce resimlerinizi web için optimize etmenizi her zaman öneririz.

Daha Fazla Bilgi WordPress Resim İpuçları ve Püf Noktaları

WordPress'te resimlerinizi özelleştirmek için daha fazla ipucu ve püf noktası mı istiyorsunuz? Bu kılavuzlara göz atın:

• WordPress'te Instagram Benzeri Fotoğraf Filtreleri Nasıl Eklenir (Adım Adım)
• WordPress'te Flipbox Kaplamaları ve Fareyle Üzerine Gelme Efektleri Nasıl Oluşturulur
• WordPress'te Resimlere Otomatik Olarak Filigran Ekleme
• WordPress'te Yapay Zeka ile Görsel Oluşturma
• WordPress'e Animasyonlı GIF'ler Nasıl Eklenir (DOĞRU Yol)
• WordPress'te Duyarlı Bir Kaydırıcıyı Kolayca Oluşturma

Umarım bu makale, WordPress web sitenize bir kaydırma efektiyle bir önce-sonra fotoğrafı nasıl ekleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca, WordPress medya kütüphanesine kategori ve etiket ekleme rehberimize ve en iyi WordPress öne çıkan görsel eklentileri hakkındaki uzman seçimlerimize de göz atabilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.