Divi kutusu gölgeleriyle kutunun dışında düşünün
Divi’nin varsayılan ayarlarına yaklaşmanın iki yolu vardır. İlk ve en belirgin yaklaşım, sayfanızdaki belirli öğelere odaklanırken ayarları erişebilmektir. İkinci yaklaşım, daha önce hiç düşünmediğiniz net ayarların ve kullanma yöntemlerinin ötesine bakmanızı sağlar. Bu ayarlardan biri kutunun gölgesini içerir. Genellikle, öğeleriniz için belirli bir derinlik oluşturmak için kullanılırlar. İster bölüme, hatta veya modüle ekleyin, en belirgin niyet vurgulamaktır. Ancak, web sitenizdeki genel tasarım amaçları için kutunun gölgesini de kullanabilirsiniz. Arka plan dokusunu değiştirebilir ve web sitenize asimetri ekleyebilirler. Bu öğreticide, Divi Business Danışmanı Düzen Paketi Paket sayfasını kullanarak kutunun bir gölgesi ile kutunun dışında düşünmenin yollarını göstereceğiz. Nasıl çalıştığını anladıktan sonra, bu taktiği web sitenizi biraz daha benzersiz ve olgunlaştıracak herhangi bir sayfaya uygulayabilirsiniz.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sayfaya uygulanan kutunun gölgesinin etkisine bakalım:
Kutunun gölgesini sayfanızdaki (neredeyse) herhangi bir öğeye uygulayabilirsiniz.
Varsayılan olarak, bu kutunun gölgesi öğeye bağlıdır ve onu arttırmak için kullanılır
Ancak, bunu genel sayfa tasarım amacıyla da kullanabilirsiniz.
Bu öğretici için, daha önce oluşturulmuş olan düzen paketinden iş danışmanının sayfalarının düzenini kullanıyoruz
Ancak bu tasarım taktiğini herhangi bir tasarımda kullanabilirsiniz
Bu kutunun gölgesini uygulamak için henüz görsel bir inşaatçının gölgesini uygulamamış bölümleri/satırları/modülleri kullanın (görünüm ve his ile oynamanıza izin veren)
Yatay ve dikey konumlardan varsayılan aralığı genişletiyoruz
Bu kutunun gölgesini nasıl konumlandırmak istediğimize bağlı olarak, olumlu ve negatif değerler kullanacağız
Bu, kutunun gölgesinin parça/satır/modülle ilgisiz görünmesini sağlar, ancak genel sayfa tasarımının kısmı
Divi kutusu gölgeleriyle kutunun dışında düşünün
YouTube kanalımıza abone olarak İş danışmanımızın iş sayfalarının düzenini yüklerken, yeni bir sayfa oluşturarak ve görsel oluşturucuyu etkinleştirerek bu öğreticiye başlayacağız. Kutunun gölgesine ve sayfanızda nasıl kullanılacağımıza odaklanacağız, bu yüzden mevcut düzeni kullanacağız. Bu düzeni yüklemek için, sayfanızın altında bulunan simgeyi tıklayın, bir sonraki artı simgesini seçin, bir iş danışmanı düzeni paketi bulana ve yön sayfasının düzenini kullanana kadar farklı düzen paketini aşağı kaydırın.
Gölge Bölüm Kutusu #1 Konum Sayfanızdaki bölüm, kutunun gölgesini sayfanızdaki hemen hemen tüm öğelere uygulayabilir. Kutunun gölgesini kullanmaya başlayacağız. Ekleyeceğimiz ilk kutunun gölgesi sayfanızda aşağıdaki bölümdür: Kutunun gölgesini uygulayın Bölüm ayarlarını açtıktan sonra aşağıdaki kutu gölgesini uygulayın: Yatay Konum Gölge Kutusu: 1200 piksel
Dikey Konum Gölge Kutusu: -520px
Kutu Gölgesi Rengi: RGBA (198,198,198.0.27)
Bu, sayfanızda aşağıdaki efekti oluşturacaktır:
Gölgenin Gölgesi #2 Konum Sayfanın ikinci bölümünde iki kutunun gölgesini uygulayacağız aşağıdaki gibidir: Açık gri kutunun gölgesini sol tarafa eklemek için bu bölümün gölgesini uygulayabilir sayfamızın: Yatay konum gölge kutusu: -1000px Kutu gölgesinin dikey konumu: -740px
Kutunun gölgesinin dağılımının gücü: -39px
Kutu Gölgesi Rengi: RGBA (188,188,188,0.25)
Sayfamızdaki satırın 1 numaralı Box #1 konumu, sayfamızdaki aşağıdaki satırlara gölge kutuları ekleyecektir:
Kutumuzun gölgesini uygulayın Turuncu kutunun gölgesini ekle (tüm düzen paketiyle eşleşen): Yatay Konum Kutusu Gölgesi: -700 piksel
Kutu gölgesinin dikey konumu: -300px
Kutu Gölgesinin Rengi: #EDBB5F
Dolma satırını çıkarın Önceki basılı ekranda gördüğünüz gibi, satırınızın üstünde ve altında hala beyaz bir alan var. Bu dolgu, önceki adımda eklediğiniz kutunun gölgesiyle örtüşüyor. Bu beyaz arka planı ortadan kaldırmak için, üst ve alt dolgunuza ‘0px’ ekleyin.
Metin Modülü Kutusu Modülü Gölge Metin Modülü #1 Bölüm ve satır dışındaki sayfadaki metin modülünün konumu, modüle kutunun gölgelerini de ekleyebilirsiniz. Örneğin sayfanızdaki metin modülü. Aşağıdaki metin modülünü açın:
Gölge kutularının dağılımının gücü: 89px
Kutu Gölgesinin Rengi: #2F2F2F
Metin Modülünün Gölgesi Metin #2 Metin modülünün sayfamızdaki konumu, önceki kutu ile örtüşmek için ikinci metin modülü kutusunun gölgesini de kullanacaktır. Sayfanıza eklediğiniz önceki kutunun gölgesiyle örtüşen kutunun gölgesini görecek:
Yatay Konum Gölge Kutusu: 350px Dikey Konum Gölge Kutusu: -600 piksel Kutu Gölgesi Rengi: RGBA (198,198,198.0.27)
Metin Modülünün Gölgesi #3 Aşağıdaki metin modülünü bulana kadar sayfanızın altındaki kaydırma sayfasındaki metin modülünün konumu:
Aşağıdaki ayarları kullanarak turuncu kutunun gölgesini yapmak için kutumuzun gölgesini uygulayın:
Yatay Konum Gölge Kutusu: 900 piksel Dikey Konum Gölge Kutusu: -520px Gölge kutularının dağılımının gücü: 160 piksel
Kutu Gölgesinin Rengi: #EDBB5F
Metin Modülünün Gölgesi #3 Metin modülünün, uygulayacağımız son kutunun sayfalarındaki konumu, metin modülünün bu yazının önceki adımında kullandığınız bir kısmıdır:
Aşağıdaki bölümün arka planı için kullanılan bu kutunun gölgesi için aynı rengi kullanarak kutumuzun gölgesini uygulayın. Aşağıdaki ayarlarla birlikte kutunun gölgesinin rengi inanılmaz sonuçlar verecektir:
Yatay konum gölge kutusu: -350px Dikey Konum Gölge Kutusu: 500 piksel Gölge kutularının dağılımının gücü: 200px
Kutu Gölgesinin Rengi: #2F2F2F
Önizleme Şimdi tüm adımlardan geçtikten sonra, kutunun birkaç gölgesini ekledikten sonra iş danışmanının yön sayfasındaki sonuna bakalım:
