Arka plan görüntüleri nasıl birleştirilir & amp;Divi ile kutu gölge seçenekleri
Bu Divi Post’ta, görüntü modülünün arka plan ve gölge seçeneklerini nasıl birleştirebileceğinizi göstereceğiz. Bu yazı, hayal gücünüzü teşvik etmeyi ve yeni Divi özelliklerinin mevcut ile nasıl çalışabileceğini göstermeyi amaçlamaktadır – bu da yaratıcı sonuçlara yol açar. Yaratıcı süreçte size yardımcı olmak için, size nasıl yeniden adım atacağınızı göstereceğimiz 4 kombinasyon yaptık. Örneklere bakalım. Masaüstünün ilk örneği
Hücresel Her iki masaüstü örneği örneği Hücresel Üçüncü masaüstü örneği Hücresel Dört masaüstü örneği Hücresel Arka Plan Resimleri ve Kutu Gölge Seçeneklerini Divi ile YouTube Kanalına Abone Olma İlk Örneği Şimdi size bu gönderiden ne bekleyebileceğinizi gösterdik, aşağıdaki örneği nasıl yeniden yaratabileceğinize bakalım. Divi ve ek CSS kodu olmadan: İki sütun sütunu ekleyin Arka plan sütunu 1 Standart bölüme iki sütun ekleyin ve sütun 1’in arka plan rengi olarak ‘RGBA (12.113.195.0.11)’ seçin. Mesafe Ardından, Tasarım sekmesine geçin. Üst kenar boşluğuna ‘200px’ ve ilk sütunun altındaki dolguya ‘150px’ ekleyin. Görüntü modülünü ilk sütuna (masaüstü ve tablet) ekleyin, ardından görüntü modülünü oluşturduğunuz satırın ilk sütununa ekleyin. Bu görüntü modülü yalnızca masaüstleri ve tabletler için geçerlidir. Yapmanız gereken ilk şey genişliği ‘%94’e dönüştürmektir. Mesafe sonra, aralık alt kategorisini açın, ‘Görüntünün altındaki alan göster’ seçeneğini etkinleştirin, üst kenar boşluğuna ‘-150px’ ve görüntünün sol kenarına ‘-110px’ ekleyin. Gölge Kutusu sekmede daha fazla kaydırın ve aşağıdaki kutu gölgeyi resme uygulayın: Yatay Konum Gölge Kutusu: 80pxDikey Konum Gölge Kutusu: 80px
Bulanık Güç Gölgesi Kutusu: 0px
Kutunun gölgesinin dağılımının gücü: 6px
Gölge Renk: RGBA (173.173.173.0.79)
Kutu Gölgesi Pozisyonu: Dış Gölge
Son görünürlük, Gelişmiş sekmesini açın ve cep telefonundaki görüntü modülünü devre dışı bırakın. Klon Görüntü Modülü (Telefon) Görüntü modülünün masaüstü sürümü ve tablet sürümü için kullandığımız ayarların çoğu da hücresel sürüm için aynıdır. Bu yüzden görüntü modülünü klonlayacağız ve cep telefonu ekranına uygun bazı ek değişiklikler yapacağız. Değiştirmemiz gereken şey ilk şeyin gölgesini değiştirin, kutunun gölgesidir. Masaüstü ayarlarını kullanmak yerine aşağıdaki ayarları kullanın: Yatay Konum Gölge Kutusu: 33px
Dikey Konum Gölge Kutusu: 78px
Bulanık Güç Gölgesi Kutusu: 0px
Kutunun gölgesinin dağılımının gücü: 6px
Gölge Renk: RGBA (173.173.173.0.79)
Kutu Gölgesi Pozisyonu: Dış Gölge
Görünürlük Sonraki ve son olarak yapmamız gereken bu ikinci görüntü modülünün görünürlüğünü değiştirmek. Bir cep telefonu üzerinde devre dışı bırakmak yerine, tabletlerde ve masaüstlerinde devam edin ve devre dışı bırakın. İkinci örnek, masaüstünde böyle görünen ikinci bir örneğimiz var: Gradyan satırının iki arka plan sütunu bir satır ekleyin, üzerinde çalıştığınız parçaya iki yeni sütunun satırını ekleyin ve onun için aşağıdaki gradyan arka planını kullanın: Birinci Renk: RGBA (237,240,0,0,55)
İkinci renk: RGBA (255,255,255.0)
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 50.8
Son pozisyon:% 50.8
Yapıştırıcı Tasarım sekmesine geçti ve ‘Bu Fullwidth Make’ seçeneğini etkinleştirdi. Görüntü modülünü satır ayarlarıyla tamamladıktan sonra ilk sütun mesafesine ekleyin, devam edin ve görüntü modülünü ilk sütuna ekleyin. Tasarım sekmesindeki boşluk alt kategorisini açın ve üst, sağ, alt ve sol dolgulara ’30px’ ekleyin. Kaydırma kutusunun Aynı sekmesinin gölgesi ve Box Shadow Alt Kategorisi için aşağıdaki ayarları kullanın:
Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 2pxBulanık Güç Gölgesi Kutusu: 56px
Gölge kutularının dağılımının gücü: 12 piksel
Gölge Rengi: RGBA (0.0,0,0,3)
Kutu Gölgesi Pozisyonu: Dış Gölge
Klon Görüntü Modülü ve İkinci Sütun’a Yer Place İkinci sütundaki görüntü modülü ayarları aynıdır. Lütfen görüntü modülünü klonlayın ve ikinci sütuna yerleştirin. Bir sonraki üçüncü örnek, aşağıdaki sonuçları nasıl elde edeceğinizi göstereceğiz:
Bir Satır Bir Sütun Arka Plan Sütun 1 Ekle Bir Sütun Satır Ekleyin ve İlk sütunun arka plan rengi olarak ‘RGBA (193,145,163.0.6)’ seçin. Gradyan Arka Plan Görüntüleri Modülünü Ekleyin Ardından, görüntü modülünü sütuna ekleyin ve onun 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ü: 180 derece
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Tasarım sekmesine taşınmak ve sınır alt kategorisi için aşağıdaki ayarların uygulanmasını sağlamak:
Sınırı kullanın: Evet Sınır rengi: #000000
Sınır Genişliği: 3px
Sınır Gücü: Katı
Bir sonraki yapıştırıcı, görüntü modülüne aşağıdaki genişliği ekleyin:
Masaüstü:% 85 Tablet ve Telefon:%100 mesafe sonra, aralık alt kategorisini açın ve aşağıdaki dolgu ve mariign’ın görüntü modülü için geçerli olması:
Sol kenar boşluğu: 80px (masaüstü), 0px (tablet ve cep telefonu)
Üst, sağ, alt ve sol dolgu: 30px Son kutu gölgesi, aşağıdaki ayarlarla kutunun gölgesini ekleyin:
Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 0px Bulanık Güç Gölgesi Kutusu: 0px
Gölge kutularının dağılımının gücü: 39px
Gölge Rengi: RGBA (0.0,0,0.22)
Kutu Gölgesi Pozisyonu: Dış Gölge
Dördüncü ve nihayet örnek; Son örnek size nasıl yeniden yapacağınızı göstereceğiz:
İki sütundan bir satır ekleyin, iki sütun ekleyerek başlayın. Bu satır, bu yazıda ele aldığımız önceki örnek gibi değil, ek düzenlemeler gerektirmez.
Görüntü modülünü gradyanın arka planının ilk sütununa ekleyin, görüntü modülünü yeni oluşturduğunuz satırın ilk sütununa ekleyin ve onun için aşağıdaki gradyan arka planını kullanın: Birinci 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ıç Pozisyonu:% 55
Son pozisyon:% 55
Mesafe O zaman, Tasarım sekmesine devam edin ve alan için alan için aşağıdaki ayarları kullanın:
Resmin altındaki alanı göster: Evet
Sağ dolgu: 30px Dolgu Alt: 30 piksel
İkinci görüntü modülünü ilk sütun arka plan rengine ekleyin 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.
Mesafe Ardından, tasarım sekmesini açın ve spasi alt kategorisi için aşağıdaki ayarları kullanın:
Resmin altındaki alanı göster: Evet Üst kenar: -250px (masaüstü), -150 (tablet), -100 (cep telefonu) Sağ kenar boşluğu: -150px (masaüstü), 0px (tablet ve cep telefonu) Sol kenar boşluğu: 150 piksel
Üst dolgu: 30px
Sol dolgu: 30px
Son Kutu Gölgesi, Box Shadow Alt Kategorisini Açın ve aşağıdaki ayarları kullanın:
Yatay konum gölge kutusu: 0px
Dikey Konum Gölge Kutusu: 2px
Bulanık Güç Gölgesi Kutusu: 0px Gölge kutularının dağılımının gücü: 24 piksel
Gölge Renk: #E2E2E2
Kutu Gölgesi Pozisyonu: Dış Gölge
Bu yazıda paylaştığımız örneğin son zihni, kutunun gölge seçeneği ve Divi’nin arka planı ile ne kadar ileri gidebileceğinizin sadece küçük bir parçasıdır. Web sitenizin görünümünü ve hissini bir bütün olarak mükemmelleştirecek bir görüntü modülü kullanarak benzersiz bir tasarım oluşturabilirsiniz. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun.
Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun! Creative Stall / Shutterstock.com tarafından Üstün Görüntü
