Divi ile Satır Kutusu Gölgelerini Yaratıcı Bir Şekilde Kullanma

En son Divi güncellemelerinden biri uzun zamandır bekleniyordu; kutu gölgelerinin bölümlere, sıralara ve modüllere entegrasyonu. Bu yazıda, satır kutusu gölgelerinin web sitenizin genel görünümünü ve verdiği hissi nasıl iyileştirebileceğine odaklanacağız.

Gölgelerin web sitenize getirebileceği derinlik kutusunu göstermek için, size adım adım nasıl yeniden oluşturacağınızı göstereceğimiz bir örnek oluşturduk.

Sonuç

masaüstü

Size nasıl yeniden oluşturulacağını göstereceğimiz düzen, masaüstünde şöyle görünür:

Mobil

Ve mobilde şöyle:

Divi ile Satır Kutusu Gölgelerini Yaratıcı Bir Şekilde Kullanma

Youtube Kanalımıza Abone Olun

Başlık Formatı

Yapmanız gereken ilk şey, doğru Başlık Formatını seçmek. WordPress Kontrol Panelinize > Özelleştir > Başlık ve Gezinme > Başlık Formatına gidin > ve Başlık Stili olarak 'Merkezli'yi seçin .

Birincil Menü Çubuğu

Başlık ve Gezinme > Birincil Menü Çubuğu > seçeneğine geri dönün ve aşağıdaki ayarlamaları yapın:

• Logo Resmini Gizle: Etkinleştir
• Menü Yüksekliği: 211
• Logo Maksimum Yükseklik: 30
• Metin Boyutu: 16
• Harf Aralığı: 2
• Yazı Tipi: Lato Işık
• 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)

Birinci kısım

Tema Özelleştirici'de değişiklikleri yaptıktan sonra, düzene başlamanın zamanı geldi. Yeni bir sayfa oluşturun, Divi Builder'ı etkinleştirin ve Visual Builder'a geçin. Ardından, sayfaya ilk standart bölümü ekleyin.

Bölüm Gradyan Arka Planı

Bu bölüm aşağıdaki gradyan arka planına ihtiyaç duyacaktır:

• İlk Renk: #ea2e7d
• İkinci Renk: #edd900
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 110deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

aralık

Tasarım sekmesine geçin. Aralık alt kategorisinde, üst dolgu için '100px' ve alt dolgu için '200px' kullanın.

Tek Sütunlu Satır

Satır Gradyan Arka Planı

Bölüme tek sütunlu bir satır ekleyerek devam edin ve aşağıdaki gradyan arka planından yararlanın:

• İlk Renk: rgba(255,255,255,0)
• İkinci Renk: #ea2e7d
• Gradyan Türü: Radyal
• Radyal Yön: Merkez
• Başlangıç ​​Konumu: %56
• Bitiş Konumu: %100

Sütun Gradyan Arka Planı

Aşağı kaydırın ve o satırın sütunu için aşağıdaki gradyan arka planını kullanın:

• İlk 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ütun Başlangıç ​​Konumu: 0
• Sütun Bitiş Konumu: 100

boyutlandırma

Tasarım sekmesine gidin ve Boyutlandırma alt kategorisine aşağıdaki değişiklikleri uygulayın:

• Özel Genişlik Kullan: Evet
• Özel Genişlik: %27

aralık

Ardından, satırın üst, sağ, alt ve sol Özel Dolgusu için '20px' kullanın.

Metin Modülü

Satır ayarlarıyla işiniz bittiğinde, bir Metin Modülü 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 Harf Aralığı: 32px
• Metin Satırı Yüksekliği: 1.4em
• Metin Yönü: Merkez

İkinci Bölüm

İlk bölümün hemen altına başka bir bölüm ekleyin. Bu bölüm, düzende bulunan diğer tüm satırları içerecektir.

Bölüm Gradyan Arka Planı

İlk olarak, bu bölüm için aşağıdaki gradyan arka planını kullanın:

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

aralık

Ardından, Tasarım sekmesine gidin ve alt dolguya '100px' ekleyin.

İlk İki Sütunlu Satır

Satır Arka Plan Rengi

Bu yeni bölüme ilk iki sütunlu satırı ekleyin ve arka plan rengi olarak '#dddddd' kullanın.

Sütun 1 Gradyan Arka Planı

İlk sütun aşağıdaki gradyan arka planına ihtiyaç duyacaktır:

• İlk Renk: #6ac922
• İkinci Renk: #b6c1b2
• Sütun 1 Gradyan Türü: Doğrusal
• Sütun 1 Gradyan Yönü: 136deg
• Sütun 1 Başlangıç ​​Konumu: %23
• Sütun 1 Bitiş Konumu: %100

Sütun 2 Arka Plan Rengi

Aşağı kaydırın ve Sütun 2 Arka Plan Rengi olarak '#dddddd' kullanın.

boyutlandırma

Tasarım sekmesine gidin ve Boyutlandırma alt kategorisi için aşağıdaki ayarları kullanın:

• Özel Genişliği Kullan: Etkinleştir
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Aralık alt kategorisi aşağıdaki dolgu ve kenar boşluğuna ihtiyaç duyacaktır:

• Üst, Sağ, Alt ve Sol Dolgu: 0px
• Üst Kenar Boşluğu: -150px
• Sütun 1 Üst Dolgu: 235px (Masaüstü), 0px (Tablet ve Telefon)
• Sütun 1 Alt Dolgu: 235px (Masaüstü), 0px (Tablet ve Telefon)
• Sütun 2 Üst Dolgu: 150 piksel
• Sütun 2 Alt Dolgu: 150 piksel

Kutu Gölge

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

• Kutu Gölgesi Yatay Konumu: -3px
• Kutu Gölge Dikey Konumu: -18px
• Kutu Gölge Bulanıklığı Gücü: 77px
• Kutu Gölge Yayılma Gücü: 23px
• Gölge Rengi: rgba(0,0,0,0.3)

İlk Metin Modülü

Ardından, ilk Metin Modülünü ikinci sütuna 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 Yönü: Merkez

İkinci Metin Modülü

Başka bir Metin Modülü ekleyin ancak bunun yerine aşağıdaki ayarları kullanın:

• Metin Yazı Tipi: Lato Light
• Metin Yönü: Merkez

Boyutlandırma alt kategorisini açın, '%75' Genişlik kullanın ve orta Modül Hizalamasını seçin.

Son olarak, '50 piksel'lik bir üst kenar boşluğu ekleyin.

İkinci İki Sütunlu Satır

Satır Arka Plan Rengi

Bölüme iki sütunlu bir satır daha ekleyin ve arka plan rengi olarak '#b99bc1'i seçin.

Sütun 1 Arka Plan Rengi

Aşağı kaydırın ve Sütun 1 Arka Plan Rengi için '#dddddd'yi seçin.

boyutlandırma

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

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Ardından, aşağıdaki dolguyu kullanın:

• Üst, Sağ, Alt ve Sol Dolgu: 0px
• Sütun 1 Üst Dolgu: 150 piksel (Masaüstü), 0 piksel (Tablet ve Telefon)
• Sütun 1 Alt Dolgu: 50px (Masaüstü), 0px (Tablet ve Telefon)
• Sütun 2 Üst Dolgu: 150 piksel
• Sütun 2 Alt Dolgu: 150 piksel

Kutu Gölge

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

• Kutu Gölgesi Yatay Konumu: -4px
• Kutu Gölge Dikey Konumu: 24px
• Kutu Gölge Bulanıklığı Gücü: 77px
• Kutu Gölge Yayılma Gücü: 23px
• Gölge Rengi: rgba(0,0,0,0.3)
• Kutu Gölge Konumu: Dış Gölge

Birinci Sütundaki İlk Görüntü Modülü

İlk sütuna bir Görüntü Modülü ekleyerek devam edin. Resmi yükledikten sonra, Aralık alt kategorisine aşağıdaki ayarları uygulayın:

• Resmin Altındaki Boşluğu Göster: Evet
• Üst Kenar Boşluğu: -500px (Masaüstü), 0px (Tablet ve Telefon)
• Sağ Kenar Boşluğu: -50px (Masaüstü), 0px (Tablet ve Telefon)
• Sol Kenar Boşluğu: 200px (Masaüstü), 0px (Tablet ve Telefon)

Kutu Gölgesi alt kategorisini açın ve aşağıdaki kutu gölgesini kullanın:

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

Birinci Sütundaki İkinci Resim Sütunu

Aynı sütuna başka bir Görüntü Modülü ekleyin ve aşağıdaki kenar boşluğunu kullanın:

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

Ardından aşağı kaydırın ve aşağıdaki kutu gölgesinden yararlanın:

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

Metin Modüllerini Klonla ve İkinci Sütundaki Yeri

Son olarak, önceki satırın iki Metin Modülünü kopyalayın ve bunları bu satırın ikinci sütununa yerleştirin. Değiştirmeniz gereken tek bir şey var; metin rengi. Her Metin Modülünün ayarlarını açın ve metin rengini '#FFFFFF' olarak değiştirin.

Sonuç

masaüstü

Bu gönderideki tüm adımlar, masaüstünde aşağıdaki sonuca yol açacaktır:

Mobil

Ve mobilde aşağıdaki sonuç:

Son düşünceler

Bu gönderide, kutu gölgelerini satırlarda nasıl yaratıcı bir şekilde kullanabileceğinizi gösterdik. Derinlik kutusu gölgelerinin bir düzene verdiğini açıkça fark edebileceğiniz renkli bir örnek oluşturduk. 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!

Öne Çıkan Resim Dmitry Guzhanin / Shutterstock.com