Diğerlerini Divi ile Bulanıklaştırarak Vurgulu Bir Blurb Modülü Nasıl Vurgulanır

Ne tür bir web sitesi kuruyor olursanız olun, bir noktada farklı hizmetlerin, adımların ve daha fazlasının bir listesini görüntülemek isteyeceksiniz. Böyle bir listeyi çekici bir şekilde oluşturmaya yaklaşmanın en kolay yollarından biri Divi's Blurb Module'ü kullanmaktır. Blurb Modülleri, size sonsuz tasarım olanakları sunarken liste içeriğini güzel bir şekilde yapılandırmanıza olanak tanır.

Bugünkü eğitimde, bunu bir adım daha ileri götüreceğiz ve görüntülediğiniz diğerlerini bulanıklaştırarak üzerine gelinen bir Blurb Modülünü nasıl vurgulayacağınızı göstereceğiz. Bu, diğer Blurb Modüllerinin okuyucunun dikkatini dağıtmasına izin vermeden bir seferde bir Blurb Modülüne odaklanmanın harika bir yoludur. Bir ziyaretçi başka bir Bulanıklık Modülüne geçtiğinde, onun yerine vurgulanan modül olur. Düzenin JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Hovered Blurb Modül Düzenini ÜCRETSİZ İndirin

Ellerinizi serbest gezinen tanıtım yazısı modülü düzenine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Arka plan rengi

Yeni bir sayfaya veya üzerinde çalıştığınız sayfaya normal bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #eaeaea

aralık

Bazı özel kenar boşluğu ve dolgu değerleri de ekleyin.

• Üst Marj: 2vw
• Alt Marj: 2vw
• Sol Kenar Boşluğu: 2vw
• Sağ Kenar Boşluğu: 2vw
• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sınır

Sınır yarıçapı ekleyerek bölüm ayarlarını tamamlayın.

• Tüm Köşeler: 20px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin. 'Sütun Yüksekliklerini Eşitle' seçeneğinin etkinleştirilmesi, sütun içeriğini hizalayan sonraki adımda yardımcı olacaktır.

• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %90
• Maksimum Genişlik: 1580 piksel
• Min Yükseklik: 500px (Masaüstü), otomatik (Tablet ve Telefon)

Ana Eleman

Satırın ana öğesine tek bir CSS kodu satırı ekleyerek sütun içeriğini hizalayın.

align-items: center;

Sütun 1'e Blurb Modülü Ekle

İçerik Ekle

Bu eğitim boyunca kullandığımız tek modül bir Bulanıklık Modülüdür, ancak sonraki adımlarda paylaşacağımız CSS sınıfını eklediğiniz sürece bu modülü istediğiniz herhangi bir modülle değiştirebilirsiniz. İlk Blurb Modülünü sütun 1'e ekleyin ve istediğiniz içeriği ekleyin.

Simge Seç

Sonraki bir simge seçin.

Hover Gradyan Arka Planı

Ardından, yalnızca fareyle üzerine gelindiğinde bir degrade arka planı kullanın.

• Renk 1: #ffffff
• Renk 2: #0f1bff
• Gradyan Türü: Doğrusal
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %20

Varsayılan Simge Ayarları

Modülün tasarım sekmesine gidin ve simge ayarlarını aşağıdaki gibi değiştirin:

• Simge Rengi: #ffffff
• Daire Simgesi: Evet
• Daire Rengi: #ffffff
• Resim/Simge Yerleşimi: Üst
• Görüntü/Simge Hizalama: Sol

Fareyle Üzerine Gelme Simgesi Ayarları

Fareyle üzerine gelindiğinde farklı simge renklerini değiştirin.

• Simge Rengi: #0f1bff
• Daire Rengi: #f7f7f7

Varsayılan Başlık Metni Ayarları

Başlık metni ayarlarını değiştirerek devam edin.

• Başlık Yazı Tipi: Source Sans Pro
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Stili: Büyük Harf

Fareyle Üzerine Gelme Başlık Metni Ayarları

Fareyle üzerine gelindiğinde başlık metni rengini değiştirin.

• Başlık Metin Rengi: #ffffff

Varsayılan Gövde Metni Ayarları

Sırada gövde metni ayarları var.

• Gövde Yazı Tipi: Açık Sans
• Gövde Çizgisi Yüksekliği: 2em

Vurgulu Gövde Metni Ayarları

Beyaz bir vurgulu metin rengi kullanın.

• Gövde Metni Rengi: #ffffff

aralık

Ardından, boşluk ayarlarına gidin ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 50px
• Alt Dolgu: 50px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Varsayılan Kutu Gölgesi

Biz de bir kutu gölgesi kullanıyoruz.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -20px
• Gölge Rengi: rgba(255,255,255,0.18)

Vurgulu Kutu Gölgesi

Üzerine gelindiğinde gölge rengini değiştirin.

• Gölge Rengi: rgba(0,0,0,0.18)

CSS Sınıfı

Bulanıklaştırma efektini gerçekleştirmek için Blurb Modülümüze bir CSS sınıfı atamamız gerekecek. Yazının ilerleyen bölümlerinde bu CSS sınıfını bazı JQuery kodlarında kullanacağız.

• CSS Sınıfı: tanıtım öğesi

Blurb Modülünü İki Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

1. sütundaki Bulanıklık Modülünü tamamladıktan sonra, onu iki kez klonlayabilir ve kopyaları satırın kalan sütunlarına yerleştirebilirsiniz.

Tüm Satırı Klonla

Sayfanızda kaç tane Blurb Modülü görüntülemek istediğinize bağlı olarak satırı istediğiniz kadar çoğaltabilirsiniz.

Blurb Modüllerini Bireysel Olarak Özelleştirin

Elbette, her Blurb Modülünün bireysel içeriğini değiştirmeniz gerekecektir.

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme başka bir satır ekleyin:

aralık

Satır ayarlarını açın ve tüm varsayılan üst ve alt dolguyu kaldırın. Bu, bu satırın kapladığı alanı azaltmaya yardımcı olacaktır.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütuna Kod Modülü Ekle

JQuery ve CSS Kodu Ekle

Satırın sütununa bir Kod Modülü ekleyin ve efektin gerçekleşmesi için bazı JQuery ve CSS kodları ekleyin. Aşağıdaki print ekranında da görebileceğiniz gibi JQuery kodunu script tagları arasına, CSS kodunu style tagları arasına koymayı unutmayınız.

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);

$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');

});
});

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, web sitenizde paylaştığınız Blurb Modülleri ile nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, görüntülediğiniz diğerlerini bulanıklaştırarak üzerine gelinmiş bir Blurb Modülünü nasıl vurgulayacağınızı gösterdik. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.