Web sitenizi veya web sayfası tasarımınızı geliştirmek için bir WordPress arka plan resimleri yerleştirmenin hızlı ve kolay bir yolunu mu arıyorsunuz? Bu blog yazısında tüm yanıtları bulabilirsiniz. WP arka plan resmi, web sitenizin aynı temaya dayanan diğer web sitelerden çok farklı olmasına yardımcı olabilecek tasarım öğelerinden biridir. Üç farklı yöntemden birini kullanarak bir WordPress sayfasına nasıl arka plan resmi ekleyebileceğini öğrenmek istiyorsanız bu blog yazısını okumaya devam edin.
WordPress arka plan resmi eklemek sizin için neden avantajlı olabilir?
Her şeyden önce, arka plan resmi eklemenin sizin için neden yararlı olabileceğini öğrenelim. WordPress'in web siteleri oluşturmak için en popüler içerik yönetim sistemi olduğu genel olarak bilinen bir gerçektir. CMS kullanan web sitelerinin % 61,9'u WordPress tarafından desteklenmektedir. Başka bir deyişle, mevcut web sitelerinin toplam sayısının% 35,2'si heyecan verici olan WP kullanılarak oluşturulmuştur.
Tabii ki, bir web sitesi oluşturmanın en kolay yolu profesyonel bir hazır WordPress teması kullanmaktır. Özel bir WordPress arka plan görüntüsü yerleştirmesi, aynı temayı kullanan web sitelerinden öne çıkmanıza yardımcı olur. Web siteniz markanızın benzersiz stilini temsil etmelidir.
Ayrıca, her bir sayfaya benzersiz bir arka plan görüntüsü eklediğinizde web sitenize otantik bir stil kazandıracaksınız. Böylece, her ürünün, kategorinin veya hatta bir blog gönderisinin içeriğini vurgulayacaksınız.
WordPress'te önerilen web sitesi arka plan resmi boyutu nedir?
Bu WordPress.com blog gönderisine göre 1920 x 1080 piksel, WP arka plan görüntüsü için en uygun boyuttur ve 16: 9 mükemmel bir oran'dır. Dosyanın boyutu mümkün olduğunca küçük olmalıdır; ancak, PPI (inç başına düşen piksel veya DPI inç başına nokta sayısı) en az 72 olmalıdır. Dosya boyutunu küçük tutmak neden önemlidir? Web sayfanızın daha hızlı yüklenmesini garanti eder. Bu WordPress arka planları daha büyük boyutlu görüntüler yükleme işlemini yavaşlatabilir ve bu da sizi bir dizi soruna yol açabilir:
- Web sitenizdeki UX'i (kullanıcı deneyimi) etkiler. İnsanlar uzun süre beklemek istemiyor. Web sayfanızın yüklenmesi iki saniyeden uzun sürerse, muhtemelen potansiyel bir müşteriyi kaybedersiniz.
- Google, sayfa yükleme hızını sıralama faktörlerinden biridir. Sizde rakiplerinizi geride bırakmak istiyorsanız, hem mobil hem de masaüstü web sitesi ziyaretçileri için hızlı bir kullanıcı deneyimi sunmaya odaklanmalısınız.
Harika haberlerimiz var. Google, web siteniz için daha iyi çevrimiçi performans sunmanıza yardımcı olacak PageSpeed Insights adlı ücretsiz bir geliştiricinin aracına sahiptir.
Yüksek kaliteli WordPress arka plan resimleri nerede bulunur?
Neyse ki, özel amaçlarınız için en alakalı görüntüleri bulabileceğiniz ve kullanımınız için satın alabileceğiniz çok sayıda web sitesi vardır. Alternatif olarak, en iyi ücretsiz WordPress arka plan görüntülerinin listesine göz atabilir ve özel amacınız için en uygun olanları bulabilirsiniz.
Paralaks kaydırma efekti
WordPress arka plan resimleri hakkında size çok şey anlattık. Ancak sıradan bir arka plan görüntüsünü benzersiz ve ilgi çekici tasarım öğelerine dönüştürebilen bir özellik daha var. Bu özelliğe paralaks kaydırma efekti denir.
Paralaks kaydırma, bir web sitesinin mimarisinde bir web sayfasının arka planının daha düşük bir hızda ön plana taşınması ve kaydırma sırasında 3D efekti oluşturmasıdır. Eğlenceli ve sofistike bir derinlik unsuru sağlamak için kullanılabilir, bu da ayırt edici ve akılda kalıcı bir web siteyi yapmanıza yardımcı eder.
Sabit ve paralaks efektli WordPress görüntüleri arasındaki fark nedir?
Hem sabit hem de paralaks arka plan resimleri, web sitesi sayfalarınızda çarpıcı fotoğraflar görüntülemenize olanak tanır. Ancak bu iki seçenek arasındaki fark nedir?
Sabit WordPress Arka Plan Görüntüsü
Sabit bir arka plan görüntüsü kullandığınızda görüntü sabit kalır, içerik kaydırdıkça görüntünün üzerinde hareket etmeye devam eder.
Paralaks Arka Plan Görüntüsü
Paralaks arka plan görüntüsünün yardımıyla, sayfayı aşağı kaydırdığınızda görüntü ve metin faklı hızlarda haraket ederler.
WordPress arka plan görüntüsü manuel olarak nasıl eklenir (ekran görüntüleri ile adım adım)
Yöntem # 1: WordPress Tema Ayarları Yardımıyla Arka Plan Görüntü Ekleyin
Neredeyse her modern teması özel bir arka planı desteklemektedir. Bu özelliğin yardımıyla, birkaç tıklamayla web sayfanız için bir arka plan resmi ayarlayabilirsiniz.
Seçtiğiniz tema bu özelliği ile birlikte geliyorsa, bu yöntemi seçin çünkü WordPress arka plan resminizi özelleştirmenin en kolay yolu olabilir. WP temanız bu yöntemi desteklemiyorsa, lütfen bu blog yazısının bir sonraki paragrafa geçin.
- [Görünüm] sekmesine gidin, ardından WordPress yönetici panelinizde [Özelleştir] seçeneğini seçin. Orada WP tema özelleştirici ile çalışabileceksiniz. Bu, tema ayarlarınızı gereksinimlerinize göre ayarlayabileceğiniz bir yerdir.
2. Ardından, [Arka plan resmi] seçeneğini seçin. Bundan sonra, seçilen web sayfası için bir resim yükleyebileceğiniz kullanışlı bir panel göreceksiniz. Alternatif olarak, WP medya kitaplığınızdan bir fotoğraf da seçebilirsiniz.
3. Resim eklemeye devam etmek için [Resim Seçin] üzerine tıklayın. Bundan sonra, WP medya yükleyici açılır penceresini göreceksiniz. Burası, bilgisayarınızdan veya dizüstü bilgisayarınızdan resim yükleyebileceğiniz bir yerdir. Ayrıca daha önce medya kitaplığınıza yüklediğiniz herhangi bir tanesini kullanabilirsiniz.
4. Gerekli görüntüyü yükledikten veya seçtikten sonra [Resim Seç] 'i tıklayın.
5. WP arka plan resminiz için gerekli özellikleri seçin. [Önayar] paneli WordPress arka plan resminizi görüntülemek için size farklı seçenekler sunar. Görüntüyü ihtiyaçlarınıza göre konumlandırmak için okları ve orta düğmeyi de kullanabilirsiniz.
6. İşi bitirmek için [Kaydet ve Yayınla] tuşuna basın.
Yöntem 2: Bir eklenti yardımıyla wordpress arka plan görüntüsü ekleyin
Bu yolu daha rahat ve esnektir. Bu yöntemin yardımıyla, birden çok WordPress arka plan görüntüsü ayarlayabilirsiniz. Bu yöntem herhangi bir tema ile uyumludur. Ayrıca, web sitenizin her sayfası için farklı resimler seçebilecek ve her kategoriyi ve yazı sayfasını özelleştirebileceksiniz.
Seçilen görüntüler için tam ekran seçeneğini otomatik olarak ayarlar. Onları duyarlı yapar. Bu, arka plan görüntüsünün herhangi bir mobil veya tablet ekranına sığması için otomatik olarak yeniden boyutlandırılacağı anlamına gelir. Web siteniz için daha iyi bir UX'e neden olacaktır.
Tam ekran WordPress arka plan resmi uygulaması
- Basit Tam Ekran Arka Plan Görüntüsü eklentisini yükleyin.
2. Şimdi, WordPress panonuzdaki [Eklentiler] menüsünde etkinleştirmeniz gerekiyor.
3. Etkinleştirmeden sonra [Görünüm] sekmesine gidin ve menüden [Basit Tam Ekran Arka Plan Görüntüsü] 'nü seçin.
4. WP medya galerinizden bir fotoğraf seçin veya yeni bir tane yükleyin.
5. Tercih edilen görüntü boyutunu ayarlayın.
6. Değişiklikleri kaydedin.
Lütfen dikkat! [Global] seçeneğine birden fazla görüntü ayarlamayı seçerseniz, bunlar otomatik olarak bir kaydırıcı gösterisinde gösterilecektir.
Aşağıdaki ekrana bir göz atın. Zaman milisaniye olarak ayarlanır, bu nedenle arka plan görüntüsünün 15 saniye sonra kaybolmasını istiyorsanız, ilgili alana 15000 girmelisiniz.
Bireysel Sayfa / Blog Gönderi / Kategorisi için Arka Plan Resmi Ayarlaması
Fark etmiş olabileceğiniz gibi, aşağıdaki eklenti tek bir blog yazısı, sayfası veya kategorisi için arka plan resimleri eklemenize izin verir. Bunu yapmak için bu basit adımı izleyin.
- Arka plan resmini görüntülemek istediğiniz sayfayı veya yayını özelleştirmek için tıklayın. Düzenleme ekranında, yayın düzenleyicisinin altında [Tam Ekran Arka Plan Görüntüsü] panelini göreceksiniz. Tercihleri ayarlamak için kullanın.
Yöntem 3. - WP Arka Plan Görüntüsü ayarlamak için özel CSS ekleyin
Bu yönteminden yararlanmak için bazı CSS bilgisine sahip olmanız gerekir. Ancak, sizin için bir örnek oluşturduk, böylece talimatlarımızı uygulayabilirsiniz. Rehberimizi takip edin ve her şey kolayca kendiniz yapın.
WordPress CMS varsayılan olarak web sitenizin HTML öğelerine birkaç CSS sınıfı uygular. Ancak, web sayfalarınız için farklı arka plan fotoğrafları kullanmak veya kategorileri ve yayın sayfalarını çeşitli resimlerle zenginleştirmek için kendi özel Cascading Style Sheets ekleyebilirsiniz.
Diyelim ki blogunuzda veya web sitenizde bir [Elbiseler] kategoriniz var. Bu şekilde, WP bu kategori birine gösterildiğinde <body class = "archive category category - dresses category-2"> kodu otomatik olarak ekler.
Body etiketine eklenen sınıfları tanımlamaya yardımcı olabilecek birçok inceleme aracı vardır. Bu belirli kategori sayfası için bir arka plan fotoğrafı oluşturmak için dress veya 2 CSS kategorilerini kullanabilirsiniz.
- Her şeyden önce, istenen özel WP arka plan resmini seçmemiz gerekiyor. Ardından, kategorinizin arşiv sayfasına eklemeliyiz. Bu kategoriye Elbiseler denir.
Medya kitaplığınızdan bir fotoğraf seçip URL'sini kopyalayabilirsiniz.
2. [Görünüm] sekmesine gidin, ardından [Özelleştir] 'e tıklayın ve [Ek CSS] sekmesini seçin.
3. Özel CSS'nizi ilgili alana yerleştirin ve kendi kategorinizi girerek varsayılan kategoriyi değiştirin. Resim URL'nizi eklemeyi unutmayın.
Aşağıdaki örneğe bir göz atın:
url(“http://exampleyourwebsite.com/hello/wp-content/uploads/2020/01/background-image.jpg”);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;background-attachment: fixed;
}
4. Özel CSS'nizi ekledikten sonra [Kaydet ve Yayınla] düğmesini tıklayın.
İşte bu kadar. Şimdi arka planı canlı olarak görmek için kategori sayfasına göz atabilirsiniz.
En iyi WordPress arka plan görüntüsü temaları
Daha önce de belirttiğimiz gibi, özel bir arka plan özelliğini destekleyen bir tema kullanıyorsanız WordPress arka plan resimleri eklemek çok kolay olacaktır. İşinizi kolaylaştırmak için, web'deki en popüler arka plan resmi ve paralaks efekti WordPress temalarından beşini seçtik.
Bunlardan herhangi birini kullanarak, web sitenizin herhangi bir sayfası için kolayca farklı görüntüler ayarlayabilir ve özelleştirebilirsiniz. Ayrıca, bu temaların her biri, daha önce hiçbir programlama veya web tasarım deneyimi olmayanlar için bile, basit ve eğlenceli bir web sitesi oluşturma sürecini yapan çok çeşitli diğer ilginç ve kullanışlı özelliklere sahiptir.
Monstroid2 - Çok Amaçlı Modüler Elementor WordPress Teması
TemplateMonster tarafından oluşturulan en iyi bilinen çok amaçlı Monstroid2 WordPress Temasıdır. En son trendler göz önünde bulundurularak tasarlanmıştır. Bu süper hafif, kullanışlı ve ultra modern bir tema. Ayrıca, bu harika Monstroid2 Teması harika özelliklere sahiptir. Her şeyden önce, tamamen özelleştirilebilir ve süper kullanışlı düzenleme seçenekleriyle birlikte gelir. Elementor Sayfa Oluşturucu ile% 100 uyumludur.
Monstroid2 paralaks arka plan WordPress teması, süper fonksiyonel Jet eklentileri dahil çok sayıda sete sahiptir. Tema sürekli güncellenir. Tema, tonlarca hazır sayfa ile birlikte gelir. Bununla birlikte, size önceden tasarlanmış çeşitli düzenler sunar.
Çok sayıda (yaklaşık 50) cilt sayesinde bu WordPress teması, kelimenin tam anlamıyla herhangi bir profesyonel niş için çarpıcı bir web sitesi oluşturmak için güçlü bir araçtır. Bu arada, cilt sayısı haftalık olarak güncellenir.
İnnomerce - İş Çok Amaçlı Minimalist Elementor WordPress Teması
İş danışmanlığı şirketiniz için güçlü ve şık bir web sitesi oluşturmayı düşünüyorsanız, Innomerce WordPress temasına bir göz atın. İşletmenizle ilgili bilgileri en profesyonel şekilde temsil etmenize yardımcı olacaktır. Hakkımızda ve Hizmetler sayfalarımız sayesinde şirketiniz hakkında önemli bilgileri gösterebilecek ve iş teklifinizin gücünü vurgulayabileceksiniz. Ayrıca, Innomerce WordPress teması önceden hazırlanmış başka sayfalar da sunar. Örneğin, Galeri ve Haberler, işletmeniz ve konferanslar hakkında fotoğraf ve yayın ekleyerek hedef kitlenize daha yakın olmanıza yardımcı olacaktır. Ayrıca, tema size sınırsız özelleştirme seçenekleri sunan Jet eklentileri setiyle birlikte gelir. JetElements eklentisinin yardımıyla web sitesi içeriğinizi kullanışlı widget'lar ile zenginleştirebilir ve farklı içerik türlerini sergileyebilirsiniz. Uygun bir web sitesi gezinme yapısı oluşturmak için JetMenu eklentisini kullanabilirsiniz. Sıra dışı, ancak kompakt bir web sitesi düzeni oluşturmak için JetTabs eklentisini kullanabilirsiniz. İçeriğinizi farklı türde bloklara ve sekmelere dönüştürmenizi sağlar. Sonuç olarak, bu tema, özel ihtiyaçlarınıza göre bir web sitesi oluşturmanıza yardımcı olacak tonlarca yararlı araç ve özellik sunar.
Adverting - Duyarli Reklam Ajansi Elementor WordPress Temasi
Reklam ajansınızın web sitesi oluşturmak için işlevsel bir WordPress Teması arıyorsanız, doğru yoldasınız demektir. Reklamcılık, çevrimiçi işinizi zirveye taşımanıza yardımcı olabilecek tamamen özelleştirilebilir bir araçtır. Düzgün bir tasarıma ve duyarlı işlevselliğe sahip bir web sitesi oluşturarak ajansınızı güçlendirin. Önceden oluşturulmuş çeşitli ek sayfalar arasından seçim yaparak becerilerinizi ve tüm hizmet yelpazenizi vurgulayın. Müşterilerinizin şirketiniz hakkında iyi yapılandırılmış içeriğin keyfini çıkarmasını sağlamak için premium içerik modüllerini kullanın. Müşterilerin işletmenizle ilgili geri bildirimlerinden yararlanın - ajansınızı potansiyel müşterileriniz için güvenilir hale getirin. Referanslarla uygun bir alan oluşturmak için ilgili içerik bloğunu kullanmanız yeterlidir. Profesyonel Reklamcılık Temasının yardımıyla, patlayan reklamcılık işiniz için mükemmel çevrimiçi performans oluşturun.
Visity - Peyzaj Tasarımı Elementor WordPress Teması
Visity, olumlu ve yumuşak atmosferi yaratmak için özenle tasarlanmış özel bir WordPress temasıdır. Çarpıcı paralaks etkisi sayesinde, aşağıdaki tema herhangi bir web sitesini bir sanat eserine dönüştürebilir. Sadece harika bir görsellik sağlamaz. Elementor eklentisinin yardımıyla oluşturulan bu şablon, web sitenizin içeriği için 50'den fazla ek widget ile birlikte gelir. Bu, herhangi bir kodlama deneyimi olmadan bile çarpıcı ve güçlü bir web sitesi oluşturabileceğiniz anlamına gelir. Tema ile birlikte sunulan eklentileri kullanarak web sitenizin gelişmiş özelliklerini vurgulayın. Örneğin Jet Eklentileri ile dinamik bilgileri kolayca ekleyebilir ve özelleştirebilir, sayfa düzenlerini oluşturabilir, video görüntüleyebilir veya yorumları gösterebilirsiniz. İşletmenizin sunduğu hizmetleri gösterin, tamamladığınız en son projeleri görüntüleyin ve önceki müşterilerinizin referanslarını yerleştirin. Visity teması, web sitesi içeriğini istediğiniz gibi ve özel gereksinimlerinize göre ayarlamayı mümkün kılar.
Patrick - Tasarım Portföyü Web Site İçin Kişisel Tanıtım WordPress Teması
Patrick WordPress teması, kalabalığın arasından sıyrılmak ve rakipleri geride bırakmak isteyenler için mükemmel bir seçimdir. Bir grafik tasarımcısıysanız, benzersiz ve unutulmaz bir web sitesine sahip olmanın ne kadar önemli olduğunu muhtemelen biliyorsunuz. Aşağıdaki tema, işletmeniz için sanatsal ve yaratıcı bir çevrimiçi portföy oluşturmak için her şeye sahiptir. Başarıya giden yolu tanımlamak için önceden oluşturulmuş Hakkında sayfasını kullanın. Bu amaç için uygun bir içerik bloğu oluşturarak becerilerinizi ve ödüllerinizi sunun. Bu tema yerleşik Elementor oluşturucu ve bir paket JetPlugins ile birlikte gelir. Bu, web sitenizin herhangi bir tasarım bloğunu ve öğesini birkaç tıklamayla ayarlayabileceğiniz ve değiştirebileceğiniz anlamına gelir. Ayrıca, işletmeniz için şık ve etkileşimli bir portföy web sitesi oluşturmak için herhangi bir kodlama becerisine sahip olmanız gerekmez. Web sitesi özelleştirme sürecinin basitliğinin ve gücünün tadını çıkarın.
Özet
Bu oldukça uzun bir yolculuktu. Artık WordPress arka plan resimleri hakkında her şeyi biliyorsunuz. Artık arka plan görüntülerini birkaç farklı şekilde ayarlayabileceksiniz. Bundan eminiz. Bu blog yazısını WordPress'e arka plan resmi eklemek için kullandıysanız, lütfen yorum bölümünde görüşlerinizi bırakmaktan çekinmeyin. Yukarıdaki bilgilerden sizin için en basit yöntem hangisi olduğunu deneyimlerinizi paylaşın. Listemize eklenmeyi hak eden başka bir yaklaşım biliyorsanız, yorumlarda görmekten memnuniyet duyarız.
Bugünlük bu kadar. Yakında görüşürüz!
Web tasarımı ile ilgili herhangi bir konuda ilham kaynağı arıyorsanız, Oksana'nın makalelerinin koleksiyonu inceleyin. Sizin için kullanışlı olmalıdır. Onu LinkedIn'de takip edin.