Divi’deki Tasarım Elemanı’na Bir Kısa Gölge Kutusu Nasıl Eklenir
Divi’deki çeşitli tasarım öğelerine bir Gölge Gölgesi eklemek, içeriği rahatsız etmeden yaratıcılık eklemenin ince bir yoludur. Bu öğreticide, Divi SSS terapisi sayfasının düzenine nasıl bir taraflı kutu gölgesi ekleyeceğinizi göstereceğim. Bonus ipucu olarak, açıklama simgesini dikey olarak ortalanmış bir grafik olarak nasıl birleştireceğinizi de göstereceğim. Bu Divi tasarım tekniğini öğrenerek, istediğiniz modül veya sütuna bir dizi gölge ekleyebilirsiniz. Başlayalım. Aşağıdaki gizlice göz atma, SSS düzeni tasarımından bir bakış açısı, bir kutuun gölgesini kullanarak yapacağımız bir bakış.
Başlamaya başlayın, yeni bir sayfa oluşturmanız gerekir. WordPress kontrol panelinizden sayfa> Yeni Ekle’ye gidin. Ardından sayfanızdaki başlığı verin ve görsel bir yapımcı kullanın. “Önceden Yapılmış Düzen Seç” seçeneğini seçin. Kütüphaneden açılır yükten Terapist Düzen Paketi bulun ve seçin. Ardından SSS sayfası düzeni terapistini seçin ve “Bu düzeni kullan” ı tıklayın. Şimdi tasarıma başlamaya hazırsınız. Bölüm 1: Düzeni ayarlama Bu vakıfta, dikkatimizi birkaç anahtar modülünde yapay sorular içeren ikinci bölüme odaklayacağız. Yeni başlayanlar için, satır sütununun düzenini üç sütuna (1/3 1/3 1/3) değiştirelim. Ardından, çoklu seçici Divi özelliğini kullanarak Sütun 2’deki tüm modülleri Sütun 3’e taşıyın. Bunu yapmak için komutu (veya kontrolü) basılı tutun ve tüm seçilene kadar sütun 2’deki her modülü tıklayın. Ardından sütun 3’e sürükleyin. Şimdi çizgimize biraz daha yer vermemiz gerekiyor. Aşağıdaki satır ayarlarını açın ve Güncelleme: Genişlik:% 80 Oluklar Genişlik: 2 Sütun Yüksekliği Eşit: Evet Bölüm 2: Bu bölümdeki tüm modül modüllerinin tasarımını aynı anda ayarlamak için bir geçiş modülü tasarlama, her bir anahtar modülünü seçmek için çok seçici özelliği kullanın. Tüm seçildikten sonra, anahtarlama modüllerinden biri için ayarları açın. Ardından aşağıdakileri güncelleyin: Metin rengini açın: #fffff Açma Arka Plan Rengi: RGBA (0.0,0,0) Metin anahtarlarının rengi kapalı: #ffffff geçiş Arka plan kapalı: RGBA (0,0,0,0) Renk Gövde Metni: #FFFFFF Dolgu Özel: Top 3VW, Alt 3VW, Sol 2VW, Sağ 2VW Artık kutu gölge seçeneğini aşağıdaki gibi güncelleyerek anahtar modülümüzün sol tarafına kutunun bir gölgesini ekleyebiliriz: Yatay konum Gölge Kutusu: -30px Dikey Konum Gölge Kutusu: 0PX Bulanık Güç Gölge Kutusu: Gölgelerin 40px Dağıtım Gücü Kutular: -35px Renk Gölgesi: RGBA (0.0,0,0.4) Kutunun gölgesini doğru bir şekilde yerleştirmenin hilesi, yatay konumu 30px’e ayarlayarak gölgeyi sola taşımaktır. Bundan sonra, bulanıklık mukavemeti ile yayılmanın mukavemeti arasında doğru dengeyi bulmanız gerekir, böylece kutunun gölgesi modülün üstüne ve altına çıkmadan solda görünür kalır. Ayarları kaydedin. Artık tüm anahtar modülleriniz yeni tasarımlarla güncellendi. Ancak, sağ sütundaki anahtar modülü kutusunun gölgesinin sağ tarafta (sola gitmemesi) konumlandırılmasını istiyoruz. Değiştirmek için, sağ sütundaki tüm modül modüllerini ve öğe ayarlarını açmak için MultiSect kullanın. Ardından, yatay konumu -30px’ten 30px’e aşağıdaki gibi değiştirin: Yatay Konum Gölge Kutusu: 30pxArdından ayarları kaydedin. Anahtar modülümüzü benzersiz bir gölgeyle işler. Şimdi sütuna benzer bir kutu gölgesinin gölgesini eklememiz gerekiyor. Bölüm 3: sütuna bir taraflı kutu gölgesi eklemek için sütuna bir taraflı kutu gölgesi ekleyin, altına birkaç CSS parçası eklememiz gerekiyor. satır ayarlarının devam etmesi. Satır ayarlarını açın ve Gelişmiş sekmesini tıklayın. Sütun 1’in ana öğesinde aşağıdaki CSS’yi ekleyin: Gölge Kutusu: 30px 0px 70px -45px RGBA (0.0,0,0.0.4) CSS’ye alışık değilseniz, kodun benzerliğini tanıyabilmelisiniz. Divi Maker’da bulunan kutu gölge modülü ayarıyla. Yukarıdaki kodda … 30px, 0px yatay konumun değeri, 70px’in dikey konumunun değeri, -45 piksel bulanıklığın değeri, RGBA yayılmasının gücünün değeridir (0.0.0.0. 4) gölgenin rengidir
Biraz daha fazla derinlik sağlamak için anahtar modülünden daha büyük bulanık mukavemet sütun kutusunun gölgesini veriyorum. Solum 3’e sol kutunun gölgesi eklemek için, aşağıdaki CSS’yi sütun 3’ün ana öğesine eklemeniz gerekir: kutu -Shadow: -30px 0px 70px -45px RGBA (0.0.0.0.4)
Bir kez daha, CSS ile sütun 1 için kullanılan tek fark negatif yatay konumdur.
Bölüm 4: Sütun 2’ye Bir Blurb Icon ekleyin Şimdi bir yan kutumuzun gölgesi bittikten sonra, basit bir grafik tasarım oluşturmak için açıklama modül simgelerinden bazılarını birleştirebileceğimiz boş bir orta sütunumuz var. Bunu yapmak için önce açıklama modülünü ekleyin ve başlığı ve içeriği silin. Ardından simgeyi 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: Renk simgesi: RGBA (203.241.252.0.37) Ikon Yazı Tipi Boyutu: 20VW Özel Marj: 0px daha düşük, yinelenen modül açıklaması aşağıda ek bir modül yapmak için. Ardından, soru işareti simgesiyle en iyi açıklamayı güncelleyin ve aşağıdaki tasarım ayarlarını güncelleyin: Yazı tipi boyutu simgesi: 9VW Genişlik:% 40 Hizalama Modülü: Doğru Özel Marj: -2VW
Yorumlarda sizden haber almayı umuyorum.Kızarmış ekmek!
