Elementor Kullanarak WordPress'te Dikey Görüntü Döngüsü Nasıl Oluşturulur

Muneeb WordPress Eğiticileri Jan 21, 2022

Slayt gösterisinde izleyicilerin onları ileri veya geri hareket ettiren bir düğmeye basarak seçebilecekleri fotoğraf veya bilgilerden oluşan bir slayt gösterisi, görüntü karuseli olarak bilinir. Web sitenizin genel görünümünü aydınlatır ve temel hizmetlerin tanıtımına yardımcı olur.

Çekici fotoğraflar, yeni ziyaretçilerin dikkatini hemen çekerek sitenize çekebilir. Bu öğretici, WordPress'te dikey bir resim atlıkarınca oluşturmak için Elementor'u nasıl kullanacağınızı gösterecektir.

Elementor Dikey Görüntü Döngüsü Nasıl Oluşturulur

Önce Elementor Vertical Smooth Carousel'iniz için uygun bir resim oluşturun. Halihazırda tüm fotoğraflarınızı içeren bir resme ihtiyacınız olacak. Canva benzeri bir program olan Crello'yu kullanarak bir tane yapabilirsiniz, ancak herhangi bir resim düzenleme yazılımı yeterli olacaktır.

Tabii ki, bunun dinamik olmama dezavantajı var ve sadece birkaç fotoğrafın değiştirilmesi gerektiğinde sakıncalı olabilir. Bununla birlikte, çeşitli faydalar sağlar. JS gereksinimi olmayan, yalnızca CSS'ye yönelik bir atlıkarınca üretir. Animasyon, çok az CPU kullanımı ile çok düzgün. Özetle, biraz rahatsız edici olsa da inanılmaz derecede etkilidir.

Harika Web Siteleri Oluşturun

En iyi ücretsiz sayfa oluşturucu Elementor ile

Şimdi başla

Ardından, sütununuza bir sınıf olarak dikey ad sütununu verin.
Sütun ve Düzen ayarlarında bu sütun için Widget Alanı'nı 0'a ayarlayın.

Add an image element to that column and choose the picture you made. Bu sütuna bir resim öğesi ekleyin ve yaptığınız resmi seçin. Assign the class carousel vertical to the picture element . Sınıf karuselini resim öğesine dikey olarak atayın.

Her şeyi tam olarak istediğiniz gibi yapın, sonra çoğaltın. Bu sütunda, her biri aynı parametrelere sahip iki taneye ihtiyacınız olacak. Ardından, aşağıda verilen CSS kodunu kullanmaya devam edebilirsiniz. Değişiklik yapmak için bu kodu herhangi bir yerde kullanabilirsiniz.

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

Yeterince anlamanıza ve ihtiyacınız olan her yerde değişiklik yapmanıza izin vermek için kodla ilgili önemli açıklamalar vardır. Bu kodu kullanarak, bir Elementor dikey karuselini başarıyla oluşturabilirsiniz.

5 En İyi Görüntü Döner Eklentisi

1. Elementor İçin Post Carousel

Post Carousel For Elementor by iThemelandCo, hazır atlıkarınca düzenleriyle inanılmaz yaratıcı Medya Karuselleri oluşturmanıza olanak tanıyan bir Elementor eklenti eklentisidir. Eklenti, Elementor ile mükemmel bir şekilde bütünleşir ve önceden oluşturulmuş 19 düzen sunar. Bu düzenler tamamen özelleştirilebilir ve Elementor'un sürükle ve bırak mekanizması kullanılarak ihtiyaçlarınıza göre kolayca özelleştirilebilir.

Elementor için Ürün Karusel

Product Carousel For Elementor, E-ticaret mağazalarının ürünlerini bir karuselde sergilemeleri için özel olarak tasarlanmış başka bir Elementor eklenti eklentisidir. Eklenti, Otomatik Oynat, Kaydırmak için kaydır, Fareyle üzerine gelindiğinde duraklat, vb. gibi 12+ atlıkarınca kontrolleri sunar. Eklenti, her tür cihazda son derece duyarlıdır ve istediğiniz kadar karusel oluşturabilirsiniz. Ayrıca %100 çok dilli bir eklentidir, yani web siteniz başka bir dile çevrilse bile çalışır.

3. Elementor İçin Hızlı Döngü

Fast Carousel For Elementor, sizin için bir dakika içinde bir atlıkarınca oluşturmak için yeterince hızlı olduğunu iddia eden bir Elementor eklenti Eklentisidir. Göründüğü kadar etkileyici, aynı zamanda ondan fazla benzersiz stilin yanı sıra farklı galeri türleri de sunuyor. Eklenti, her bir karusel ile özel renk seçenekleri sunmanın yanı sıra beşten fazla döner kontrol ile donatılmıştır. Hızlı bir çözüm için bu, bir resim karuseli için en iyi seçeneğiniz olabilir.

Umarız bu öğreticiyi web sitenizi geliştirmede yardımcı bulmuşsunuzdur. WordPress yolculuğunuzu eğlenceli ve kolay hale getiren eğitimleri almaya devam etmek için Facebook  ve Twitter'da bize katıldığınızdan emin olun.

Divi WordPress Theme