Herhangi bir web sayfasına WordPress arka plan resmi nasıl eklenir
Bu girişi çok kısa yapacağım. Bu makalede tartışacağımız şey budur:
Arka plan resmi nedir?
Paralaks arka planının nesi var?
WordPress sitenize arka plan resimleri nasıl eklenir
WordPress’te görüntünün boyutuna nasıl yaklaşılır
Hazır? Hadi gidelim! Arka plan resmi nedir? Arka plan görüntüleri, web sitesindeki öğelerin arka planına, e -postayla vb. Uygulanan görüntülerdir. Kahraman görüntüsü bir web sitesinin veya e -postanın ana odak noktası olsa da, daha pürüzsüz bir arka plan görüntüsü. İkinci katman olarak diğer web sitesi unsurlarını destekliyorlar: harekete geçme davetiyesi, diğer resimler, sitenin çeşitli bölümleri vb.
Arka plan görüntülerinin bazı örneklerine bakalım: IKEA IKEA web sitesinin ana sayfasında, arka plan görüntüleri ilham verici hikayelerini sunmak için kullanılır. Hikayenin başlığı ve kategorisi resmin üzerine yerleştirilmiştir. Gerçek görüntünün opaklığını azaltmak için kullanılan bir gradyan kaplama vardır. Bu yaklaşım metnin daha görünür hale getirilmesine yardımcı olur, ancak tasarımda tutarlılık yaratır, bu nedenle diğer renklerden daha belirgin renkler yoktur. Vincent, en sevdiğim filmlerden biri olan bu sevgiyle dolu. Arka plan görüntüsü, Vincent Van Gogh ve filmin arkasındaki hikayeyi sunan Güney Kore’nin arkasında yer alıyor. Arka plan görüntüleri hikayeyi güçlendiriyor ve güçlü duygular sağlıyor gibi görünüyor. Doğurgan Yemyeşil bir sitenin görünümünü gerçekten seviyorum: renkli ve ürünün kendisi gibi canlı. Şimdi, arka plan görüntüleri bu bülten kayıt sayfası örneğinde olduğu gibi desenler veya şekiller kullanabilir. Bu kalıplar potansiyel olarak sıkıcı bir şeyi neşeli bir şeye dönüştürmeyi başardı. Paralax Arka Plan Görüntüsü British Museum web sitesine bakarsanız, sayfalarında, arka arka plan içeriğinin neden düştüğü arka planda bulunan bir görüntü olduğunu göreceksiniz. Bu bir paralaks arka plan görüntüsüdür. Parallax Roll, doğru bir şekilde entegre edilmişse web sitesine başarılı bir şekilde mükemmel bir etki ekleyen web tasarım trendlerinden biridir. WordPress üzerinde bu tür efektler de alabilirsiniz, size ne kadar sonra göstereceğim. WordPress sitenize arka plan resimleri nasıl eklenir WordPress sitenize arka plan resimleri eklemenin üç ana yolu vardır. Onları kontrol edelim, tamam mı?
WordPress özelleştirici temanız aracılığıyla arka plan resimleri ekleyin
En popüler WordPress teması bu seçeneğe sahiptir. Bu örnek için Colibri temasını kullanacağım. Diğer temalar Colibri temasına benzer şekilde davranır. Seçtiğiniz tema bu özellikleri desteklemiyorsa, yöntem 2 ve 3’e geçer.
Şimdi, görünüşe giderek başlayalım -> WordPress panosundan özelleştirin. Solda tema kuyruklama seçeneğini göreceksiniz, sağda ise web sitenizin doğrudan bir incelemesi var. Tema, bir arka plan resmi yerleştirmenizi sağlar:
Astar
kolon
Block (web sitesinin tüm parçaları gibi: Hakkımda, portföy, ekip, iletişim vb.)
Bileşenler (başlık, atlıkarınca, fiyat masası, atlıkarınca, vb.)
Bunu yapabilmeniz, arka plan görüntüsünüze ihtiyaç duyduğunuz her yerde aynıdır. Hizmet web sitenizin bloğuna arka plan resimleri eklemek istediğinizi varsayalım. Bir parça seçerek başlayın. Solda, aşağıdaki gibi tüm yapılandırılmış menülerde düzenleme seçeneğini göreceksiniz: Düzen
Stil
Gelişmiş
Stil -> arka plan türüne gidin.
Bir resim seçin “. Şimdi kendinizle değiştirebileceğiniz bir resim göreceksiniz. Resmi tıkladığınızda, WordPress Medya Galerisi’nden bir resim seçebileceğiniz veya başka bir resim yükleyebileceğiniz ekrana yönlendirilirsiniz. Fark etmiş olabileceğiniz gibi, arka plan olarak video bile ekleyebilirsiniz. Ve paralaks efektleri için anahtar seçenekleri de var! Şimdi, bu arka plan görüntüsünde değişiklik yapmak için başka kısayollar da var. Sağdan bir blok seçtiğinizde, Ayarlar simgesini göreceksiniz. Üzerine tıklayın ve bazı düzenleme seçeneklerini göreceksiniz. “Arka planı değiştir” i seçerseniz, yukarıda açıklandığı gibi devam etmek için “kuvvet” e yönlendirilirsiniz. Bu herkes. Oldukça kolay, değil mi? Şimdi, temanızın arka plan görüntüsü seçeneği yoksa, varsayılan WordPress düzenleyicisinde yapmanın bir yolu var.
WordPress bloğunu kullanarak bir arka plan resmi ekleyin WordPress kontrol panelinden “sayfayı” açın. Şimdi, istediğiniz sayfanın altından “Düzenle” i seçin. Arayüzü aşağıda gösterildiği gibi göreceksiniz.
Bloklara dayalı varsayılan WordPress editörü, yani web sitesinin her bölümünün bloklardan yapılmış olduğu anlamına gelir. Bu bloğa, arayüzde göreceğiniz her şey “+” işaretinden erişilebilir. Sol üstteki birine tıklayalım. Şimdi “Kapak” bloğunu seçin. Hemen sayfanızda göründüğünü göreceksiniz.
Bilgisayarınızda yerel olarak depolanan görüntüleri yükleyebilir veya medya kitaplığında zaten var olanlardan seçim yapabilirsiniz. Medya kütüphanesinden bir resim seçtim. Şimdi ona biraz metin ekleyebilirim. Düzenleme seçeneği burada oldukça sınırlıdır. Kapağı seçerseniz, görüntünüzü hizalayabileceğiniz veya tüm bloğunuzu çoğaltabileceğiniz yukarıda görünen menünün göründüğünü göreceksiniz. Bloğunuzu, yeniden kullanılabilecek, diğer tasarımlarda tekrar kullanılacak bir blok olarak saklayabilirsiniz.
WordPress eklentisinden arka plan resimleri ekleyin İşte arka plan görüntü eklentileri olarak işaretlenmiş bazı WordPress eklentileri. Basit bir tam ekran arka plan görüntü eklentisiyle oynayacağım çünkü bu eklenti şimdiye kadar en fazla kurulum ve en iyi incelemeye sahip. Şimdi, WordPress eklentilerinin nasıl yükleneceğine dair bir öğreticidir.
Bu eklenti ile görüntü bir tarayıcı ile otomatik olarak boşaltılacaktır, bu nedenle tarayıcının boyutuna bakılmaksızın, görüntü her zaman ekranı karşılayacaktır.Tek yapmanız gereken görünüşe gitmek -> tam ekran BG görüntüsü.Buradan resminizi seçin. “Kaydet seçeneğine” bastığınızda, sitenizdeki tüm parçaların arka plan olmadan bu resmi arka plan olarak alacağını göreceksiniz.Şimdi, ücretsiz versiyonda olan budur.Bu oldukça temeldir ve tamamen esnektir.Ücretli paketler aşağıdakiler gibi ek seçeneklerle donatılmıştır.
Sınırsız arka plan görüntüleri
Belirli bir yazı / sayfanın arka plan görüntüsü
Sayfada soluk geçişlerle birçok resim Ve bitirdik, WordPress sitenize arka plan resimleri eklemek için kullanabileceğiniz 3 yöntem buldunuz. Bir gün diyebilmemiz için bilmenizi istediğim bir şey daha var. Sitenize herhangi bir resim yüklemeden önce görüntünün boyutu, boyuta dikkat edin. Hepimizin megapiksel gördüğümüzü biliyorum, ama web’de bir sorun var. Yüksek çözünürlüklü görüntüler, yükleme süresini etkileyerek sitenize zarar verebilir. Uzun vadede, ek yüklemenin her saniyesi ziyaretçileri ve web sitenizin dönüşümünü kaybedebilir. Buna ek olarak, arama motorlarında derecelendirme şansınızı önemli ölçüde azaltacaksınız, çünkü yaş hızı önemli bir sıralama faktörüdür. Öte yandan, çok küçük görüntüler kullanmak kullanıcınızın deneyimine zarar verebilir. Bu yüzden ihtiyaçları karşılamalıyız. Bunu yapmanın bir yolu, doğru netliği sağlarken görüntünün boyutunu değiştirmenize yardımcı olabilecek harici bir uygulama kullanmaktır. Ancak WordPress’te, beklediğiniz gibi … eklentileri kullanarak kolayca yapabilirsiniz. Burada, Colibri’de Smush hayranıyız. Smush, görünür kalitede bir azalma olmadan görüntüleri sıkıştırır ve sıkıştırır. Pro sürümünde, görüntü dosyasının boyutunu%35’e kadar sıkıştırabilen yeni nesil görüntü biçimi, net kalite kaybetmeden görüntüleri WebP’ye dönüştürür . Ve bu bir sargı, insanlar! Bu makaleyi beğendiyseniz ve WordPress web sitelerini nasıl tasarlayacağınız hakkında daha fazla bilgi edinmek istiyorsanız, YouTube Colibri kanalına abone olduğunuzdan ve bizi Twitter ve Facebook’ta takip ettiğinizden emin olun!
Arka plan resmi nedir?
Paralaks arka planının nesi var?
WordPress sitenize arka plan resimleri nasıl eklenir
WordPress’te görüntünün boyutuna nasıl yaklaşılır
Hazır? Hadi gidelim! Arka plan resmi nedir? Arka plan görüntüleri, web sitesindeki öğelerin arka planına, e -postayla vb. Uygulanan görüntülerdir. Kahraman görüntüsü bir web sitesinin veya e -postanın ana odak noktası olsa da, daha pürüzsüz bir arka plan görüntüsü. İkinci katman olarak diğer web sitesi unsurlarını destekliyorlar: harekete geçme davetiyesi, diğer resimler, sitenin çeşitli bölümleri vb.
Arka plan görüntülerinin bazı örneklerine bakalım: IKEA IKEA web sitesinin ana sayfasında, arka plan görüntüleri ilham verici hikayelerini sunmak için kullanılır. Hikayenin başlığı ve kategorisi resmin üzerine yerleştirilmiştir. Gerçek görüntünün opaklığını azaltmak için kullanılan bir gradyan kaplama vardır. Bu yaklaşım metnin daha görünür hale getirilmesine yardımcı olur, ancak tasarımda tutarlılık yaratır, bu nedenle diğer renklerden daha belirgin renkler yoktur. Vincent, en sevdiğim filmlerden biri olan bu sevgiyle dolu. Arka plan görüntüsü, Vincent Van Gogh ve filmin arkasındaki hikayeyi sunan Güney Kore’nin arkasında yer alıyor. Arka plan görüntüleri hikayeyi güçlendiriyor ve güçlü duygular sağlıyor gibi görünüyor. Doğurgan Yemyeşil bir sitenin görünümünü gerçekten seviyorum: renkli ve ürünün kendisi gibi canlı. Şimdi, arka plan görüntüleri bu bülten kayıt sayfası örneğinde olduğu gibi desenler veya şekiller kullanabilir. Bu kalıplar potansiyel olarak sıkıcı bir şeyi neşeli bir şeye dönüştürmeyi başardı. Paralax Arka Plan Görüntüsü British Museum web sitesine bakarsanız, sayfalarında, arka arka plan içeriğinin neden düştüğü arka planda bulunan bir görüntü olduğunu göreceksiniz. Bu bir paralaks arka plan görüntüsüdür. Parallax Roll, doğru bir şekilde entegre edilmişse web sitesine başarılı bir şekilde mükemmel bir etki ekleyen web tasarım trendlerinden biridir. WordPress üzerinde bu tür efektler de alabilirsiniz, size ne kadar sonra göstereceğim. WordPress sitenize arka plan resimleri nasıl eklenir WordPress sitenize arka plan resimleri eklemenin üç ana yolu vardır. Onları kontrol edelim, tamam mı?
WordPress özelleştirici temanız aracılığıyla arka plan resimleri ekleyin
En popüler WordPress teması bu seçeneğe sahiptir. Bu örnek için Colibri temasını kullanacağım. Diğer temalar Colibri temasına benzer şekilde davranır. Seçtiğiniz tema bu özellikleri desteklemiyorsa, yöntem 2 ve 3’e geçer.
Şimdi, görünüşe giderek başlayalım -> WordPress panosundan özelleştirin. Solda tema kuyruklama seçeneğini göreceksiniz, sağda ise web sitenizin doğrudan bir incelemesi var. Tema, bir arka plan resmi yerleştirmenizi sağlar:
Astar
kolon
Block (web sitesinin tüm parçaları gibi: Hakkımda, portföy, ekip, iletişim vb.)
Bileşenler (başlık, atlıkarınca, fiyat masası, atlıkarınca, vb.)
Bunu yapabilmeniz, arka plan görüntüsünüze ihtiyaç duyduğunuz her yerde aynıdır. Hizmet web sitenizin bloğuna arka plan resimleri eklemek istediğinizi varsayalım. Bir parça seçerek başlayın. Solda, aşağıdaki gibi tüm yapılandırılmış menülerde düzenleme seçeneğini göreceksiniz: Düzen
Stil
Gelişmiş
Stil -> arka plan türüne gidin.
Bir resim seçin “. Şimdi kendinizle değiştirebileceğiniz bir resim göreceksiniz. Resmi tıkladığınızda, WordPress Medya Galerisi’nden bir resim seçebileceğiniz veya başka bir resim yükleyebileceğiniz ekrana yönlendirilirsiniz. Fark etmiş olabileceğiniz gibi, arka plan olarak video bile ekleyebilirsiniz. Ve paralaks efektleri için anahtar seçenekleri de var! Şimdi, bu arka plan görüntüsünde değişiklik yapmak için başka kısayollar da var. Sağdan bir blok seçtiğinizde, Ayarlar simgesini göreceksiniz. Üzerine tıklayın ve bazı düzenleme seçeneklerini göreceksiniz. “Arka planı değiştir” i seçerseniz, yukarıda açıklandığı gibi devam etmek için “kuvvet” e yönlendirilirsiniz. Bu herkes. Oldukça kolay, değil mi? Şimdi, temanızın arka plan görüntüsü seçeneği yoksa, varsayılan WordPress düzenleyicisinde yapmanın bir yolu var.
WordPress bloğunu kullanarak bir arka plan resmi ekleyin WordPress kontrol panelinden “sayfayı” açın. Şimdi, istediğiniz sayfanın altından “Düzenle” i seçin. Arayüzü aşağıda gösterildiği gibi göreceksiniz.
Bloklara dayalı varsayılan WordPress editörü, yani web sitesinin her bölümünün bloklardan yapılmış olduğu anlamına gelir. Bu bloğa, arayüzde göreceğiniz her şey “+” işaretinden erişilebilir. Sol üstteki birine tıklayalım. Şimdi “Kapak” bloğunu seçin. Hemen sayfanızda göründüğünü göreceksiniz.
Bilgisayarınızda yerel olarak depolanan görüntüleri yükleyebilir veya medya kitaplığında zaten var olanlardan seçim yapabilirsiniz. Medya kütüphanesinden bir resim seçtim. Şimdi ona biraz metin ekleyebilirim. Düzenleme seçeneği burada oldukça sınırlıdır. Kapağı seçerseniz, görüntünüzü hizalayabileceğiniz veya tüm bloğunuzu çoğaltabileceğiniz yukarıda görünen menünün göründüğünü göreceksiniz. Bloğunuzu, yeniden kullanılabilecek, diğer tasarımlarda tekrar kullanılacak bir blok olarak saklayabilirsiniz.
Şimdi, ekranın sağ tarafında, birkaç ek düzenleme seçeneğiniz var. Medya ayarlarında, sabit arka plan seçeneğini etkinleştirirseniz, paralaks efekti etkinleştirirsiniz. Anahtar öldüğünde, odak noktasını ayarlayabilirsiniz.
Bu odak noktasının ayarlanması, genişlik ve yükseklik dikkate alınarak yüzdeye göre de yapılabilir. Ardından, bindirme ekleyebilirsiniz. Renk ve opaklığı seçebilirsiniz. Ve biraz bitmişsin.WordPress eklentisinden arka plan resimleri ekleyin İşte arka plan görüntü eklentileri olarak işaretlenmiş bazı WordPress eklentileri. Basit bir tam ekran arka plan görüntü eklentisiyle oynayacağım çünkü bu eklenti şimdiye kadar en fazla kurulum ve en iyi incelemeye sahip. Şimdi, WordPress eklentilerinin nasıl yükleneceğine dair bir öğreticidir.
Bu eklenti ile görüntü bir tarayıcı ile otomatik olarak boşaltılacaktır, bu nedenle tarayıcının boyutuna bakılmaksızın, görüntü her zaman ekranı karşılayacaktır.Tek yapmanız gereken görünüşe gitmek -> tam ekran BG görüntüsü.Buradan resminizi seçin. “Kaydet seçeneğine” bastığınızda, sitenizdeki tüm parçaların arka plan olmadan bu resmi arka plan olarak alacağını göreceksiniz.Şimdi, ücretsiz versiyonda olan budur.Bu oldukça temeldir ve tamamen esnektir.Ücretli paketler aşağıdakiler gibi ek seçeneklerle donatılmıştır.
Sınırsız arka plan görüntüleri
Belirli bir yazı / sayfanın arka plan görüntüsü
Sayfada soluk geçişlerle birçok resim Ve bitirdik, WordPress sitenize arka plan resimleri eklemek için kullanabileceğiniz 3 yöntem buldunuz. Bir gün diyebilmemiz için bilmenizi istediğim bir şey daha var. Sitenize herhangi bir resim yüklemeden önce görüntünün boyutu, boyuta dikkat edin. Hepimizin megapiksel gördüğümüzü biliyorum, ama web’de bir sorun var. Yüksek çözünürlüklü görüntüler, yükleme süresini etkileyerek sitenize zarar verebilir. Uzun vadede, ek yüklemenin her saniyesi ziyaretçileri ve web sitenizin dönüşümünü kaybedebilir. Buna ek olarak, arama motorlarında derecelendirme şansınızı önemli ölçüde azaltacaksınız, çünkü yaş hızı önemli bir sıralama faktörüdür. Öte yandan, çok küçük görüntüler kullanmak kullanıcınızın deneyimine zarar verebilir. Bu yüzden ihtiyaçları karşılamalıyız. Bunu yapmanın bir yolu, doğru netliği sağlarken görüntünün boyutunu değiştirmenize yardımcı olabilecek harici bir uygulama kullanmaktır. Ancak WordPress’te, beklediğiniz gibi … eklentileri kullanarak kolayca yapabilirsiniz. Burada, Colibri’de Smush hayranıyız. Smush, görünür kalitede bir azalma olmadan görüntüleri sıkıştırır ve sıkıştırır. Pro sürümünde, görüntü dosyasının boyutunu%35’e kadar sıkıştırabilen yeni nesil görüntü biçimi, net kalite kaybetmeden görüntüleri WebP’ye dönüştürür . Ve bu bir sargı, insanlar! Bu makaleyi beğendiyseniz ve WordPress web sitelerini nasıl tasarlayacağınız hakkında daha fazla bilgi edinmek istiyorsanız, YouTube Colibri kanalına abone olduğunuzdan ve bizi Twitter ve Facebook’ta takip ettiğinizden emin olun!
