Divi ile Bölüm Arka Plan Resminizi Seçmeli Olarak Gösterme

Temel olarak Divi Builder içindeki herhangi bir şeye bir arka plan görüntüsü uygulayabilirsiniz. Bir bölüm, satır, sütun veya modül olsun, olasılıklar sonsuzdur. Ve karışım modlarıyla, arka plan görüntülerinin seçici olarak gösterilmesini bile sağlayabilirsiniz. Bu, modüllerin birbirleriyle başka bir düzeyde bağlantı kurmasını sağlar. Bir modülün durduğu yerde diğer modül devreye girer. Artık ayrı öğeler gibi davranmıyorlar, bunun yerine genel tasarımı görmenize yardımcı oluyorlar.

Bu eğitimde, modüllerinizin kutu gölgesinde bir bölüm arka plan gösterisi yaparak modülleri birbirine nasıl bağlayabileceğinizi adım adım göstereceğiz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, bu eğitimde farklı ekran boyutlarında neyi yeniden oluşturacağımıza hızlıca bir göz atalım.

Yaklaşmak

• Senin satır ve Metin Modülleri için beyaz arka plan rengini kullanılırken bu yaklaşım yalnızca çalışır
• Bölüm arka plan görüntüsünün bazı bölümlerinin görünmesini sağlamak için karışım modları kullanıyoruz
• Buna izin veren iki karışım modu (beyaz satır arka plan rengiyle birlikte) Ekran ve Sert Işık'tır.
• Tüm bölüm arka planını örtmek için, Boyutlandırma seçeneklerini değiştirerek satırı ekranın tüm genişliğini kaplamasını sağlıyoruz.
• Üst ve alt kısımdaki bölüm arka plan görüntüsünden kurtulmak için, bölümümüzün tüm üst ve alt dolgularını da kaldıracağız.
• Bu karışım modlarının her ikisi de farklı bir efekt verir (hangisini tercih edeceğinizi seçmek size kalmış)
• Bölüm arka plan görüntüsünün bölümlerinin görünmesini sağlayacak renkli kutu gölgeleri kullanıyoruz
• Bu yöntemi istediğiniz modüle uygulayabilirsiniz (eğer beyaz arka plan + renkli kutu gölgesi verirseniz)

Yeni Bölüm Ekle

Arka plan görüntüsü

Yeni veya mevcut bir sayfaya yeni bir bölüm ekleyerek başlayalım. Bölüm ayarlarınızda yapmanız gereken ilk şey, bir arka plan resmi yüklemek.

aralık

Ardından, Tasarım sekmesine gidin ve Aralık ayarlarında bölümünüzün hem üst hem de alt dolgusuna '0px' uygulayın. Bu, bölümünüz ile bir sonraki bölümde eklemek üzere olduğunuz satır arasındaki boşluktan kurtulacaktır.

Yeni Satır Ekle

Sütun Yapısı

Bölümünüze aşağıdaki sütun yapısına sahip bir satır ekleyerek devam edin:

Arka plan rengi

Bu blog yazısının yaklaşımında belirtildiği gibi, çalışmasını istiyorsanız satırınıza kesinlikle beyaz bir arka plan vermeniz gerekecektir.

boyutlandırma

Ayrıca, aşağıdaki Boyutlandırma seçeneklerini kullanarak satırınızın sol ve sağ tarafında görünen bölüm arka plan görüntüsünden de kurtuluyoruz:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Bölümümüzün tüm üst ve alt dolgularını kaldırdık. Bununla birlikte, modüllerimizin ortaya çıkmasından önce ve sonra biraz boşluğa ihtiyacımız var, bu yüzden satırın üst ve alt dolgusuna '150px' ekleyeceğiz.

Karışım Modu

Hem 'Ekran' hem de 'Sert Işık' Karışım Modları bu tasarımın çalışmasını sağlayacaktır. Satır ayarlarınızın Filtre seçeneklerinde etkinleştirebileceğiniz 'Ekran' Karışım Modu ile başlayacağız.

Sütun 1'e Metin Modülü Ekle

Arka plan rengi

Artık bölüm ve satır ayarlarımızı değiştirdiğimize göre, ihtiyacımız olan modülleri eklemeye başlamanın zamanı geldi. Her sütun için bir tane olmak üzere toplamda üç Metin Modülüne ihtiyacımız olacak. Sütun 1'deki ilk Metin Modülü ile başlayacağız ve değiştireceğiz. Daha sonra onu klonlayabilir, kalan sütunlara yerleştirebilir ve üzerinde küçük ince ayarlar yapabiliriz. Metin Modülünüzü ekleyin ve bunun için beyaz bir arka plan rengi kullanın. Bölüm arka plan resminizin gösterilmesini sağlayacağı için başka bir renk kullanamazsınız.

Metin Ayarı

Ardından, Metin Modülünüze aşağıdaki Metin ayarlarını uygulayın:

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: Siyah (bu, bölümün arka plan görüntüsünün metninizde görünmesini sağlar)
• Metin Harf Aralığı: 2px
• Metin Yönü: Merkez

boyutlandırma

Modüllerimiz arasındaki tüm boşluğu kaldıran satırımızın varsayılan Oluk Genişliğini kaldırdık. Satırın uzunluğuyla uğraşmadan aralarında biraz boşluk yaratmak istiyoruz. Bu nedenle Metin Modülümüzün Boyutlandırma ayarlarını değiştireceğiz:

• Genişlik: %80
• Modül Hizalama: Sol

aralık

Ve tasarımı daha çekici hale getirmek için Metin Modülümüze biraz dolgu ekleyeceğiz:

• Üst ve Alt Dolgu: 130 piksel
• Sol ve Sağ Dolgu: 32px

Kutu Gölge

Bu Metin Modülü ile yapmamız gereken son şey, bir Kutu Gölgesi eklemektir. Sihir yapılan yer burasıdır. Kutu Gölgesi, beyaz dışında herhangi bir renk kullanıyorsanız, bölüm arka planınızın görünmesini sağlar. Aşağıdaki ayarları kullanıyoruz:

• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 100px
• Kutu Gölge Rengi: #5d00ff

Metin Modülünü İki Kez Klonla

Sütun 2'ye yerleştirin

Modül Hizalamasını Değiştir

Şimdi devam edin ve Metin Modülünüzü iki kez klonlayın ve kalan sütunlara yerleştirin. Sütun 2'de bulunan Metin Modülünde bazı değişiklikler yaparak başlayacağız. Boyutlandırma ayarlarında Modül Hizalamasını orta olarak değiştirin.

Aralığı Değiştir

Ayrıca, aşağıdaki üst kenar boşluğunu ekleyerek modülümüz için bir yükseklik farkı yaratacağız:

• Üst Kenar Boşluğu: 100px (Masaüstü), 200px (Tablet ve Telefon)

Kutu Gölge Rengini Değiştir

Son olarak, Kutu Gölge Rengimizi '#00d3b3' olarak değiştireceğiz.

Sütun 3'e yerleştirin

Modül Hizalamasını Değiştir

Sütun 3'teki Metin Modülü, bunun yerine doğru bir Modül Hizalamasına ihtiyaç duyacaktır.

Aralığı Değiştir

Ayrıca Üst Kenar Boşluğuna '200px' ekleyeceğiz (tüm ekran boyutları için.)

Kutu Gölge Rengini Değiştir

Ve bu son Metin Modülü için Kutu Gölge Rengi '#af0020'.

Klon Bölümü

Bölüm Arka Plan Resmini Değiştir

Bu blog yazısının yaklaşımında belirtildiği gibi, 'Sert Işık' olarak da adlandırılan başka bir Karışım Modu kullanabilirsiniz. Bu gönderinin önceki bölümünde oluşturduğunuz bölümü klonlayın ve arka plan resmini değiştirin.

Satır Karışım Modunu Değiştir

Ardından, satır ayarlarınızı açın ve Karışım Modunu 'Sert Işık' olarak değiştirin.

Kutu Gölge Rengini Değiştir #1

Metin Modüllerinizin kutu gölgeleri beyaz olmadığı sürece istediğiniz renkleri kullanabilirsiniz. İlk Metin Modülü için 'rgba(224,43,32,0.26)' kullandık.

Kutu Gölge Rengini Değiştir #2

Sonraki ikinci sütunda bulunan Metin Modülünü açın ve Kutu Gölge Rengini 'rgba(131,0,233,0.26)' olarak değiştirin.

Kutu Gölge Rengini Değiştir #3

Son Metin Modülü 'rgba(12,113,195,0.26)' kullanır.

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Son düşünceler

Bu öğreticide, modüllerinizin konumuna bağlı olarak bölüm arka plan görüntülerinin seçici olarak nasıl gösterileceğini gösterdik. Bu yaklaşım, modüller arasında daha fazla bağlantı oluşturur. Biri durduğunda diğeri devreye giriyor. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!