WordPress ile bir web sitesi oluşturmak yeterince kolaydır. Dikkat çekici, göz alıcı bir web sitesi oluşturmak, farklı bir su ısıtıcısıdır ve aralarından seçim yapabileceğiniz güzel tasarlanmış grafik öğeler sıkıntısı olmadığında tek başına metin yeterli değildir. Bu eğitimde size bunlardan birini göstereceğiz: görüntü kaydırıcı.
WordPress’te bir görüntü kaydırıcı oluşturmak kolaydır ve size kendi Qi Addons for Elementor eklentimizle birlikte gelen 60 güzel ve işlevsel widget’tan yalnızca birini kullanarak bunu nasıl yapacağınızı göstereceğiz. Fakat size dikkat çekici bir görüntü kaydırıcısının nasıl oluşturulacağını göstermeden önce, kaydırıcıları ve dikkate almak isteyebileceğiniz bazı kullanım durumlarını tartışmak için biraz zaman ayırmak istiyoruz. İşte bundan bahsedeceğiz.
-
Görüntü Kaydırıcıları Nedir?
-
Görüntü Kaydırıcıları Ne Zaman Kullanılır?
-
Görüntü Kaydırıcıları Ne Zaman Kullanılmamalıdır?
-
Elementor için Qi Eklentilerini Kullanarak Görüntü Kaydırıcı Nasıl Oluşturulur
-
Qi Eklentilerini Kullanarak Tam Genişlikte Görüntü Kaydırıcısı Nasıl Oluşturulur
Görüntü Kaydırıcıları Nedir?
Web tasarımında, bir görüntü kaydırıcı, bir web sayfasında kullanılan görüntülerin bir slayt gösterisidir. Bir geçiş animasyonunda konumları otomatik olarak veya tıklama, kaydırma veya mobil cihazlarda kaydırma gibi kullanıcı eylemlerine yanıt olarak değiştiren birkaç görüntüden oluşurlar. İster otomatik ister kullanıcı tarafından tetiklensinler, dikkat çekici olma eğilimindedirler.
Tamamen estetik olmasının yanı sıra, bir kaydırıcı gezinme işlevlerini de gerçekleştirebilir ve önemli bilgileri ziyaretçilere iletebilir.
Görüntü Kaydırıcıları Ne Zaman Kullanılır?
Bir görüntü kaydırıcı, genellikle bir portföy web sitesinin veya bir iş web sitesinin parçası olarak kullanılır, fakat bir kaydırıcının ne zaman kullanılabileceği konusunda gerçek bir sınır yoktur.
İyi tasarlanmış bir görüntü kaydırıcı, tipik olarak bir web sitesinin kullanıcıya iletmek istediği önemli bilgilerin çoğunu çekici grafiklerle paketlenmiş olarak içerecektir. Bir işletme web sitesi için, örneğin bir misyon beyanı olabilir. Bir kitapçı veya bir film inceleme sitesi için yeni çıkanların bir vitrini olabilir. Ve herhangi bir mağaza, onu yepyeni, sınırlı süreli bir teklifin veya benzer bir anlaşmanın reklamını yapmak için kullanabilir.
Alternatif olarak, minimalist bir yaklaşım benimseyebilirsiniz: web sitenizi ziyaretçilerinizin eğlenmesi için güzel fotoğraflar veya grafiklerle donatın – bu belki de fotoğrafçılık web siteleri, galeriler, sanatçı portföyleri veya müzeler için en uygun çözümdür.
Görüntü Kaydırıcıları Ne Zaman Kullanılmamalıdır?
Görüntü kaydırıcıların bir dezavantajı vardır: boyutları. Bir kaydırıcı genellikle çok sayıda yüksek kaliteli, yüksek çözünürlüklü resim içerir; bu da web sitenizin yavaş yüklenmesine ve yavaş çalışmasına neden olarak kötü kullanıcı deneyimlerine, yüksek hemen çıkma oranlarına ve daha kötü SERP sıralamalarına neden olabilir.
Yüksek çözünürlüklü görüntüler kullanıyorsanız, aşırıya kaçmayın. Olumsuz yönler olası faydalardan ağır basarsa, kaydırıcılardan tamamen kaçınmak için en iyisini yaparsınız.
Dikkate alınması gereken bir diğer konu da mobil cihazlardır. Kaydırıcınızın işlevselliği, çok sayıda ince ayrıntı içeren geniş formatlı grafiklere bağlıysa, mobil cihazlarda kullanışsız olabilir ve muhtemelen web sitenizin mobil sürümü için hariç tutulmalı veya değiştirilmelidir.
Elementor için Qi Eklentilerini Kullanarak Görüntü Kaydırıcı Nasıl Oluşturulur
Elementor’un zaten etkileyici olan widget dizisini genişletmek için geliştirdiğimiz ücretsiz bir eklenti olan Elementor için Qi Eklentilerini kullanarak bir görüntü kaydırıcı oluşturacağız. Fakat kullanmaya başlamadan önce, Elementor’un en son sürümünü yüklemeniz ve ardından Elementor için Qi Eklentilerini yükleyip etkinleştirmeniz gerekir.
Qi Eklentileri, Elementor’un ücretsiz sürümüyle çalışacaktır, bu nedenle tüm kit ve kabinin size bir kuruşa mal olması gerekmez. Tek önemli olan, Elementor sürümünüzün güncel olmasıdır. Ayrıca yürekten tavsiye ettiğimiz ücretsiz Qi Temamızı da kullanacağız, fakat Qi Eklentileri herhangi bir temayla çalışacaktır.
Bunu yaptıktan sonra, WordPress web sitenize bir görüntü kaydırıcı eklemek kolaydır ve dakikalar sürer. Aşağıdaki videoda nasıl yapıldığını görebilirsiniz:
Fakat adım adım metinsel bir öğreticiyi tercih ederseniz, size yardımcı olabiliriz. Okumaya devam etmek.
Bir gönderiye bir resim kaydırıcı ekleyeceğiz, fakat bunu bir sayfaya da kolayca ekleyebilirsiniz. Görüntü kaydırıcı widget’ını eklemek, diğer tüm Elementor öğelerinde olduğu gibi çalışır: onu sol taraftaki menüde bulmanız ve istediğiniz yere sürüklemeniz yeterlidir.
Artık öğeye sahipsiniz, fakat görüntü içermiyor. Resim eklemek için İçerik/Genel sekmesinin Resimler bölümündeki artı simgesine tıklayın.
Artık medya kitaplığınızdan resimler seçebilir veya yeni resimler yükleyebilirsiniz. Seçiminizi yaptıktan sonra Galeri Oluştur’a tıklayın.
Artık bu galeriyi eklemeden önce inceleyebilir veya düzenleyebilirsiniz. Ayrıca kaydırıcıda göründükleri şekliyle resimlerinizin sırasını onları sürükleyerek değiştirebilirsiniz. Galerinizden memnun olduğunuzda, Galeri Ekle’ye tıklayın.
Artık görüntü kaydırıcınızı önizleme bölümünde görebilmeniz gerekir.
Genel/Kaydırıcı Ayarları bölümüne geçerek, görüntü kaydırıcımızın davranışına ilişkin kontrolleri buluyoruz.
Kaydırıcı Döngüsünü Etkinleştir, Evet veya Hayır olarak ayarlanabilir ve kaydırıcının kendi etrafında dönmesini sağlar. Görüntülerimizin kendi başlarına hareket etmeye devam etmesini istiyoruz, bu yüzden varsayılan olan Evet’te bırakıyoruz. Ortalanmış Slaytları Etkinleştir denetimi, asimetrik görüntüleri ortalamak için kullanılırken, Kaydırıcı Otomatik Oynatmayı Etkinleştir kaydırıcının kullanıcı etkileşimi olmadan çalışmasını sağlar.
Slayt Süresi ve Slayt Animasyon Süresi, bir görüntünün yerinde kalma süresini ve geçiş animasyonunun süresini ayarlamak için kullanılır. Kullanılan birim milisaniyedir. Slayt Süremizi 2000 olarak ayarlayacağız, fakat Animasyon Süre Kontrolüne dokunmayacağız.
Kaydırıcı Gezinmesini Etkinleştir denetimi, kullanıcının kaydırıcıda gezinmek için okları kullanmasını sağlarken, Kaydırıcı Sayfalandırmayı Etkinleştir kaydırıcıdaki sayfalandırma noktalarını yönetir. Oluşturduğumuz bu kaydırıcı için noktaları kullanmayacağız, bu yüzden Kapalı olarak değiştireceğiz.
Daha sonra Görüntü Oranları denetimi, küçük resim, Kare, Portre ve diğerleri gibi, görüntülerinizin daha tek tip görünmesini sağlamak için kullanabileceğiniz bir dizi seçeneğe sahiptir. Resimlerin orijinal oranlarını koruyarak varsayılan Orijinal ayarında bırakacağız.
Kısmi Sütunu Etkinleştir, bitiş sütununun Kısmi Sütun Değerini ayarladığınız kısmını göstermenizi sağlar. Sütun Sayısı menüsü, kaydırıcınızın sütun sayısını seçmenize olanak tanır. Bizimkini Bir olarak ayarlayacağız.
Duyarlı Sütun menüsü, farklı cihaz boyutları için farklı sayıda sütun ayarlamanıza olanak tanır; bu, genellikle daha küçük cihazlarda daha az sütun anlamına gelir. Aynı anda yalnızca bir görüntü gösterildiğinden (Sütun Sayısı ayarımıza göre), birden az sütun göstermenin bir yolu olmadığı için onu Öntanımlı olarak bırakabiliriz.
Öğeler Arasındaki Boşluk kaydırıcısı, her slayt arasına bir piksel değeri girmenizi sağlar. Resimler arasında boşluk istemediğimiz için bizimkini 0 olarak ayarlayacağız. Slide Effect menüsü, Slide ve Fade geçiş animasyonları arasında seçim yapmanızı sağlar. Bizimkini Slide’da bırakacağız.
Sırada, Lightbox Açılır Penceresini Etkinleştir’i buluyoruz. Varsayılan olarak etkinleştirilirse, tıklanan bir görüntüyü bir kaplamada açar. Image Hover menüsü, kullanıcı tarafından fareyle üzerine gelindiğinde kaydırıcının davranışını kontrol eder. Yakınlaştır, Uzaklaştır, Hiçbiri ve Taşı arasında seçim yapabilirsiniz. Bizimkini Yok’ta bırakacağız.
Bindirme Rengi ve Bindirme Vurgulu Renk ayarları, görüntüleriniz için varsayılan olarak veya fareyle üzerine gelindiğinde bir renk kaplaması seçme olanağı sağlar. Gösterimiz için kullanmayacağız.
Stil sekmesine geçiyoruz. İki bölüm göreceksiniz: gezinme oklarıyla ilgili Kaydırıcı Gezinme Stili ve sayfalandırma ile ilgili Kaydırıcı Sayfalandırma Stili. Bu tasarımın amaçları doğrultusunda, sayfalandırmayı kapattık, dolayısıyla bu ayarları kullanmayacağız.
Kaydırıcı Gezinme Stili bölümündeki ilk seçenek, Gezinme Konumu menüsüdür. Burada kaydırıcının görüntüleri değiştirmesini sağlayan okların konumunu seçebilirsiniz. Onları Dışarıya yerleştireceğiz, fakat onları resmin altına yerleştirecek olan varsayılan İçeride ve Birlikte’yi de seçebilirsiniz.
Daha sonra belirli bir ekran genişliğinin altındaki cihazlar için gezinme oklarını gizlemenizi sağlayan Gezinmeyi Gizle seçeneğini buluyoruz. Genişliği 768 pikselin altındaki cihazlar için görünmez hale getireceğiz.
Kaydırma kaydırıcıları (Navigation Vertical Offset ve Navigation Horizontal Offset), gezinme oklarını varsayılan konumlarından hareket ettirmenizi sağlar. Bunları kendiniz kaydırabilir veya değerleri piksel, ems veya yüzde olarak girebilirsiniz. Dikey ofset kaydırıcısını kullanmayacağız, fakat Gezinme Yatay Ofseti’ni %6,5 olarak ayarlayacağız.
Sonraki iki seçenek, Önceki Gezinme Oku (sol ok) ve Sonraki Gezinme Oku’dur (sağ ok), varsayılan gezinme oklarını değiştirmenize olanak tanır. Simge kitaplığınızdan bir tane seçebilir veya bir SVG yükleyebilirsiniz. Okları oldukları gibi seviyoruz, bu yüzden onları değiştirmeyeceğiz.
Daha sonra Normal/Hover anahtarını kullanarak gezinme oklarınızın davranışını değiştirebilirsiniz. Okların özniteliklerini Normal modda ayarlamak, okları kullanıcıya göründükleri şekliyle değiştirirken, Hover modu fareyle üzerine gelindiğinde davranışlarını yönetir.
İlk iki seçenek, Gezinme Ok Rengi ve Gezinme Ok Arka Plan Rengi’dir. Burada gezinme oklarınız veya arka planları için renk seçebilir veya girebilirsiniz. Bu tasarım için renk seçeneklerini kullanmayacağız.
Son üç kaydırıcı, okun kendisinin ve tutucusunun boyutlarını kontrol eder. Gezinme Oku Boyutu, okun boyutunu kontrol etmenizi sağlarken, Gezinme Oku Tutucu Genişliği ve Gezinme Oku Tutucu Yüksekliği’ndeki “tutucu”, okun arka planını ifade eder. Gezinme Oku Arka Planı için bir renk seçtiyseniz, boyutlarını değiştirmek için bu kaydırıcıları kullanabilirsiniz. Oklarımızın boyutunu 45 piksele çıkaracağız.
Geçişin Fareyle Üzerine Gelme bölümüne geçerek, ek bir kontrol görebiliriz: Hover Arrow Move’u Etkinleştir. Varsayılan olarak, kullanıcı faresini üzerine getirdiğinde oku canlandırır. Hayır olarak değiştireceğiz.
Kaydırıcı Sayfalandırma Stili bölümü benzer bir dizi seçenek sunar: renkler, ofset, kenarlıklar ve boyut, fakat görüntü kaydırıcımızı olduğu gibi seviyoruz, yalnızca gezinme okları var, bu nedenle sayfalandırma seçeneklerini kullanmayacağız.
Bununla birlikte görüntü kaydırıcımız tamamlandı.
Qi Eklentilerini Kullanarak Tam Genişlikte Görüntü Kaydırıcısı Nasıl Oluşturulur
Şimdi tam genişlikte bir kaydırıcı istediğinizi varsayalım. Elementor için Qi Eklentileri ile bunu da yapabilirsiniz.
Yapmanız gereken ilk şey, sol taraftaki menünün altında bulunan Dişli simgesine tıklayarak Ayarlar bölümüne gitmek. Sayfa Düzeni menüsünü bulun ve düzeniniz olarak Element veya Tam Genişlik’i seçin. Qi Temamızı kullanıyorsanız Qi Tam Genişliği de seçebilirsiniz.
Daha sonra düzenlemek için mavi bölüm sekmesinin ortadaki simgesini tıklayın.
Bölümünüzün Düzen sekmesini görmelisiniz. İlk menü İçerik Genişliği’dir. Kutulu olarak ayarlanmıştır, fakat Tam Genişlik olarak değiştirmeniz gerekir. Bunu seçtikten sonra, bir sonraki menü Sütun Boşluğu menüsü olmalıdır. Boşluk Yok’u seçmek, öğe ile ekranın kenarları arasında boşluk bırakmaz.
Fakat Kutulu mizanpajla çalışıyor olsanız bile widget’ınızın genişliğini değiştirmek için Genişlik kaydırıcısını kullanabilirsiniz. Tamamen sağa sürüklerseniz veya mizanpajınızın genişliğini piksel cinsinden girerseniz, tam genişlikte bir görüntü kaydırıcısına da sahip olursunuz.
Çözüm Yolu
Gördüğünüz gibi, WordPress’te güzel, dikkat çekici bir görüntü kaydırıcı ayarlamak kolaydır ve yalnızca birkaç dakika sürer. Elementor için Qi Eklentileri ile tamamen ücretsiz olabilir. Widget, Elementor’un önizleme bölümünde hemen görülebilen efektlerle kullanıcı dostu stil seçenekleriyle doludur. Artık, stil ne olursa olsun, WordPress web siteniz için güzel görüntü kaydırıcıları oluşturmak için bilmeniz gereken her şeyi biliyorsunuz.