Divi'de Tasarım Öğelerine Tek Taraflı Kutu Gölgeleri Nasıl Eklenir

Divi'deki çeşitli tasarım öğelerine tek taraflı kutu gölgeleri eklemek, içerikten uzaklaşmadan yaratıcı bir görünüm katmanın incelikli bir yoludur. Bu eğitimde, size Divi's Therapy SSS Sayfa Düzenine nasıl tek taraflı kutu gölgeleri ekleyeceğinizi göstereceğim. Ek bir ipucu olarak, size tanıtım yazısı simgelerini dikey olarak ortalanmış bir grafik olarak nasıl birleştireceğinizi de göstereceğim. Bu Divi tasarım tekniklerini öğrenerek, istediğiniz modül veya sütunlara tek taraflı kutu gölgeleri ekleyebilirsiniz.

Başlayalım.

Gizlice Bakış

İşte tek taraflı kutu gölgeleri kullanarak oluşturacağımız SSS Düzen tasarımına bir bakış.

Başlarken

Başlamak için yeni bir sayfa oluşturmanız gerekecek. WordPress Kontrol Panelinizden Sayfalar > Yeni Ekle'ye gidin. Ardından sayfanıza bir başlık verin ve görsel oluşturucuyu dağıtın. “Hazır Düzen Seçin” seçeneğini seçin. Kütüphaneden Yükle açılır penceresinden Terapist Düzen Paketini bulun ve seçin. Ardından Terapist SSS Sayfa Düzenini seçin ve “Bu Düzeni Kullan”a tıklayın.

Artık tasarlamaya başlamaya hazırsınız.

Bölüm 1: Düzeni Düzenleme

Bu önceden hazırlanmış düzende, dikkatimizi çoklu geçiş modüllerinin içindeki sahte soruları içeren ikinci bölüme odaklayacağız. Yeni başlayanlar için, satırın sütun düzenini üç sütun (1/3 1/3 1/3) olarak değiştirelim.

Ardından, Divi'nin Çoklu Seçim özelliğini kullanarak sütun 2'deki tüm modülleri sütun 3'e taşıyın. Bunu yapmak için Komut (veya Kontrol) tuşunu basılı tutun ve tümü seçilene kadar 2. sütundaki her bir modüle tıklayın. Ardından bunları sütun 3'e sürükleyin.

Şimdi sıramıza biraz daha yer vermemiz gerekiyor. Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Genişlik: %80
Oluk Genişliği: 2
Sütun Yüksekliklerini Eşitle: EVET

Bölüm 2: Geçiş Modüllerini Tasarlama

Bu bölümdeki tüm geçiş modüllerinin tasarımını bir kerede özelleştirmek için geçiş modüllerinin her birini seçmek için Çoklu Seçim özelliğini kullanın. Hepsi seçildiğinde, geçiş modüllerinden herhangi birinin ayarlarını açın.

Ardından aşağıdakileri güncelleyin:

Aç / Aç Metin Rengi: #ffffff
Arka Plan Rengini Aç/Kapat: rgba(0,0,0,0)
Kapalı Geçiş Metin Rengi: #ffffff
Kapalı Geçiş Arka Plan Rengi: rgba(0,0,0,0)

Gövde Metni Rengi: #ffffff

Özel Dolgu: 3vw Üst, 3vw Alt, 2vw Sol, 2vw Sağ

Şimdi kutu gölge seçeneklerini aşağıdaki gibi güncelleyerek geçiş modülümüzün sol tarafına bir kutu gölgesi ekleyebiliriz:

Kutu Gölgesi Yatay Konumu: -30px
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Bulanıklığı Gücü: 40px
Kutu Gölge Yayılma Gücü: -35px
Gölge Rengi: rgba(0,0,0,0.4)

Kutu gölgesini doğru konumlandırmanın püf noktası, yatay konumu -30 piksele ayarlayarak gölgeyi sola taşımaktır. Bundan sonra, kutu gölgesini modülün üstüne ve altına akmadan solda görünür tutmak için bulanıklık gücü ve yayılma gücü arasında doğru dengeyi bulmanız gerekir.

Ayarları kaydet.

Artık tüm geçiş modülleriniz yeni tasarımla güncellendi.

Ancak, sağ sütundaki geçiş modüllerinin kutu gölgesinin sağ tarafta (solda değil) konumlandırılmasını istiyoruz. Bunu değiştirmek için, sağ sütundaki tüm geçiş modüllerini seçmek için Multiselect'i kullanın ve eleman ayarlarını açın. Ardından yatay konumu -30 pikselden 30 piksele aşağıdaki gibi değiştirin:

Kutu Gölgesi Yatay Konumu: 30px

Ardından ayarları kaydedin.

Bu, benzersiz tek taraflı kutu gölgeleriyle geçiş modüllerimizi halleder. Şimdi sütunlarımıza benzer tek taraflı kutu gölgeleri eklememiz gerekiyor.

Bölüm 3: Sütunlara Tek Taraflı Kutu Gölgeleri Ekleme

Sütunlara tek taraflı kutu gölgeleri eklemek için satır ayarlarının gelişmiş sekmesinin altına birkaç CSS parçacığı eklememiz gerekecek.

Satır ayarlarını açın ve gelişmiş sekmesine tıklayın. Sütun 1 Ana Öğesinin içine aşağıdaki CSS'yi ekleyin:

kutu-gölge: 30px 0px 70px -45px rgba(0,0,0,0.4)

CSS'ye aşina değilseniz, Divi oluşturucuda bulunan kutu gölge modülü ayarlarıyla kodun benzerliğini anlayabilmelisiniz. Yukarıdaki kodda…

30px yatay konum için değerdir
0px, dikey konumun değeridir
70 piksel bulanıklık gücü değeridir
-45px yayılma gücü değeridir
rgba(0,0,0,0.4) gölge rengidir

Biraz daha fazla derinlik oluşturmak için sütun kutusu gölgesine geçiş modüllerinden daha büyük bir bulanıklık gücü verdim.

Sütun 3'e bir sol kutu gölgesi eklemek için, Sütun 3 Ana Öğesine aşağıdaki CSS'yi eklemeniz gerekir:

box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)

Yine, bu CSS ile sütun 1 için kullanılan CSS arasındaki tek fark, negatif yatay konumdur.

Bölüm 4: Sütun 2'ye Blurb Simgeleri Ekleme

Artık tek taraflı kutu gölgelerimiz tamamlandığında, basit bir grafik tasarım oluşturmak için birkaç tanıtıcı modül simgesini birleştirebileceğimiz boş bir orta sütunumuz var. Bunu yapmak için önce bir tanıtıcı modül ekleyin ve başlığı ve içeriği silin. Ardından bir simge kullanmak için tıklayın ve aşağıdaki sohbet simgesini seçin.

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Simge Rengi: rgba(203,241,252,0.37)
Simge Yazı Tipi Boyutu: 20vw
Özel Kenar Boşluğu: 0px Alt

Ardından, altında ek bir tane oluşturmak için tanıtıcı modülünü çoğaltın.

Ardından, en üstteki açıklamayı bir soru işareti simgesiyle güncelleyin ve aşağıdaki tasarım ayarlarını güncelleyin:

Simge Yazı Tipi Boyutu: 9vw
Genişlik: %40
Modül Hizalaması: Sağ
Özel Marj: -2vw

Son olarak, az önce tasarladığınız soru işareti açıklama modülünü kopyalayın ve büyük sohbet simgesi açıklama modülünün altına yapıştırın. Ardından, bu tanıtıcı modül için tasarım ayarlarını aşağıdaki gibi güncelleyin:

Bölüm 5: Sütun 2'deki Modüllerin Dikey Olarak Ortalanması

Tasarımı bitirmek için, 2. sütundaki tanıtım yazısı simgelerini mizanpajımız için ortalanmış bir tasarım öğesi olarak kalmaları için dikey olarak ortalamamız gerekiyor. Bunu başarmak için Divi'nin flex kullanımından yararlanacağız. Satırımız için sütun yüksekliklerini eşitlemeyi seçtiğimiz için, tüm modülleri sütun 2'de ortalamak için basit bir CSS pasajı kullanabiliriz. Ancak şimdilik satır ayarlarını açın ve gelişmiş sekmesine tıklayın. Ardından, Sütun 2 Ana Öğesinin içine aşağıdaki css'yi girin:

margin: auto

Artık tüm tanıtım modülleri sütun 2'de dikey olarak ortalanacak.

İşleri daha kolay hale getirmek için, 1. sütun ve 2. sütunun üstünde bulunan metin modüllerinin her birinin üzerindeki metni ortalayın. Ardından, bölüme aşağıdaki gibi bir arka plan gradyanı ekleyin:

Arka Plan Gradyanı Sol Renk: #616ce1
Arka Plan Gradyanı Sağ Renk: #3846e0

Bu kadar. Şimdi tasarım tamamlandı.

Nihai sonucu kontrol edin.

Ve geçişleri açarken ve kapatırken kutu gölgesinin nasıl genişlediğini ve daraldığını fark edin.

Son düşünceler

Modüllere ve sütunlara tek taraflı kutu gölgeleri eklemek, içeriğinize yaratıcı yollarla derinlik kazandırabilir. İşin püf noktası, Divi'nin kutu gölge tasarım ayarlarını etkili bir şekilde nasıl ayarlayacağınızı bilmektir. Bu SSS sayfası düzeni, bu tasarımı dahil edebileceğiniz birçok örnekten sadece biridir. Ancak genel süreç oldukça basittir ve gelecekteki projeler için tasarım araç kutunuzda tutabileceğiniz güzel bir teknik olmalıdır.

Yorumlarda sizden haber bekliyorum.

Şerefe!