Divi Kullanarak Yaratıcı Arka Planlar İçin Metni Resimlerle Doldurma

Metni resimlerle doldurmak, web sitenize modern bir tasarım eklemenin harika bir yoludur. Divi'nin harmanlama modları ile istediğiniz herhangi bir metin üzerinden arka plan resimlerini gösterebilirsiniz. Ayrıca Divi Builder'daki özel kenar boşluklarını kullanarak, içeriğiniz için bir arka plan görevi görecek şekilde görüntü dolu metni konumlandırabilirsiniz.

Bu eğitimde, Divi kullanarak renkli görüntü dolu metin arka planları eklemek için ekran karışım modunu nasıl kullanacağınızı göstereceğim. Ayrıca, arka plan metninizin tasarımına uyan ayırıcıları ve ayırıcılar arasında sorunsuz geçiş yapan bölümleri nasıl ekleyeceğinizi de göstereceğim.

Başlayalım.

Gizlice Bakış

İşte bugün oluşturacağımız şeye bir göz atalım.

Hazırlanmak

Bu öğreticiyi tamamlamanıza yardımcı olmak için aşağıdakilere ihtiyacınız olacak:

• Divi Teması (yüklü, aktif ve güncellenmiş)
• Her metin arka planı için kullanılacak 4 Resim. En iyi sonuçlar için, çok dokulu ve en az 1920×1080 boyutunda daha koyu görüntüler kullanmanızı öneririm.
• Görsel Oluşturucu Izgara Etkileşim Modu – Modülleri üst üste bindireceğimiz ve daha karmaşık bir düzen oluşturacağımız için, görsel oluşturucu içinde çakışan öğelerin üzerine gelmeye çalışırken karışıklığı önlemek için ızgara etkileşim modunu kullanmanızı öneririm.

Divi Kullanarak Yaratıcı Arka Planlar İçin Metni Resimlerle Doldurma

Youtube Kanalımıza Abone Olun

İlk Bölümü Oluştur

Yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. Ardından, tek sütunlu bir satır içeren normal bir bölüm ekleyin (veya varsayılan olarak zaten orada olanı kullanın) ve satır sütununa bir metin modülü ekleyin.

Metin Modülü Ayarlarını Güncelleyin

Metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:

İçerik…

İçerik: 01 (bu, arka planımız için kullanılan sayı olacaktır)
Arka Plan Rengi: #ffffff

Tasarım…

Metin Yazı Tipi: Poppins
Metin Yazı Tipi Ağırlığı: Ağır
Metin Metin Boyutu: 40em (masaüstü), 25em (tablet), 15em (akıllı telefon)
Metin Metin Rengi: rgba(131,0,233.0,65)
Metin Yönü: Merkez
Özel Dolgu: 288 piksel üst, 288 piksel alt
Kenar Genişliği: 1px
Kenar Rengi: #ffffff
Karışım Modu: Ekran

Not: Beyaz arka plan ve ekran karışım modu, metin modülü aracılığıyla satır arka planını (henüz oluşturulmamış) görmenin etkisini yaratan şeydir.

Ardından, geçerli satırın altına yeni bir tek sütunlu satır ekleyin ve ardından buna bir eylem çağrısı modülü ekleyin.

Harekete Geçirici Mesaj Modülü Ayarlarını Güncelleyin

Harekete Geçirici Mesaj modülünü aşağıdakilerle güncelleyin:

İçerik…

Başlık: Keşfet
Düğme Metni: Daha Fazla Bilgi Edinin
Düğme URL'si: #
Arka Plan Rengi: rgba(255,255,255,0) (bu şeffaftır)

Tasarım…

Metin Rengi: Koyu
Metin Yönü: Sol
Başlık Yazı Tipi: Poppins
Başlık Yazı Tipi Ağırlığı: Ağır
Başlık Yazı Tipi Stili: TT
Başlık Metin Boyutu: 70px (masaüstü), 50px (tablet), 40px (akıllı telefon)
Başlık Metin Rengi: rgba(0,0,0,0.62)
Başlık Harf Aralığı: 4px

Gövde Yazı Tipi: Poppins
Gövde Yazı Tipi Ağırlığı: Hafif
Gövde Metni Boyutu: 32px (masaüstü), 24px (tablet)
Gövde Metni Rengi: #333333
Gövde Çizgisi Yüksekliği: 1.3em

Düğme için Özel Stilleri Kullan: EVET
Düğme Metin rengi: #8300e9
Düğme Arka Plan Rengi: rgba(255,255,255,0.85)

Özel Kenar Boşluğu: -600 piksel üst, %40 alt

Not: Tarayıcı genişliklerini ayarlarken modülün hareketini sınırlamak istediğim için üst kenar boşluğunu bir piksel değeriyle ayarladım. Alt kısmın bu modülü tutan sıra ile üst üste gelmemesi için alt kenar boşluğunu %40 olarak ayarladım. Yüzde olarak ayarlamak, mobil cihazlarda alt kenar boşluğunun ayarlanmasına yardımcı olur.

Satır Ayarlarını Güncelle

Artık içeriğimiz yerinde olduğuna göre ilk satır ayarlarımızı aşağıdaki gibi düzenleyelim.

İçerik…

Sütun 1 Arka Plan Resmi: Resim Ekle

İşte kullandığım resim…

Tasarım…

Bu Satırı Tam Genişlikte Yapın: EVET
Özel Oluk Genişliği: 1
Özel Dolgu: %10 Üst, %7 Alt
Kenar genişliği: 1 piksel
Kenar Rengi: #ffffff

İkinci satırda , ayarları aşağıdaki gibi güncelleyin:

Özel dolgu: 0px Üst, 0px Alt

Bu noktada ilk başarılı arka plan metnimizi bitirdik.

Ekran karıştırma modunun çalışma şekli nedeniyle metni çevreleyen beyaz bir arka planla sınırlıyız. Ancak bölümümüze bazı ayırıcılar ekleyerek biraz renk katabiliriz.

Bölümünüze Bölücüler Ekleyin

Ayırıcı eklemek için tasarım sekmesi altındaki bölüm ayarlarına gidin ve aşağıdakileri güncelleyin.

Üst Bölücü…

Bölücü Stili: ekran görüntüsüne bakın
Bölücü Rengi: rgba(131,0,233,0.65)
Bölücü Yüksekliği: 127px
Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Alt Bölücü…

Bölücü Stili: ekran görüntüsüne bakın
Bölücü Rengi: rgba(131,0,233,0.65)
Bölücü Yüksekliği: 249 piksel (masaüstü), 127 piksel (tablet)
Bölücü çevirme: dikey ve yatay
Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Geçiş Bölümünün Eklenmesi

Bir sonraki bölümümüze başlamadan önce, alt ve üst bölücüler arasında yumuşak bir renk geçişi olarak hizmet edecek düzenli bir bölüm oluşturmalıyız. Geçişi oluşturmak için, üstteki alt bölücünün ve alttaki üst bölücünün rengini kullanmalıyız (üzgünüz, bu biraz kafa karıştırıcı olabilir). Bu iki renkle, yukarıdaki bölücüden aşağıdaki bölücüye geçiş yapmak için bir arka plan gradyanı oluşturacağız.

Devam edin ve yeni bir normal bölüm ekleyin, ancak bu bölüm için herhangi bir satır kullanmayacağımız için satır sütununu silin. Ardından, içerik sekmesinin altına, ilk rengi yukarıdaki bölüm için kullandığımız renkle aynı olacak şekilde bir arka plan gradyanı ekleyin: rgba(131,0,233,0.65).

İkinci renk için aşağıdakini kullanın: rgba(233.0,255,0.65)

Bu, bir sonraki bölüm bölücülerimizin rengi olacak.

Bu noktada, tüm brüt iş yapıldı. Sonraki 3 bölümü tamamlamak için geriye kalan tek şey, zaten sahip olduğumuz bölümü çoğaltmak ve bazı içerik ve renkleri güncellemek.

İkinci Bölümü Oluşturun

İkinci bölüm için ilk oluşturduğumuz bölümü kopyalayıp geçiş bölümünün altına yapıştırın.

Aşağıdakileri tamamlayın:

1. Üst ve Alt Bölücü Renkleri bölümünü rgba(233,0,255,0.65) olarak güncelleyin.
2. Üst satır 1 sütun arka plan resmini değiştirin.
3. Metin modülünü 02 numarasıyla güncelleyin ve ardından metin metin rengini rgba(233.0,255,0.65) olarak değiştirin.
4. Tanımlayıcı modül başlığını "Tasarım" olarak değiştirin.
5. Tanımlama modülü düğmesi metin rengini #e900ff olarak güncelleyin.
6. Gradyan arka planı için bu iki renkle aşağıya başka bir geçiş bölümü ekleyin:

   rgba(233.0,255,0.65) , rgba(12,113,195,0.65)

Üçüncü Bölümün Oluşturulması

Üçüncü bölüm için daha önce oluşturduğumuz bölümlerden birini kopyalayıp ikinci geçiş bölümünün altına yapıştırın.

Aşağıdakileri tamamlayın:

1. Üst ve Alt Bölücü Renkleri bölümünü rgba(12,113,195,0.65) olarak güncelleyin.
2. Üst satır 1 sütun arka plan resmini değiştirin.
3. Metin modülünü 03 numarasıyla güncelleyin ve ardından metin metin rengini rgba(12,113,195,0.65) olarak değiştirin.
4. Tanıtım modülünün başlığını "Geliştir" olarak değiştirin.
5. Tanımlama modülü düğmesi metin rengini #0c71c3 olarak güncelleyin.
6. Gradyan arka planı için bu iki renkle aşağıya başka bir geçiş bölümü ekleyin:

   rgba(12,113,195,0.65) , rgba(124,218,36,0.65)

Dördüncü Bölümün Oluşturulması

Dördüncü bölüm için daha önce oluşturduğumuz bölümlerden birini kopyalayıp üçüncü geçiş bölümünün altına yapıştırın.

Aşağıdakileri tamamlayın:

1. Üst ve Alt Bölücü Renkleri bölümünü rgba(124,218,36,0.65) olarak güncelleyin.
2. Metin modülünü “Git” metniyle güncelleyin ve ardından metin metni rengini rgba(124,218,36,0.65) olarak değiştirin.
3. Üst satır 1 sütun arka plan resmini değiştirin.
4. Tanıtım modülünün başlığını "Teslim et" olarak değiştirin.
5. Tanımlama modülü düğmesi metin rengini #68d800 olarak güncelleyin.

İşte nihai sonuç:

Duyarlı

Bu öğreticide kullanılan tasarım süreci, her mobil cihaz için özel boşluk öğeleri (kenar boşluğu ve boşluk) ve metin boyutları ayarlamayı içerir. Bu şekilde, masaüstünde ayarlanan herhangi bir gelişmiş özelleştirme, mobilde de güzel bir şekilde işlenecektir.

İşte tasarımımız tablet ve akıllı telefonda nasıl görünüyor.

Karanlık Bir Sürüm Oluşturun

Ekran Karıştırma Modu, metin modülü öğelerini satır arka plan görüntüsüyle karıştırarak ve ardından iki öğenin daha hafif bir karışımını görüntüleyerek çalışır. Benzer şekilde, Multiply Blend Modu ikisini karıştırır, ancak daha açık bir sürüm göstermek yerine, karışık öğelerin daha koyu bir sürümünü gösterir. Ayarlarınızı düzenlerken Çarpma ve Ekran arasında geçiş yaparsanız bu açıktır.

Bu tasarımın karanlık bir versiyonunu oluşturmak için ekran karıştırma modunuz yerine çarpma karıştırma modunu kullanabilirsiniz. Tüm bunları yapmak için yapmanız gereken, bölüm arka plan rengini ve metin modülü arka plan rengini siyaha (ve ayrıca kenarlıklarınız varsa kenarlık renklerine) ayarlamaktır. Metin modülü karışım modunu Çarp olarak değiştirin. Ardından, Harekete Geçirici Mesajınızın başlığını ve gövde metnini daha açık/beyaz bir renge değiştirin.

Bu kadar. İşte karanlık bir versiyonun nasıl görüneceğine dair bir örnek.

Bu Tasarımdaki Sınırlamalar ve Geri Dönüşler

Ekranın ve çoklu karışım modlarının çalışma şekli nedeniyle, bu efekt en iyi beyaz ve siyah arka planlarda çalışır. Diğer renkler büyük olasılıkla sadece metni değil, tüm modül boyunca arka plan görüntüsünü gösterecektir. Ancak, dışarıda ninja tasarlıyorsanız, benim bilmediğim bazı püf noktaları biliyor olabilirsiniz, bu yüzden bunları yorumlarda bizimle paylaşmaktan çekinmeyin.

Ayrıca, görüntü dolu metin arka planlarımızı oluşturmak için kullanılan ekran karıştırma modu IE, Edge ve Opera mini'de iyi çalışmıyor. Bu çok önemli değil çünkü arka plan metin boyunca gösterilmeyecek ve metin rengi yine de görüntülenecek olsa da. Bu harika bir geri dönüş olduğundan, arka plan metniniz için metin rengini ayarlarken bunu aklınızda bulundurmalısınız.

İşte tasarımın IE'de nasıl göründüğüne bir örnek.

Son düşünceler

Divi ile, Visual Builder'ın rahatlığından istediğiniz herhangi bir metni istediğiniz herhangi bir görüntüyle doldurabilirsiniz. Bu eğitimde kullanılan örnek tasarımın gerçekten çok daha fazlası için ilham kaynağı olması amaçlanmıştır. Öyleyse, kendiniz test edin ve harika bir şey inşa edin.

Bu eğitim, Renk Filtreleri Efektleri Nasıl Yeniden Oluşturulur ve Karışım Modu Örnekleri hakkındaki gönderi dizisinden ilham almıştır.

Yorumlarda sizden haber bekliyorum.

Şerefe!