Bir Blurb modülünün nasıl yerleştirileceğini bilmek ister misiniz? Divi diğerlerini bulanıklaştırırken vurgulandı mı?
türü ne olursa olsun Site Web inşa ediyorsunuz, muhtemelen bir noktada farklı hizmetlerin, aşamaların ve daha fazlasının bir listesini görmek isteyeceksiniz.
Böyle bir liste oluşturmaya çekici bir şekilde yaklaşmanın en kolay yollarından biri, Blurb modülünü kullanmaktır. Divi. Blurb modülleri, görüntüyü güzel bir şekilde yapılandırmanıza olanak tanır. içindekiler Size sonsuz tasarım olanakları sunarken listeden çıkarın.
Bu öğreticide, bir adım daha ileri gideceğiz ve fareyle üzerine gelindiğinde bir Blurb modülünü nasıl vurgulayacağınızı ve görüntülediğiniz diğerlerini nasıl bulanıklaştıracağınızı göstereceğiz. Diğer Blurb modüllerinin okuyucunun dikkatini dağıtmasına izin vermeden bir seferde bir Blurb modülünü vurgulamanın harika bir yolu.
Gidelim.
anket
Bu öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.
Masaüstü bilgisayar
Mobil sürümü
Divi ile tasarlamaya 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.
Şunlara da başvurabilirsiniz: Divi: Atlıkarınca olarak ekip üyeleri bölümü nasıl oluşturulur
Bölüm ayarlarını açın ve arka plan rengini değiştirin.
- Arka plan: #eaea
aralık
Ayrıca boşluk değerleri ekleyin.
- Kenar Boşluğu (Üst, Alt, Sol ve Sağ): 2vw
- Dolgu (Üst ve Alt): 0 piksel
sınır
Bir sınır yarıçapı ekleyerek bölüm parametrelerini tamamlayın.
- Yuvarlatılmış Köşeler: 20 piksel
Yeni bir satır ekle
Sütunun 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 hat ayarlarını açın ve boyutlandırma ayarlarını değiştirin.
- Sütun Yüksekliklerini Eşitle: EVET
- Genişlik: %90
- Maksimum Genişlik: 1 piksel
- Min Yükseklik: 500px (Masaüstü), otomatik (Tablet ve Telefon)
Özel CSS (Ana Öğe)
hizalayın içindekiler satırın ana öğesine tek bir CSS kodu satırı ekleyerek sütunun.
align-items: center;
Blurb modülünü 1 sütununa ekleyin
İçerik ekle
Bu eğitim boyunca kullandığımız tek modül bir Blurb modülüdür.
Ancak sonraki adımlarda paylaşacağımız CSS sınıfını da eklediğiniz sürece bu modülü dilediğiniz modül ile değiştirebilirsiniz.
İlk Blurb modülünü 1. sütuna ekleyin ve içindekiler De Chore Choix.
Simgeyi seçin
Ardından bir simge seçin.
- Simgeyi Kullan: EVET
- Simge: Ekran görüntüsüne bakın
Arka Plan Gradyanı (Vurgulu)
Ardından, yalnızca fareyle üzerine gelindiğinde bir arka plan gradyanı kullanın.
- Gradyan Durakları
- %20: #ffffff
- %80: #0f1bff
- Gradyan Türü: Doğrusal
Simge Ayarları (Masaüstü)
Sekmeye geç Dizayn modülü seçin ve simge ayarlarını aşağıdaki gibi değiştirin:
- Simge Rengi: #ffffff
- Resim/Simge Yuvarlatılmış Köşeler: 50px
- Resim/Simge Kenar Genişliği: 5px
- Kenar Rengi: #ffffff
- Resim/Simge Yerleşimi: Üst
- Görüntü/Simge Hizalama: sol
Fareyle üzerine gelin simgesi ayarları
Fareyle üzerine gelindiğinde farklı simge renklerini değiştirin.
- Simge Rengi (Vurgulu): #0f1bff
- Resim/Simge Arka Plan Rengi (Vurgulu): #f7f7f7
Başlık metni ayarları
Başlık metni ayarlarını değiştirerek devam edin.
- Başlık Yazı Tipi: Source Sans Pro
- Yazı Ağırlığı: Kalın
- Başlık Yazı Tipi Stili: TT (büyük harf)
Başlık metni ayarlarının üzerine gelin
Fareyle üzerine gelindiğinde başlık metni rengini değiştirin.
- Başlık Metin Rengi: #ffffff
Açıklama Metni Ayarları (Masaüstü)
Sonraki, gövde metni ayarlarıdır.
- Gövde Yazı Tipi: Açık Sans
- Gövde Çizgisi Yüksekliği: 2em
Açıklama metni ayarlarının üzerine gelin
Fareyle üzerine gelindiğinde bir metin rengi kullanın.
- Gövde Metni Rengi (Vurgulu): #ffffff
aralık
Ardından, boşluk ayarlarına gidin ve özel dolgu değerleri ekleyin.
- Dolgu (Üst, Alt, Sol ve Sağ): 50px
Kutu Gölgesi (Masaüstü)
Ayrıca 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)
Kutu Gölgesi (Vurgulu)
Vurgulu gölgenin rengini değiştirin.
- Gölge Rengi: rgba(0,0,0,0.18)
CSS sınıfı
Bulanıklaştırma efektinin gerçekleşmesi 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ı JQuery kodunda kullanacağız.
- CSS Sınıfı: tanıtım öğesi
Blurb modülünü iki kez klonlayın ve kopyaları kalan sütunlara yerleştirin
1. sütundaki Blurb 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 kopyalayabilirsiniz.
Blurb modüllerini ayrı ayrı özelleştirin
Elbette, her Blurb modülünün içeriğini tek tek değiştirmeniz gerekecektir.
Yeni bir satır ekle
Sütunun yapısı
Aşağıdaki sütun yapısını kullanarak bölüme başka bir satır ekleyin:
aralık
Hat ayarlarını açın ve varsayılan olarak tüm üst ve alt dolguları kaldırın. Bu, bu satırın kapladığı alanı azaltmaya yardımcı olacaktır.
- Dolgu (Üst ve Alt): 0 piksel
Sütuna Kod modülü ekle
JQuery ve CSS kodunu ekleyin
Satır 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 görebileceğiniz gibi JQuery kodunu script tagları arasına, CSS kodunu da 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');
});
});Ayrıca okuyun: Divi: Kılavuz şeklinde bir Görüşler bölümü nasıl oluşturulur?
.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
Masaüstü bilgisayar
Mobil sürümü
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu yazımızda, web sitenizde paylaştığınız Blurb modülleriyle nasıl yaratıcı olabileceğinizi gösterdik. Site Web.
Özellikle, görüntülediğiniz diğerlerini bulanıklaştırarak üzerine gelindiğinde bir Blurb modülünü nasıl vurgulayacağınızı gösterdik.
Bu eğitimin sonraki projeleriniz için size ilham vereceğini umuyoruz. Divi. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.
Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
