WordPress Arka Plan Resimlerini Web Sitenize Doğru Bir Şekilde Nasıl Eklersiniz?

Yayınlanan: 2022-01-06

Web sitenize WordPress arka plan resimleri eklemek kolay mı? Temanız desteklemiyorsa cevap çoğunlukla evettir.

Gerçek şu ki, bugünlerde birçok WordPress teması, mevcut arka plan resimlerini eklemek ve değiştirmek için zahmetsiz yollar sunuyor.

Ayrıca, WordPress arka plan resimlerini CSS veya sayfalarda, gönderilerde ve kategorilerde arka plan resmini ayarlama seçeneklerini açan bir eklenti kullanarak da değiştirebilirsiniz.

Bu makale, web sitenizi göz alıcı bir görünüm ve his ile öne çıkarmak için yukarıdakilerin tümünü nasıl yapacağınızı gösterecektir.

WordPress Arka Plan Resimleri nedir ?

WordPress arka plan resmi, ana içeriğin arkasına uygulanan bir resimdir. Bir kahraman resmi gibi web sitenizin ana odağı olmak yerine, genellikle daha inceliklidirler ve web sayfalarınızdaki diğer içeriği tamamlarlar.

wordpress-arka plan-görüntüler-1

WP arka plan görüntüleri, daha iyi bir okuma deneyimi sağlayan web sayfaları oluşturmaya yardımcı olmanın yanı sıra, web sitenizi rakiplerinden ayıran birçok tasarım olanağı sunar.

Rakiplerden farklı olmak, her zaman kolay olmayan web sitesi tasarımınıza ekstra çaba harcayarak marka bilinirliğinizi artırmak anlamına gelir. Bu gibi durumlarda profesyonel web tasarım hizmetleri için bir dijital ajans isteyebilirsiniz.

Ama neden arka planı değiştirmek istiyorsun? Peki, varsayılan olan size çekici gelmeyebilir veya markanıza benzemeyebilir. Ya da belki hiç bir görüntü değil, sadece düz bir renk. Ya da belki ilk başta var olanı sevdiniz ama artık ondan sıkıldınız.

Sebep ne olursa olsun, değiştirmeyi deneyelim.

WordPress Arka Plan Resmi Eklemek için Varsayılan WordPress Özelleştiricisini Kullanın

WordPress temaları genellikle arka planda bir renk veya görüntü kullanmanın zahmetsiz bir yolunu sunar. Çoğu kişi, sitelerinin markasına ve zevkine daha uygun olan arka plan rengini değiştirmeyi tercih eder.

Bu kılavuzda, e-Ticaret siteleri için harika bir tema olan Woostify'ı kullanacağız. Temanıza bağlı olarak, yöntem biraz farklılık gösterebilir.

  1. WordPress panosundan Görünüm > Duvar Kağıdı/ Arka Plan veya Görünüm > Özelleştir > Duvar Kağıdı seçeneğine gidin.
wordpress-arka plan-görüntüler-2
  1. Medya Kitaplığını açmak için Görüntü Seç düğmesine tıklayın.
wordpress-arka plan-görüntüler-3
  1. İstediğiniz görüntüyü seçin. Bilgisayarınızdan yükleyebilir veya Medya Kitaplığından mevcut bir tane seçebilirsiniz.
wordpress-arka plan-görüntüler-4
  1. Mutlu olduğunuzda Görüntü Seç düğmesini tıklayın.
  2. Önizlemede gördüklerinizi beğendiyseniz Yayınla düğmesini tıklayın. Ve işte bu!
wordpress-arka plan-görüntüler-5

Ek olarak, WordPress basit bir arka plan resmi düzenleme aracı sunar. Hangi boyutun, konumun vb. en iyi olduğunu görmek için onunla deney yapabilirsiniz.

wordpress-arka plan-görüntüler-6

Herhangi bir şeye takılıp kalma konusunda endişelenme. İstediğiniz zaman ayarlara geri dönmek ve arka planı (ve ilgili seçenekleri) değiştirmek kolaydır.

Bir Yazıya/Sayfaya WordPress Arka Plan Resimleri Eklemek için Elementor Sayfa Oluşturucu'yu kullanın

Elementor, web sitesi üretimini önemli ölçüde hızlandıran yaygın bir sayfa oluşturucudur. WordPress arka plan resimleri eklemek için kullanabileceğiniz ücretsiz bir eklenti sunar.

  1. Başlamak için Elementor eklentisini kurmanız ve etkinleştirmeniz gerekir.
  2. İlk önce, seçtiğiniz gönderiye veya sayfaya gidin. Varsayılan WordPress sayfa düzenleyicisine girdikten sonra, Elementor ile Düzenle düğmesine tıklayın.
wordpress-arka plan-görüntüler-7

Elementor Düzenleyicisi açılacaktır. Sol tarafta, yazınızı/sayfanızı oluşturmak ve düzenlemek için tüm sürükle ve bırak bloklarını listeleyen bir menü göreceksiniz.

  1. Sayfa oluşturucunun sol alt köşesindeki küçük ayarlar simgesine tıklayın.
wordpress-arka plan-görüntüler-8
  1. Ardından, Stil sekmesini seçin.
  1. Bundan sonra, bir WordPress arka plan resmi eklemek için boya fırçası simgesine tıklayın.
  1. Ardından, Medya Kitaplığını getirmek için Görüntü Seç düğmesine tıklayın.
wordpress-arka plan-görüntüler-9
  1. İstediğiniz görüntüyü seçin. Bilgisayarınızdan yükleyebilir veya Medya Kitaplığından mevcut bir tane seçebilirsiniz.
  1. Ardından, sağ alt köşedeki 'Medya Ekle' düğmesini tıklayın.

Şimdi, seçilen arka plan resmi sağdaki önizlemede görünmelidir. Resim ve metin gibi öğelerin doğru şekilde görünmesini sağlamak için diğer içerikleri ayarlamanız gerekebilir.

  1. Tüm değişiklikleri kaydetmek ve gönderiyi/sayfayı güncellemek için 'GÜNCELLE' düğmesine basmayı unutmayın.
wordpress-arka plan-görüntüler-10

Ayrıca Elementor, Konum, Ek, Tekrar vb. gibi WordPress arka plan resimleri için bazı ayarlamalar sağlar. En iyi arka planı bulmak için bunlarla deneme yapmaktan çekinmeyin.

WordPress Arka Plan Resimleri Eklemek için Bir Eklenti Kullanın

WordPress arka plan resimleri ekleme işini yapabilen birkaç ücretsiz ancak mükemmel eklenti vardır. Örneğin, Basit Tam Ekran Arka Plan Resmi, Gelişmiş WordPress Arka Planları, Tam Arka Plan Yöneticisi vb.

Tüm Site için bir WordPress Arka Plan Resmi Ekleyin

Bu kılavuzda, Basit Tam Ekran Arka Plan Resmini basit olduğu için kullanacağız, dolayısıyla adı.

Bu eklenti, web siteniz için bir WordPress arka plan görüntüsünün basit kurulumunu ve kurulumunu sağlar. Görüntüyü tarayıcı ile otomatik olarak ölçeklendirir. Böylece, ziyaretçileriniz hangi cihazları kullanıyor olursa olsun, her zaman ekranı doldurur.

Eyleme geçirmek için sadece birkaç basit adım gerekir. Ekstra özellikler ekleyen ücretli bir sürüm var. Ancak, ihtiyacımız olan tek şey ücretsiz olanı.

  1. Simple Screen Background Image eklentisini kurun ve etkinleştirin.
  2. WordPress panosundan Görünüm > Tam Ekran BG Görüntüsü'ne gidin.
wordpress-arka plan görüntüleri-11
  1. Medya Kitaplığını açmak için Görüntü Seç düğmesine tıklayın.
wordpress-arka plan-görüntüler-13
  1. İstediğiniz görüntüyü seçin. Bilgisayarınızdan yükleyebilir veya Medya Kitaplığından mevcut bir tane seçebilirsiniz.
wordpress-arka plan-görüntüler-14
  1. Mutlu olduğunuzda Görüntü Seç düğmesini tıklayın.
  2. Son olarak, 'Seçenekleri Kaydet' düğmesini tıklayın ve web sitenizi kontrol edin. Resim şimdi sitede tam ekran bir WordPress arka plan resmi olarak gösterilmelidir.
wordpress-arka plan-görüntüler-15

Eklentinin WordPress arka plan resimleri ayarının varsayılan WordPress Özelleştiricisini geçersiz kıldığını unutmayın. Bu hiçbir şekilde kötü bir şey değil, sadece akılda tutulması gereken bir şey.

Belirli Bir Sayfaya / Gönderiye WordPress Arka Plan Resimleri Ekleyin

Bu rehberde yukarıda bahsettiğimiz Advanced WordPress Backgrounds eklentisini kullanacağız.

Bu eklenti, Gutenberg bloklarını kullanarak arka plan eklemeye izin verir. WordPress arka planı olarak bir renk, resim ve hatta video ayarlayabilirsiniz. Hepsi mobil cihazlarda görüntülenebilir. Ayrıca, WordPress arka plan resimlerine ve videolarına paralaks efekti ekleyebilirsiniz.

Bu durumda, içerik alanına, özellikle gönderilere/sayfalara yalnızca statik bir arka plan resmi ekleyeceğiz.

Bu, Gutenberg bloklarıyla çalıştığından, gerekirse Klasik Düzenleyici modundan geçiş yaptığınızdan emin olun.

  1. Eklentiyi kurun ve etkinleştirin.
  2. Mevcut bir gönderiyi/sayfayı açın veya yeni bir tane oluşturun.
  3. Sol üst köşedeki artı düğmesine tıklayın. Ardından Tasarım bölümüne gidin ve AWB bloğunu seçin. Bloğun yanında bir üst simge çubuğu ve bir yan menü sütunu görünecektir.
wordpress-arka plan-görüntüler-15
  1. Yan sütundaki Görüntü düğmesini tıklayın. Ardından, Medya Kitaplığını açmak için altındaki Görüntü Seç düğmesini tıklayın.
wordpress-arka plan-görüntüler-16
  1. İstediğiniz görüntüyü seçin. Ardından, Seç düğmesini tıklayın. Bunu yaptıktan sonra, arka plan resmini görmelisiniz.
wordpress-arka plan-görüntüleri-18
  1. Üstteki simge çubuğunda hamburger şekli simgesine tıklayın. Ardından, tüm genişliği kapsayacak şekilde Tam Genişlik seçeneğini seçin. Bu tamamen isteğe bağlıdır.
wordpress-arka plan-görüntüler-19

Yan sütunda, WordPress arka plan görüntüsünün boyutunu, aralığını, konumunu ve daha fazlasını değiştirebilirsiniz. Onunla deney yapmaktan çekinmeyin.

wordpress-arka plan-görüntüler-20

Şimdi geriye kalan tek şey bloğun içine içerik eklemek. Mevcut bir gönderiyi/sayfayı düzenliyorsanız, içeriği kesip bloğa yapıştırmanız yeterlidir.

Sonuçtan memnun kaldığınızda gönderiyi/sayfayı kaydetmeyi unutmayın.

WordPress Arka Plan Resimleri Eklemek için CSS Kullanın

Şimdi, CSS kullanarak WordPress arka plan resimlerini nasıl değiştireceğimizi keşfedeceğiz. Bu, tüm siteye veya WordPress Özelleştirici kullanılarak belirli kategoriler için yapılabilir.

  1. WordPress Özelleştirici'ye erişmek için WordPress panosundan Görünüm > Özelleştir'e gidin.
wordpress-arka plan-görüntüler-21
  1. Aşağı kaydırın ve Ek CSS bölümüne tıklayın.
wordpress-arka plan-görüntüler-22
  1. Aşağıdaki uygun kodu kopyalayıp CSS alanına yapıştırın:
wordpress-arka plan-görüntüler-23

Tüm Site için bir WordPress Arka Plan Resmi Ekleyin

 body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

'imageURL' yer tutucu metnini gerçek resim dosyası URL'si ile değiştirdiğinizden emin olun. Bunu görmek için, görüntü bilgilerini görüntülemek üzere Medya Kitaplığında istediğiniz görüntüyü seçin.

Ve eğer CSS biliyorsanız, istediğiniz gibi ince ayar yapmaktan çekinmeyin.

wordpress-arka plan-görüntüleri-24

Belirli Bir Kategori Sayfasına WordPress Arka Plan Resimleri Ekleyin

 body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

'imageURL' yer tutucu metnini gerçek resim dosyası URL'siyle ve 'categoryid'i uygun kategori adıyla değiştirdiğinizden emin olun.

Kategori kimliğini öğrenmek için aşağıdaki talimatları izleyin:

  1. WordPress kontrol panelinden Gönderiler > Kategoriler'e gidin.
wordpress-arka plan-görüntüler-25
  1. Referans vermek istediğiniz kategorinin Düzenle metninin üzerine gelin. URL'yi sayfanın sol alt kısmında kategori kimliğini gösteren göreceksiniz.
wordpress-arka plan-görüntüler-26

WordPress'te Arka Plan Resimlerini Kullanmak İçin En İyi Uygulamalar

WordPress'te özel bir arka plan resmi ayarlamak kolay bir iş gibi görünüyor. Evet! Çoğu durumda doğrudur, ancak her zaman değil.

Bu nedenle, mümkün olduğunca çok sorunu ortadan kaldırmak için en iyi WordPress arka plan görüntüsü uygulamalarını izlemenizi öneririz.

Bir WordPress Temasını Kullanmadan Önce Arka Plan Resmi Desteğini Kontrol Edin

Ne yazık ki, tüm WordPress temaları özel arka plan resimlerini desteklemez. Bunun nedeni genellikle arka planların temanın genel tasarımıyla eşleşmemesidir. Bu nedenle, geliştiriciler onu tamamen kapatmayı seçti.

Bu nedenle, özellikle premium bir tema için ödeme yapmayı planlıyorsanız, yeni bir tema indirirken özellikler listesini kontrol etmelisiniz. Tema satan birçok web sitesi, bir WordPress temasının arka plan resimlerini destekleyip desteklemediği hakkında bilgi sağlar.

wordpress-arka plan-görüntüler-27

Yüksek Kaliteli Görüntülere Sahip Çıkın

Amaçladığınız arka plan resimlerinin çözünürlüğü genellikle sunumunu yapar veya bozar. Telefonunuzla çektiğiniz bir fotoğrafın arka plan için yeterince iyi olduğunu düşünebilirsiniz. Ama şansın çok daha yüksek kalitede olması gerekiyor.

Shutterstock gibi sitelerden telifsiz fotoğraflar için ödeme yapabilirsiniz. Bu siteler genellikle büyük arka plan resimleri olarak yüklenmeye hazır profesyonel düzeyde resimlere sahiptir. Bunların birçoğunu ücretsiz stok görsel sitelerinde de bulabilirsiniz.

Arka plan resmi, çoğu içerik tarafından kapsandığından, WordPress sitenizde tam olarak görünmeyebilir. Ancak, yine de tüm ekranda görüntülenir. Bu nedenle, yüksek kaliteli bir görüntü kullanmazsanız, uzatılmış bir arka plan görme riskiniz vardır.

Arka Plan Resimlerini Optimize Edin

WordPress sitenize yüklenen tüm fotoğraflarda olduğu gibi, yayınlamadan önce arka plan resimlerini optimize etmelisiniz.

Bu, özellikle arka plan resimleri için önemlidir, çünkü bunlar genellikle sitenizdeki birden çok sayfada görünür. Ayrıca, büyük fotoğraflardır ve çok fazla ekran alanı kaplarlar. Ek olarak, daha büyük görüntüler sunucuya önemli miktarda yük bindirir. Bu nedenle, sitenizin hızlı bir şekilde yüklenmesi için arka plan resimlerinizi optimize etmeyi unutmayın.

Burada iki seçeneğiniz var:

  • Arka plan resimlerini (ve tüm web sitenizin fotoğraflarını) sunucuya yüklemeden önce optimize edin. Bu manuel işlemi Photoshop, GIMP ve Pixlr gibi araçların yardımıyla tamamlayabilirsiniz.
  • Yükleme sırasında görüntüleri yeniden boyutlandıran ve küçülten bir WordPress eklentisi yükleyerek optimizasyon sürecini otomatikleştirin.

Son düşünceler

Web sitenize WordPress arka plan resimleri eklemek küçük bir şey gibi görünebilir. Ancak iyi yapılırsa, büyük bir etki yaratabilir.

Ayrıca, çevrimiçi varlığınızı taze tutmanıza yardımcı olabilir. Bu nedenle ziyaretçileriniz aynı fotoğrafları tekrar tekrar görmekten sıkılmazlar.

İdeal olarak, amaçlandığı gibi çalışmak üzere özel olarak tasarlandığından, mümkün olduğunda bir arka plan görüntüsü eklemek için WordPress Özelleştirici'yi kullanın.

Bununla birlikte, yukarıda gösterdiğimiz gibi, WordPress arka plan resimleri eklemek ve değiştirmek için başka seçenekleriniz de vardır.

Şimdi, devam edin ve ziyaretçilerinizi görsel olarak çekmek için web sitenizin arka planıyla yaratıcı olun.