5 Yaratıcı Divi Blurb Modülünün Tasarımı
Bu yazıda, Divi, Blurb modülünün en popüler özelliklerinden birini keşfedeceğiz. Basit görünse de, web sitenizin öğelerini açabilecek ayarlanabilecek birçok özelliğe sahiptir. Genel olarak, bulanıklık modülü hizmetler, avantajlar, iletişim bilgileri vb. Gibi şeyler için kullanılır, ancak Divi ile olanaklar sınırsızdır. Hadi eğlenelim! Aşağıdaki gizlice göz atma, bu öğreticide yapacağım açıklama modülünün 5 stilinin bir görüntüsü.
5 Divi Creative Blurb Modülünün Tasarımları YouTube kanallarımıza abone olun 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. “Başından Uyan” seçeneğini seçin. Görsel yapımcı sayfaya yüklendikten sonra, tasarıma başlamaya hazırsınız.Bu öğretici, bu açıklama stilinin her bir tasarımını tek tek yapmayı kolaylaştırmak için tasarlanmıştır, bu nedenle gönderiyi yapmak istediğiniz tasarıma atlamaktan çekinmeyin. Başka bir deyişle, birincisiyle başlamak zorunda değilsiniz. 1. Özellikler listesi ile bulanık patlama Bu ilk örnekte, bir açılır efekt oluşturmak için satırın dışındaki açıklamayı genişleterek biraz eğleneceğiz. Daha sonra, üstün bir liste öğesi olarak kullanılacak düz bir simgeye sahip bazı açıklamalar eklemek için her birinin yanındaki bitişik sütunu kullanabiliriz. Başlamak için, yeni bir parça yapın ve dört katlı bir yapıya sahip satır yapın. Ardından, satır ayarlarını aşağıdaki gibi devam ettirin ve güncelleyin: Arka plan rengi: #2E3858 Bu çizgiyi tam genişlik yapın: evet Özel oluklar kullanın: Guture genişliği: 1 Equate sütun yüksekliği: evet özel marj: 5VW’nin üzerinde, 5VW’nin altında 5VW yığın altındaki: 0px üst,, Ayarların altında 0px. Sonra ilk sütunda ilk açıklama modülünüzü ekleyin. Metin miktarını hafifçe kısaltmak için içerik kutusundaki son cümleyi kaldırın. Ardından görüntü yerine simgeyi kullanmayı seçin ve simgeyi seçin (herkes yapacak). Ardından aşağıdakileri güncelleyin: arka plan rengi: #df4570 Iconun rengi: #ffffff metin yönü: orta yazı tipi başlık: sans yarı yoğunlaştırılmış başlık yazı tipi stili: tt aralık başlığı: 2px marj özel (masaüstü): -5vw yukarıda, -5vw yukarıda, -5vw aşağıda özel Marj (tablet): 0px üst, 0px Alt Alt Özel Dolgu: Top 5VW, Alt 5VW, Sol 3VW, Sağ 3VW Gölge Kutusu: Ekran Yakalama Bulanık Güçlü Gölge Kutusu: 80PX Sağ -Menü seçeneğini veya CMD+C ve CMD+V kısayol düğmelerini kullanarak, yeni oluşturduğunuz modülü kopyalayıp sütuna yapıştırın. Daha sonra yeni açıklama modül ayarlarını parlak arka plan rengiyle (ancak ücretsiz) güncelleyin: arka plan rengi : # 24C4A3 Şimdi, yeni yaptığımız Sembulan’ın açıklamasına bitişik liste öğesinin bir açıklamasını ekleme zamanı. Bunu yapmak için, sütun 2’ye yeni bir açıklama ekleyin. Ardından, yalnızca kalan başlık metnini olacak şekilde içerik kutusundaki yapay metni kaldırın. Ardından, resminizi eskisi gibi değiştirmek için bir simge ekleyin. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Renk simgesi: #df4570 Görüntü/simge yerleştirme: Sol yazı tipi başlığı: KOSKO SANS Yarı Yoğun Dolgu Özel: 20 piksel, alt 20px, sol 3VW, sağ 3VW Çarpma Açıklama iki kez, böylece sütundaki toplam açıklamanın üç açıklamasını alırsınız. Ardından, üç açıklamayı seçmek için çoklu seçici divi özelliğini kullanın, ardından sütun 4’e kopyalayıp yapıştırın. Sütun 4’teki üç açıklamayı seçmek ve üçüncü simgenin rengini #24C4A3 olarak değiştirmek için öğe ayarları kütlesini düzenleyebilirsiniz. Yani! Pop-out özeti yapmak, özetinizi öne çıkarmanın eğlenceli bir yoludur ve size daha yaratıcı bir tasarım için bazı ek seçenekler sunmanın yanı sıra yakın bir liste özeti vardır.
Sonuçlar aşağıdadır. 2. Özel arka plan görüntüleri ile bulanık tanıtım.
Bu açıklama stili, ücretsiz kitaplar gibi içerik ve tanıtım tekliflerini görüntülemek için çok iyidir. Temel fikir, özel arka plan görüntüleri için alan sağlamak için açıklama içeriğini modülün soluna konumlandırmaktır. Haydi Yapalım şunu. Önce iki sütun satırı yapısıyla normal kısmı ekleyin. Sol sütunda yeni bir açıklama modülü ekleyin. Başlık metnini güncelleyin ve metin sayısını azaltmak için son cümleyi yapay içerikten kaldırın. Ardından görüntünüzü bir kitap görüntüsü (veya ürün resminiz) ile güncelleyin. Kitap simgeleri veya başka bir şey de işlev görür. Seyahat blogu düzeni paketinden resim varlıklarını kullanıyorum, bu yüzden resim çekerek tasarımı başlatmaktan çekinmeyin. İpuçları: Bu modüle bir modül bağlantısı ekleyebilirsiniz, böylece bir promosyon olarak işlev görebileceği için tüm modül tıklanabilir. Ardından, modüle bir arka plan görüntüsü ekleyin. Arka plan görüntüsünün sağ taraftaki görüntünün odak noktası olan bir başlık gibi bir görüntü olduğundan emin olun, böylece içeriğinizi metne müdahale eden bir arka planla görüntünün soluna ekleyebilirsiniz. Ardından, içeriğin arkasındaki kısmi kaplama olarak çalışmak için bir arka plan gradyanı ekleyin ve metnin okunmasını kolaylaştırmak için arka plan görüntüsünü kaplayın. Aşağıdaki arka plan gradyanını eklemek için: Arka plan gradyanının sol rengi: RGBA (255,255,255.0.8) Sağ Renk Arka Plan Yasası: RGBA (255,255,255.0) Gradyan Yönü: 90 derece Başlangıç Pozisyonu:% 40% Nihai Pozisyon:% 70 Gradyan: Yukarıdaki Arka plan görüntüsü: evet
Ardından Güncelleme: Resim Kutusu Gölgesi: Yazı Tipi Başlık Ekranı Yakalama: Noto Serif Metin Boyutu Başlık: 26px Gövde Yasağı: Noto SANS Vücut Metin Boyutu: 16px genişlik Resim: 150px içerik genişliği (masaüstü):% 60 içerik genişliği: (cep telefonu akıllı ):% 80 dolgu özelliği: 2VW’nin altında, sol 2VW, sağ 2VW Buradaki ana tasarım tekniği, içeriğin daha sonra sola konumlandırılabilmesi için resme ve içeriğe özel bir genişlik sağlamaktır. Şimdi, kitap görüntüsünün iyi bir örtüşen etki için modülün üzerine çıktığı izlenimini oluşturmak için açıklamanın üstüne bir kutunun gölgesi eklememiz gerekiyor. Bunu yapmak için aşağıdakileri güncelleyin: Gölge Kutusu: Ekrana bakınız Yatay Konum Gölge Kutusu: 0px Dikey Konum Gölge Kutusu: 50px Gölge Renk: #FFFFFFF.
Son adım, açıklamanın içeriğini modülün sol tarafına hizalamak için gereken kısa bir CSS snippet’ini içerir. Bunu yapmak için devam eden sekmeyi açın ve bulanık içerik giriş kutusu altına aşağıdaki özel CSS ekleyin: Marj-sol: 0; Şimdi sonuçlara bakın! İpucu: Mevcut Hover seçeneklerini unutmayın. Her şeyi canlı hale getirmek için Hakkında Sınır Kitabının bir resmini vermeyi deneyin! 3. Bu basit açıklama stilinin arka plan gradyanını kullanan daire bulanık kuvveti, açıklama içeriğiniz için bir daire arka planı olarak işlev görmesi için bir arka plan gradyanı kullanır. Bu, özel bir CSS kullanarak tüm modülünüzü bir daireye çevirmek için hoş bir alternatiftir. Üç sütun satırı yapısına sahip yeni bir normal parça ekleyerek başlayın. Ardından Sol sütuna açıklama modülünü ekleyin.
Ardından metin sayısını azaltmak için içeriğin son cümlesini kaldırın. Bu tasarımın metin miktarını oldukça küçük tutması önemlidir, çünkü bir daireye yükleyeceksiniz. Daha sonra dairenin arka planını aşağıdaki gibi yapmak için arka plan gradyanını ekleyin: gradyanın sol rengi arka plan: #fa7f28 Sağ renk gradyan arka plan: rGBA (255,255,255.0) gradyan tipi: Radyal Başlangıç Pozisyonu:% 60 Nihai Pozisyon:% Gradyan Arka plan görüntüsünün üstünde: evet Ardından diğer tasarım ayarlarını aşağıdaki gibi güncelleyin: Metin Oryantasyonu: Orta Yazı Tipi Başlık: Oswald Style Yazı Tipi Başlık: TT Aralık Harfleri Başlık: 1px Vücut Font: Robot Gövde Ağırlığı: Hafif Gövde Metin Boyutu: 16px genişlik (Tablet):% 80 Modül Hizalama: Özel Dolgu Merkezi (masaüstü): 20 % 25,% 25 dip,% 20 sol,% 20 sağ dolgu özel (akıllı telefon):% 20 üst,% 25 dip,% 10 sol,% 10 sağ Buradaki anahtar, özel dolguyu, arka plan çemberinin ortadaki içeriğe paralel olacak şekilde doğru şekilde ayarlamaktır. Bu ayarı, sahip olduğunuz içerik miktarına bağlı olarak ayarlamanız gerekebilir. Şimdi modülü kopyalayıp kalan sütuna ekleyebilirsiniz. Ardından, satır ayarlarını% 80 özel genişlik ve oluklara sahip olacak şekilde güncelleyin. Tasarımı tamamlamak için, arka plan görüntüleri ve degradeleri parçanıza aşağıdaki gibi ekleyebilirsiniz: Sol gradyan arka planının arka plan görüntüsünü ekleyin: RGBA (2,0 , 76, 0.51) Sağ renk arka plan gradyanı: RGBA (2,0,76,0,84) Derneği arka plan görüntüsünün üzerine yerleştirin: Evet bu kadar! Son tasarıma bakın! Ek alan için, açıklama simgesinin boyutunu her zaman yaklaşık 50px’e düşürebilirsiniz, böylece daire tarayıcının daha küçük genişliğinde çarpışmaz. Ayarlar yaparken, aynı anda tüm modüllere kütle düzenleme yapmak için çok seçmeli divi özelliğinden yararlanmayı unutmayın. Bonus İpuçları: Tüm bulantı modülü özel bir CSS ile bir daireye dönüştürün (tüm modülü bir daireye dönüştürmek istiyorsanız (bir arka plan gradyanı kullanmak yerine), gradyanı sıradan bir arka plan rengiyle değiştirin ve bu özel CSS’yi altına ekleyin. Açıklama Modül Ayarları Modül Ayarları’nda Devam Edin Ayarlar: Ana öğe kutusunda: Yükseklik: 300px; Genişlik: 300 piksel;
Border-Radius:%100;
Sınır: 5px katı #ffffff; Dolgu:%5! Önemli; Ekran: Flex;Bulanık İçerik Kutusunda: Marj: Otomatik;
Bu özel CSS, açıklama modülünün ayarlarındaki dolgu kümesine sahiptir, böylece ayarlar üzerinde kontrolü geri almak istiyorsanız snippet’i kaldırmanız gerekebilir. Ayrıca, bu CSS, açıklama içeriğini daire içine odaklamak için Flex kullanır. Bu faydalı olacak. Bu üç modül için uygulanırsa böyle görünecektir. Bir kutunun sınırı ve gölgesiyle çerçevelenmiş bulanıklık, eğlence için en sevdiğim divi tasarım özelliklerinden biri bir kutunun gölgesidir. Üst üste binen bir etki yarattığımız önceki promosyon açıklamamızın tasarımında kutunun gölgesi için yaratıcı kullanım sergiledik. Ancak, içeriğinizi kırık bir kafes tasarımıyla çerçevelemenin yaratıcı bir yolu olarak kutunun gölgesini de kullanabilirsiniz. Bu tasarımda, kutunun sınırlarını ve gölgelerini benzersiz bir şekilde nasıl birleştireceğinizi göstereceğim. Başlamak için, üç sütun satırı yapısına sahip yeni bir normal parça ekleyin. Ardından bulanık modülü ilk sütuna ekleyin.
Açıklamaya bir resim ekleyin. Ardından, tasarım ayarlarını aşağıdaki gibi güncelleyerek bir bulanıklık görüntüsü ve gölge kutusu verin: Üst Sınır Genişliği Görüntü: 8px Renk Üst Sınır Görüntü: #2F3854 SOL SINIRLIK GÖRÜNÜMÜ: 8PX Sol Sınır Renk Görüntü: #2F3854 Gölge Kutusu Resim: Yatay Konum Ekran Araştırması Gölge Kutusu: -20px Dikey Konum Gölge Kutusu: -30px Gölge Renk: #F89DA9
Ardından, yazı tipi başlığını ve gövdeyi ve alanı şu şekilde güncelleyin: Yazı tipi başlık: Yeseva One Font Body: Montserrat Margin Özel: 50px’in Altında Dolgu Özel: 2VW’nin altında
Son olarak, çerçeve tasarımını aşağıdaki gibi dengelemek için bulanık modül özel limit ve gölge kutunuza verin: Sağ sınır genişliği: 15px sağ sınır renk: alt sınır genişliği: 15px alt sınır renk: #2F3854 Gölge Kutusu Resmi: Bkz. Kutu: 20px Dikey Konaklama Pozisyonu Kutusu: 35px Gölge Renk: #DDDDDDDDDDDDDDDDDDAL Modülleri Sütun 2 ve 3’te kopyalayıp yapıştırın ve tasarımı tamamlamak için açıklama görüntüsünü güncelleyin. Sonuçlar aşağıdadır.
5. Blurbs Stying Curved Tasarım Listesi Olarak Sonraki, bir açıklama kullanarak bir liste yapmanın eğlenceli bir yoludur. Bazı özel marjları kullanarak, öğeleri sayfanıza sarmak için açıklama listesini bükebilirsiniz. Bu örnekte, büyük açıklama simgesinin sağ tarafını sarmak için listeyi bükeceğim. Önce biraz yaratıcı olabilirsiniz, iki sütun satırı yapısına sahip yeni bir normal parça ekleyebilirsiniz. Herhangi bir modül eklemeden önce, satır ayarlarınızı aşağıdaki gibi güncelleyerek özel hatlarınızı ve oluk genişliğinizi verin: Özel Genişlik: 700px Talang genişliği: 2
Şimdi sol sütuna bir bulanıklık modülü ekleyerek büyük bir bulanıklık simgesi yapalım. Ardından metnin ve içeriğin başlığını serbest bırakın. Ve sonra ampul simgesini seçin. Şimdi sadece simgeler görülecek. Ardından, simgenin rengini ve boyutunu aşağıdaki gibi güncelleyin: Renk simgesi: #96A6BD Yazı Tipi Boyutu (Masaüstü): 400px Font Ikon (Akıllı Telefon): 200px Sağ sütunda yeni bir açıklama modülü ekleyin. Bu, listemiz olacak toplam beş açıklamadan ilki olacak. Ardından modül ayarlarını açın ve yalnızca başlık metnini bırakarak içeriği kaldırın. Sonra açıklama için sağ ok simgesini seçin. Sonraki tasarım ayarlarını aşağıdaki gibi güncelleyin: arka plan rengi: #bb7860 renk Ikon: #fffff yerleştirme/simge: Sol Kullanım Sözlüğü Boyutu: Evet Yazı Tipi Boyutu Icon: 30px başlık yazı tipi: Raleway Metin Rengi Başlık: #ffffff Metin Boyutu Başlık: 20px Yüksek Satır Başlık: 1.5EM Özel Marj: Özel Dolgu Altında% 5 Altında:% 3 Top,% 10 Sol,% 2 Sağ Sağ sütunda istiflenmiş toplam beş açıklama elde edene kadar modülü dört kez çoğaltın. Ardından, ikinci açıklamaya yeni bir renk verin, sağa itmek için özel kenar boşluğu ve yaratıcı yuvarlak açı aşağıdaki gibi: #393e56 Özel Marj (masaüstü):% 10 sol,% -10 sağ özel kenar boşluğu (tablet) :% 0 sol,% 0 sağ yuvarlak açı: 50px sağ üst, 50 piksel sol sol alt Bu modülden ayrılmadan önce, açıklama ayarlarındaki seçeneğe doğru tıklayarak yuvarlak açıyı kopyalayın. Ardından, oluşturduğunuz ilk modüle (üst) bulanık ayarları kaydedin ve sağ -ilk modül üzerine tıklayın ve modül üzerine yuvarlak açılı kuvveti takın. Şimdi son üç modülü doğru renk, mesafe ve yuvarlak açı tasarımı ile güncellemeye devam edelim. Sütundaki üçüncü açıklama için, aşağıdaki güncelleme: Arka plan rengi: #96A6BD Özel Marj (masaüstü):% 20 sol,% -20 sağ özel kenar boşluğu (tablet):% 0 sol,% 0 sağ yuvarlak açı: 50px üst sağ sağ , Dördüncü açıklama için 50px sağ düşük aşağıdakileri güncelleyin: Arka plan rengi: #393E56 Özel kenar boşluğu (masaüstü):% 10 sol,% -10 sağ özel kenar boşluğu (tablet):% 0 sol,% 0 sağ yuvarlak açı: 50px Sol Sol üst, beşinci açıklama için 50px sağ alt, dördüncü açıklamada yuvarlak açıyı kopyalayın ve çubuk. İşte burada! Son tasarımı kontrol edelim. Daha keyifli bir Blurb modülünün tasarımını keşfetmek istiyorsanız, daha fazla ilham tarzı bulanıklık, aşağıdaki bağlantıya bakın: Açıklama için asimetrik kavisli arka plan kullanabilirsiniz. Açıklama modülünüzü bir bölücü kullanarak yaratıcı bir tasarımla çerçeveleyebilirsiniz. Geometrik kutu düzenini oluşturmak için kendi arka plan görüntü şeklinizi oluşturabilirsiniz. Tek taraflı bir kutunun gölgesindeki yazıdaki rolünüz için merkezi bir grafik öğesi yapmak için Açıklama simgesini nasıl birleştireceğinizi öğrenin. Ve daha ilham verici bir açıklama tarzı için Divi Builder’da bulunan ücretsiz divi önceden hazırlanmış düzenimizi keşfetmeyi unutmayın
