Resimler, sitenize daha fazla izleyici çekme ve genel kullanıcı deneyimini geliştirme gücüyle içerik pazarlamasının önemli bir parçasıdır. Kullanıcıları aynı anda eğlendirebilir, bilgilendirebilir, ilham verebilir ve meşgul edebilirler; bu nedenle, çekici ve ilgili görüntüleri web sitenizin içeriğine dahil etmek için elinizden gelenin en iyisini yapmaya çalışmalısınız.
Şimdi görseller yeterince güçlü olsa da, bazen sitenize sadece görseller koymak ziyaretçilerin ilgisini çekmek için yeterli olmayabilir. Bu yüzden işleri bir adım öteye götürmenizi ve sitenize etkileşimli resimler eklemeyi düşünmenizi öneririz. Bu durum kitlenizin içeriğinizle daha fazla etkileşim kurmasını sağlamanın harika bir yolu olmakla kalmaz, aynı zamanda markanız veya bir bütün olarak işletmeniz hakkında daha fazla bilgi edinmelerine yardımcı olabilir. Örneğin öncesi ve sonrası görüntüleri çekin. Bu tür görüntüler, iki görüntü arasındaki küçük farkları göstermek için yan yana kullanılır ve bu nedenle genellikle basit statik görüntüler olarak kullanılır. Fakat bu iki resme düzgün bir kaydırıcı efekti ekleyerek anında daha fazla etkileşime izin verecek ve kullanıcılar için işleri daha heyecanlı hale getireceksiniz.
WordPress’te önce ve sonra kaydırıcı efekti eklemeyi öğrenmekle ilgileniyorsanız, uygun bir eklentinin yardımını kullanırsanız bunu yapmanın oldukça basit olduğunu öğrenmekten mutluluk duyacaksınız. Qi Addons for Elementor eklentisinden Önce/Sonra Karşılaştırma Kaydırıcı widget’ını kullanarak bu kullanışlı özelliği WordPress sitenize eklemek için gereken tüm adımları göstereceğiz, bu yüzden okumaya devam ettiğinizden emin olun.
Öncesi ve Sonrası Görüntü Kaydırıcısı Nedir ve Neden Yararlıdır?
Başta da belirttiğimiz gibi, öncesi ve sonrası görüntüleri genellikle her türlü farkı veya ilerlemeyi sergilemek ve vurgulamak için yan yana yerleştirilmiş iki görüntüden oluşur. Şimdi bu iki görüntüye bir kaydırıcı efekti ekleyerek, kullanıcılara kaydırma tutamacını hareket ettirerek her iki görüntünün de tam boyutunu ortaya çıkarma ve bunları eğlenceli ve ilgi çekici bir şekilde karşılaştırma olanağı veriyorsunuz. Örneğin kaydırıcı yatay olarak yerleştirilmişse, kullanıcılar kaydırıcıyı fareleriyle tamamen sağa hareket ettirerek ilk görüntüyü ortaya çıkarabilecektir. Aynı şekilde, kaydırıcıyı tamamen sola hareket ettirdiklerinde ikinci resim gösterilecektir.
Bu tür kaydırıcı efekti, izleyicilerini etkilemek ve onlara ilham vermek ya da ürün veya hizmetlerinin değerini ve etkililiğini etkileşimli bir şekilde sergilemek isteyen herkes için yararlı olabilir. Bu yüzden bu tür bir etki, fotoğraf, tasarım, güzellik, sağlık veya tamamen başka bir şeyle ilgili büyük veya küçük her türlü işletme tarafından kullanılabilir.
Potansiyel müşterilerinize sunmak istediğiniz bir fitness programınız olduğunu varsayalım. Programınızı kullandıktan sonra kilo vermeyi ve/veya daha fazla kas yapmayı başaran kişilerin öncesi ve sonrası fotoğraflarını görüntüleyerek satışlarınızı potansiyel olarak artırabileceksiniz. Kısacası, iddialarınızın görsel kanıtlarını görmelerini sağlayarak kullanıcıların ilgisini çekeceksiniz.
Elementor Eklentisi için Qi Eklentileriyle Öncesi ve Sonrası Görüntü Kaydırıcısı Ekleme
Şimdi web’de bu tür bir görüntü kaydırıcıyı sitenize eklemenize izin verecek birçok farklı eklenti varken, bunu Qi Addons for Elementor eklentimizi kullanarak göstermeye karar verdik. Bu eklentiyi diğerlerinden ayıran pek çok şeyden biri, tipografi ve yaratıcı öğelerden iş ve WooCommerce özelliklerine kadar her türlü öğeyi ve bölümü tasarlamanıza ve özelleştirmenize olanak tanıyan 60 esnek pencere öğesiyle birlikte gelmesidir. Kısacası, Qi Addons for Elementor’u hemen hemen her tür web sitesi için tamamen ücretsiz olarak kullanabilirsiniz.
Bu 60 widget arasında, Önce/Sonra Karşılaştırma Kaydırıcısı widget’ı etkileşimli karşılaştırma kaydırıcıları oluşturmak ve tamamen kolaylıkla resim eklemek için kullanılabilir. Yatay ve dikey olmak üzere iki yönlendirme türünden birini seçmenize, öncesi ve sonrası resimlerinizi eklemenize olanak tanır, böylece kullanıcılar kaydırıcı tutamacını sürükleyebilir ve her bir görüntüyü ortaya çıkarabilir, tutamaç metnini, rengini, tipografisini vb.
Başlamadan önce, Qi Addons for Elementor’un Elementor sayfa oluşturucu için oluşturulmuş bir eklenti olduğunu size hatırlatmalıyız. Bu yüzden Qi Addons for Elementor eklentisini yüklemeye ve kullanmaya devam etmeden önce sitenizde Elementor kurulu olmalıdır.
Ayrıca videoları izlemeyi tercih etmeniz durumunda, aynı konuda bir eğitim videosu oluşturduk, bu yüzden göz atmaktan çekinmeyin:
Her şeyden önce, sayfa/yayın düzenleyicinizde arka uca gidin ve Elementor kenar çubuğunda Önce/Sonra Karşılaştırma Kaydırıcı widget’ını arayın. Daha sonra ekranınızın sağ tarafına sürüklemeniz yeterlidir.
Gördüğünüz gibi, varsayılan widget yatay bir hizalamaya ve iki resim için ayrılmış yeterli alana sahiptir.
İçerik sekmesinde, küçük çöp kutusu simgesine tıklayıp Öncesi ve Sonrası resimleriniz için varsayılan resimleri kaldırabileceksiniz.
Daha sonra görüntü alanlarında herhangi bir yere tıklayarak devam edebilir ve kendinizinkini ekleyebilirsiniz.
Önce görüntünüzü seçtikten sonra Medya Ekle düğmesine basın. Daha sonra After görüntünüz için aynı işlemi tekrarlayın.
Arka uçtaki ayırıcıyı sürükleyemeyeceğiniz için, nasıl göründüğünü görmek için sayfanızın ön ucuna gitmelisiniz. Daha fazla rahatlık için başka bir sekmede açabilirsiniz.
Yeni öğenin görüntülenmesi için sayfanızı yenilediğinizden emin olun. Görüntü kaydırıcınızın nasıl göründüğünü görmek için ayırıcınızı sağdan sola (veya tersi) sürükleyin (aşağıda yaptığımız gibi):
Resimlerinizi seçmenizi sağlayan seçeneğin hemen altında, Metni İşle seçeneği var. Bu aslında bölücünüzde görünecek metindir. Bizimki varsayılan olarak Sürükle olarak ayarlanmıştır, fakat sizinkini istediğiniz gibi değiştirebilirsiniz.
Daha sonra kaydırıcınızı Yatay’dan Dikey’e geçirmek için Oryantasyon seçeneği kullanılabilir.
Ve işte karşınızda – kaydırıcımız artık dikey bir yönlendirmeye sahip.
Kaydırıcınızı güncelledikten sonra, yeni özelleştirilmiş ayarlarla sürükleme efektinin nasıl göründüğünü görebileceksiniz.
Şimdi size dikey yönlendirmenin nasıl görünebileceğini gösterdiğimize göre, bu seçeneği tekrar Yatay olarak değiştireceğiz ve Güncelle’ye basacağız. Tabii ki, sizin için en uygun olanı seçmelisiniz.
Varsayılan Ofset seçeneği, görüntüleriniz arasındaki ayırıcının başlangıç konumunu ayarlamanıza olanak tanır. Varsayılan olarak yüzde 50 olarak ayarlanmıştır, yani tam ortada konumlanmıştır.
Burada farklı bir değer ayarlamak, bölücü konumunu sola veya sağa kaydırır. Yüzde 45 gibi biraz daha küçük bir şeye ayarlayarak (bizim yaptığımız gibi), konumunun artık sola taşındığını anında görebilirsiniz. Ayırıcı konumumuz için bu ayarı koruduk, fakat diğer seçeneklerde olduğu gibi, istediğiniz başka bir değeri seçebilirsiniz.
Stil sekmesine geçiyoruz – burada kaydırıcınızın stiliyle ilgili birkaç seçenek var. İlki, Kol Üst Ofsetidir. Yani, bölücü tutamacının konumunu değiştirmenize olanak sağlar. Ayarlamak için kaydırıcıyı kullanabilir veya yeni bir değer girebilirsiniz. Değeri bizim için yüzde olarak değiştirdik ve yüzde 16 olarak ayarladık.
Hemen altında tutamacı Daire Boyutunu ayarlama seçeneği vardır. Aynı kurallar bu seçenek için de geçerlidir – boyutu ayarlamak için kaydırıcıyı sola veya sağa hareket ettirebilir veya istediğiniz değeri girebilirsiniz.
Kenarlık Boyutu seçeneği, ayırıcı çizginin genişliğini ayarlamanıza olanak tanır. Bizimkini varsayılan olarak bıraktık, fakat isterseniz bu seçeneği önceki iki seçenekle aynı şekilde ayarlayabilirsiniz.
Şimdi Metin Rengi seçeneği tanıtıcı metninizin rengini değiştirir. Renk Seçici alanını kullanarak (renk kaydırıcısını kullanarak veya onaltılı bir kod girerek) tercih ettiğiniz herhangi bir renge kolayca değiştirebilirsiniz.
Tipografiyi İşle seçeneğine tıklamak, tipografiyle ilgili yepyeni bir dizi seçenek açar. Burada ayırıcı içindeki metnin görünümünü değiştirebileceksiniz.
Bir yazı tipi ailesi seçecek (ya yazı tipi listesinde gezinerek ya da kendi yazı tipinizi girerek), yazı tipi boyutunu değiştirecek (kaydırıcıyı kullanarak ya da özel bir değer girerek), yazı tipi Ağırlığını ayarlayacak, Dönüştürme metnini kullanacaksınız. Stil, Dekorasyon ve daha fazlası.
Son olarak Tutamaç Rengi seçeneği, ayırıcının ve tutma çemberinin rengini değiştirmenize izin verecektir. Bu durum bu öğeleri resimlerinizdeki veya site tasarımınızın geri kalanındaki renk paletiyle eşleştirmenize izin verdiği için kullanışlıdır.
Son Gelişmiş sekmesi, konumlandırma, yanıt verme, giriş animasyonları vb. ile ilgili birkaç kullanışlı seçeneğe sahiptir. Yine de, diğer tüm Elementor widget’larında da mevcut olduğu için bu eğitimde bunlara değinmeyeceğiz.
Güncelle düğmesine bastıktan sonra, canlı olarak nasıl göründüğünü görmek için kaydırıcınızla sayfayı yenileyin.
İşleri Sarma
WordPress sitenizde öncesi ve sonrası görüntüleri görüntülemek, ziyaretçilerinizin iki farklı görüntüyü karşılaştırması ve ürün ve hizmetlerinizin görsel faydalarını görmelerini sağlaması için eğlenceli ve etkileşimli bir yoldur. Resimleriniz arasındaki farkları ortaya çıkarmak için kaydırma efektini kullanmalarına izin vererek, hedef kitlenizin markanızla daha fazla etkileşim kurma potansiyelini artırırsınız, bu da yalnızca uzun vadede daha fazla satışa yol açabilir. Bu yüzden temizlik ürünlerinizi, cilt bakım ürünlerinizi, fitness veya yemek programınızın kilo verme sonuçlarını veya başka herhangi bir şeyi kullanmanın sonuçlarını sergilemek isteyip istemediğiniz fark etmez, önce ve sonra görüntü kaydırıcısı gitmenin bir yoludur.
Öncesi ve sonrası resimlerinize bir kaydırıcı efekti eklemek, Qi Addons for Elementor eklentisinden bir Önce/Sonra Karşılaştırma Kaydırıcı widget’ının yardımını kullanırsanız elde edebileceğiniz kadar kolaydır. Süper sezgiseldir ve genel sayfa tasarımınıza en iyi şekilde uyan benzersiz görünümlü bir kaydırıcı oluşturmanıza olanak tanıyan çok sayıda özelleştirme seçeneği içerir. Devam edin ve talimatlarımızı takip edin ve güzel öncesi ve sonrası fotoğraflarınızı WordPress sitenizde anında gösterebileceksiniz.