Bir arka plan görüntüsünüz nasıl yapılır Divi ile seçici olarak görüntülenir
Temel olarak Divi Builder’daki herhangi bir şeye arka plan görüntülerini uygulayabilirsiniz. İster parça, satır, sütun veya modül olsun, olasılıklar sınırsızdır. Ve bir karışım moduyla, bir arka plan görüntüsünü seçici olarak bile görüntüleyebilirsiniz. Bu, modüllerin birbirine başka bir seviyede bağlanması için yapmanızı sağlar. Bir modülün durduğu yerde, diğer modül devralır. Ayrı unsurlar olarak davranmazlar, ancak aksine, genel tasarım görünümünü almanıza yardımcı olurlar. Bu öğreticide, modül kutunuzun gölgesinden arka plan ekranını yaparak modülleri birbirine nasıl bağlayabileceğinizi adım adım göstereceğiz.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, bu öğreticiye farklı ekran boyutlarında ne yapacağımızın bakışına bakalım.
Bu yaklaşım yalnızca modül satırınız ve metniniz için beyaz bir arka plan rengi kullanırken çalışır
Arka plan görüntüsünün bir kısmının görünmesini sağlamak için bir karışım modu kullanıyoruz
Buna izin veren iki karışım modu (beyaz satırın arka plan rengi ile birlikte) ekran ve sert ışıktır
Arka planın tüm bölümlerini kapsamak için, boyut seçeneğini değiştirerek satırın tüm ekran genişliğini doldurmasını sağlıyoruz
Üst ve alttaki arka plan görüntülerini kaldırmak için tüm üst ve alt dolgularımızı da sileceğiz
Bu karışım modlarının her ikisinin de farklı bir etkisi vardır (hangisini seçmek isteyen size kalmıştır)
Arka plan görüntüsünün bir kısmının görüntülenmesini sağlayan renkli bir kutu gölgesi kullanıyoruz
Bu yöntemi istediğiniz modüle uygulayabilirsiniz (beyaz bir arka plan + renkli bir kutunun gölgesi verirseniz) arka plan görüntüsünün yeni bir kısmını ekleyin, yeni bir sayfaya yeni bir parça ekleyerek veya zaten var olan. Parçanızı belirlemek için yapmanız gereken ilk şey bir arka plan görüntüsü yüklemektir.
Mesafe Ardından, Tasarım sekmesine devam edin ve alan ayarlarında üst ve alt dolgunuza ‘0px’ uygulayın. Bu, bir sonraki bölümde ekleyeceğiniz tarafınız ile satır arasındaki alanı ortadan kaldıracaktır. Sütun yapısının yeni bir satırını ekleyin. Bölümünüze aşağıdaki sütun yapısına sahip satır ekleyerek devam edin: Arka plan rengi Blog yazısı yaklaşımında belirtildiği gibi, çalışmasını istiyorsanız kesinlikle beyaz arka plan çizgisinizi vermeniz gerekir. Yapıştırıcımız ayrıca aşağıdaki boyut seçeneklerini kullanarak satırınızın sol ve sağ taraflarında görünen arka plan görüntülerini de kaldırır: Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafemiz tüm üst ve alt rulmanlarımızı kaldırdı. Ancak, modülümüz görünmeden önce ve sonra odaya ihtiyacımız var, bu yüzden satırın üst ve alt dolgusuna ‘150px’ ekleyeceğiz. Karışım modu ‘ekran’ ve ‘sert ışık’ karışım modu bu tasarım işlevini yapar. Satır ayarlarınızdaki filtre seçeneğinde etkinleştirebileceğiniz ‘ekran’ karışım modu ile başlayacağız. Metin modülünü sütun 1 arka plan rengine ekleyin Şimdi parçalarımızın ve satırlarımızın ayarlarını değiştirdik, ihtiyacımız olan modülü eklemeye başlama zamanı. Her sütun için bir tane olmak üzere toplam üç metin modüle ihtiyacımız olacak. Sütun 1’deki ilk metin modülü ile başlayacağız ve değiştireceğiz. Bundan sonra, klonlayabilir, kalan sütuna koyabilir ve ona küçük bir değişiklik yapabiliriz. Metin modülünüzü ekleyin ve bunun için beyaz arka plan rengi kullanın. Diğer renkleri kullanamazsınız çünkü arka plan görüntüsünüzü görüntülenir. Metin ayarları Ardından, aşağıdaki metin ayarlarını metin modülünüze uygulayın: Metin yazı tipi ağırlığı: çok kalın Metin yazı tipi stili: büyük harf
Metin Rengi: Siyah (Bu, metniniz aracılığıyla görüntülenen arka plan görüntüsünü yapacaktır)
Metin mektubu alanı: 2px
Metin Oryantasyonu: Orta
Yapıştırıcımız, modüllerimiz arasındaki tüm boşluğu silen çizgilerimizden varsayılan olukların genişliğini çıkardı. Çizginin uzunluğunu bozmadan aralarında biraz boşluk yapmak istiyoruz. Bu yüzden metin modülümüzün boyutunun ayarını değiştireceğiz:
Genişlik:% 80 Modül hizalaması: sol
Mesafe ve tasarımı daha çekici hale getirmek için metin modülümüze biraz dolgu ekleyeceğiz:
Üst ve Alt Dolgu: 130px Sol ve sağ dolgu: 32px
Kutu Gölgesi Bu metin modülü ile yapmamız gereken son şey bir kutu gölgesi eklemektir. Mucize burada meydana gelir. Box Shadow, beyaz dışında herhangi bir renk kullanırsanız, rolünüzün arka planının görülmesine izin verecektir. Aşağıdaki ayarları kullanıyoruz:
Bulanık Güç Gölgesi Kutusu: 0px Kutunun Gücü Gölge Yayıyor: 100 PX Gölge Renk Kutusu: #5D00FF
Klon Metin Modülü Sütun 2’de iki kez yerleştirin Modülün hizalanmasını değiştirin Şimdi devam ediyor ve metin modülünüzün klonunu iki kez iki kez yerleştirin ve kalan sütuna yerleştirin. Sütun 2’de bulunan metin modülünde bazı değişiklikler yaparak başlayacağız. Boyutlandırma ayarındaki hizalama modülünü merkeze değiştirin.
Değiştirme Boşluklarımız ayrıca üst kenar boşluğunu aşağıdakilere ekleyerek modülümüz için bazı yükseklik farklılıkları yaratacaktır:
Üst kenar: 100 piksel (masaüstü), 200px (tablet ve cep telefonu) Son kutu gölgesinin rengini değiştirin, kutunun gölgesinin rengini ‘#00d3b3’ olarak değiştireceğiz. Sütun 3’üne yerleştirin Metin modülünün hizalanması Sütun 3’teki hizalanması modülün doğru hizalamasını gerektirecektir.
Alanımızı değiştirme ayrıca üst kenar boşluğuna ‘200px’ ekleyecektir (tüm ekran boyutları için). Bu son metin modülü için kutunun gölge rengini ve renk kutusu rengini değiştirin ‘#AF0020’. Klon Bölümün arka plan görüntüsünü değiştirme Blog yazısı yaklaşımında belirtildiği gibi, ‘sert ışık’ olarak da adlandırılan başka bir karışım modu kullanabilirsiniz. Bu yazının önceki bölümünde oluşturduğunuz kısmı klonlamak ve arka plan görüntüsünü değiştirmek. Satır karışım modunu değiştirin, sonra satır ayarlarınızı açın ve karışım modunu ‘sert ışık’ olarak değiştirin. 1 numaralı kutunun gölge rengini değiştirin, renk beyaz olmadığı sürece metin modülü kutunuzun gölgesi için istediğiniz rengi kullanabilirsiniz. İlk metin modülü için ‘RGBA (224,43,32.0.26)’ kullandık. Gölge Kutusunun Rengini Değiştir #2 Bir sonraki ikinci sütunda metin modülünü açın ve kutunun gölgesinin rengini ‘RGBA (131,0,233.0.26)’ olarak değiştirin. Gölge kutusunun rengini değiştir #3 #3 Metin modülü en son ‘RGBA (12.113.195.0.26)’) kullanılarak. Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Bu öğreticideki son zihin, modülünüzün konumuna bağlı olarak arka plan görüntüsü bölümünün seçici olarak görüntülenmesini nasıl göstereceğinizi gösterdik.Bu yaklaşım modüller arasında daha fazla bağlantı oluşturur.Bunlardan biri durduğunda diğeri devraldı.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
