Arka plan resimleri, web sitenizi ziyaretçileriniz için daha çekici hale getirme konusunda uzun bir yol kat edebilir. Tek renkli bir arka plandan daha ilgi çekici olan bu arka planlar, üzerinde durmakta olduğunuz bir noktayı gösterebilir veya tüm sitenizin havasını ayarlayabilir.
Bu eğitimde, size WordPress’te arka plan resmi ekleyebileceğiniz birkaç yol göstereceğiz. İşte tartışacağımız konular:
-
Temanızın Ayarlarını Kullanarak Arka Plan Resmi Nasıl Eklenir?
-
CSS Kullanarak Arka Plan Resmi Nasıl Eklenir?
-
Belirli İçerik Bölümlerine Nasıl Arka Plan Eklenir?
Fakat başlamadan önce, bir web sayfasının genel düzenini ve görünümünü etkileyen birçok faktör nedeniyle, WordPress’te arka plan görüntüsünün nasıl ekleneceği konusunda tek ve kesin bir yanıt vermenin mümkün olmadığını belirtmeliyiz. Tema, her şeyden önce, bir sayfanın bölümlerine veya tamamına bir arka plan resmi ekleyebilme veya ekleyememe durumunu belirler. Size üç farklı yol sağladık, fakat kullandığınız temaya bağlı olarak hepsi çalışmayabilir veya farklı şekilde çalışabilir. “Arka plan” terimi bile farklı temaların farklı alanlarıyla ilgili olabilir. Yine de okumaya devam edin, çünkü bu yöntemlerden biri ihtiyacınız olan şey olabilir.
Temanızın Ayarlarını Kullanarak Arka Plan Resmi Nasıl Eklenir?
Bu durum büyük, yüksek kaliteli resimlerin yükleme sürelerini yavaşlattığını belirtmek için iyi bir an olabilir. Yine de, resimlerinizi optimize etmek ve mümkün olduğunca kolay yüklenmesini sağlamak için yapabileceğiniz şeyler var. Yükleme hızını göz önünde bulundurarak bir web sitesi oluşturuyorsanız, yinelenen (döşenmiş) arka planları da ele aldık.
Günümüzde pek çok popüler temanın yaptığı gibi, temanızın bir arka plan ayarı varsa, bunu arka plan resminizi ayarlamak için kullanabilirsiniz. Bu işlevselliğe sahip çoğu tema hemen hemen aynı şekilde çalışır. WordPress’in varsayılan Twenty Twenty temasını kullandık.
İlk olarak WordPress panonuzdaki Görünüm> Özelleştir’den tema özelleştiriciye gitmeniz gerekir.
Daha sonra ekranın sol tarafında Arka Plan Görüntüsü alt menüsünü istiyorsunuz.
Buna tıklamak sizi Görsel seç düğmesine götürecektir. Medya kitaplığınızdan bir arka plan resmi ekleyebilir veya bir tane yükleyebilirsiniz. Medya kitaplığımızdan bir tane seçtik.
Ve işte, artık geçmişini değiştirdin.
Kullandığımız Twenty Twenty teması burada bize bazı seçenekler sunuyor. Oradaki küçük yeşil yaprağımız gibi döşenebilir (tekrarlanabilir) bir resim kullanabilir veya arka planınız için tek bir resim kullanabilirsiniz.
Öyleyse, web siteniz için sayfanızın tüm genişliğini kaplayacak yüksek çözünürlüklü resimlere ihtiyacınız olacak, fakat bunların yüklenmesi çok zaman alabilir ve kötü kullanıcı deneyimine yol açabilir. Temanız ve web sitenizin stili için hangi resimlerin ve ayarların işe yaradığını bulmak gerçekten size kalmış.
Bununla birlikte birçok temanın bu şekilde bir arka plan resmi ekleme seçeneği olsa da çoğunun olmadığını unutmayın; bu nedenle, bu makalede özetlediğimiz diğer iki yöntemden birine başvurmanız gerekebilir.
CSS Kullanarak Arka Plan Resmi Nasıl Eklenir?
Uygulamalı bir kullanıcıysanız, bireysel gönderilerin yanı sıra kategoriler, yazarlar ve diğer CSS sınıfları için bir arka plan resmi ayarlamak üzere CSS’nizi değiştirme seçeneğiniz de vardır.
Tema özelleştiriciyi kullanarak bir kategorinin veya tüm web sitesinin arka planını değiştirebilirsiniz. Görünüm> Özelleştir’e tıklayarak WordPress panonuzdan ona gidin.
Oradayken, Ek CSS bölümünü açın.
Arka plan resmi eklemek için CSS alanına birkaç satır kod eklemeniz gerekecek. Tüm web sitesinin arka planını değiştirmek için şu kodu kullanın:
body {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Elbette, XXX yerine kullanmak istediğiniz resmin URL’sini yazmanız gerekecektir. Medya kitaplığımızdan bir tane seçtik.
Belirli bir kategoriye sahip sayfalar için değiştirmek isterseniz, biraz farklı çalışır. İstediğiniz kod şudur:
body.category-YYY {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Yukarıdaki gibi, YYY’yi geçerli bir kategoriyle değiştirirken XXX’i geçerli bir resim URL’si olarak değiştirmeniz gerekecektir.
Ve gerçekten de hepsi bu kadar!
Belirli İçerik Bölümlerine Arka Plan Nasıl Eklenir?
Şimdi her zaman olduğu gibi, bizim önerimiz, çalışması denenmiş ve test edilmiş olduğundan, bir temanın işlevselliğini mümkün olduğunca kullanmaktır. Fakat kullandığınız bir tema ihtiyacınız olan işlevselliğe sahip değilse, muhtemelen sahip olan bir eklenti bulabilirsiniz. Seçtiğimiz eklenti Gelişmiş WordPress Arka Planlarıdır. Eklentiyi kurup etkinleştirdikten sonra, dinamik bir arka plan oluşturmak için kullanabileceğiniz özel bir Gutenberg bloğu kazanmış olacaksınız.
Bu eklenti, öncelikle arka plan görevi gören ve daha sonra başka bir blok veya bloklarla doldurmanız gereken bir tür meta blok kurarak çalışır.
Bunu nasıl yapacağınızı bir gönderide göstereceğiz.
İlk olarak, Post>Yeni Ekle’yi seçerek WordPress panomuzdan bir gönderi oluşturacağız. Daha sonra başlığı yazıp iki paragraf bloğu ile doldurduktan sonra, ilk paragraftan sonra enter tuşuna basacağız ve ardından artı işaretini tıklayıp bir Arka Plan bloğu ekleyeceğiz.
Şimdi bloğu yapılandırmanız gerekiyor. Varsayılan ayar, tek renkli bir arka plan istiyorsanız seçebileceğiniz basit bir renk bloğu olan Renk’tir. Bir başka ilginç seçenek de Video arka planıdır. İster döngüde ister tekli oynatımda olsun, bir video arka planı ayarlamak için bu eklentiyi kullanabilirsiniz ve bunu web sitenizde barındırmanıza bile gerek yoktur: eklenti, YouTube ve Vimeo tarafından barındırılan videoları destekler. Fakat bu gösteri için, biz esas olarak Görüntü arka planıyla ilgileniyoruz.
Görüntü düğmesine tıkladığınızda, bu eklenti için bir dizi kontrol bulacaksınız. Görüntü bölümünde, Görüntü seç düğmesine tıklayın ve bir görüntü yükleyin veya ortam kitaplığınızdan bir görüntü seçin.
Bunu yaptıktan sonra, görüntünün arka planın bir bölümünü kapladığını göreceksiniz. Sağ tarafta, web sitenizin biraz daha dinamik görünmesini istiyorsanız kullanabileceğiniz paralaks ve boşluk seçeneklerini bulacaksınız. En üstte, konum kontrollerini bulacaksınız. Göstergenin eksenler üzerindeki konumuna göre görüntünün hangi bölümünün gösterileceğini seçebilirsiniz. Varsayılan (%50 yatay ve %50 dikey), onu şimdi bırakacağımız yerdir – görüntünün tam ortasında.
Şimdi bu görüntünün arka plan olacağı içeriği eklememiz gerekecek. Bunu yapmak için, arka plan bloğunun ortasındaki artı işaretine tıklamanız yeterlidir. Bir paragraf bloğu için gideceğiz, fakat istediğiniz herhangi bir bloğu seçebilirsiniz. Örneğin bir alıntı veya başlık, paralaks bir arka planda harika görünebilir.
Metnimizi yapıştırdık ve blok ayarları sekmesinde rengini beyaz olarak değiştirdik, arka planla daha iyi dengelenecek. Ve gerçekten bu kadar.
Şimdi önizleme düğmesine tıklayarak eklentiyi çalışırken görebiliriz.
Ve artık web sitenizdeki vurgulamak istediğiniz bireysel içerik bölümüne istediğiniz türde arka plan ekleyebilirsiniz.
Çözüm Yolu
Bir arka plan resmi, web sitenizi gerçekten kullanıcılarınız için sıkıcı bir saman yığınındaki büyük, parlak bir iğne gibi öne çıkarabilir. Fakat bunun bir bedeli var: Muhtemelen geniş formatlı medyayı saklamanız gerekecek ve bunlar yükleme sürelerini olumsuz etkileyecektir. Yine de muhteşem grafikler, kalıcı bir ilk izlenim bırakmanın en iyi yolu olmaya devam ediyor ve internet kullanıcıları profesyonel, göz alıcı tasarım beklemeye başladılar. Arka plan muhtemelen ziyaretçilerinizin ekranlarındaki en büyük tek grafik öğesi olacaktır. Artan yükleme süresini karşılayabiliyorsanız, neden ziyaretçilerinizin deneyimini görsel olarak ilgi çekici hale getirmiyorsunuz? Yani, ister temanızın yerel ayarlarını, ister bir eklentiyi veya CSS’yi kullanarak yapın, artık nasıl yapacağınızı biliyorsunuz.