Divi kullanarak yaratıcı arka planlar için görüntülerle metin nasıl doldurulur
Metni resimlerle doldurmak, web sitenize modern tasarımlar eklemenin iyi bir yoludur. Divi karışık modla, istediğiniz metinle bir arka plan görüntüsü görüntüleyebilirsiniz. Ve Divi Builder’da özel bir marj kullanarak, içeriğinizde arka plan olarak kullanılacak metni içeren görüntüleri konumlandırabilirsiniz. Bu öğreticide, divi kullanarak renkli görüntülere tam metin arka plan eklemek için ekran karışım modunun nasıl kullanılacağını göstereceğim. Ayrıca, arka plan metninizin tasarımına ve böcekler arasındaki geçiş parçalarına uygun bir bölücü ekleyeceğinizi de göstereceğim.
Başlayalım. Aşağıdaki gizlice göz atma, bugün yapacağımız bir göz atma gözüdür.
Divi teması (yüklü, etkin ve güncellenmiş)
Her metin arka planı için kullanılacak 4 görüntü. En iyi sonuçlar için, çok fazla doku ve en azından 1920×1080 büyüklüğünde daha koyu bir görüntü kullanmanızı öneririm.
Izgara Visual Builder Etkileşim Modu – Üst üste binen bir modül yapacağımız ve daha karmaşık bir düzen yapacağımız için, imleci görsel yapımcıdaki örtüşen öğeye yönlendirmeye çalışırken karışıklığı önleyebilmeniz için ızgara etkileşim modunu kullanmanızı öneririm. YouTube kanalına abone olarak Divi’yi kullanarak metni yaratıcı bir arka plan için görüntülerle nasıl doldurulur, yeni bir sayfa için ilk kısmı yaparız ve bir görsel üreticiyi uygulayız. Ardından, olağan kısmı bir sütun satırı ile ekleyin (veya sadece varsayılan olarak orada olanı kullanın) ve metin modülünü satır sütununa ekleyin. Metin Modülünün Ayarlarını Güncelleyin Aşağıdaki metin modülü ayarlarını açın ve güncelleme: Doldurma … İçerik: 01 (Bu, arka planımız için kullanılan sayı olacak) Arka Plan Rengi: #ffffff : Metin Ağırlığı Metin Boyutu: 40EM (masaüstü), 25EM (tablet), 15em (akıllı telefon) Metin Renk Metni: RGBA (131,0,233.0.65) Metin Oryantasyonu: Merkez Özel Dolgu: 288px UP, 288px Brock Sınır Genişliği: 1px Renk Sınır : #FFFFFF Karışık Mod: Tarama: Beyaz Arka Plan ve Ekran Modu, metin modülü üzerinden satırın arka planını (henüz oluşturulmamış) görmenin etkisidir. Ardından, geçerli satırın altına yeni bir sütun satırı ekleyin ve ardından dava modülünü harekete geçirin. Güncelle Modül Ayarları Davetiye Etkilendirildi Davetiye Modülünü Aşağıdakilerle Güncelle: İçindekiler … Başlık: Metin Düğmesini Bul: # Arka Plan Renk: RGBA (255,255,255,0) (bu şeffaf) tasarım … Metin Renk: Koyu Oryantasyon Metin: Sol Başlık Yazı Tipi: Poppins Yazı Tipi Başlık Ağırlık: AĞIRLIK Stili Yazı Tipi Başlık: TT Başlık Metin Boyutu: 70px (masaüstü), 50px (tablet), 40px (akıllı telefon) Renkli Metin Başlığı: RGBA (0,0,0 , 0.0.62) Uzay Başlığı Mektubu: 4px Gövde yazı tipi: Poppins Vücut Ağırlığı: Hafif Metin Boyutu İçeriği: 32px (Masaüstü), 24px (Tablet) Renk Gövde Metin: #333333 Gövde Yüksekliği: 1.3EM Düğmeler için özel bir stil kullanın: #8300E9 Renk Arka Plan Düğmesi Düğmesi: : RGBA (255,255,255.0.85) Özel Marj: -600px üst,% 40 Aşağıda Not: Piksel değeri ile üst kenar boşluğunu ayarladım çünkü tarayıcının genişliğini ayarlarken modülün hareketini sınırlamak istiyorum. Bu modülü tutan çizgi ile tabanı örtmemesi için alt kenar boşluğunu% 40’a ayarladım. Yüzde ayarlayın Mobil cihazdaki düşük marjın ayarlanmasına yardımcı olur. Yeni çizgi ayarları Şimdi içeriğimize sahip olduktan sonra, ilk satır ayarlarımızı aşağıdaki gibi düzenleyelim. Doldur … Sütun 1 Arka Plan Görüntü: Aşağıdaki görüntüyü ekle kullandığım resim …
Tasarım … Bu çizgiyi tam genişlik yapın: Evet Özel Oluklar: 1 Özel Dolgu:% 10 Üst,% 7 Alt Sınır Genişliği: 1px Sınır Renk: #FFFFFF İkinci Sırada Güncelle, Ayarları Aşağıdaki Şöyle Güncelleyin: Özel Dolgu: 0px Top , Bu noktada 0px aşağıda ilk başarılı arka plan metni ile bitirdik. Ekran karışımının çalışma şekli nedeniyle metni çevreleyen beyaz arka planla sınırlıyız. Ancak bizim tarafımıza bazı böcekler ekleyerek bazı renkler ekleyebiliriz. Bölücü eklemek için bölümünüze bölücüyü ekleyin, tasarım sekmesinin altındaki bölümün ayarlarını açın ve aşağıdakileri güncelleyin. Üst Bölücü … Bölme Kuvveti: Bölücü Rengi Ekran Görüntüsü: RGBA (131,0,233.0.65) Bölücü Yüksekliği: 127px Bölme Ayarları: Yukarıdaki İçerik Bölümü Alt bölücü … bölücü kuvveti: ekran görüntüsü ekran ekran yakalama: rgba (131,0,233.0.65) Bölme yüksekliği: 249 piksel (masaüstü), 127 piksel (tablet) flip bölücü: dikey ve yatay bölücü ayarları: yukarıda geçiş önce. Bir sonraki bölüme başlıyoruz, önce alt ve üst böcekler arasında düzgün bir renk geçişi olarak işlev görecek şekilde düzenli bir parça yapmalıyız. Bir geçiş yapmak için, yukarıdaki alt bölücünün ve aşağıdaki üst bölücünün rengini kullanmalıyız (üzgünüm, biraz kafa karıştırıcı olabilir). Bu iki renkle, yukarıdaki bölücüden geçiş için aşağıdaki bölücü ile bir arka plan gradyanı yapacağız.
Devam edin ve yeni bir düzenli 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. Daha sonra içerik sekmesinin altına, yukarıdakiler için kullandığımız renkle aynı renkte bir arka plan gradyanı ekleyin: RGBA (131,0,233.0.65). İkinci renk için aşağıdakileri kullanın: RGBA (233,0,255.0.65) bir sonraki bölücü rengi olacaktır. Bu noktada, en zor işler yapıldı. Sonraki 3 parçayı tamamlamak için yapılacak olan şey, zaten sahip olduğumuz parçaları çoğaltmak ve bazı içerik ve renkleri güncellemektir. İkinci bölüm için ikinci kısmı oluşturun, yaptığımız ilk parçayı kopyalayın ve geçişin altına yapıştırın. Aşağıdakileri tamamlayın:
Üst ve alt bölücü renklerini RGBA’ya güncelleyin (233,0,255.0.65).
1 satır sütununun arka plan görüntüsünü değiştirin.Metin modülünü 02 numarası ile güncelleyin, ardından metnin metnini RGBA olarak değiştirin (233,0,255,0,65).
Modülün başlığını “Tasarım” olarak değiştirin.
Bulanık Modül düğmesinin metin rengini #E900FF olarak güncelleyin. Gradyanın arka planı için bu iki renkle aşağıdaki diğer geçiş bölümünü ekleyin: RGBA (233.0.255.0.65), RGBA (12.113.195.0.65)
Üçüncü bölümün üçüncü bölümünü yapın, yaptığımız parçalardan birini kopyalayın ve ikinci geçişin altına yapıştırın.
Aşağıdakileri tamamlayın:
Üst ve alt bölücü renklerini RGBA’ya güncelleyin (12,113,195.0.65).
1 satır sütununun arka plan görüntüsünü değiştirin. Metin modülünü 03 numaralı güncelleyin, ardından metnin metnini RGBA olarak değiştirin (12.113.195.0.65).
“Geliştir” okumak için açıklamayı modülün başlığını değiştirin.
Bulanık modül düğmesinin metin rengini #0C71C3 olarak güncelleyin.
Gradyanın arka planı için bu iki renkle diğer geçiş bölümünü ekleyin: RGBA (12,113,195.0.65), RGBA (124,218,36.0.65)
Dördüncü bölümün dördüncü kısmını yapın, yaptığımız parçalardan birini kopyalayın ve üçüncü geçiş bölümünün altına yapıştırın.
Aşağıdakileri tamamlayın:
Üst ve alt bölücü renklerini RGBA’ya (124,218,36.6.0.65) güncelleyin.
Metin modülünü “Go” metniyle güncelleyin, ardından metnin metnini RGBA olarak değiştirin (124,218,36,0.65). 1 satır sütununun arka plan görüntüsünü değiştirin.
“Teslim” i okumak için modülün başlığını değiştirin.
Bulanık Modül düğmesinin metin rengini #68D800 olarak güncelleyin.
Sonuçlar aşağıdadır:
Bu öğreticide kullanılan bu duyarlı tasarım işlemi, her mobil cihaz için özel alan öğeleri (marj ve boşluklar) ve metin boyutu ayarlarını içerir. Bu şekilde, masaüstünde düzenlenmiş herhangi bir gelişmiş ayar da mobil cihazlarda iyi görüntülenecektir. Bu, tabletler ve akıllı telefonlardaki tasarım ekranımızdır.
Metin modülü öğesini satırın arka plan görüntüsüyle birleştirerek ve ardından iki öğeden daha hafif bir karışım göstererek ekran karışımı modu çalışmasını oluşturun.Benzer şekilde, karıştırma modu her ikisini de karıştırır, ancak daha parlak bir versiyon görüntülemek yerine, karışık bir öğenin daha karanlık bir versiyonunu 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ışım modu yerine birden çok çarpma karışım modu kullanabilirsiniz.Her şeyi yapmak için, tek yapmanız gereken parçanın arka plan rengini ve metin modülünün arka plan rengini siyah olarak ayarlamaktır (ve bir sınırınız varsa sınırın rengini).Karışık Modül Modül Modunu Çarpmak için Değiştirin.Ardından, harekete geçme davetinin başlıkını ve içerik metnini daha parlak/beyaz bir renge dönüştürün.İşte burada.İşte karanlık versiyonun görünümüne bir örnek.
Ekranın çalışma şekli ve bazı karışık modlar nedeniyle bu tasarımdaki sınırlamalar ve aksilikler, bu etki en iyi beyaz ve siyah arka planlarla çalışır. Diğer renkler büyük olasılıkla arka plan görüntülerini sadece metin değil, tüm modül boyunca görüntüleyecektir. Ancak, siz ninja tasarımcıları bilmediğim bazı hileler biliyor olabilirsiniz, bu yüzden yorumlarda bizimle paylaşmaktan çekinmeyin. Ayrıca, görüntülerimizi içeren metnin arka planını yapmak için kullanılan ekran karışımı modu, IE, Edge ve Opera Mini’de düzgün çalışmaz. Bu büyük bir sorun değildir, çünkü arka plan metin yoluyla görüntülenmeyecek ve metnin rengi hala görüntülenecektir. Bu iyi bir geri dönüştür, bu nedenle arka plan metniniz için metnin rengini her ayarladığınızda bunu hatırlamanız gerekir. İşte IE’de bir tasarım ekranı örneği. Divi ile son düşünceler, istediğiniz herhangi bir metni istediğiniz görüntüle, tüm görsel oluşturucu konforunu doldurabilirsiniz. Bu öğreticide kullanılan tasarımlara örnek olarak gerçekten daha fazlası için ilham kaynağı olması amaçlanmıştır. Kendinizi test edin ve olağanüstü bir şey inşa edin. Bu öğretici, bir Renk Filtresi Efekti ve Karışım Modu örneğini nasıl yeniden oluşturacağına dair bir gönderi dizisinden esinlenmiştir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
