Bir web sitesi için harika bir kullanıcı deneyimi yaratmada görsellerin önemi abartılamaz. Fakat web sitenizdeki resimlerle elinizden geleni yaptıysanız ve yine de siteye biraz hareket katmak için biraz hareket eksikliği hissediyorsanız, endişelenmeyin; videolar gibi zorlu görselleri tercih etmek zorunda kalmayacaksınız. Web sayfanıza bazı dinamikler getirmek için kaydırıcılar gibi işlevsel animasyon özelliklerine her zaman güvenebilirsiniz. Bir çentik almak için, gerçekten ilginç efektler elde etmek için iki kaydırıcıyı katmanlayabilirsiniz ve bunu yapmak için tek bir kod satırı yazmanıza gerek yoktur. Tek ihtiyacınız olan, Elementor için Önizleme Kaydırıcı widget’ımızı edinmek.
Önizleme Kaydırıcı widget’ı, Elementor site oluşturucu için yüzden fazla tamamen özelleştirilebilir widget’tan oluşan bir koleksiyon olan WordPress Addons for Elementor eklentisinin bir parçasıdır. Koleksiyon, WordPress ve Elementor meraklılarına, kurulumu kolay ancak her türlü tasarıma sığacak kadar şekillendirilebilir harika web sitesi öğeleri oluşturmak için bir kısayol sağlamak üzere tasarlanmıştır.
Önizleme Kaydırıcısı, WordPress Eklentileri koleksiyonunda sahip olduğumuz bir avuç kaydırıcıdan biridir. Bu makalede, eşzamanlı olarak hareket eden iki sürgü oluşturmak için onu nasıl kullanabileceğinizi göstereceğiz. Makaleleri okumak yerine video izlemeyi tercih ediyorsanız, widget’ın ayrıntılı açıklamalarını içeren bir video oluşturduk.
Makaleye bağlı kalmaya karar verdiyseniz, WordPress Addons for Elementor eklentisiyle harika bir önizleme kaydırıcısı oluşturmakla ilgili her şeyi öğrenmeye hazır olun. Ele alacağımız konular şunlardır:
-
WordPress’te Önizleme Kaydırıcısını Ekleme
-
İçeriği Kaydırıcıya Ekleme
-
Önizleme Kaydırıcısını Şekillendirme
WordPress’te Önizleme Kaydırıcısını Ekleme
WordPress’te bir önizleme kaydırıcısı oluşturma yolculuğumuza başlamadan önce, ihtiyacımız olan her şeye sahip olup olmadığımızı kontrol edelim. WordPress Addons for Elementor, Elementor için bir pencere öğesi paketidir, bu nedenle yalnızca eklentileri kullanmak istiyorsanız Elementor’un kurulu olması gerekir. Elementor’un ücretsiz veya ücretli sürümüne sahip olabilirsiniz, fark etmez.
Elementor yüklenip etkinleştirildiğinde, devam edip WordPress Addons for Elementor eklentisini yükleyip etkinleştirebilirsiniz. Bunu yaptıktan sonra, yeni bir sayfa veya gönderi açmaktan çekinmeyin, Elementor ile düzenleyin, widget listesinde “kaydırıcıyı önizleyin” öğesini arayın ve widget’ı çalışma alanına sürükleyin.
Bu durum widget sayfamızdaki örneklere veya web sitenizde görmek isteyeceğiniz kaydırıcı türüne hiç benzemiyorsa endişelenmeyin. Hemen değiştirmeye başlayacağız ve siz de her zaman widget’ta dolaşmakta, keşfetmekte ve kendi tasarımlarınızı yaratmakta özgürsünüz.
İçeriği Kaydırıcıya Ekleme
Yapmamız gereken ilk şey, kaydırıcımıza biraz içerik eklemeye başlamak. Bunu İçerik seçeneklerinin Genel bölümünde yapabiliriz.
Genel Bölüm
İçerik seçeneklerinin Genel bölümünde iki seçenek vardır: Görüntüler ve Cihaz Çerçevesi seçenekleri. Görüntüler Öğeler halinde gruplandırılmıştır; her Öğe bir çift görüntü sunar, arka plan görevi gören ana görüntü ve aygıt çerçevesine giren aygıt görüntüsü.
Cihaz Çerçevesi seçeneği, önizleme kaydırıcınızda olmasını istediğiniz cihaz çerçevesi türünü seçebileceğiniz yerdir. Mobil cihaz çerçevesini seçtik.
Resimlere gelince, üç öğe oluşturmaya ve üç çift ana ve cihaz resmi seçmeye karar verdik. Mobil türde bir cihaz çerçevesi için portre resimlerinin en iyi sonucu verebileceğini unutmayın.
Bu işlem bittiğinde kaydırıcı için ihtiyacımız olan tüm içeriği ekledik ve Slayt Ayarları bölümüne geçebiliriz.
Kaydırıcı Ayarları
Kaydırıcı Ayarları bölümü, Önizleme Kaydırıcı widget’ının davranışını ve bir dereceye kadar görünümünü daha da özelleştirmek için kullanabileceğiniz çeşitli seçenekleri kapsar. Burada bulacağınız seçenekler, slayt süreleri, slayt animasyon süreleri, görüntü oranları, sütun sayısı ve öğeler arasındaki boşluk seçeneklerini içerir. Kaydırıcımızı yaparken tüm bu seçeneklere ihtiyacımız olmayacak, işte kullandıklarımız.
Ortalanmış Slaytları Etkinleştir’i Evet olarak ayarladık. Bu seçenek, ana katman görüntüsünü ortaladığı için üç öğeniz olduğunda pek önemli değildir ve üç görüntünüz olduğunda zaten her zaman merkezde bir tane vardır.
Daha sonra kaydırmalı gezinmeyi kapattık. Gezinme için sayfalandırmaya güveneceğiz – varsayılan olarak etkindir ve şu anda göremeseniz de oradadır.
Kaydırıcı gezintisini takiben değiştireceğimiz seçenek, kaydırıcının kenarlarında sütunun ne kadarının görüneceğini ayarlayan Kısmi Sütun Değeri seçeneğidir. Kısmi sütunları etkinleştireceğiz ve değerlerini 0,07 olarak ayarlayacağız. Hatta Number of Columns altında sütun sayısını ikiye çevireceğiz.
Columns Responsive, farklı ekran genişliklerinde kaç sütunun görüneceğini belirlemek için kullanacağımız seçenektir. Seçeneği “özel” olarak ayarlamak, sütun sayısını seçmenizi sağlar. Son iki genişlik hariç tümü için iki tane ayarladık – 0 – 480px ve 481 – 680px. Bu ikisi için, onu bir olarak ayarladık.
En son değiştirdiğimiz seçenek, Öğeler Arasındaki Boşluk seçeneğiydi. 115 piksel olarak ayarladık.
Yapmamız gereken bir sonraki şey, odadaki fili ele almak – sizin önizleme kaydırıcınız ile bizimki aynı görünmeyebilir. Farklı temalar ve farklı sayfa düzenleri farklı sonuçlar verebilir. Bu alıştırmada model olarak kullandığımız kaydırıcıya yaklaşmak için şunları yapabilirsiniz: Bölümü Düzenle > Düzen’e gidin ve İçerik Genişliğini Tam Genişlik ve Sütun Boşluğu’nu Boşluk Yok olarak değiştirin. Daha sonra Sayfa Ayarları altında tam genişlikte bir sayfa düzeni seçin. Sonuçlar sizi modele yaklaştırmalıdır.
Bununla Stil seçeneklerine geçebiliriz.
Önizleme Kaydırıcısını Şekillendirme
İlk Stil seçenekleri seti, Kaydırıcı Gezinme Stili bölümündedir. Erişmek için kaydırıcı gezinmeyi etkinleştirmiş olmanız gerekir. Bizimkini devre dışı bıraktık. Fakat İçerik seçeneklerine geri dönebilir, gezinmeyi etkinleştirebilir ve oradaki tüm seçenekleri kontrol edebilirsiniz. Öğreticiye bağlı kalmak için Kaydırıcı Sayfalandırma Stili bölümüne atlayacağız.
Kaydırıcı Sayfalandırma Stili
Kaydırıcı Sayfalandırma Stili altında bulacağınız seçenekler, kaydırıcınızın sayfalandırmasının nasıl görüneceğini ve davranacağını ince ayar yapmak için ihtiyaç duyacağınız her şeydir. Konumunu, hizalamasını, rengini, boyutunu, aralığını ve numaralandırılmış sayfalandırma olup olmadığını ayarlayabileceksiniz.
Değiştirmeyi seçtiğimiz ilk seçenek Sayfalandırma Konumu idi. Sayfalandırma madde işaretlerini daha görünür hale getirdiği için onu “dış” olarak değiştirdik. Sayfalandırma ofsetini de 88 olarak ayarladık.
Normal sayfalandırma rengini #1e1e1e – siyah olarak ayarladık. Fakat etkin sayfalandırma rengini değiştirmedik. Elbette, istersen yapabilirsin. Hatta sayfalandırma boyutunu 9 piksel olarak ve madde işaretleri arasındaki boşluğu 8 piksel olarak değiştirdik.
Sayfalandırma madde işaretlerimiz güzel ve belirgin olduğundan, Aygıt Kaydırıcı Stili bölümüne geçmek için herkes gibi iyi bir zaman.
Cihaz Kaydırıcı Stili
Cihaz Kaydırıcı Stili seçenekleri, cihaz çerçevesi ve içerdiği görüntü ile ilgilenmemizi sağlar. Aygıt çerçevesini hareket ettirip ettiremeyeceğinizi, yeniden boyutlandıramayacağınızı veya görüntünün çerçeveden dışarı çıkan sivri köşeleriyle ilgilenip ilgilenemeyeceğinizi merak ediyorsanız, bunu yapabilirsiniz ve bunu yapacağınız yer burasıdır.
İşte bunu nasıl yaptığımız. Device Bottom Offset için -60 piksel değerini seçtik. Görüntüyü düşürmek istiyorsanız negatif değerler kullanabilirsiniz. Device Right Offset için yüzdelere geçiş yaptık ve 6 değerini seçtik.
Cihaz Genişliği seçeneği, cihazı yerleştirmek için kullanılır. Bizimkini yüzdelere çevirdik ve ona %25’lik bir değer verdik. Görüntü Kenarlık Yarıçapı bu köşelerin icabına bakar; bizimkinin %15’te güzel göründüğünü gördük. Son olarak Görüntü Ofsetlerini her yerde 1 piksel olarak değiştirdik.
Bununla, önizleme kaydırıcımızı şekillendirmeyi bitirdik. Sonuçlar, bu eğitim için ilham kaynağı olarak kullandığımız örneklere oldukça yakın görünüyordu.
Sizinki tam olarak böyle görünmüyorsa endişelenmeyin; bunun nedeni temanız veya farklı ayarlamış olabileceğiniz bazı Elementor ayarları olabilir. Yine de sorun değil, aynı sonuçları almanız gerekmediği için önizleme kaydırıcınızı şekillendirebilir ve kullandığımız örnekten daha güzel hale getirebilirsiniz.
Konunun Özeti
Web sitenize bir görüntü kaydırıcı eklemek, biraz hareket yaratmak ve bir web sayfasının bayatlığını kırmak için harika bir yöntemdir. Bununla birlikte Önizleme Kaydırıcı widget’ımızla, bir adım daha ileri gidebilir ve birlikte çalışan ve görüntülerin çeşitli cihazlarda görüntülenmesini simüle eden iki kaydırıcı oluşturabilirsiniz. Size gösterdiğimiz gibi, widget’ın yapılandırılması kolaydır, bu nedenle kısa sürede harika sonuçlar alabilirsiniz!