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.

İşlevlerinizi veya ürünlerinizi sekme şeklinde sunmak ister misiniz? Divi vurgulu etkisi ile?

Web sayfalarınızda özellikleri ve/veya ürünleri sergilemek için yeni yaratıcı yollar mı arıyorsunuz? 

Öyleyse, okumaya devam edin çünkü bu makalede, özelliklerin yalnızca yerleşik seçenekleri kullanarak fareyle üzerine gelindiğinde sekmelerde nasıl gösterileceğini göstereceğiz. Divi. Bu yaklaşımla sahip olduğunuz olanaklar sonsuzdur ve Divi'yi daha derin bir düzeyde anlamanıza kesinlikle izin vereceklerdir. 

Sekme üzerine gelme efekti yalnızca masaüstünde gerçekleşir. Daha küçük ekran boyutlarında normal şekillerinde görünürler.

Gidelim!

anket

Bu öğreticiye dalmadan önce, elde etmek istediğimiz sonuca bir göz atalım.

Vurgulu efektli Divi sekmesi

Divi ile yaratma sürecine başlayalım

Yeni bölüm ekle

Gradyan arka planı

Yeni bir sayfa ekleyin veya mevcut bir sayfayı açın ve yeni bir bölüm ekleyin. Bölüm ayarlarını açın ve bölüme degrade bir arka plan ekleyin.

  • Sol Renk: #f2f2f2
  • Doğru Renk: #ffffff
  • Gradyan Yönü: 87 derece
  • Sol Konum: %20
  • Doğru Konum: %80

aralık

Ardından, aşağıdaki boşluk ayarlarını değiştirin:

  • Dolgu (Üst ve Alt): 0 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:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve arka plan rengini değiştirin.

  • Arka plan rengi: #ffffff

Boyutlandırma ve Hizalama

Sekmede dizayn, seçeneği aşağı çekin Boyutlandırma ve aşağıdaki ayarları değiştirin:

  • Özel Oluk Genişliğini Kullan: EVET
  • Oluk Genişliği: 1
  • Genişlik: 400 piksel
  • Satır Hizalama: Sol

Hover Boyutlandırma

Seçeneği değiştir genişlik vurgulu boyutlandırma ayarlarında. Bu, gezinirken çizginin genişlemesine izin verecektir.

  • Genişlik (Vurgulu): 2 piksel

aralık

Ardından seçenekteki boşluk ayarlarına gidin aralık

  • Dolgu (Üst ve Alt): 0 piksel

Kenarlık (Masaüstü)

Çizginin sağ üst köşesine '20px' ekleyin ve ayrıca çizgiye bir sol kenarlık ekleyin.

  • Yuvarlatılmış Köşeler (Masaüstü): 20px(Sağ Üst Köşe)
  • Sol Kenar Genişliği: 20px
  • Sol Kenar Rengi: #6d44ff

Fareyle üzerine gelindiğinde kenarlık

Bunun yerine '20px' ekleyerek fareyle üzerine gelindiğinde '0px'in sağ üst köşesini kaldırı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.

Kutu Gölgesi (Masaüstü)

Son olarak, ince bir gölge ekleyin.

  • Kutu Gölge Bulanıklığı Gücü: 80px
  • Kutu Gölge Yayılma Gücü: -10px
  • Gölge Rengi: rgba(0,0,0,0.11)

vurgulu gölge

Ve üzerine gelindiğinde gölge rengini tamamen şeffaf bir renge değiştirin.

  • Kutu Gölgesi: rgba(255,255,255,0)

Satıra Blurb Modülü Ekle

İçerik ekle

Artık tüm satır ayarlarını değiştirmeyi bitirdiğimize göre, devam edip sütuna bir Blurb modülü ekleyebiliriz. İstediğiniz diğer modülü kullanmaktan çekinmeyin. 

Modülü ekledikten sonra istediğiniz içeriği ekleyin.

Simgeyi seçin

Ardından istediğiniz bir simgeyi seçin.

Simge ayarları

Ve simge ayarlarında simgenin görünümünü değiştirin. sekmeye git dizayn

  • Simge Rengi: #5323ff
  • Resim/Simge Yerleşimi: Üst
  • Resim/Simge Genişliği: 50px

Metin Başlığı Ayarları (Masaüstü)

Ardından başlık ayarlarını değiştirin.

  • Başlık Yazı Tipi: Poppins
  • Metin Hizalama: ortalanmış
  • Başlık Metin Rengi: #5323ff
  • Başlık Metin Boyutu: 25px
  • Harf Aralığı: -1px
  • Satır Yüksekliği: 1 em

Metin başlığı ayarlarının üzerine gelin

Ve fareyle üzerine gelindiğinde başlık satırının yüksekliğini değiştirin.

  • Başlık Satır Yüksekliği: 1,5 em

Gövde Metni Ayarları (Masaüstü)

Ardından, gövde metni ayarlarına gidin ve bazı değişiklikler yapın. Buna metin boyutunun '0px' olarak değiştirilmesi de dahildir. Bu, gövde metninin yalnızca fareyle üzerine gelindiğinde görünmesini sağlamamıza yardımcı olacaktır.

  • Gövde Yazı Tipi: Poppins
  • Gövde Yazı Tipi Ağırlığı: hafif
  • Metin Hizalama: ortalanmış
  • Gövde Metni Rengi: #000000
  • Gövde Metni Boyutu: 0px (Masaüstü), 15px (Tablet ve Telefon)
  • Satır Yüksekliği: 2,2 em

Fareyle üzerine gelindiğinde gövde metni ayarları

Gövde metninin üzerine gelindiğinde görünmesini sağlamak için, vurgulu metin boyutunu değiştirin.

  • Gövde Metin Boyutu: 15px
fareyle üzerine gelinen sekmeler

Boşluk (Masaüstü)

Modüle biraz boşluk bırakmak için aşağıdaki boşluk parametrelerini değiştiriyoruz:

  • Dolgu (Üst ve Alt): 80 piksel
fareyle üzerine gelinen sekmeler

Vurgulu Aralığı

Fareyle üzerine gelme aralığı ayarlarını değiştireceğiz.

  • Dolgu (Üst ve Alt): 80 piksel
  • Dolgu (Sol ve Sağ): 20vw

Satırı 3 kez klonla

İlk satırı ve onun Blurb modülünü düzenlemeyi bitirdikten sonra, devam edip satırı istediğiniz kadar klonlayabilirsiniz.

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]

Çizgi ve Blurb Modülünü Düzenle #2

Çizgi kenarlığı rengini değiştir

Çizginin sol kenarlığının rengini değiştirerek başlayalım.

  • Sol Kenar Rengi: #00ffcc

Blurb içeriğini ve simgesini düzenleyin

Ardından, Blurb modülü ayarlarını açın ve simgeyi değiştirin.

Bulanıklık Modülü Simge Rengini Değiştir

Simge rengiyle.

  • Simge Rengi: #00eda6

Başlık rengini değiştir

Ve başlık metninin rengi.

  • Başlık Metin Rengi: #00eda6

Düzenleme satırı ve Burb #3 modülü

Çizgi kenarlığı rengi

Sol satırın kenarlık rengini değiştirelim.

  • Sol Kenar Rengi: #afebff

Blurb içeriğini ve simgesini düzenleyin

Ayrıca tanıtım yazısı simgesini ve içeriğini de değiştirelim.

Bulanıklık Modülü Simge Rengini Değiştir

Ayrıca simge rengini de değiştirin.

  • Simge Rengi: #68d9ff

Başlık metni rengini değiştir

Ve başlık metninin rengi de.

  • Başlık Metin Rengi: #68d9ff

Çizgi ve Blurb Modülünü Düzenle #4

Çizgi kenarlığı rengini değiştir

Bir sonraki ve son modülde, çizginin sol kenarlığının rengini de değiştirin.

  • Sol Kenar Rengi: #dd87cf

Blurb içeriğini ve simgesini düzenleyin

Blurb modülünü satır içi açın ve modül simgesini ve içeriğini düzenleyin.

Bulanıklık Modülü Simge Rengini Değiştir

Simge rengiyle.

  • Simge Rengi: #dd6aca

Başlık metni rengini değiştir

Ve başlık metninin rengi de.

  • Başlık Metin Rengi: #dd6aca
Vurgulu efektli Divi sekmesi

anket

Öğreticiden geçtik, şimdi sonuca son bir göz atalım.

Vurgulu efektli Divi sekmesi

DIVI'yı Şimdi İndirin !!!

Sonuç

İ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.

Bu makalede, Divi'nin yerleşik seçeneklerini yalnızca fareyle üzerine gelindiğinde kullanılabilen sekmeler oluşturmak için nasıl kullanacağınızı gösterdik. 

Bu yaklaşım, özellikler veya ürünlerle ilgili içeriği etkileşimli olarak paylaşmanıza yardımcı olacaktır. 

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, 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: