İş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 olasılıklar sonsuzdur ve kesinlikle anlamanıza olanak sağlayacaktır. Divi daha derin bir seviyede.
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.
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.
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 biraz ekleyin içindekiler De Chore Choix.
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
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
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.
Ç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 simgeyi de değiştirelim ve içindekiler sunum metni.
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
Satırdaki Blurb modülünü açın ve simgeyi ve içindekiler du modülü.
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
anket
Öğreticiden geçtik, şimdi sonuca son bir göz atalım.
DIVI'yı Şimdi İndirin !!!
Sonuç
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ş.
...
