Divi Box Gölgeleri ile Kutunun Dışında Düşünmek

Divi'nin yerleşik ayarlarına yaklaşmanın iki yolu vardır. İlk ve en belirgin yaklaşım, sayfanızdaki belirli öğeye odaklanırken ayarları kendi aralıkları içinde kullanmaktır. İkinci yaklaşım, bariz olanın ötesine bakmanıza ve ayarları daha önce düşünmediğiniz bir şekilde kullanmanıza olanak tanır. Bu ayarlardan biri kutu gölgelerini içerir. Normalde, öğeleriniz için belirli bir derinlik oluşturmak için kullanılırlar. Eğer bir bölüm, satır veya modül ekleyerek olsun, onların en belirgin niyet vurgulamak etmektir.

Ancak, web sitenizde genel tasarım amaçları için kutu gölgelerini de kullanabilirsiniz. Arka plan dokularını değiştirebilir ve web sitenize asimetri ekleyebilirler. Bu eğitimde, Divi's Business Consultant Layout Pack açılış sayfasını kullanarak kutu gölgeleriyle kutunun dışında nasıl düşüneceğinizi göstereceğiz. Nasıl çalıştığını anladıktan sonra, bu taktiği oluşturduğunuz herhangi bir sayfaya uygulayabilirsiniz, bu da web sitenizin biraz daha benzersiz ve üzerinde düşünülmüş görünmesini sağlayacaktır.

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, bir sayfaya uygulanan kutu gölge efektlerine bir göz atalım:

Yaklaşmak

• Sayfanızdaki (neredeyse) herhangi bir öğeye kutu gölgesi uygulayabilirsiniz
• Varsayılan olarak, bu kutu gölgeleri öğeye bağlıdır ve onu geliştirmek için kullanılır.
• Ancak, bunları genel sayfa tasarımı amaçları için de kullanabilirsiniz.
• Bu eğitim için, önceden hazırlanmış düzen paketlerimizden İşletme Danışmanı açılış sayfası düzenini kullanıyoruz
• Ancak bu tasarım taktiğini herhangi bir tasarımda kullanabilirsiniz.
• Henüz kendilerine bir kutu gölgesi uygulanmamış bölümleri/satırları/modülleri kullanın
• Bu kutu gölgelerini uygulamak için Görsel Oluşturucu'yu kullanın (görünüm ve his ile oynamanıza izin verir)
• Hem yatay hem de dikey konumun varsayılan aralığını genişletiyoruz
• Bu kutu gölgesini nasıl konumlandırmak istediğimize bağlı olarak, hem pozitif hem de negatif değerler kullanacağız.
• Bu, kutu gölgesinin bölüm/satır/modül ile ilgili değil, tüm sayfa tasarımının bir parçası gibi görünmesini sağlar.

Divi Box Gölgeleri ile Kutunun Dışında Düşünmek

Youtube Kanalımıza Abone Olun

İş Danışmanı Açılış Sayfası Düzeni Yükleyin

Bu öğreticiye yeni bir sayfa oluşturarak ve Görsel Oluşturucu'yu etkinleştirerek başlayacağız. Kutu gölgelerine ve bunların sayfanızda nasıl kullanılacağına odaklanacağız, bu yüzden zaten var olan bir düzeni kullanacağız. Bu düzeni yüklemek için sayfanızın alt kısmında bulunan simgeye tıklayın, ardından artı simgesini seçin, İş Danışmanı Düzen Paketi ile karşılaşana kadar farklı düzen paketlerini aşağı kaydırın ve açılış sayfası düzenini kullanın.

Bölümler

Kutu Gölge #1

Sayfadaki Bölümün Konumu

Sayfanızdaki hemen hemen her öğeye kutu gölgesi uygulayabilirsiniz. Bölüm kutusu gölgelerini kullanarak başlayacağız. Ekleyeceğimiz ilk kutu gölgesi, sayfanızdaki aşağıdaki bölümün bir parçasıdır:

Kutu Gölgesini Uygula

Bölüm ayarlarını açtıktan sonra, ona aşağıdaki kutu gölgesini uygulayın:

• Kutu Gölgesi Yatay Konum: 1200px
• Kutu Gölgesi Dikey Konumu: -520px
• Kutu Gölge Rengi: rgba(198,198,198,0.27)

Kutu Gölge #2

Sayfadaki Bölümün Konumu

Bir kutu gölge uygulayacağımız ikinci bölüm, aşağıdaki bölümdür:

Kutu Gölgesini Uygula

Sayfamızın sol tarafına açık gri bir kutu gölgesi eklemek için bu bölümü kullanıyoruz:

• Kutu Gölgesi Yatay Konumu: -1000px
• Kutu Gölgesi Dikey Konumu: -740px
• Kutu Gölge Yayılma Gücü: -39px
• Kutu Gölge Rengi: rgba(188,188,188,0.25)

satırlar

Kutu Gölge #1

Sayfadaki Satırın Konumu

Ayrıca sayfamızda aşağıdaki satıra bir kutu gölgesi ekleyeceğiz:

Kutu Gölgesini Uygula

Turuncu bir kutu gölgesi ekliyoruz (tüm düzen paketiyle eşleşen):

• Kutu Gölgesi Yatay Konum: -700px
• Kutu Gölgesi Dikey Konumu: -300px
• Kutu Gölge Rengi: #edbb5f

Satır Dolgusunu Kaldır

Önceki yazdırma ekranında fark edebileceğiniz gibi, sıranızın üstünde ve altında hala biraz boşluk var. Bu dolgu, önceki adımda eklediğiniz kutu gölgesiyle örtüşüyor. Bu beyaz arka plandan kurtulmak için satırınızın üst ve alt dolgusuna '0px' ekleyin.

Metin Modülleri

Metin Modülü Kutu Gölgesi #1

Metin Modülünün Sayfadaki Konumu

Modüllere bölüm ve satırların yanı sıra kutu gölgeleri de ekleyebilirsiniz. Örneğin, sayfanızdaki metin modülleri. Aşağıdaki Metin Modülünü açın:

Kutu Gölgesini Uygula

Ve bölümünüzün sağ üst kısmına bir kutu gölgesi ekleyecek olan aşağıdaki kutu gölgesini uygulayın:

• Kutu Gölgesi Yatay Konumu: 600px
• Kutu Gölge Dikey Konumu: -368px
• Kutu Gölge Yayılma Gücü: 89px
• Kutu Gölge Rengi: #2f2f2f

Metin Modülü Kutu Gölgesi #2

Metin Modülünün Sayfadaki Konumu

Önceki kutu gölgesiyle de örtüşmek için ikinci Metin Modülü kutu gölgesini kullanacağız:

Kutu Gölgesini Uygula

Kutu gölgesini ekledikten sonra, sayfanıza eklediğiniz bir önceki kutu gölgesiyle örtüşen bir kutu gölgesi izleyeceksiniz:

• Kutu Gölgesi Yatay Konum: 350px
• Kutu Gölgesi Dikey Konumu: -600px
• Kutu Gölge Rengi: rgba(198,198,198,0.27)

Metin Modülü Kutu Gölgesi #3

Metin Modülünün Sayfadaki Konumu

Sonraki Metin Modülü ile karşılaşana kadar sayfanızı aşağı kaydırın:

Kutu Gölgesini Uygula

Aşağıdaki ayarları kullanarak turuncu bir kutu gölgesi oluşturuyoruz:

• Kutu Gölgesi Yatay Konumu: 900px
• Kutu Gölgesi Dikey Konumu: -520px
• Kutu Gölge Yayılma Gücü: 160px
• Kutu Gölge Rengi: #edbb5f

Metin Modülü Kutu Gölgesi #3

Metin Modülünün Sayfadaki Konumu

Uygulayacağımız son kutu gölgesi, bu yazının önceki adımında kullandığınızın hemen üstündeki Metin Modülünün bir parçasıdır:

Kutu Gölgesini Uygula

Bu kutu gölgesi için, aşağıdaki bölümün arka planı için kullanılan rengin aynısını kullanıyoruz. Aşağıdaki ayarlarla birlikte kutu gölge rengi çarpıcı bir sonuç yaratacaktır:

• Kutu Gölgesi Yatay Konumu: -350px
• Kutu Gölge Dikey Konumu: 500px
• Kutu Gölge Yayılma Gücü: 200px
• Kutu Gölge Rengi: #2f2f2f

Ön izleme

Tüm adımların üzerinden geçtik, şimdi İş Danışmanı açılış sayfasına birden çok kutu gölgesi ekledikten sonra son bir göz atalım:

Son düşünceler

Bu yazıda, kutu gölgeleriyle kutunun dışında nasıl düşüneceğinizi gösterdik. Belirli bir bölümü, satırı veya modülü vurgulamak için kutu gölgelerini kullanmanın yanı sıra, bunları web sitenizde genel tasarım amaçları için de kullanabilirsiniz. Bu yaklaşım, mevcut tasarım trendlerine uyan benzersiz sayfalar oluşturmanıza yardımcı olabilir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!