Slider Ekleme

Bu rehberde, Slider görsellerinizin boyutlarını nasıl öğreneceğinizi, ayarlarını nasıl düzenleyeceğinizi ve Canva kullanarak etkileyici Slider görselleri tasarlamayı adım adım öğreneceksiniz.

Slider alanları, web sitenizin en üstünde yer alan büyük görsel alanlarıdır ve siteye ilk girişte bilgilendirme/tanıtım amacıyla kullanılır. Çoğu temada sağa ve sola kayan bir yapıdadır.

Temanızda 10 adede kadar slider ekleyebilirsiniz.

Slider Boyutlarını Öğrenme Yöntemleri

Slider görsellerinizin doğru boyutlarını öğrenmek için aşağıdaki yöntemleri takip edebilirsiniz:

1. Tema Ayarları Üzerinden

1. Ayarlar > Tasarım Ayarları > Temalar bölümüne gidin.
2. Sağ tarafta tema bilgilerinizin olduğu yerde Logo, Ürün Görsel Boyutları ve Slider Boyutu gibi bilgiler yer alabilir.
3. Slider Boyutu bilgisini buradan öğrenebilirsiniz.

Not: Eğer Slider Boyutu burada yazmıyorsa diğer yöntemlere geçin.

Bazı temalarda slider alanı yerine banner alanları kullanılır. Böyle bir tema kullanıyorsanız banner ekleme içeriğine göz atabilirsiniz.

2. Tema Önizleme veya Aktif Tema Üzerinden

1. Temayı aktif etmeden önce, Tema Resmine tıklayarak önizlemeyi açın.
2. Temayı aktif ettikten sonra web sitenizdeki örnek Slider görselinin sol alt tarafında boyut bilgisini kontrol edin.
3. Boyut bilgisi, önizleme ekranında veya aktif temada aynı yerde görünecektir.

Not: Eğer bu yöntem de işe yaramazsa, bir sonraki yöntemi deneyin.

3. Slider Görselini Bilgisayara İndirme ve Boyutları Kontrol Etme

Eğer yukarıdaki yöntemlerle boyut bilgisine ulaşamazsanız:

1. Ayarlar > Tasarım Ayarları > Temalar > Tema Ayarları yolunu izleyin.
2. Örnek bir Slider görseline tıklayın ve görseli açın.
3. Görsel üzerine sağ tıklayın, "Farklı Kaydet" seçeneğiyle bilgisayarınıza indirin.
4. İndirilen görsel üzerinde sağ tıklayıp, "Özellikler > Ayrıntılar" sekmesine giderek doğru piksel boyutlarını kontrol edin.
   • (Mac cihazlarda işlem farklı olabilir.)

İpucu: Bu yöntemi yalnızca Slider görselleri için değil, banner veya diğer görsellerin boyutlarını öğrenmek için de kullanabilirsiniz.

Slider Ayarlarını Düzenleme

Slider ayarları genellikle tema ayarları içerisinden yönetilir. Ancak bazı durumlarda farklı bir yönetim alanı kullanılabilir. İşte adım adım Slider düzenleme rehberi:

1. Slider Görsellerini Değiştirme ve Yükleme

1. Tema ayarlarında Tema Slider başlığını bulun.
2. Mevcut görselleri düzenlemek için kalem simgesine tıklayın.
3. Yeni görseller eklemek için doğru boyutlarda görseller hazırlayın ve yükleyin.
4. Slider alanına başlık, açıklama veya bağlantılar ekleyebilirsiniz.

Not: Eğer metinleri doğrudan görselin üzerine yazdıysanız, Slider başlık ve metin alanlarını boş bırakabilirsiniz.

2. Slider Sıralamasını Düzenleme

1. Slider sıralamasını değiştirmek için Sıralama alanını kullanın.
2. Örneğin, 4. sıradaki bir Slider'ı 1. sıraya taşımak isterseniz, numarasını değiştirmeniz yeterlidir.

3. Slider Linkleri Ekleme ve Düzenleme

1. Slider görsellerine bağlantılar ekleyerek kullanıcıları ürün, kategori veya başka bir sayfaya yönlendirebilirsiniz.
2. Bağlantı eklemek için:
   • İlgili ürün veya sayfanın URL'sini kopyalayın.
   • Slider link alanına yapıştırın.
   • Örneğin, www.siteadi.com/urun-adi yerine sadece /urun-adi kısmını yazmanız yeterlidir.
   • Ürün linki sadece örnektir; kategori, sayfa, blog, ürün gibi istediğiniz alana yönlendirme yapabilirsiniz.

Tasarım Ayarları > Sliderlar ile Yönetim

Eğer tema ayarlarında Tema Slider başlığı bulunmuyorsa, Slider yönetimi Tasarım Ayarları > Sliderlar bölümünden yapılır.

1. Sliderlar Bölümünde Yapabilecekleriniz

1. Görsel Yönetimi: Yeni Slider görselleri ekleyebilir veya mevcutları düzenleyebilirsiniz.
2. Efekt ve Süre Ayarları: Görsellerin geçiş efektlerini ve gösterim sürelerini düzenleyebilirsiniz.
3. Makro Kod Kullanımı: Slider alanını başka sayfalarda göstermek için makro kod oluşturabilirsiniz.

2. Makro Kod ile Slider Kullanımı

1. Tasarım Ayarları > Sliderlar bölümüne gidin.
2. Kullanmak istediğiniz Slider için "Makro Global Kod" seçeneğini bulun ve kopyalayın.
3. Slider'ı göstermek istediğiniz sayfanın kaynak kod alanına yapıştırın.
4. Sayfayı kaydedin ve önizleme yaparak Slider'ın doğru şekilde görüntülendiğinden emin olun.
5. Slider bölümünü tema ayarları içerisinden yönetiyor olsanız bile bu alanı kullanabilirsiniz.

İpucu: Bu yöntemle aynı Slider alanını farklı sayfalarda tekrar kullanabilirsiniz.

Slider Görselim Sitede Görünmüyor

Slider'a görsel eklediğiniz hâlde sitenizde görünmüyorsa aşağıdaki nedenleri sırasıyla kontrol edin. Sıralama en sık karşılaşılandan başlar.

1. Siteniz önizlemede kalmış olabilir. Temanız yayına alınmamış, önizleme modunda duruyor olabilir. Bu durumda yaptığınız düzenlemeler yalnızca önizlemede görünür.
2. Görselin durumu pasif olabilir. Eklediğiniz görselin aktif olduğundan emin olun.
3. Slider grubunun kendisi pasif olabilir. Slider 1, Slider 2 gibi gruplardan birine tıkladığınızda üst tarafta grubun aktif/pasif durumu görünür. Grup pasifse içindeki hiçbir görsel yayınlanmaz.
4. Başka bir tema önizlemede olabilir. Aktif temanız dışında bir tema önizlemedeyse görselleriniz beklediğiniz yerde görünmez.
5. Tarayıcı önbelleği. Farklı bir tarayıcıda veya gizli sekmede kontrol edin.

En sık atlanan nokta: Görselin kendisi aktif olsa bile bağlı olduğu slider grubu pasifse hiçbir görsel yayınlanmaz. Önce grubun durumunu kontrol edin.

Yönlendirme linki görünürlükle ilgili değildir: Görsele yönlendirme linki tanımlamasanız da görsel sitenizde görünür. Link yalnızca görsele tıklandığında açılacak sayfayı belirler.

Önbellek temizliği sorunu çözmüyorsa slider tarafında başka bir problem var demektir. Yukarıdaki maddeleri tekrar kontrol edin, sorun sürüyorsa talebinizi Destek Sistemi üzerinden iletebilirsiniz.

Canva Üzerinden Adım Adım Slider Tasarımı

Canva, kullanıcı dostu bir arayüzle hızlı ve profesyonel tasarımlar yapmanıza olanak tanır. Slider alanlarınız için doğru boyutlarda görseller oluşturmak, sitenizin estetik görünümünü ve kullanıcı deneyimini doğrudan etkiler. İşte Canva kullanarak bir Slider tasarımını nasıl oluşturacağınızı adım adım açıklıyoruz:

1. Canva'ya Giriş Yapma ve Tasarıma Başlama

1. canva.com adresine gidin.
2. Sağ üst köşeden giriş yapın veya bir hesap oluşturun.
3. Giriş yaptıktan sonra ana sayfaya yönlendirileceksiniz.

2. Slider Boyutunu Belirleme ve Yeni Tasarım Oluşturma

1. Sağ üst köşede bulunan "Özel Boyut" seçeneğine tıklayın.
2. Daha önce öğrendiğiniz Slider boyutlarını (ör. 1920x800 piksel) girin.
   • Genişlik (px): 1920
   • Yükseklik (px): 800
3. Belirlediğiniz boyutlara uygun boş bir beyaz tasarım ekranı açılacaktır.
4. Sol tarafta, tasarımınıza yardımcı olacak şablonlar görüntülenir.

3. Şablon Kullanarak Tasarıma Başlama

1. Şablon Seçimi:
   • Sol tarafta, tasarımınıza uygun hazır şablonlar bulunur.
   • Üstteki arama kutusuna bir anahtar kelime (ör. indirim, satış, ürün tanıtımı) yazarak şablon önerileri alabilirsiniz.
2. Pro ve Ücretsiz Şablonlar:
   • Taç simgesi bulunan şablonlar, Canva Pro sürümüne özeldir.
   • Ücretsiz şablonlar, Pro simgesi olmayan tasarımlardır.
3. Şablonunuzu Düzenleyin:
   • Şablon üzerindeki metinlere tıklayarak yazıları değiştirebilirsiniz.
   • Üst bölümde yer alan font, renk ve efekt seçenekleriyle metinlerinizi düzenleyebilirsiniz.

4. Görselleri Düzenleme ve Değiştirme

1. Hazır Şablondaki Görselleri Kaldırma:
   • Şablonda kullanılan bir görseli değiştirmek için üzerine tıklayın.
   • Klavyenizdeki Delete tuşuna basarak görseli kaldırabilirsiniz.
2. Kendi Görselinizi Yükleme:
   • Sol menüden Yüklemeler bölümüne tıklayın.
   • "Dosya Yükle" seçeneğini kullanarak kendi görsellerinizi Canva'ya yükleyin.
   • Yüklediğiniz görselleri tasarım alanına sürükleyerek ekleyin.
3. Arka Plan Rengini Değiştirme:
   • Arka plana tıklayın.
   • Üstteki araç çubuğunda renk kutucuğunu bulun ve dilediğiniz rengi seçin.
4. Renk Uyumu Sağlama:
   • Eklediğiniz görsellerin renkleri, yazı alanlarında otomatik önerilir.
   • Bir yazıya tıklayın, ardından üstteki renk kutucuğuna tıklayın.
   • Görsel üzerindeki renk paleti otomatik olarak görüntülenecektir. Bu sayede uyumlu bir renk seçebilirsiniz.

5. Bileşenler ve Ek Özellikler Kullanma

1. Bileşenler Bölümü:
   • Sol menüdeki Bileşenler bölümüne tıklayarak tasarımınızı zenginleştirecek öğelere ulaşabilirsiniz.
   • Bu bölümde ikonlar, şekiller, fotoğraflar, ses ve videolar yer alır.
2. Örnek Kullanım:
   • Tasarımınıza "%10 indirim" gibi bir ibare eklemek istiyorsanız Bileşenler bölümüne gidin ve arama çubuğuna "%10" yazın.
   • Beğendiğiniz bir grafik öğesini seçerek tasarımınıza ekleyin.
   • Eklediğiniz grafik öğenin rengini veya boyutunu üst çubuk araçlarıyla düzenleyebilirsiniz.
3. Çerçeve Kullanımı:
   • Bileşenler bölümünde "çerçeve" araması yaparak tasarımınıza şık bir dokunuş katabilirsiniz.
   • Seçtiğiniz çerçevenin içine kendi görsellerinizi veya bileşenlerdeki ücretsiz fotoğrafları ekleyebilirsiniz.

6. Yazı Eklemek ve Düzenlemek

1. Sol menüden Metin bölümüne tıklayın.
2. Başlık, Alt Başlık veya Paragraf alanlarından birini seçin.
3. Eklediğiniz metin alanına çift tıklayarak yazınızı düzenleyin.
4. Üst çubuktan yazı tipi, punto, renk ve efekt seçeneklerini kullanarak yazınızı özelleştirin.

7. Tasarımı Kaydetme ve İndirme

1. Tasarımınızı tamamladıktan sonra sağ üst köşede yer alan "Paylaş" butonuna tıklayın.
2. "İndir" seçeneğini seçin.
3. Çıktı formatı olarak PNG veya JPEG önerilir.

Slider Görselleri İçin Önemli İpuçları

1. Tema Ayarları İçin GIF ve Video Kullanımı

• Tema ayarları içinden yönetilen Slider alanlarına yalnızca GIF uzantılı dosyalar eklenebilir.
• Video eklemek istiyorsanız, özel olarak tasarlanmış bir tema kullanmanız gerekir.

2. Görsel Optimizasyonu

Slider görsellerinizin boyutu 1 MB'ın altında olmalıdır. Büyük boyutlu görseller, sitenizin yavaş çalışmasına neden olabilir. Compressor.io veya TinyPNG gibi araçlarla görsellerinizi sıkıştırarak boyutlarını küçültün. Bu işlem, sitenizin hızını artıracak ve kullanıcı deneyimini iyileştirecektir. Ayrıca Canva'nın sunduğu PNG formatı daha iyi optimize edilebilir.

Flex Temalarda Slider

Yukarıda anlatılan boyut öğrenme, tasarlama ve ekleme adımları flex temalarda da aynı şekilde geçerlidir. Flex temalarla gelen fark, tema ayarlarındaki "Slider Görünüm Stili" seçeneğidir. Çoğu flex temada iki, bazılarında üç stil bulunur:

• Bento Slider: Birkaç slider'ın yan yana gösterildiği alandır.
• Default Slider – Stil 1: Bildiğimiz tekli (klasik) slider görünümüdür.
• Default Slider – Stil 2: Slider'ın tam ekran (kenarlara kadar) gösterildiği stildir.

Önemli: Hangi stili seçtiyseniz ayarları ve görselleri o stile göre yapmanız gerekir. Sık yapılan hata, "Bento Slider" seçip görselleri "Default Slider" alanından yönetmeye çalışmaktır. Seçtiğiniz stil hangisiyse doğru görsel boyutunu da o alandan öğrenin.

Mobil Slider

Eski ve standart temalarda bulunmayan, flex temalarla gelen ayrı bir slider alanıdır.

• Yatay bir slider mobil cihazlarda küçük ve okunması zor görünebiliyordu. Mobil slider, slider'ın mobilde daha büyük ve dikkat çekici görünmesini sağlar.
• Bu nedenle mobil slider görseli kareye yakın / hafif dikey bir formattadır (yatay değildir).
• Kesin boyutu öğrenmek için ilgili temanın örnek mobil slider görselini indirip inceleyebilirsiniz.

Slider Arka Planı ve Boşluk Ayarları

• Arka Plan Rengi: Slider'ın arka plan rengini değiştirebilirsiniz. Önce "arka plan durumunu" açıp ardından rengi belirlemeniz gerekir.
• İç Boşluk (Padding) Değerleri: Slider'ın üst, alt, sağ ve sol boşluklarını ayarlayarak slider ile üstündeki/altındaki içerik arasındaki mesafeyi belirleyebilirsiniz.