Arka plan klibini kullanarak Divi'de CSS Metin Arka Planları Nasıl Tasarlanır

CSS ile metin arka plan tasarımları oluşturmak, herhangi bir web sitesine çarpıcı bir tasarım öğesi eklemenin harika bir yoludur. Bu özel metin arka planlarını oluşturmanın anahtarı, arka plan klibi CSS özelliğini bir metin değeriyle kullanmaktır. Bu yöntem son zamanlarda popülerlik ve tarayıcı desteği kazandığı için Divi'de nasıl kullanılacağını size göstereceğiz. Bu, Divi'nin diğer tüm harika tasarım özelliklerine ek olarak metin öğelerini (H1, H2, p, vb. gibi) hedefleyen ek bir tasarım katmanı açar.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Burada, arka plan klibi kullanılarak başlık metnine eklenen doğrusal gradyan arka planının bir örneği verilmiştir.

Burada, başlık metnine eklenen bir görüntü arka planı ve arka plan klibi kullanılarak paragraf metnine eklenen doğrusal gradyan arka planının bir örneği verilmiştir.

Ve işte bu konsepti de gösteren bir kod kalemi.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Metin ile arka plan klibi nasıl kullanılır

Divi'de örneklerimizi oluşturmaya başlamadan önce, CSS'de özel bir metin arka planı çıkarmak için gereken CSS kodunu daha iyi anlayalım.

Diyelim ki buna benzeyen bir H2 başlık elemanımız var.

İlk olarak, kullanmak istediğiniz arka planı oluşturmanız gerekir. Bu örnekte, lineer-gradient kullanarak h2 elementimize bir gradyan arka planı ekleyeceğiz.

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);


}

Ardından, öğenin arka planını yalnızca metnin arkasında göstermek için gerekli “-webkit” önek sürümüyle birlikte background-clip: text'i ekleriz.

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip: text;
  -webkit-background-clip: text;

}

Ardından, metnin rengini geçersiz kılmak ve şeffaf hale getirmek için -webkit-text-fill-color: Transparent ekleriz.

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Ardından, doğrusal gradyanları daha tarayıcı dostu hale getirmek için gereken tarayıcı öneklerini ekliyoruz:

h2 {
  background: -webkit-linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background: -moz-linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Gördüğünüz gibi, bu örnek bir degrade oluşturmak için üç renk kullanır, ancak istediğiniz kadar kolayca ekleyebilirsiniz.

Gerçekten hepsi bu kadar. Elbette, istediğiniz gradyan arka planı türünü tasarlamak için doğrusal gradyan işlevinin nasıl kullanılacağını daha iyi anlamanıza yardımcı olur.

Daha fazla bilgi için doğrusal gradyan işleviyle ilgili belgelere bakın. Bazı eğlenceli seçenekleri keşfetmek için bu CSS Metin Gradyan Üreticisini de keşfedebilirsiniz.

Ve bir degrade kullanmak istemiyorsanız, gerçek bir görüntü arka planı kullanabilirsiniz. Kod şöyle bir şeye benzeyecektir:

h2 {
  background: center / cover url("add image URL");
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Artık CSS'yi daha iyi anladığımıza göre, öğreticiye geçelim.

Divi'de arka plan klibiyle Metin Arka Planları Tasarlama

Bölüm 1: Bir H1 Başlığına Degrade Arka Plan Eklemek için arka plan klibini kullanma

İlk örneğimiz için, bir H1 başlığına degrade bir arka plan ekleyeceğiz.

Bölüm, Satır ve Sütun

İlk olarak, bölümün ayarlarını açın ve bir arka plan rengi ekleyin:

• Arka Plan Rengi: #153243

Bölümün içine tek sütunlu bir satır ekleyin.

H1 Başlıklı Metin Modülü

H1 başlığını eklemek için satırın sütununa yeni bir metin modülü ekleyin.

Metin ayarlarını açın ve aşağıdaki H2 başlık HTML'sini gövde içeriğinin metin sekmesinin altına yapıştırın.

<h1>Creating CSS Text Backgrounds in Divi</h1>

Tasarım sekmesi altında H1 tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Başlık Yazı Tipi: Montserrat
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Stili: TT
• Başlık Metni Hizalama: Orta
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 100px (masaüstü), 55px (tablet), 28px (telefon)
• Yön Çizgisi Yüksekliği: 1.2em

NOT: Başlık metni rengi, özel CSS tarafından geçersiz kılınacaktır, ancak her ihtimale karşı yedek olarak bir tanesinin seçilmesi güzel.

Gelişmiş sekmesinin altına aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: metin-arka plan-klip

Bu sınıfı daha sonra özel CSS kodumuzda seçici olarak kullanacağız.

CSS Kodu

H1'e degrade bir arka plan vermek üzere CSS kodunu eklemek için metin modülünün altına yeni bir kod modülü ekleyin.

Ardından, kodu gerekli stil etiketlerine sardığınızdan emin olarak aşağıdaki CSS'yi Kod kutusunun içine yapıştırın:

.text-background-clip h1 {
  background: -webkit-linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background: -moz-linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background: linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

NOT: Aşağıdaki örneklerimize ek CSS eklemek için aynı kod modülüne geri döneceğiz.

Sonuç

İşte sonuç. Gördüğünüz gibi, degrade arka planı kırpılmış, böylece yalnızca H1 başlık öğesi aracılığıyla gösterilmiş.

Bölüm 1: Bir H2 Başlığına Görüntü Arka Planı Eklemek için arka plan klibini kullanma

Metin arka planlarımızı biçimlendirmek için degrade arka planlarla sınırlı değiliz. Metin arka planlarımızı arka plan resimleriyle de biçimlendirebiliriz.

Bu sonraki örnekte, bir H2 başlığına bir görüntü arka planı eklemek için aynı yöntemi ("arka plan klibi" kullanarak) kullanacağız.

Bölüm, Satır ve Sütun

Başlamak için, ilk örneğimizin mevcut bölümünün altında yeni bir normal bölüm oluşturun.

Ardından bölüme tek sütunlu bir satır ekleyin.

Bölüm ayarlarını açın ve bölüme koyu bir arka plan görüntüsü ekleyin.

Daha sonra yukarıdaki ilk örneğimizde bulunan mevcut metin modülünü kopyalayın ve yeni bölümümüzün sütununa yapıştırın.

Yinelenen metin modülü için metin ayarlarını açın ve HTML'yi güncelleyerek H1 başlığını H2 başlığına değiştirin:

<h2>Creating CSS Text Backgrounds in Divi</h2>

Tasarım sekmesi altında, H1 sekmesine sağ tıklayın ve başlık metni H1 stillerini kopyalayın. Ardından H2 sekmesine sağ tıklayın ve H2 başlığının aynı stile sahip olması için başlık metni H1 stillerini geçin.

CSS Kodu

H2'ye bir görüntü arka planı vermesi gereken CSS kodunu eklemek için, daha önce oluşturduğumuz mevcut kod modülünü açın ve aşağıdaki CSS'yi ilk CSS parçacığının altına yapıştırın:

.text-background-clip h2 {
  background: center / cover url("https://jason.sandbox.etdevs.com/design/wp-content/uploads/sites/4/2021/04/gradient-background-img.jpg");
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

Bu, H2 öğesinin arkasına bir arka plan görüntüsü ekleyecektir. Arka plan CSS kısayolu, arka plan konumu için "orta", arka plan boyutu için "kapak" ve gerçek görüntünün URL'sini içerir.

Kendi sitenizdeki bir resmin URL'sini bulmak için WordPress medya galerinizi kolayca açabilir, resmi seçebilir ve dosya URL'sini kopyalayabilirsiniz.

Sonuç

Bölüm 3: Paragraf Metnine Degrade Arka Plan Eklemek için arka plan klibini kullanma

Son örneğimiz için, paragraf metnine degrade bir arka plan eklemek için arka plan klibini kullanacağız. Süreç aynı. Tek fark, paragraf metnimiz için p etiketini hedefleyecek olan CSS kodu olacaktır.

Metin Modülü Ekle

Bölüm 2'de tasarladığımız aynı bölümde bir önceki metin modülünün altına yeni bir metin modülü ekleyin.

Gövde içeriğini aşağıdaki paragraf metni HTML'si ile güncelleyin:

<p>Cras luctus ornare est, sed pharetra mauris vestibulum in. In nulla sem. Consectetur et tristique non, pulvinar pretium ante. Cras aliquam risus ullamcorper odio interdum facilisis. Vestibulum vitae augue tempor, commodo sapien ut, condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras luctus ornare est, sed pharetra mauris vestibulum in.</p>

NOT: Metnin p etiketi ile sarıldığından emin olun çünkü bu, özel CSS kodumuzda hedefleyeceğimiz seçici olacaktır.

Tasarım sekmesi altında aşağıdaki metin stillerini güncelleyin:

• Metin Metin Rengi: #ffffff
• Metin Metin Boyutu: 16px
• Metin Satır Yüksekliği: 2em
• Maksimum Genişlik: 500 piksel
• Modül Hizalaması: Merkez

Gelişmiş sekmesinin altına, daha önce kullanılan CSS Sınıfının aynısını ekleyin:

• CSS Sınıfı: metin-arka plan-klip

CSS Kodu

Son olarak, p etiketini hedefleyen ve background-clip:text kullanarak metne degrade bir arka plan ekleyen CSS kodunu yapıştırın.

.text-background-clip p {
  background: -webkit-linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background: -moz-linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background: linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Sonuç

İşte paragraf metni arka plan tasarımının sonucu.

Nihai sonuçlar

Şimdi tasarımlarımızın nihai sonuçlarına bir göz atalım!

Burada, arka plan klibi kullanılarak başlık metnine eklenen doğrusal gradyan arka planının bir örneği verilmiştir.

Burada, başlık metnine eklenen bir görüntü arka planı ve arka plan klibi kullanılarak paragraf metnine eklenen doğrusal gradyan arka planının bir örneği verilmiştir.

Son düşünceler

Sitenize özel metin arka planları ekleme yeteneği, kullanışlı bir tasarım aracı olabilir. Eğer background-klip ile birlikte arka planı CSS özelliğini nasıl kullanılacağına dair daha iyi anlamak Ve eğer: Metin, olasılıklar sonsuzdur. Kendi CSS'nizi oluşturmak için biraz yardıma ihtiyacınız varsa, süreci hızlandırmak için bu CSS Metin Gradyan Oluşturucu'yu da keşfedebilirsiniz.

Ayrıca, tüm özel CSS olmadan benzer bir efekt istiyorsanız, Divi'nin karışım modu seçenekleriyle degrade metin renginin nasıl uygulanacağını kontrol edin.

Yorumlarda sizden haber bekliyorum.

Şerefe!