Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor.

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, size sonsuz tasarım olanakları sunarken, liste içeriğini güzel bir şekilde yapılandırmanıza olanak tanır.

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

diğerlerini bulanıklaştırırken bir Divi Blurb modülünü vurgulayın

Mobil sürümü

diğerlerini bulanıklaştırırken bir Divi Blurb modülünü vurgulayın

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)

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

Elementor ile web sitenizi kolayca oluşturun

Elementor oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

align-items: center;
Divi's Blurb modülü

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ü sütun 1'e ekleyin ve istediğiniz içeriği ekleyin.

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.

Web siteniz için en iyi araçları keşfedin

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • 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

diğerlerini bulanıklaştırırken bir Divi Blurb modülünü vurgulayın

Mobil sürümü

diğerlerini bulanıklaştırırken bir Divi Blurb modülünü vurgulayın

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

İndirilecek 11 milyondan fazla araç

Envato Elements, web sitenizin tüm yönlerini oluşturmak ve geliştirmek için en iyi kaynakları sunar. Milyonlarca WordPress şablonu, grafiği, ses kaynağı ve çok daha fazlasını bulacaksınız. Yeni başlayanlar için mükemmel.

Ö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 bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. 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ş.

...

%d bu sayfayı beğendi blogcular: