Elementor’da Resim Döngüsü (Image Carousel) widget’ını özel bir CSS koduyla birleştirerek, müşteri veya iş ortağı logolarınızı kesintisiz, sonsuz döngüde kayan profesyonel bir şerit halinde gösterebilirsiniz. Bu, özellikle referans/güven bölümlerinde sık kullanılan, “bu firmalarla çalıştık” mesajını dinamik ve dikkat çekici bir şekilde ileten popüler bir tasarım tekniği. Bu rehberde widget ayarlarını, kesintisiz kayma için gereken özel CSS kodunu ve çift yönlü şerit yapmayı video anlatımıyla gösteriyoruz.
Bu Efekt Neden Sitenize Güven Sinyali Katıyor?
Müşteri veya iş ortağı logolarını gösteren bir bölüm, klasik bir “sosyal kanıt” (social proof) unsuru — ziyaretçiye “başka firmalar da bize güveniyor” mesajı veriyor. Bu logoları statik, sabit bir sırada göstermek yerine yumuşak bir şekilde kayan bir şeride dönüştürmek, hem bölümü daha canlı gösteriyor hem de az yer kaplayarak çok sayıda logoyu sığdırmanıza imkan tanıyor. Bu teknik, kurumsal ve hizmet sitelerinde referans bölümlerinin standart bir parçası haline geldi. Statik bir grid düzeninde (örneğin 3×2 sabit bir tablo) sınırlı sayıda logo gösterebilirken, kayan bir şerit aynı alanda teorik olarak sınırsız sayıda logoyu sırayla sergileyebiliyor — bu da özellikle çok sayıda referansı olan, ama sayfada fazla yer kaplamak istemeyen işletmeler için pratik bir çözüm sunuyor.
Resim Döngüsü Widget’ı Nasıl Ayarlanır?
- Bir flexbox konteyner ekleyip içine Resim Döngüsü (Image Carousel) widget’ını yerleştirin.
- Logolarınızı widget’a yükleyin.
- Masaüstünde kaç logo aynı anda görüneceğini (örneğin 6) ayarlayın.
- Navigasyon oklarını kapatın — logolar zaten otomatik kayacağı için oklara ihtiyaç yok.
Sonsuz ve Kesintisiz Kayma Nasıl Sağlanır?
Widget’ın “Ek Seçenekler” bölümünde birkaç kritik ayar var:
- Otomatik Oynat: Açık olmalı.
- Üzerine Gelince Duraklat / Etkileşimle Duraklat: Kapatılmalı — aksi halde ziyaretçi fare imlecini üzerine getirdiğinde şerit duruyor, bu istenmeyen bir davranış.
- Otomatik Oynatma Hızı: Sıfıra ayarlanmalı — bu, widget’ın kendi “adım adım kayma” mantığını devre dışı bırakıp sürekli akışa geçiş için gerekli.
- Sonsuz Döngü: Açık olmalı.
- Animasyon Hızı ve Yön: Kayma hızını (örneğin 3000-5000 milisaniye) ve yönünü (sola/sağa) burada belirliyorsunuz.
Özel CSS Kodu Neden Gerekli?
Bu ayarları yaptıktan sonra logolar kayıyor ama varsayılan davranışta duraksayarak, sabit bir ritimde değil “adım adım” ilerliyor — akıcı, kesintisiz bir kayma değil. Bunu düzeltmek için widget’ın Gelişmiş > Özel CSS bölümüne, şeridi sabit hızda, doğrusal (linear) ve kesintisiz kaydıran bir CSS animasyon kodu eklemek gerekiyor. Bu kod eklendiğinde logolar artık duraksama olmadan, akıcı bir şekilde sürekli kayıyor — statik carousel widget’ının varsayılan davranışıyla profesyonel bir “sonsuz şerit” görünümü arasındaki fark tam olarak bu özel CSS koduyla kapanıyor. Bu özelliğin kullanılabilmesi için Elementor Pro’nun aktif olması gerekiyor, çünkü özel CSS alanı bir Pro özelliği.
Çift Yönlü Logo Şeridi Nasıl Yapılır?
Daha zengin bir görünüm için tek bir şerit yerine iki ayrı şerit kullanılabilir: biri sola, diğeri sağa doğru kayan iki logo satırı. Bunu yapmak için oluşturduğunuz widget’ı kopyalayıp ikinci bir konteynere yapıştırmanız, farklı logoları (veya aynı logoları farklı sırayla) eklemeniz ve yön ayarını tersine çevirmeniz yeterli. Bu, tek bir şeride kıyasla daha dinamik ve göz alıcı bir bölüm oluşturuyor.
Logo Şeridi Nereye Yerleştirilmeli?
En yaygın kullanım, anasayfada hero bölümünün hemen altında veya hizmetler bölümünden önce yer alan bir “bize güvenen firmalar” alanı. Bu konum, ziyaretçi sayfayı henüz gezmeye başlarken güven sinyalini erken vermenizi sağlıyor. Bir başka etkili kullanım, hizmet/portföy sayfalarının altında, ziyaretçi bir hizmeti incelerken “bu hizmeti daha önce kimler kullandı” sorusuna cevap veren bir bölüm olarak konumlandırmak. Tek bir sitede birden fazla yerde tekrar kullanmak yerine, en stratejik 1-2 noktada kullanmak, etkisini korumasına yardımcı oluyor.
Gerçek Bir Senaryo
Videodaki örnekte, önce mevcut bir logo şeridi widget’ı referans alınarak aynısı sıfırdan oluşturuldu: resim döngüsü widget’ı eklendi, 6 logo yüklendi, otomatik oynatma hızı sıfıra çekilip sonsuz döngü açıldı. İlk denemede logolar duraksayarak kaydığı fark edildi — bu, varsayılan carousel davranışının “adım adım” ilerleme mantığından kaynaklanıyordu. Özel CSS kodu eklendikten sonra iki şerit yan yana karşılaştırıldığında ikisinin de aynı akıcı, kesintisiz hareketle kaydığı görüldü. Ardından ikinci bir şerit daha eklenip zıt yönde akacak şekilde ayarlandı, bu da sayfaya çift katmanlı bir hareket zenginliği kattı.
Bu Teknik Diğer Widget’lar İçin de Kullanılabilir mi?
Evet — aynı “resim döngüsü + özel CSS” mantığı, sadece logo değil, ürün görselleri, ekip fotoğrafları veya galeriler için de uygulanabilir. Örneğin bir e-ticaret sitesinde öne çıkan ürünleri kesintisiz kayan bir şerit halinde gösterebilir, bir portföy sitesinde tamamlanan projelerin küçük önizlemelerini benzer bir akışla sunabilirsiniz. Temel teknik (widget ayarları + kesintisiz kayma için özel CSS) her durumda aynı kalıyor, sadece görsel içerik değişiyor.
Mobil ve Tablet Uyumu Nasıl Ayarlanır?
Masaüstünde 6 logo gösteren bir şerit, tablette ve mobilde aynı sayıyı göstermeye çalışırsa logolar aşırı küçülüp okunamaz hale gelir. Bu yüzden widget’ın duyarlı (responsive) ayarlarından tablette 4-5, mobilde ise 2-3 logo gösterecek şekilde ayrı ayrı yapılandırma yapılmalı. Bu ayar, aynı akıcı kayma efektini koruyarak, her ekran boyutunda logoların net ve okunabilir kalmasını sağlıyor. Konteynerin genişliği de ekran boyutuna göre önemli bir değişken — masaüstünde geniş bir alana yayılan şerit, dar bir mobil ekranda aynı genişlikte kalırsa logolar birbirine çok yakın, sıkışık görünebilir. Bu yüzden konteyner genişliğini de duyarlı ayarlardan ayrı ayrı kontrol etmek, tutarlı bir görsel denge sağlıyor.
Sık Sorulan Sorular
Bu efekt için Elementor Pro şart mı?
Evet, kesintisiz kayma için gereken özel CSS alanı Elementor Pro’ya özel bir özellik.
Kaç logo eklemek idealdir?
Genellikle 6-10 logo arası, sonsuz döngüyle tekrar ettiği için akıcı bir görünüm sağlıyor; çok az logo tekrarları belirgin ve tekdüze hale getirebilir.
Logo görselleri hangi formatta olmalı?
Şeffaf arka planlı PNG veya optimize edilmiş WebP formatı, farklı bölüm arka planlarıyla uyumlu görünmesi için en pratik seçim.
Bu şeridi ürün görselleri için de kullanabilir miyim?
Evet, aynı teknik ürün/referans görselleri için de uygulanabilir; sadece görsellerin boyut oranlarını tutarlı tutmak önemli.
Animasyon hızını nasıl ayarlamalıyım?
Çok hızlı bir kayma logoları okunaksız hale getirebilir, çok yavaş ise sıkıcı gelebilir — 3000-5000 milisaniye aralığı çoğu site için dengeli bir başlangıç noktası.
Sitenize Profesyonel Detaylar mı Eklemek İstiyorsunuz?
Logo şeridi gibi küçük ama etkili tasarım detaylarıyla sitenizi güçlendirmek için web tasarımı hizmetlerime göz atabilir ya da doğrudan WhatsApp’tan ulaşabilirsiniz.
