Divi ile bir satır kutusunun gölgesini kullanmanın yaratıcı yolları
En son Divi güncellemelerinden biri uzun zamandır beklenmektedir; Kutunun gölgesinin parçalara, satırlara ve modüllere entegrasyonu. Bu yazıda, satır kutusunun gölgesinin web sitenizin genel görünümünü ve hissini nasıl geliştirebileceğine odaklanacağız. Web sitenize getirilebilecek bir derinlik kutusunun gölgesini göstermek için, size nasıl yeniden adım atacağınızı göstereceğimize dair bir örnek verdik. Masaüstünde nasıl yeniden yapacağınızı göstereceğimiz masaüstü sonuçları düzeni, masaüstünde böyle göründüğünü göstereceğimiz:
Cep telefonunda hücresel ve bunun gibi: Divi ile bir satır kutusunun gölgesini kullanmanın yaratıcı yollarıYouTube kanal biçimimize abone olun Yapmanız gereken ilk şey doğru başlık biçimini seçmektir. Gösterge Tablosu WordPress> Özelleştir> Başlık ve Navigasyon> Başlık Biçimi> ve Başlık Stili olarak ‘Merkezli’ seçin. Ana Menü Çubuğu Başlık ve Gezinme> Ana Menü Çubuğu> ve aşağıdaki ayarları yapın:
Logo görüntülerini gizle: Etkinleştir
Menü Yüksekliği: 211
Max Yüksek Logo: 30
Metin Boyutu: 16
Mektup alanı: 2
Yazı Tipi: Lato Light
Yazı tipi stili: büyük harf
Metin rengi: #ffffff
Aktif bağlantı rengi: #ffffff
Arka plan rengi: RGBA (255,255,255.0)
Açılır menü arka plan rengi: RGBA (255,255,255.0) Temanın ayarlanmasında bir değişiklik yaptıktan sonra ilk bölüm, düzen ile başlama zamanı. Yeni bir sayfa oluşturun, Divi Builder’ı etkinleştirin ve görsel oluşturucuya geçin. Ardından, sayfaya ilk standart parçayı ekleyin. Gradyan Arka Plan Bölümü Bu bölüm aşağıdaki gradyan arka planı gerektirecektir:
İlk renk: #EA2E7D
Renk İkinci: #EDD900
Gradyan Türü: Doğrusal
Gradyan yönü: 110deg
Başlangıç Pozisyonu:%0 Son Pozisyon:%100
Tasarım sekmesine mesafe hareketi. Uzay alt kategorisinde, üst dolgu için ‘100px’ ve alt dolgu için ‘200px’ kullanın. Bir Sıra Bir Sütun Arka Plan Yasası Satır Bu bölüme bir satır bir sütun ekleyerek devam edin ve aşağıdaki gradyan arka planından yararlanın: Birinci Renk: RGBA (255,255,255.0)
Renk İkinci: #EA2E7D
Gradyan Türü: Radyal
Radyal Yön: Merkez
Başlangıç Pozisyonu:% 56
Son pozisyon:% 100
Arka Plan Gradyan sütunu aşağı kaydırın ve satır sütunu için aşağıdaki gradyan arka planını kullanın: Birinci renk: RGBA (237,217,0,0,77)
İkinci renk: RGBA (255,255,255.0)
Sütun Gradyan Türü: Doğrusal
Sütun gradyan yönü: 180deg
Sütunun başlangıç konumu: 0
Sütunun ucunun konumu: 100
Yapıştırıcı Tasarım sekmesini açın ve aşağıdaki değişikliklerin alt kategori boyutu için geçerli olmasını sağlayın: Özel genişlik kullanın: evet
Özel genişlik:% 27
Mesafe Ardından, özel dolgu, sağ, alt ve sol çizgi için ’20px’ kullanın. Metin Modülü Satır ayarları ile bitirdikten sonra metin modülünü ekleyin ve metin alt kategorisi için aşağıdaki ayarları kullanın: Metin Yazı Tipi: Arvo
Metin yazı tipi boyutu: 98px
Metin rengi: #ffffff
Metin mektubu alanı: 32px
Yüksek çizgi metin: 1.4em
Metin Oryantasyonu: Orta
İkinci kısım, ilk bölümün hemen altına başka bir parça ekler. Bu bölüm, düzendeki diğer tüm satırları içerecektir. Birinci gradyanın arka plan kısmı, bu bölüm için aşağıdaki gradyan arka planını kullanın: Birinci Renk: RGBA (255,255,255.0)
Renk İkinci: #592851
Gradyan Türü: Doğrusal
Gradyan yönü: 180 derece
Başlangıç Pozisyonu:% 80
Son pozisyon:% 80
Sonraki mesafe, tasarım sekmesini açın ve alt dolguya ‘100px’ ekleyin. Satırın arka plan renginin ilk iki sütunu, bu yeni bölüme ilk iki sütunu ekleyin ve arka plan rengi olarak ‘#dddddd’ kullanın. Sütun 1 Arka plan gradyanı İlk sütun aşağıdaki gradyan arka planı gerektirecektir: İlk renk: #6AC922 Renk İkinci: #B6C1B2
Sütun 1 Gradyan Türü: Doğrusal
Sütun 1 Degrade Yönü: 136deg
Sütun 1 Başlangıç Pozisyonu:% 23
Sütun 1:% 100’ün son konumu
Sütun 2’nin arka plan rengi aşağı kaydırın ve sütun 2’nin arka plan rengi olarak ‘#ddddddd’ kullanın.
Tasarım sekmesine yapışkan hareket edin ve alt kategori boyutu için aşağıdaki ayarları kullanın: Özel genişlik kullanın: Etkinleştir Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Boşluk mesafesi alanı aşağıdaki dolgu ve marj gerektirecektir:
Üst, sağ, alt ve sol dolgu: 0px Üst kenar boşluğu: -150px
Üst Dolgu 1 Sütun: 235px (masaüstü), 0px (tablet ve cep telefonu)
Sütun 1 Pilding Alt: 235px (masaüstü), 0px (tablet ve cep telefonu)
Sütun 2 Dolgu Üst: 150 piksel
Sütun 2 Dolgu Alt: 150 piksel
Gölge Gölgesi Gölge Alt Kategori Kutusu ve aşağıdaki ayarları kullanın:
Yatay konum gölge kutusu: -3px
Bulanık Güç Gölgesi Kutusu: 77px
Gölge kutularının dağılımının gücü: 23px
Gölge Rengi: RGBA (0.0,0,0,3)
İlk metin modülü daha sonra, ikinci sütuna ilk metin modülünü ekleyin ve metin alt kategorisi için aşağıdaki ayarları kullanın:
Metin Yazı Tipi: Arvo Metin yazı tipi boyutu: 34px
Metin Rengi: #7A7A7A
Metin Oryantasyonu: Orta
İkinci metin modülü başka bir metin modülü ekler, ancak aşağıdaki ayarları kullanır:
Metin yazı tipi: lato ışık Metin Oryantasyonu: Orta
Alt kategori boyutlandırmasını açın, ‘%75’ genişliğini kullanın ve hizalama modülünün ortasını seçin.
Son olarak, ’50px’in üst kenarını ekleyin. Satırın iki arka plan renginin iki sütunu yapın, bu bölüme iki sütun daha ekleyin ve arka plan rengi olarak’#b99bc1 ‘seçin. Sütun 1’in arka plan rengi aşağı kaydırın ve arka plan renk sütunu 1 için ‘#dddddd’ seçeneğini seçin. Tasarım sekmesine yapışkan hareket ve aşağıdaki ayarların alt kategori boyutu için geçerli olmasını sağlar: Özel Talang genişliği kullanın: evet Talang genişliği: 1 Sonraki mesafe, aşağıdaki dolguyu kullanın:
Üst, sağ, alt ve sol dolgu: 0px
Sütun 1 Dolgu: 150 piksel (masaüstü), 0px (tablet ve cep telefonu) Sütun 1 Pilding Alt: 50px (masaüstü), 0px (tablet ve cep telefonu)
Sütun 2 Dolgu Üst: 150 piksel
Sütun 2 Dolgu Alt: 150 piksel
Gölge Gölgesi Gölge Alt Kategori Kutusu ve aşağıdaki ayarları kullanın:
Yatay konum gölge kutusu: -4px
Dikey Konum Gölge Kutusu: 24 piksel Bulanık Güç Gölgesi Kutusu: 77px
Gölge kutularının dağılımının gücü: 23px
Gölge Rengi: RGBA (0.0,0,0,3)
Kutu Gölgesi Pozisyonu: Dış Gölge
İlk sütundaki ilk görüntü modülü, görüntü modülünü ilk sütuna ekleyerek devam eder. Görüntüyü yükledikten sonra, spasi alt kategorisi için aşağıdaki ayarların uygulanmasını sağlayın:
Resmin altındaki alanı göster: Evet
Üst kenar: -500 piksel (masaüstü), 0px (tablet ve cep telefonu) Sağ kenar boşluğu: -50px (masaüstü), 0px (tablet ve cep telefonu)
Sol kenar boşluğu: 200px (masaüstü), 0px (tablet ve cep telefonu)
Box Shadow Alt Kategorisini açın ve aşağıdaki kutu gölgesini kullanın:
Yatay konum gölge kutusu: 2px
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ü: 30px
Gölge Renk: RGBA (255,255,255.0.68)
Kutu Gölgesi Pozisyonu: Dış Gölge
İlk sütundaki ikinci görüntü sütunu aynı sütuna başka bir görüntü modülü ekler ve aşağıdaki marjı kullanır: üst kenar boşluğu: -50px (masaüstü), 0px (tablet ve cep telefonu)
Sağ kenar boşluğu: 100 piksel (masaüstü), 0px (tablet ve cep telefonu)
Alt kenar boşluğu: 30 piksel Sol kenar boşluğu: 100 piksel (masaüstü), 0px (tablet ve cep telefonu)
Ardından, aşağı kaydırın ve aşağıdaki kutu gölgesini kullanın:
Yatay konum gölge kutusu: 2px
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ü: 30px
Gölge Renk: RGBA (255,255,255.0.68)
Kutu Gölgesi Pozisyonu: Dış Gölge
Klon Metin Modülü ve İkinci Sütun Sonuncusuna, önceki satırdan iki metin modülü klonlayın ve bu satırın ikinci sütununa yerleştirin. Değiştirmeniz gereken tek bir şey var; metin rengi. Her metin modülü ayarlarını açın ve metnin rengini ‘#ffffff’ olarak değiştirin. Masaüstü Sonuçları Bu yazıdaki tüm adımlar masaüstünde aşağıdaki sonuçlara yol açacaktır:
Cep telefonlarında hücresel ve aşağıdaki sonuçlar:
Bu yazıdaki son zihin, kutunun gölgesini çizgide nasıl yaratıcı bir şekilde kullanabileceğinizi gösterdik. Düzeni verilen derinlik kutusunun gölgesini açıkça görebileceğiniz renkli bir örnek yaptık. 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! Dmitry Guzhanin / Shutterstock.com tarafından Üstün Görüntü
