Fareyle üzerine gelindiğinde bir görüntünün nasıl değiştirileceğini bilmek, herhangi bir tür için yararlı olabilir. Site Web üzerinde çalışıyorsun. Ayrıca, sayfalara ince etkileşim eklemenize yardımcı olur. Örneğin, referanslara, sayfalara ve ekip sayfalarına ek bir bakış açısı kazandırmak için kullanabilirsiniz.
Yeni vurgulu seçenekleriyle Divi, yalnızca yerleşik seçenekleri kullanarak fareyle üzerine gelindiğinde bir görüntüyü düzenleyebilirsiniz. Sütun arka planlarını ve opaklık filtresini birleştirerek oraya kısa sürede ulaşırsınız.
Gidelim!
anket
Öğreticiye girmeden önce, en baştan oluşturacağımız dört örneğe bir göz atalım.
Genel adımlar
Yeni bölüm ekle
Bu eğitimin ilk bölümünde, birkaç genel adım atacağız. Bu genel adımlar, ilk üç örneğe odaklandığımızda zaman kazanmamıza yardımcı olacaktır. Yeni veya mevcut bir sayfa açın ve ona normal bir bölüm ekleyin.
Yeni bir satır ekle
Sütun yapısı
Ardından, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:
1 sütun Arkaplan resmi
Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve ilk sütuna bir arka plan görüntüsü ekleyin. Üzerinden uçmak istediğiniz görüntüyü seçin.
- Sütun 1 Arka plan resmi Tekrar: Tekrar yok
1 sütununa bir resim ekleyin
Bir resim yükle
İlk sütuna bir görüntü modülü ekleyerek devam edin ve üzerine gelmeden önce görünmesini istediğiniz görüntüyü yükleyin.
2 sütununa bir başlık metin modülü ekleyin
İçerik ekle
İkinci sütunda öncelikle bir Metin Modülü başlığına ihtiyacımız olacak. Devam edin ve biraz ekleyin içindekiler H3.
Üstbilgi Metni Ayarları
Sonra başlık metni ayarlarına gidin ve bazı değişiklikler yapın.
- Başlık 3 Yazı Tipi: Baloo Tamma
- Başlık 3 Metin rengi: # eda96a
- Başlık 3 Metin Boyutu: 100 piksel (masaüstü), 70 piksel (tablet), 50 piksel (telefon)
- 3 Harflerin Başlık Boşluğu: -4px
- Başlık 3 Metin Gölge Yatay Uzunluk: 0.04em
- Başlık 3 Metin Gölge Dikey Uzunluk: 0.04em
- Başlık 3 Renk Metnin Gölge: rgba (0,0,0,0,6)
aralık
Son olarak, boşluk ayarlarında üst kenar boşluğu ekleyin.
- Üst marj: 50 (masaüstü), 50px (tablet ve telefon)
2 sütununa bir bölme modülü ekleme
Ayırıcıyı göster
2 sütunundaki Metin Modülü başlığının hemen altına bir ayırma modülü ekleyin.
- Bölücüyü Göster: Evet
Ayırıcının rengi
Bölenin rengini değiştir.
- Ayırıcının rengi: # e25300
modları
Stil ayarlarında başka bir ayırma stili seçin.
- Ayırma tarzı: noktalı
boyutlandırma
Ayrıca, boyutlandırma parametrelerinde bölücü ağırlığını arttırın.
- Ayırıcı ağırlığı: 3px
2 sütununa bir gövde metin modülü ekleyin
İçerik ekle
Son modüle geçelim! İkinci sütuna bir metin modülü gövdesi ekleyin. içindekiler seçim.
Metin ayarları
Metin ayarlarını daha sonra değiştirin.
- Metin boyutu: 16px
- Metin satırının yüksekliği: 2.3em
- Metin yönü: Yasla
Bölümü iki kez klonla
Tüm genel adımları tamamladıktan sonra, oluşturduğunuz bölümü çift klonlayın. Şimdi ilk üç örneğin her biri için ayrı bir bölümümüz olacak.
Örnek 1 oluşturun
Görüntü modülüne ek ayarlar uygulayın
Varsayılan opaklık
İlk örneği oluşturmaya başlayalım! Burada yapacağımız tek şey, herhangi bir ek efekt olmadan fareyle üzerine gelme geçişini oluşturmaktır. Bunu yapmak için Görüntü modülünü açın ve filtre ayarlarına gidin. Varsayılan opaklık değerinin% 100 olduğundan emin olun.
- Opaklık:% 100
Fareyle opaklığın üzerine gelin
Fareyle gezinirken opaklığı değiştirin.
- Opaklık:% 0
geçişler
Son olarak, geçiş süresini artırarak yumuşak bir geçiş oluşturun.
- Geçişin Süresi: 1200ms
Örnek 2 oluşturun
Görüntü modülüne ek ayarlar uygulayın
Varsayılan aralık
İkinci örneğe geçelim! Görüntü modülünü 1. sütunda açın ve varsayılan özel dolgu olmadığından emin olun.
Sabit aralık
Fareyle üzerine gelinen görüntünün boyutunun artmasına izin vermek için biraz alt fareyle üzerine gelme kenar boşluğu ekleyerek devam edin.
- Alt doldurma: 100px
Gölge kutusu
Ayrıca rollover'da kaybolan varsayılan bir kutu gölgesi de ekleriz.
- Kutunun gölgesi, yatay pozisyon: -55px
- Kutu Gölge Dikey Konum: -50px
- Kutu gölge yayılma kuvveti: -10px
- Gölge Rengi: # eda96a
Varsayılan opaklık
Ardından, filtre ayarlarına gidin ve varsayılan opaklığın% 100 olduğundan emin olun.
- Opaklık:% 100
Fareyle opaklığın üzerine gelin
Vurgulu modun opaklığını kaldırın. Bu, sütunun arka planının "vurgulu görüntü" efekti göstermesine ve oluşturmasına izin verecektir.
- Opaklık:% 0
geçişler
Son olarak, Görüntü modülünün geçiş parametrelerinde geçiş süresini artırın.
- Geçişin Süresi: 1200ms
Örnek bir 3 oluşturun
1 sütununa degrade arka plan ekleme
Üçüncü örnek için, satır ayarlarını açarak ve ilk sütuna bir radyal gradyan arka planı ekleyerek başlıyoruz. Bu, gezinen görüntüye dairesel bir şekil verecektir.
- 1 renk: rgba (43,135,218,0)
- 2 renk: #ffffff
- 1 sütun Degrade türü: Radyal
- Sütun 1 Radyal Yön: Merkez
- Sütun 1 Başlangıç Konumu:% 60
- Sütun 1 Nihai Konum:% 60
Görüntü modülüne ek ayarlar uygulayın
Varsayılan opaklık
1 sütununun görüntü modülünü açarak ve varsayılan opaklığın% 100 olduğundan emin olarak devam edin.
- Opaklık:% 100
Fareyle opaklığın üzerine gelin
Sütunun arka planını ortaya çıkarmak için köprü opaklığını kaldırın.
- Opaklık:% 0
Örnek 4 oluşturun
Yeni bir satır ekle
Sütun yapısı
Son örnekte! Burada 6 sütunlu yeni bir satıra ihtiyacımız olacak.
1 sütun Arkaplan resmi
Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve üzerine gelmek istediğiniz arka plan görüntüsünü 1. sütun için arka plan görüntüsü olarak ekleyin.
- Sütun 1 Arka plan resmi Tekrar: Tekrar yok
Online tüm sütunlar için tekrarlayın
Sıranızdaki sütunların her biri için önceki adımı tekrarlayın.
boyutlandırma
Ardından, satırın boyutlandırma parametrelerine erişin ve sütunlar arasındaki boşlukları kaldırın.
- Bu satırı tam genişlik yap: Evet
- Özel bir oluk genişliği kullanın: 1
1. sütuna bir görüntü modülü ekleyin
Bir resim yükle
İlk sütuna bir görüntü modülü ekleyerek ve varsayılan olarak görünmesini istediğiniz görüntüyü yükleyerek devam edin.
Varsayılan opaklık
Bu modülün varsayılan opaklığının% 100 olduğundan emin olun.
- Opaklık:% 100
Fareyle opaklığın üzerine gelin
Bunun yerine sütun arka planının görüntülenmesine izin vermek için fareyle üzerine gelindiğinde opaklığı kaldırın.
- Opaklık:% 0
geçişler
Düzgün bir geçiş için geçiş süresini artırın.
- Geçişin Süresi: 800ms
Image 3 modülünü bir kez klonlayın ve kopyaları kalan sütunlara yerleştirin
1. sütundaki görüntü modülünü düzenlemeyi tamamladığınızda, onu klonlayabilir ve kopyaları kalan sütunlara yerleştirebilirsiniz. Resimleri de değiştirdiğinizden emin olun.
Son düşünceler
Fareyle üzerine gelme görüntüsünü değiştirmek, bu ekstra etkileşimi referans bölümlerine, sayfalara ve ekip sayfalarına getirmeye yardımcı olabilir.
Bu öğreticide, yalnızca yerleşik seçenekleri kullanarak fareyle üzerine gelindiğinde farklı türde görüntüler elde etmenin kolay bir yolunu gösterdik. Divi ! Herhangi bir sorunuz veya öneriniz varsa, lütfen aşağıdaki yorum bölümüne bir yorum bırakın!