WordPress’te Görüntü Nasıl Kabuk Yapılır
Web sitenizi olağanüstü hale getirme konusunda hevesliyseniz, her zaman güzelleştirmek için çok çalışacaksınız. Sitenizin ilham vermesi için milyonlarca yol var ve bunlardan biri bugün yayınımızda bahsedilecek: Overlay Pictures.
İçindekiler tablosunu gizle
1. Kaplama nedir?
2. WordPress’te Görüntü Nasıl Kabuk Yapılır
2.1. Yöntem 1: Gutenberg kapak bloğunu kullanma
2.2. Yöntem 2: CSS kullanarak
3. Karar
Hala bu ne? Yavaşlayın ve seni dışarı çıkaralım! Kaplama nedir?
Gördüğünüz gibi, başlık olarak metin ve kaplamalı görüntüleri kullanıyorum; Bu da basit metin başlıkları yazmaktan büyük bir fark yaratıyor. Her zamana kıyasla çok daha şık ve çekici görünüyor, değil mi?
Daha da önemlisi, resimdeki kaplama, arka plan görüntüsünü görünür tutarken metnin vurgulanmasına yardımcı olur. Bunun gibi yayınlara/sayfalara metin ve yer paylaşımı içeren görüntüler ekleyebilir ve bunları farklı amaçlarla kullanabilirsiniz. Bu yazıda, bunu basit adımlarla nasıl yapacağınızı göstereceğiz. Henüz heyecanlanmadın mı? Başlayalım! Görüntüyü WordPress’te Kabuk Nasıl Kabul Edilir, görüntüyü WordPress’te kaplamaya çalışabileceğiniz iki yöntem vardır: Gutenberg kapak bloğunu kullanarak ve CSS kullanarak. Gutenberg kullanmak, boş çarşaflardan bile kaplı görüntüler içeren yayınlar/sayfalar yapmanıza yardımcı olsa da, CSS kullanmak önceki yayınlarda/sayfalarda görüntüleri hızlı bir şekilde ayarlamanıza yardımcı olacaktır.
Bu yöntemlerin her ikisinin de kullanımı kolaydır ve size tek tek nasıl kullanılacağını göstereceğiz. Yöntem 1: Gutenberg kapak bloğunu kullanarak Gutenberg sayfa düzenleyicisini açın. Adım 1: Görüntüyü bir kapak bloğu kullanarak ekleyin. Blok Ekle’yi tıklayın ve kapak olarak blok türünü seçin. Ardından, kapak bloğunda görüntülenecek arka plan görüntüsünü seçin. Kütüphanenizden resim yükleyebilir veya resimler seçebilirsiniz.
Daha da önemlisi, resimdeki kaplama, arka plan görüntüsünü görünür tutarken metnin vurgulanmasına yardımcı olur. Bunun gibi yayınlara/sayfalara metin ve yer paylaşımı içeren görüntüler ekleyebilir ve bunları farklı amaçlarla kullanabilirsiniz. Bu yazıda, bunu basit adımlarla nasıl yapacağınızı göstereceğiz. Henüz heyecanlanmadın mı? Başlayalım! Görüntüyü WordPress’te Kabuk Nasıl Kabul Edilir, görüntüyü WordPress’te kaplamaya çalışabileceğiniz iki yöntem vardır: Gutenberg kapak bloğunu kullanarak ve CSS kullanarak. Gutenberg kullanmak, boş çarşaflardan bile kaplı görüntüler içeren yayınlar/sayfalar yapmanıza yardımcı olsa da, CSS kullanmak önceki yayınlarda/sayfalarda görüntüleri hızlı bir şekilde ayarlamanıza yardımcı olacaktır.
Bu yöntemlerin her ikisinin de kullanımı kolaydır ve size tek tek nasıl kullanılacağını göstereceğiz. Yöntem 1: Gutenberg kapak bloğunu kullanarak Gutenberg sayfa düzenleyicisini açın. Adım 1: Görüntüyü bir kapak bloğu kullanarak ekleyin. Blok Ekle’yi tıklayın ve kapak olarak blok türünü seçin. Ardından, kapak bloğunda görüntülenecek arka plan görüntüsünü seçin. Kütüphanenizden resim yükleyebilir veya resimler seçebilirsiniz.
Daha önce eklediğiniz görüntüyü gerekirse bir kapak resmine de değiştirebilirsiniz. Resmi tıklayın, blok stilini veya türünü değiştirin ve kapağı seçin:
Benim durumumda, bu bere arka plan olarak seçeceğim ve üzerine bazı rastgele metinler yazacağım. Ayrıca, görüntü genişliğimi aşağıdaki ayarlarda ayarlayabilirim. Sadece ortada uyumlu olacağım.
Şimdi kapak bloğum arka plan ve metin çizimleri ile hazır. Varsayılan olarak, kapak bloğunun zaten siyah bir kaplama vardır, bu nedenle bir sonraki bölümde nasıl düzenleyebileceğimizi göreceğiz:
Adım 2: Kapak bloğunun bir sonraki kaplamasını ayarlayın, kaplama yapmak için blok ayarına devam edersiniz. Blok’a tıklayın> Seçenek düğmesini tıklayın (Üç Nokta düğmesi olarak görüntülenir)> Daha fazla ayar görüntüleyin.
Engelleme menüsü artık ekranınızın sağına hazır olmalıdır. Streçe git.
Bu size kapak resminizi kaplamak için iki düz renk ve gradyan seçeneği sunar:
Bu iki seçeneği deneyeceğiz. İlk olarak, düz bir renk deneyelim. Düz renkli streç
Şimdi yapabilirsin:
Önerilen menüden rengi seçin;
Özel bir renk seçin. Palet üzerindeki rengi seçebilir veya bir renk kodu ekleyebilirsiniz. Özel renkler aşağıdaki gibi gösterilmiştir. Sadece bindirme için tatlı bir pembe renk seçtim. Ayrıca, opaklığı (şeffaflık seviyesi) kaplamadan da değiştirebilirim:
% 30 ila 60 opaklık seviyesi doğru değerdir. Opaklığı önerilen seviyenin altına veya üstüne ayarlarsanız, bindirme arka planı görmek için neredeyse görünmez veya çok kalın olabilir. Opaklık seviyesini varsayılan olarak% 50 olarak koruyacağım. Her şey burada düzenlenmiştir! Kapak görüntüsünüze düz renkli bir kaplama eklersiniz. Şimdi gradyan renk seçeneğine geçelim. Yukarıda belirtildiği gibi gradyan renklerinin gradyan renk gerilmesi, seçilen en az iki renk şemasıdır. Ya da basitçe, her bindirme rengi ve kademeli olarak birinci renkten ikinci renge (ve benzeri) değişecektir.
Özel bir renk seçin. Palet üzerindeki rengi seçebilir veya bir renk kodu ekleyebilirsiniz. Özel renkler aşağıdaki gibi gösterilmiştir. Sadece bindirme için tatlı bir pembe renk seçtim. Ayrıca, opaklığı (şeffaflık seviyesi) kaplamadan da değiştirebilirim:
% 30 ila 60 opaklık seviyesi doğru değerdir. Opaklığı önerilen seviyenin altına veya üstüne ayarlarsanız, bindirme arka planı görmek için neredeyse görünmez veya çok kalın olabilir. Opaklık seviyesini varsayılan olarak% 50 olarak koruyacağım. Her şey burada düzenlenmiştir! Kapak görüntüsünüze düz renkli bir kaplama eklersiniz. Şimdi gradyan renk seçeneğine geçelim. Yukarıda belirtildiği gibi gradyan renklerinin gradyan renk gerilmesi, seçilen en az iki renk şemasıdır. Ya da basitçe, her bindirme rengi ve kademeli olarak birinci renkten ikinci renge (ve benzeri) değişecektir.
Bakalım nasıl daha iyi anlamak için bir bindirme gradyanı yaptığımı görelim. İlk olarak, renk modunu katıdan gradyana değiştiriyorum. Ayrıca, öneri menüsünden bir dizi gradyan rengi seçtim. Bu görünüm:
Gördüğünüz gibi, kaplama 3 kontrol noktasından oluşur. Her biri düz bir renk taşır ve kaplama renk şemasını ayarlamak için bu kontrol noktasını hareket ettirebilirsiniz. Dengeli bir gradyan rengi seçerken varsayılan renk ayarları. Biraz ayarlamaya çalışacağım ve bu değişiklik:
Yapabileceğiniz bir başka ayar da renk şemasıdır. Doğrusal ve radyal tipler arasında seçim yapabilirsiniz. Doğrusal bir tiple, bindirmenin yönünü de seçebilirsiniz.
Yapabileceğiniz bir başka ayar da renk şemasıdır. Doğrusal ve radyal tipler arasında seçim yapabilirsiniz. Doğrusal bir tiple, bindirmenin yönünü de seçebilirsiniz.
Derece renkleri seçiminde ustalaşmak için, daha iyi bir sanatsal tada ihtiyacınız olacak ve aynı zamanda kaplama için en iyi kombinasyonu yapmak için renkleri nasıl karıştıracağınızı ve eşleştireceğinizi öğreneceksiniz. Yöntem 2: Klasik bir editör kullanarak görüntülere bindirme eklemek istiyorsanız CSS’yi kullanma, CSS gereklidir. Biraz CSS eklemeniz gerekiyor. Açık görünüm> Ayar> Ek CSS. Gradent Streç için bu kodu bir gradyan için ekleyin: .background-gradyent {konum: relative;
}
.Background-gradient :: Önce {
İçindekiler: ”;
Arka plan: doğrusal gradyan (135deg,#0693E3,#9B51E0);
Pozisyon: Mutlak;
Yukarıda: 0;
Sol: 0;
Aşağıda: 0;
Sağ: 0;
İndex-z: 1;
Opaklık: .5;
}
Katı katmanlar için: Bu kodu katı bindirme için ekleyin:
.Background-opacity {
Pozisyon: göreceli;
}
.Background-opacity: Önce {
İçindekiler: ”;
Pozisyon: Mutlak;
Yukarıda: 0;
Sol: 0;
Aşağıda: 0;
Sağ: 0;
İndex-z: 1;
Opaklık: .5;
Renkler: #000;
}
Not: Bu kod, görüntüye metin değil, yalnızca kaplama eklemenize yardımcı olacaktır. Çeşitli kaplama türlerine sahip birçok resim eklemek istiyorsanız her ikisini de ekleyebilirsiniz. Kaplamayı katı veya gradyan renk olarak belirlemek için metin düzenleyicisini açın ve sınıfı kaplamak istediğiniz görüntüye ekleyin:
Solid:
…
Gradient:
…
Örnek olarak:
.Background-gradient :: Önce {
İçindekiler: ”;
Arka plan: doğrusal gradyan (135deg,#0693E3,#9B51E0);
Pozisyon: Mutlak;
Yukarıda: 0;
Sol: 0;
Aşağıda: 0;
Sağ: 0;
İndex-z: 1;
Opaklık: .5;
}
Katı katmanlar için: Bu kodu katı bindirme için ekleyin:
.Background-opacity {
Pozisyon: göreceli;
}
.Background-opacity: Önce {
İçindekiler: ”;
Pozisyon: Mutlak;
Yukarıda: 0;
Sol: 0;
Aşağıda: 0;
Sağ: 0;
İndex-z: 1;
Opaklık: .5;
Renkler: #000;
}
Not: Bu kod, görüntüye metin değil, yalnızca kaplama eklemenize yardımcı olacaktır. Çeşitli kaplama türlerine sahip birçok resim eklemek istiyorsanız her ikisini de ekleyebilirsiniz. Kaplamayı katı veya gradyan renk olarak belirlemek için metin düzenleyicisini açın ve sınıfı kaplamak istediğiniz görüntüye ekleyin:
Solid:
…
Gradient:
…
Örnek olarak: