WordPress'te Bir Görüntü Nasıl Bindirilir

Web sitenizi olağanüstü hale getirme konusunda hevesliyseniz, onu güzelleştirmek için her zaman kıçınızı çalıştıracaksınız. Sitenizi bir ilham perisi haline getirmenin milyonlarca yolu var ve bunlardan bir tanesi bugünkü yazımızda bahsedilecek: bir resmin üst üste bindirilmesi .

Hala ne olduğunu merak ediyor musun? Sadece yavaşla ve seni dışarı çıkarmamıza izin ver!

Kaplama Nedir?

Gördüğünüz gibi, başlık olarak metin ve bindirme içeren bir resim kullandım; bu, basit bir metin başlığı yazmaktan büyük bir fark yarattı. Normale göre çok daha şık ve çekici görünüyor değil mi?

Daha da önemlisi, görüntü üzerindeki kaplama, arka plan resmini görünür tutarken metnin vurgulanmasına yardımcı olur. Bunun gibi yazılara/sayfalara kolaylıkla metin ve bindirme içeren bir resim ekleyebilir ve farklı amaçlar için kullanabilirsiniz. Bu yazıda, bunu basit adımlarla nasıl yapacağınızı göstereceğiz.

Henüz heyecanlanmadın mı? Başlayalım!

WordPress'te Bir Görüntü Nasıl Bindirilir

WordPress'te bir görüntünün üzerine bindirmeyi deneyebileceğiniz iki yöntem vardır: Gutenberg'in kapak bloğunu kullanmak ve CSS kullanmak. Gutenberg'i kullanmak, boş bir sayfadan bile bindirmeli bir görüntü içeren bir yazı/sayfa oluşturmanıza yardımcı olurken, CSS kullanmak, önceden oluşturulmuş bir yazı/sayfadaki görüntüleri hızla özelleştirmenize yardımcı olur.

Bu iki yöntemin her ikisi de bazı açılardan kullanımı kolaydır ve bunları tek tek nasıl kullanacağınızı size göstereceğiz.

Yöntem 1: Gutenberg'in Kapak Bloğunun Kullanılması

Gutenberg'in sayfa düzenleyicisine gidin.

Adım 1: Kapak Bloğu Kullanarak Bir Resim Ekleyin.

Blok ekle'ye tıklayın ve blok tipini Kapak olarak seçin.

Ardından, bu kapak bloğunda görüntülenecek bir arka plan resmi seçin. Bir resim yükleyebilir veya kitaplığınızdan bir resim seçebilirsiniz.

Gerekirse daha önce eklediğiniz bir resmi kapak resmine de değiştirebilirsiniz. Resmi tıklayın, Blok stilini veya türünü değiştir'i seçin ve Kapak'ı seçin:

Benim durumumda, bu bereyi arka plan olarak seçeceğim ve üzerine rastgele bir metin yazacağım.

Ayrıca aşağıdaki ayarlarda resmimin genişliğini ayarlayabilirim. Sadece merkeze hizalayacağım.

Artık kapak bloğum bir arka plan resmi ve metinle hazır. Varsayılan olarak, Kapak bloğu zaten siyah renkli bir kaplamaya sahiptir, bu nedenle sonraki bölümde onu nasıl düzenleyebileceğimizi göreceğiz:

2. Adım: Kapak bloğu yerleşimini özelleştirin

Ardından, bir bindirme yapmak için blok ayarlarına devam edeceksiniz.

Bloğu tıklayın > Seçenekler düğmesini tıklayın (üç noktalı düğme olarak görüntüleyin) > Daha fazla ayar göster öğesini seçin.

Blok ayarları menüsü artık ekranınızın sağ tarafında hazır olmalıdır. Yerleşim bölümüne gidin.

Kapak resminizi kaplamak için Düz ve Degrade olmak üzere iki renk seçeneği sunar:

Bu seçeneklerin her ikisini de deneyeceğiz. İlk olarak, Düz renk kaplamasını deneyelim.

Düz Renk Yerleşimi

Şimdi yapabilirsin:

• Önerilen menüden bir renk seçin;
• Özel bir renk seçin. Paletten bir renk seçebilir veya bir renk kodu ekleyebilirsiniz. Özel renk aşağıdaki gibi görüntülenir.

Kaplamam için tatlı bir pembe renk seçtim. Ayrıca, bindirmenin opaklığını (saydamlık seviyesini) de değiştirebilirim:

Opaklık oranı %30 ila %60 arası uygun bir değerdir. Opaklığı önerilen oranın altına veya üstüne ayarlarsanız, kaplama neredeyse görünmez veya arka planı göremeyecek kadar kalın olabilir. Opaklık oranını varsayılan olarak %50'de tutacağım.

Burada her şey hazır! Kapak resminize bu şekilde düz bir renk kaplaması ekleyebilirsiniz.

Şimdi degrade renk seçeneğine geçelim.

Degrade Renk Yerleşimi

Degrade renk, yukarıda bahsedildiği gibi, seçilen en az iki rengin bir şemasıdır. Ya da basitçe söylemek gerekirse, kaplamanın rengi sırasıyla ve kademeli olarak birinciden ikinci seçilen renge (vb.) değişecektir.

Daha iyi anlamak için nasıl bir gradyan kaplaması yaptığımı görelim.

İlk olarak, renk modunu Katı'dan Gradyan'a değiştirdim. Ayrıca öneri menüsünden bir degrade renk seti seçtim. İşte böyle görünüyor:

Gördüğünüz gibi bindirme 3 kontrol noktasından oluşuyor. Her biri düz bir renk taşır ve kaplamanın renk şemasını ayarlamak için bu kontrol noktalarını hareket ettirebilirsiniz.

Degrade rengi seçildiğinde varsayılan renk düzeni dengelenir. Biraz ayarlamaya çalışacağım ve bu şekilde değişiyor:

Yapabileceğiniz bir diğer ayar da renk şemasının türüdür. Doğrusal ve Radyal tip arasında seçim yapabilirsiniz. Doğrusal tip ile bindirmenin yönünü de seçebilirsiniz.

Bu degrade renk seçeneğinde ustalaşmak için daha iyi bir sanatsal anlayışa ihtiyacınız olacak ve ayrıca kaplama için en iyi kombinasyonu oluşturmak için renkleri nasıl karıştırıp eşleştireceğinizi öğreneceksiniz.

Yöntem 2: CSS'yi Kullanma

Klasik Düzenleyici kullanarak bir görüntüye bindirme eklemek istiyorsanız, CSS kullanmanız gerekir. Biraz CSS eklemeniz gerekiyor. Görünüm > Özelleştir > Ek CSS'ye gidin .

Degrade kaplama için

Degrade kaplama için bu kodu ekleyin:

 .background-gradient {
    pozisyon: göreceli;
}
.background-gradient::önce {
    içerik: '';
    arka plan: doğrusal gradyan(135deg,#0693e3,#9b51e0);
    konum: mutlak;
    üst: 0;
    sol: 0;
    alt: 0;
    sağ: 0;
    z-endeksi: 1;
    opaklık: .5;
}

Katı kaplama için:

Katı bindirme için bu kodu ekleyin:

 .background-opacity {
    pozisyon: göreceli;
}
.background-opacity:önce {
    içerik: '';
    konum: mutlak;
    üst: 0;
    sol: 0;
    alt: 0;
    sağ: 0;
    z-endeksi: 1;
    opaklık: .5;
    arka plan rengi: #000;
}

Not: Bu kod, görüntüdeki metni değil, yalnızca kaplamayı eklemenize yardımcı olacaktır.

Farklı bindirme türleriyle çok sayıda görüntü eklemek istiyorsanız her ikisini de ekleyebilirsiniz. Kaplamayı Düz veya Degrade renk olarak tanımlamak için Metin düzenleyiciye gidin ve kaplamak istediğiniz görüntüye bir sınıf ekleyin:

• Katı: <div class="background-opacity"> … </div>
• Gradyan: <div class="background-gradient is-style-default"> … </div>

Örneğin:

Ben böyle hallederim!

Karar

Görsellere bindirme eklemek, gönderilerinizi/sayfalarınızı süslemenize ve ziyaretçiler üzerinde daha iyi bir izlenim bırakmanıza gerçekten yardımcı olur. Mükemmel bir kaplamanın nasıl oluşturulacağını araştırmaya değer, bu yüzden hemen üzerinde çalışmaya başlamanızı şiddetle tavsiye ederim. Ayrıca kaydırıcılar, pop-up banner, video arka planı ile web sitenizi daha çekici hale getirebilirsiniz… Talimatımın sizin için yeterince açık olduğunu umuyorum ve varsa soru ve yorumlarınızı aşağıya bırakmaktan çekinmeyin. Hoşçakal!