Divi ile Vurgulu Sekmelerde Özellikler Nasıl Sergilenir

Web sayfalarınızda özellikleri ve/veya ürünleri sergilemek için yeni ve yaratıcı yollar mı arıyorsunuz? Öyleyse, okumaya devam edin çünkü bu yazıda, yalnızca Divi'nin yerleşik seçeneklerini kullanarak fareyle üzerine gelme sekmelerinde özellikleri nasıl görüntüleyeceğinizi göstereceğiz. 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 fareyle üzerine gelme dostu masaüstü ortamlarında gerçekleşir. Fareyle üzerine gelme sekmeleri daha küçük ekran boyutlarından görüntülendiğinde, özellikler orijinal haliyle listelenecektir.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca bir göz atalım.

masaüstü

Mobil

Hadi Yaratmaya Başlayalım!

Youtube Kanalımıza Abone Olun

Yeni Bölüm Ekle

Degrade 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. Yukarıdaki yazdırma ekranlarında görebileceğiniz gibi, vurgulu sekmelerin sol kısmını kaplamak için degrade arka planını kullanacağız.

• Renk 1: #f2f2f2
• Renk 2: #ffffff
• Gradyan Yönü: 87deg
• Başlangıç ​​Konumu: %20
• Bitiş Konumu: %20

aralık

Ardından, her iki seçeneğe de '0px' ekleyerek bölümün özel üst ve alt dolgusunu kaldırın.

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

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:

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

Satır Hizalama

Satır hizalamasını da değiştirin.

• Satır Hizalama: Sol

Varsayılan Boyutlandırma

Ve boyutlandırma ayarlarını da değiştirin.

• Özel Genişlik Kullan: Evet
• Birim: PX
• Özel Genişlik: 400 piksel
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

Hover Boyutlandırma

Fareyle üzerine gelindiğinde Boyutlandırma ayarlarında Özel Genişlik seçeneğini değiştirin. Bu, üzerine gelindiğinde satırın genişlemesine izin verecektir.

• Özel Genişlik: 2000 piksel

aralık

Ardından, boşluk ayarlarına gidin ve varsayılan üst ve alt dolgu değerlerini kaldırın.

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

Varsayılan Kenarlık

Satırın sağ üst köşesine '20px' ekleyin ve satıra da bir sol kenarlık ekleyin.

• Sol Kenar Genişliği: 20px
• Sol Kenar Rengi: #6d44ff

fareyle üzerine gelin

Bunun yerine '0px' ekleyerek fareyle üzerine gelindiğinde '20px' sağ üst köşeyi kaldırın.

Varsayılan Kutu Gölgesi

Son olarak, ince bir kutu gölgesi 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 Kutu Gölgesi

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

• Gölge Rengi: 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.

Simge Seç

Daha sonra istediğiniz bir simgeyi seçin.

Simge Ayarları

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

• Simge Rengi: #5323ff
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 54px

Varsayılan Başlık Metni Ayarları

Sonraki başlık metni ayarlarını değiştirin.

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

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

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

• Başlık Satırı Yüksekliği: 1.5em

Varsayılan Gövde Metni Ayarları

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
• Gövde Metni Hizalama: Orta
• Gövde Metni Rengi: #000000
• Gövde Metni Boyutu: 0px (Masaüstü), 15px (Tablet ve Telefon)
• Gövde Çizgisi Yüksekliği: 2.2em

Vurgulu Gövde Metni Ayarları

Gövde metninin üzerine gelindiğinde göründüğünden emin olmak için, üzerine gelindiğinde metin boyutunu değiştirin.

• Gövde Metin Boyutu: 15px

Varsayılan Aralık

Modüle nefes alması için biraz alan sağlamak için modüle bazı özel üst ve alt dolgular ekliyoruz.

• Üst Dolgu: 80px
• Alt Dolgu: 80px

Vurgu Aralığı

Fareyle üzerine gelindiğinde boşluk ayarlarını değiştireceğiz. Hem satıra hem de Blurb Modülüne fareyle üzerine gelme seçeneklerini uyguladığımız için Görsel Oluşturucu'dan çıkmadan önce nihai sonucu göremezsiniz.

• Üst Dolgu: 80px
• Alt Dolgu: 80px
• Sol Dolgu: 20vw
• Sağ Dolgu: 20vw

Satırı 3 Kez Klonla

İlk satırı ve onun Bulanıklık Modülünü değiştirmeyi bitirdikten sonra, devam edip satırı istediğiniz kadar klonlayabilirsiniz.

Satır ve Blurb Modülünü Değiştir #2

Satır Aralığını Değiştir

İlk kopyayı açın ve bazı özel sol kenar boşluğu ekleyin. Bu, bu yazının önizlemesinde fark edebileceğiniz merdiven efektini oluşturmamıza olanak sağlayacaktır.

• Sol Kenar Boşluğu: 6vw

Satır Kenarlığı Rengini Değiştir

Satırın sol kenarlık rengini de değiştirin.

• Sol Kenar Rengi: #00ffcc

Bulanık İçeriği ve Simgeyi Değiştir

Ardından Blurb Module'ü açın ve simgeyi değiştirin.

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

Simge rengiyle birlikte.

• Simge Rengi: #00eda6

Başlık Metin Rengini Değiştir

Ve başlık metni rengi.

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

Satır ve Blurb Modülünü Değiştir #3

Satır Aralığını Değiştir

İkinci kopyaya da bir miktar özel sol kenar boşluğu ekleyin.

• Sol Kenar Boşluğu: 12vw

Satır Kenarlığı Rengini Değiştir

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

• Sol Kenar Rengi:#afebff

Bulanık İçeriği ve Simgeyi Değiştir

Açıklama simgesi ve içeriğiyle birlikte.

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

Simge rengini de değiştirin.

• Simge Rengi: #68d9ff

Başlık Metin Rengini Değiştir

Ve başlık metni rengi de.

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

Satır ve Blurb Modülünü Değiştir #4

Satır Aralığını Değiştir

Bir sonraki ve son kopyaya! Satıra biraz özel sol kenar boşluğu ekleyin.

• Sol Kenar Boşluğu: 18vw

Satır Kenarlığı Rengini Değiştir

Satırın sol kenarlık rengini de değiştirin.

• Sol Kenar Rengi: #dd87cf

Bulanık İçeriği ve Simgeyi Değiştir

Satırdaki Blurb Modülünü açın ve modülün simgesini ve içeriğini değiştirin.

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

Simge rengiyle birlikte.

• Simge Rengi: #dd6aca

Başlık Metin Rengini Değiştir

Ve başlık metni rengi de.

• Başlık Metin Rengi: #dd6aca

Ön izleme

Eğitimi tamamladığımıza göre, farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi'nin yerleşik seçeneklerini yalnızca fareyle üzerine gelme sekmeleri oluşturmak için nasıl kullanacağınızı gösterdik. Bu yaklaşım, özellikler veya ürünlerle ilgili içeriği etkileşimli bir şekilde paylaşmanıza yardımcı olacaktır. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!