5 Yaratıcı Divi Blurb Modül Tasarımı

Bu yazıda Divi'nin en popüler özelliklerinden biri olan Blurb Module'ü keşfedeceğiz. Görünüşte basit görünse de, web sitenizin öğelerini hayata geçirebilecek birçok özelleştirilebilir özelliğe sahiptir. Genel olarak Blurb Modülü hizmetler, avantajlar, iletişim bilgileri vb. şeyler için kullanılır, ancak Divi ile olasılıklar sonsuzdur.

Hadi biraz eğlenelim!

Gizlice Bakış

İşte bu eğitimde oluşturacağım 5 tanıtıcı modül stiline bir bakış.

5 Yaratıcı Divi Blurb Modül Tasarımı

Youtube Kanalımıza Abone Olun

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. “Sıfırdan Oluştur” seçeneğini seçin. Sayfaya görsel oluşturucu yüklendiğinde, tasarlamaya başlamaya hazırsınız.

Bu öğretici, bu tanıtım yazısı stili tasarımların her birini ayrı ayrı oluşturmayı kolaylaştırmak için tasarlanmıştır, bu nedenle gönderiyi oluşturmak istediğiniz tasarıma atlamaktan çekinmeyin. Başka bir deyişle, ilkinden başlamak zorunda değilsiniz.

1. Özellik Listeleri ile Açılır Bulanıklıklar

Bu ilk örnekte, bir pop-out efekti oluşturmak için tanıtıcı yazıları satırın dışına genişleterek biraz eğleneceğiz. Ardından, öne çıkan liste öğeleri olarak hizmet etmek üzere sola hizalanmış simgelerle birkaç tanıtım yazısı eklemek için her birinin yanındaki bitişik sütunları kullanabiliriz.

Başlamak için, dört sütunlu bir yapıya sahip yeni bir bölüm ve bir satır oluşturun.

Ardından devam edin ve satır ayarlarını aşağıdaki gibi güncelleyin:

Arka Plan Rengi: #2e3858
Bu Satırı Tam Genişlikte Yapın: EVET
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1
Sütun Yüksekliklerini Eşitle: EVET
Özel Kenar Boşluğu: 5vw Üst, 5vw Alt
Özel Dolgu: 0 piksel üst, 0 piksel alt

Ayarları kaydet.

Ardından ilk sütuna ilk tanıtım modülünüzü ekleyin.

Metin miktarını biraz kısaltmak için içerik kutusundaki son cümleyi çıkarın. Ardından, görüntü yerine bir simge kullanmayı seçin ve bir simge seçin (herkes yapar).

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

Arka Plan Rengi: #df4570
Simge Rengi: #ffffff
Metin Yönü: Merkez
Başlık Fontu: Encode Sans Semi Condensed
Başlık Yazı Tipi Stili: TT
Başlık Harf Aralığı: 2px
Özel Kenar Boşluğu (masaüstü): -5vw Üst, -5vw Alt
Özel Kenar Boşluğu (tablet): 0px Üst, 0px Alt
Özel Dolgu: 5vw Üst, 5vw Alt, 3vw Sol, 3vw Sağ
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge bulanıklığı Güç: 80 piksel

Sağ tıklama menü seçeneğini veya cmd+c ve cmd+v kısayol tuşlarını kullanarak, az önce oluşturduğunuz modülü kopyalayın ve 3. sütuna yapıştırın. Ardından yeni tanıtıcı modül ayarlarını başka bir parlak (ancak tamamlayıcı) arka plan rengiyle güncelleyin:

Arka Plan Rengi: #24c4a3

Şimdi, az önce oluşturduğumuz açılır tanıtım metinlerinin yanına liste öğesi tanıtımlarını ekleme zamanı.

Bunu yapmak için 2. sütuna yeni bir tanıtım yazısı ekleyin. Ardından, yalnızca başlık metni kalacak şekilde içerik kutusundaki sahte metni çıkarın. Ardından, resminizi daha önce olduğu gibi değiştirmek için bir simge ekleyin. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Simge Rengi: #df4570
Resim/Simge Yerleşimi: Sol
Başlık Fontu: Encode Sans Semi Condensed
Özel Dolgu: 20px Üst, 20px Alt, 3vw Sol, 3vw Sağ

Sütunda toplam üç liste tanıtıcısı elde etmek için tanıtım metnini iki kez çoğaltın. Ardından, üç tanıtım yazısının tümünü seçmek için Divi'nin Çoklu Seçim özelliğini kullanın ve ardından bunları kopyalayıp 4. sütuna yapıştırın.

Sütun 4'teki üç tanıtım yazısının tümünü seçmek için çoklu seçimi kullanabilir ve üçünün de simge rengini #24c4a3 olarak değiştirmek için öğe ayarlarını toplu olarak düzenleyebilirsiniz.

Bu kadar! Öne çıkan tanıtım yazıları oluşturmak, tanıtım yazılarınızı öne çıkarmanın eğlenceli bir yoludur ve yanda bitişik liste tanıtım yazılarına sahip olmak size daha yaratıcı tasarımlar için bazı ek seçenekler sunar.

İşte nihai sonuç.

2. Özel Arka Plan Resmi ile Promosyon Blurb.

Bu tanıtım yazısı stili, ücretsiz bir kitap gibi içerik ve promosyon teklifleri sunmak için harikadır. Temel fikir, özel arka plan görüntüsüne yer açmak için tanıtıcı içeriği modülün soluna yerleştirmektir. Hadi hadi bakalım.

Önce iki sütunlu satır yapısına sahip normal bir bölüm ekleyin. Sol sütuna yeni bir tanıtım yazısı modülü ekleyin.

Başlık metnini güncelleyin ve metin miktarını azaltmak için sahte içeriğin son cümlesini çıkarın. Ardından resminizi bir kitap resmiyle (veya ürününüzün bir resmiyle) güncelleyin. Bir kitabın simgesi veya başka bir şey de işe yarayacaktır.

Travel Blog Layout Pack'teki resim varlıklarını kullanıyorum, bu yüzden bu resimleri alarak tasarımı hemen başlatmaktan çekinmeyin.

İPUCU: Bir promosyon görevi görebileceğinden tüm modülü tıklanabilir hale getirmek için bu modüle bir Modül Bağlantısı URL'si de ekleyebilirsiniz.

Ardından, modüle bir arka plan resmi ekleyin. Arka plan görüntüsünün, görüntünün odak noktası sağ tarafta olacak şekilde başlık benzeri bir görüntü olduğundan emin olun, böylece içeriğinizi görüntünün soluna, arka planı metinden uzaklaştıracak şekilde ekleyebilirsiniz.

Ardından, içeriğin arkasına oturan ve metni daha okunabilir hale getirmek için arka plan görüntüsünü kaplayan kısmi bir kaplama görevi görecek bir arka plan gradyanı ekleyin. Arka plan gradyanını eklemek için aşağıdakileri güncelleyin:

Arka Plan Gradyanı Sol Renk: rgba(255,255,255,0.8)
Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %40
Bitiş Konumu: %70
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

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

Görüntü Kutusu Gölgesi: ekran görüntüsüne bakın
Başlık Yazı Tipi: Noto Serif
Başlık Metin Boyutu: 26px
Gövde Yazı Tipi: Noto Sans
Gövde Metin Boyutu: 16px
Görüntü Genişliği: 150 piksel
İçerik Genişliği (masaüstü): %60
İçerik Genişliği: (akıllı telefon): %80
Özel Dolgu: 2vw Alt, 2vw Sol, 2vw Sağ

Buradaki anahtar tasarım tekniği, içeriğin daha sonra sola konumlandırılabilmesi için hem görüntüye hem de içeriğe özel bir genişlik vermektir.

Şimdi, güzel bir örtüşen efekt için kitap görüntüsünün modülün üzerine uzandığı izlenimini yaratmak için tanıtım yazısının üstüne bir kutu gölgesi eklememiz gerekiyor. Bunu yapmak için aşağıdakileri güncelleyin:

Kutu Gölgesi: Ekran Görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölgesi Dikey Konumu: 50px
Gölge Rengi: #ffffff

Son adım, tanıtım metni içeriğini modülün sol tarafına hizalamak için gereken kısa bir özel CSS pasajı içerir. Bunu yapmak için gelişmiş sekmeye gidin ve Blurb Content giriş kutusunun altına aşağıdaki özel CSS'yi ekleyin:

margin-left: 0;

Şimdi sonuca bakın!

İPUCU: Kullanılabilir fareyle üzerine gelme seçeneklerini unutmayın. Bir şeyleri canlandırmak için kitap görüntüsüne fareyle üzerine gelindiğinde kenarlık vermeyi deneyin!

3. Arka Plan Gradyanını Kullanarak Daire Bulanıklığı Stili

Bu basit tanıtım yazısı stili, tanıtım yazısı içeriğinize daire arka planı olarak hizmet etmek için arka plan gradyanlarını kullanır. Bu, tüm tanıtım modülünüzü özel CSS kullanarak bir daireye dönüştürmenin eğlenceli bir alternatifidir.

Üç sütunlu satır yapısına sahip yeni bir normal bölüm ekleyerek başlayın.

Ardından sol sütuna bir tanıtıcı modül ekleyin.

Ardından, metin miktarını azaltmak için içeriğin son cümlesini çıkarın. Bu tasarım için metin miktarını biraz küçük tutmak önemlidir çünkü onu bir dairenin içine sığdıracaksınız.

Ardından, daire arka planını aşağıdaki gibi oluşturmak için bir arka plan gradyanı ekleyin:

Arka Plan Gradyanı Sol Renk: #fa7f28
Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0)
Gradyan Türü: radyal
Başlangıç ​​Konumu: %60
Bitiş Konumu: %0
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

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

Metin Yönü: Merkez
Başlık Yazı Tipi: Oswald
Başlık Yazı Tipi Stili: TT
Başlık Harf Aralığı: 1px
Gövde Yazı Tipi: Robot
Gövde Yazı Tipi Ağırlığı: Hafif
Gövde Metin Boyutu: 16px
Genişlik (tablet): %80
Modül Hizalaması: Merkez
Özel Dolgu (masaüstü): %20 Üst, %25 Alt, %20 Sol, %20 Sağ
Özel Dolgu (akıllı telefon): %20 Üst, %25 Alt, %10 Sol, %10 Sağ

Buradaki anahtar, özel dolgunun doğru şekilde ayarlanmasını sağlamaktır, böylece arka plan dairesi merkezdeki içerikle hizalanır. Sahip olduğunuz içerik miktarına bağlı olarak bu ayarları yapmanız gerekebilir.

Artık modülü kopyalayıp kalan sütunlara yapıştırabilirsiniz.

Ardından, satır ayarlarını, özel genişliği %80 ve Cilt payı genişliği 1 olacak şekilde güncelleyin.

Tasarımı tamamlamak için, bölümünüze aşağıdaki gibi bir arka plan görüntüsü ve degrade ekleyebilirsiniz:

Arka Plan Resmi Ekle
Arka Plan Gradyanı Sol Renk: rgba(2,0,76,0.51)
Arka Plan Gradyanı Sağ Renk: rgba(2,0,76,0.84)
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Bu kadar! Son tasarıma göz atın!

Ek alan için, dairelerin daha küçük tarayıcı genişliklerinde çarpışmasını önlemek için tanıtım yazısı simgesinin boyutunu her zaman 50 piksel gibi bir değere düşürebilirsiniz. Ayarlamalar yaparken, tüm modüllerde tek seferde toplu düzenlemeler yapmak için Divi'nin Çoklu Seçim özelliğinden yararlanmayı unutmayın.

Bonus İpucu: Tüm Blurb Modülünü Özel CSS ile Çember Yapmak

Tüm modülü bir daireye dönüştürmek istiyorsanız (arka plan gradyanını kullanmak yerine), gradyanı normal bir arka plan rengiyle değiştirin ve bu özel CSS'yi tanıtıcı modül ayarlarının Gelişmiş Sekmesi altına ekleyin:

Ana Öğe kutusunda:

height: 300px;
width: 300px;
border-radius: 100%;
border: 5px solid #ffffff;
padding: 5% !important;
display: flex;

Bulanık İçeriği kutusunda:

margin: auto;

Bu özel CSS, tanıtım yazısı modülü ayarlarındaki dolgu ayarını geçersiz kılar; bu nedenle, bu ayarların kontrolünü geri almak istiyorsanız o pasajı çıkarmanız gerekebilir. Ayrıca, bu css, bulanık içeriği daire içinde ortalamak için esnek kullanır. Bu işe yarayacaktır.

Üç modüle de uygulanırsa böyle bir şey görünecektir.

4. Kenarlıklar ve Kutu Gölgeleri ile Çerçeveli Bulanıklık

Eğlenmek için tüm zamanların en sevdiğim Divi tasarım özelliklerinden biri kutu gölgeleridir. Üst üste bindirme efektini yarattığımız daha önce promosyon tanıtım yazısı tasarımımızda kutu gölgeleri için yaratıcı bir kullanıma zaten yer vermiştik. Ancak, içeriğinizi kırık ızgara tasarımlarıyla çerçevelemenin yaratıcı bir yolu olarak kutu gölgelerini de kullanabilirsiniz. Bu tasarımda size bordürleri ve kutu gölgelerini benzersiz bir şekilde nasıl birleştireceğinizi göstereceğim.

Başlamak için, üç sütunlu satır yapısına sahip yeni bir normal bölüm ekleyin. Ardından, tanıtım modülünü ilk sütuna ekleyin.

Açıklamaya bir resim ekleyin. Ardından, tasarım ayarlarını aşağıdaki gibi güncelleyerek tanıtım yazısı görüntüsüne bir kenarlık ve kutu gölgesi verin:

Resim Üst Kenar Genişliği: 8px
Resim Üst Kenarlık Rengi: #2f3854
Resim Sol Kenar Genişliği: 8px
Resim Sol Kenarlık Rengi: #2f3854

Görüntü Kutusu Gölgesi: Ekran Görüntüsüne bakın
Kutu Gölgesi Yatay Konum: -20px
Kutu Gölgesi Dikey Konumu: -30px
Gölge Rengi: #f89da9

Ardından Başlık ve Gövde yazı tipini ve aralığını aşağıdaki gibi güncelleyin:

Başlık Yazı Tipi: Yeseva Bir
Gövde Yazı Tipi: Montserrat
Özel Kenar Boşluğu: 50 piksel Alt
Özel Dolgu: 2vw Alt

Son olarak, çerçeve tasarımını aşağıdaki gibi dengelemek için tanıtım metni modülünüze özel bir kenarlık ve kutu gölgesi verin:

Sağ Kenar Genişliği: 15px
Sağ Kenar Rengi: #2f3854
Alt Kenar Genişliği: 15px
Alt Kenar Rengi: #2f3854

Görüntü Kutusu Gölgesi: Ekran Görüntüsüne bakın
Kutu Gölgesi Yatay Konum: 20px
Kutu Gölge Dikey Konumu: 35px
Gölge Rengi: #dddddd

Şimdi 2. ve 3. sütundaki modülü kopyalayıp yapıştırın ve tasarımı tamamlamak için tanıtıcı görselleri güncelleyin.

İşte nihai sonuç.

5. Eğri Liste Olarak Şekillendirme Bulanıklıkları

Bu sonraki tasarım, tanıtım yazılarını kullanarak listeler oluşturmanın eğlenceli bir yoludur. Bazı özel kenar boşlukları kullanarak, sayfanızdaki öğelerin etrafını sarmak için tanıtıcı liste öğelerinizi bükebilirsiniz. Bu örnekte, büyük bir tanıtım yazısı simgesinin sağ tarafını sarmak için listeyi bükeceğim. Ve biraz yaratıcı olabilirsin

İlk olarak, iki sütunlu satır yapısına sahip yeni bir normal bölüm ekleyin.

Herhangi bir tanıtıcı modül eklemeden önce, satır ayarlarınızı aşağıdaki gibi güncelleyerek satırınıza özel bir genişlik ve cilt payı genişliği verin:

Özel Genişlik: 700 piksel
Oluk Genişliği: 2

Şimdi sol sütuna tanıtım yazısı modülünü ekleyerek büyük tanıtım yazısı simgesini oluşturalım. Ardından Başlık Metni ve içeriğini çıkarın. Ardından ampul simgesini seçin. Şimdi sadece simge görünmelidir. Ardından, simgenin rengini ve boyutunu aşağıdaki gibi güncelleyin:

Simge Rengi: #96a6bd
Simge Yazı Tipi Boyutu (masaüstü): 400 piksel
Simge Yazı Tipi Boyutu (akıllı telefon): 200 piksel

Sağ sütunda, yeni bir tanıtım yazısı modülü ekleyin. Bu, listemizi oluşturacak toplam beş tanıtım yazısının ilki olacak. Ardından modül ayarlarını açın ve yalnızca başlık metnini bırakarak içeriği çıkarın. Ardından, tanıtım yazısı için sağ ok simgesini seçin.

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

Arka Plan Rengi: #bb7860
Simge Rengi: #ffffff
Resim/Simge Yerleşimi: Sol
Simge Yazı Tipi Boyutunu Kullan: EVET
Simge Yazı Tipi Boyutu: 30px
Başlık Yazı Tipi: Raleway
Başlık Metin Rengi: #ffffff
Başlık Metin Boyutu: 20px
Başlık Satırı Yüksekliği: 1.5em
Özel kenar boşluğu: %5 alt
Özel Dolgu: %3 Üst, %10 Sol, %2 Sağ

Sağ sütunda toplam beş tanıtım yazısı elde edene kadar modülü dört kez çoğaltın.

Ardından, ikinci tanıtım yazısına yeni bir renk, sağa itmek için özel kenar boşlukları ve aşağıdaki gibi yaratıcı yuvarlatılmış köşeler verin:

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ğ
Yuvarlatılmış Köşeler: 50 piksel sağ üst, 50 piksel sol alt

Bu modülden ayrılmadan önce, tanıtıcı ayarlarındaki seçeneğe sağ tıklayarak yuvarlatılmış köşeleri kopyalayın.

Ardından, bulanıklık ayarlarını kaydedin ve oluşturduğunuz ilk (üst) modüle sağ tıklayın ve yuvarlatılmış köşeleri modül stiline yapıştırın.

Şimdi son üç modülü uygun renk, aralık ve yuvarlak köşe tasarımları ile güncellemeye devam edelim.

Sütundaki üçüncü tanıtım yazısı için aşağıdakileri güncelleyin:

Arka Plan Rengi: #96a6bd
Özel kenar boşluğu (masaüstü): %20 Sol, -%20 Sağ
Özel kenar boşluğu (tablet): %0 Sol, %0 Sağ
Yuvarlatılmış Köşeler: 50 piksel sağ üst, 50 piksel sağ alt

Dördüncü tanıtım yazısı için 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ğ
Yuvarlatılmış Köşeler: 50 piksel sol üst, 50 piksel sağ alt

Beşinci tanıtım yazısı için, dördüncü tanıtım yazısının yuvarlatılmış köşelerini kopyalayıp yapıştırın.

Bu kadar! Son tasarımı kontrol edelim.

Daha Fazla Blurb Stili İlhamı

Daha eğlenceli tanıtım yazısı modül tasarımlarını keşfetmekle ilgileniyorsanız, aşağıdaki bağlantılara göz atın:

• Tanıtım yazıları için asimetrik kavisli arka planlar kullanabilirsiniz.
• Bölüm bölücüler kullanarak yaratıcı tasarımlarla tanıtıcı modüllerinizi çerçeveleyebilirsiniz.
• Geometrik bir ızgara düzeni oluşturmak için kendi arka plan resmi şeklinizi oluşturabilirsiniz.
• Tek taraflı kutu gölgelerinde gönderideki bölümünüz için ortalanmış bir grafik öğesi oluşturmak için tanıtım yazısı simgelerini nasıl birleştireceğinizi öğrenin.
• Daha da ilham verici tanıtım yazısı stilleri için Divi Builder'da bulunan ücretsiz hazır Divi düzenlerimizi keşfetmeyi unutmayın.

Umarım bu örnekler, The Divi Blurb Module ile nelerin mümkün olduğunu görmeniz için size ilham vermiştir! Burada sınır gökyüzü. Bu modül son derece popülerdir ve muhtemelen oluşturduğunuz hemen hemen her sitede kullanılacaktır, bu nedenle tasarımların aynı görünmemesi için çok yönlü fikirlere sahip olmak iyidir. Bazen sadece renkleri ve yazı tiplerini değiştirmek bunlara yepyeni bir görünüm verebilir, bu yüzden bu fikirleri almaktan ve kendinize ait hale getirmekten çekinmeyin!

Yorumlarda sizden haber bekliyorum.

Şerefe!