Divi ile Görüntü Arka Planı ve Kutu Gölge Seçenekleri Nasıl Birleştirilir

Bu Divi gönderisinde, size bir Görüntü Modülünün arka plan ve gölge seçeneklerini nasıl birleştirebileceğinizi göstereceğiz. Bu gönderi, hayal gücünüzü canlandırmayı ve yeni Divi özelliklerinin mevcut özelliklerle nasıl çalışıp yaratıcı sonuçlara yol açabileceğini göstermeyi amaçlamaktadır. Yaratıcı süreçte size yardımcı olmak için adım adım nasıl yeniden oluşturacağınızı göstereceğimiz 4 kombinasyon oluşturduk. Örneklere bir göz atalım.

İlk Örnek

masaüstü

Mobil

İkinci Örnek

masaüstü

Mobil

Üçüncü Örnek

masaüstü

Mobil

Dördüncü Örnek

masaüstü

Mobil

Divi ile Görüntü Arka Planı ve Kutu Gölge Seçenekleri Nasıl Birleştirilir

Youtube Kanalımıza Abone Olun

İlk Örnek

Şimdi size bu gönderiden neler bekleyebileceğinizi gösterdiğimize göre, Divi'de yalnızca birkaç adımla ve ek CSS kodu olmadan aşağıdaki örneği nasıl yeniden oluşturabileceğinize bir göz atalım:

İki Sütunlu Satır Ekle

Sütun 1 Arka Plan Rengi

Standart bir bölüme iki sütunlu bir satır ekleyin ve Sütun 1 Arka Plan Rengi olarak 'rgba(12,113,195,0.11)' öğesini seçin.

aralık

Ardından Tasarım sekmesine geçin. İlk sütunun üst kenarına '200px' ve alt dolgusuna '150px' ekleyin.

İlk Sütuna Görüntü Modülü Ekleme (Masaüstü ve Tablet)

boyutlandırma

Ardından, oluşturduğunuz satırın ilk sütununa bir Görüntü Modülü ekleyin. Bu Görüntü Modülü yalnızca masaüstü bilgisayarlar ve tabletler için geçerli olacaktır. Yapmanız gereken ilk şey, Genişliği '%94' olarak değiştirmek.

aralık

Ardından, Aralık alt kategorisini açın, 'Görüntünün Altındaki Alanı Göster' seçeneğini etkinleştirin, görüntünün üst kenar boşluğuna '-150px' ve sol kenar boşluğuna '-110px' ekleyin.

Kutu Gölge

Sekmeyi daha da aşağı kaydırın ve görüntüye aşağıdaki kutu gölgesini uygulayın:

• Kutu Gölgesi Yatay Konumu: 80px
• Kutu Gölgesi Dikey Konumu: 80px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 6px
• Gölge Rengi: rgba(173.173,173,0.79)
• Kutu Gölge Konumu: Dış Gölge

görünürlük

Son olarak, Gelişmiş sekmesine gidin ve mobil cihazlarda Görüntü Modülünü devre dışı bırakın.

Klon Görüntü Modülü (Telefon)

Image Module'ün masaüstü ve tablet versiyonu için kullandığımız ayarların çoğu mobil versiyon için de aynı. Bu nedenle, Görüntü Modülünü klonlayacağız ve mobil ekrana uyacak bazı ek değişiklikler yapacağız.

Kutu Gölgesini Değiştir

Değiştirmemiz gereken ilk şey kutu gölgesi. Masaüstü ayarlarını kullanmak yerine aşağıdaki ayarları kullanın:

• Kutu Gölgesi Yatay Konumu: 33px
• Kutu Gölgesi Dikey Konumu: 78px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 6px
• Gölge Rengi: rgba(173.173,173,0.79)
• Kutu Gölge Konumu: Dış Gölge
  

görünürlük

Yapmamız gereken sonraki ve son şey, bu ikinci Görüntü Modülünün görünürlüğünü değiştirmek. Telefonda devre dışı bırakmak yerine, devam edin ve hem tablette hem de masaüstünde devre dışı bırakın.

İkinci Örnek

Ardından, masaüstünde buna benzeyen ikinci örneğimiz var:

İki Sütunlu Satır Ekle

Satır Gradyan Arka Planı

Üzerinde çalıştığınız bölüme iki sütunlu yeni bir satır ekleyin ve bunun için aşağıdaki gradyan arka planını kullanın:

• İlk Renk: rgba(237,240,0,0.55)
• İkinci Renk: rgba(255,255,255,0)
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %50,8
• Bitiş Konumu: %50,8

boyutlandırma

Tasarım sekmesine gidin ve 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

aralık

Son olarak, ikinci sütuna '200 piksel'lik bir üst dolgu ekleyin.

İlk Sütuna Görüntü Modülü Ekle

aralık

Satır ayarlarıyla işiniz bittiğinde, devam edin ve ilk sütuna bir Görüntü Modülü ekleyin. Tasarım sekmesindeki Aralık alt kategorisini açın ve üst, sağ, alt ve sol dolguya '30px' ekleyin.

Kutu Gölge

Aynı sekmeyi aşağı kaydırın ve Kutu Gölgesi alt kategorisi için aşağıdaki ayarları kullanın:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Kutu Gölge Bulanıklığı Gücü: 56px
• Kutu Gölge Yayılma Gücü: 12px
• Gölge Rengi: rgba(0,0,0,0.3)
• Kutu Gölge Konumu: Dış Gölge

Klon Görüntü Modülü ve İkinci Sütundaki Yeri

İkinci sütundaki Görüntü Modülü ayarları aynıdır. Devam edin, Görüntü Modülünü klonlayın ve ikinci sütuna yerleştirin.

Üçüncü Örnek

Devam ederek, size aşağıdaki sonucu nasıl elde edeceğinizi göstereceğiz:

Tek Sütunlu Satır Ekle

Sütun 1 Arka Plan Rengi

Tek sütunlu bir satır ekleyin ve ilk sütunun arka plan rengi olarak 'rgba(193.145,163,0.6)'yı seçin.

Resim Modülü Ekle

Degrade Arka Plan Resmi

Ardından, sütuna bir Görüntü Modülü ekleyin ve bunun için aşağıdaki gradyan arka planını kullanın:

• İlk Renk: #e2e2e2
• İkinci Renk: rgba(255,255,255,0)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %50

Sınır

Tasarım sekmesine gidin ve aşağıdaki ayarları Kenarlık alt kategorisine uygulayın:

• Kenarlık Kullan: Evet
• Kenar Rengi: #000000
• Kenar Genişliği: 3px
• Kenar Stili: Katı

boyutlandırma

Ardından, Görüntü Modülüne aşağıdaki Genişliği ekleyin:

• Masaüstü: %85
• Tablet ve Telefon: %100

aralık

Ardından, Aralık alt kategorisini açın ve Görüntü Modülüne aşağıdaki dolgu ve kenar boşluğunu uygulayın:

• Sol Kenar Boşluğu: 80px (Masaüstü), 0px (Tablet ve Telefon)
• Üst, Sağ, Alt ve Sol Dolgu: 30px

Kutu Gölge

Son olarak, aşağıdaki ayarlarla bir kutu gölgesi ekleyin:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 39px
• Gölge Rengi: rgba(0,0,0,0.22)
• Kutu Gölge Konumu: Dış Gölge

Dördüncü Örnek

Ve sonunda; size nasıl yeniden oluşturulacağını göstereceğimiz son örnek şuna benzer:

İki Sütunlu Satır Ekle

İki sütunlu bir satır ekleyerek başlayın. Bu satır, bu gönderide ele aldığımız önceki örneklerden farklı olarak, herhangi bir ek ayara ihtiyaç duymaz.

İlk Sütuna Görüntü Modülü Ekle

Degrade Arka Plan

Yeni oluşturduğunuz satırın ilk sütununa bir Görüntü Modülü ekleyin ve bunun için aşağıdaki gradyan arka planını kullanın:

• İlk Renk: rgba(255,255,255,0)
• İkinci Renk: rgba(92,0,158,0.46)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 138deg
• Başlangıç ​​Konumu: %55
• Bitiş Konumu: %55

aralık

Ardından Tasarım sekmesine gidin ve Aralık alt kategorisi için aşağıdaki ayarları kullanın:

• Resmin Altındaki Boşluğu Göster: Evet
• Sağ Dolgu: 30px
• Alt Dolgu: 30px

Birinci Sütuna İkinci Görüntü Modülü Ekle

Arka plan rengi

Bir öncekinin hemen altına başka bir Görüntü Modülü ekleyerek devam edin ve arka plan rengi olarak 'rgba(96,96,96,0.42)' kullanın.

aralık

Ardından Tasarım sekmesine gidin ve Aralık alt kategorisi için aşağıdaki ayarları kullanın:

• Resmin Altındaki Boşluğu Göster: Evet
• Üst Kenar Boşluğu: -250px (Masaüstü), -150 (Tablet), -100 (Telefon)
• Sağ Kenar Boşluğu: -150px (Masaüstü), 0px (Tablet ve Telefon)
• Sol Kenar Boşluğu: 150 piksel
• Üst Dolgu: 30 piksel
• Sol Dolgu: 30px

Kutu Gölge

Son olarak, Box Shadow alt kategorisini açın ve aşağıdaki ayarları kullanın:

• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 2px
• Kutu Gölge Bulanıklığı Gücü: 0px
• Kutu Gölge Yayılma Gücü: 24px
• Gölge Rengi: #e2e2e2
• Kutu Gölge Konumu: Dış Gölge

Son düşünceler

Bu gönderide paylaştığımız örnekler, Divi'nin kutu gölgesi ve arka plan seçenekleriyle ne kadar ileri gidebileceğinizin sadece bir kısmı. Web sitenizin genel görünümünü ve hissini geliştirecek olan Görüntü Modülünü kullanarak benzersiz tasarımlar oluşturabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

Creative Stall tarafından Öne Çıkan Görsel / Shutterstock.com