Divi ile yüzerken görüntüleri nasıl değiştirir
İmleçi yönlendirirken resimlerin nasıl değiştirileceğini bilmek, üzerinde çalıştığınız tüm web siteleri için yararlı olabilir. Ayrıca, bu, sayfaya ince etkileşimler eklemenize yardımcı olur. Örneğin, referanslar, takım sayfaları ve sayfaları hakkında ek bir bakış açısı sağlamak için kullanabilirsiniz. Yeni Hover Divi seçeneğiyle, varsayılan seçeneği kullanarak yüzerken görüntüyü değiştirebilirsiniz. Sütun ve filtre opaklığının arka planını birleştirerek, kısa sürede oraya geleceksiniz. Haydi Yapalım şunu! Önizleme Öğreticiye girmeden önce, baştan başlayacağımız dört örneğe bakalım
Genel Adımlar Bu öğreticinin ilk bölümüne yeni bir parça ekleyin, birkaç genel adımdan geçeceğiz. Bu genel adımlar, ilk üç örneğe odaklanırken zamandan tasarruf etmemize yardımcı olacaktır. Yeni bir sayfa açın veya zaten var olan ve normal bölümü ekleyin. Daha sonra sütun yapısının yeni bir satırı ekleyin, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin: Sütun 1 Arka plan görüntüsü Herhangi bir modül eklemeden, satır ayarlarını açın ve ilk sütuna bir arka plan görüntüsü ekleyin. Gelişimde görüntülemek istediğiniz görüntüyü seçin.Sütun Arka Planının Tekrarlanması Resim 1: Tekrar yok Sütun 1’e Görüntü Ekle Görüntüyü Yükle İlk sütuna görüntü modülünü ekleyerek devam edin ve imleci yönlendirmeden önce görüntülemek istediğiniz görüntüyü yükleyin. Başlık metin modülünü Sütun 2’ye ekleyin İkinci sütundaki içeriği ekleyin, önce metin modülünün başlığına ihtiyacımız var. Lütfen ve bazı H3 içeriği ekleyin. Başlık Metin Ayarları Ardından, başlık metni ayarlarını açın ve bazı değişiklikler yapın.
Başlık 3 Yazı Tipi: Baloo Tamma
Başlık 3 Renk Metin: #EDA96AJ Başlık 3 Metin Boyutu: 100 PX (Masaüstü), 70px (Tablet), 50px (Telefon)
Başlık alanı 3 harf: -4px
Başlık 3 Gölge Metin Uzun Yatay: 0.04EM Başlık 3 Dikey uzunlukta gölge metni: 0.04EM
Başlık 3 Renk Gölge Metni: RGBA (0.0,0,0.0.6)
Son mesafe, boşlukları ayarlamak için bazı üst kenar boşlukları ekleyin. Üst kenar: 100 piksel (masaüstü), 50px (tablet ve cep telefonu)
Bölücü modülünü sütun 2’ye ekleyin Bölücü görüntüleyin Bölüm 2’deki metin modülünün başlığının hemen altına bölücü modülünü ekleyin. Divisor göster: evet
Bölücü rengi bir sonraki bölücü rengini değiştirir. Renk Renk: #E25300
Stil ve stil ayarlarında başka bir bölücü stili seçin. Bölücü stili:
Yapıştırıcı, boyut ayarlarında bölücü ağırlığını da arttırır. Bölücü ağırlığı: 3px
İçindekiler metin modülünü sütun 2’ye ekleyin, içeriği son modüle ekleyin! İçindekiler metin modülünü seçilen birkaç içeriğe sahip ikinci sütuna ekleyin. Metin Ayarları Sonraki metin ayarlarını değiştirir. Metin Boyutu: 16px
Yüksek çizgi metin: 2.3em
Metin Oryantasyonu: haklı çıkar
Klon kısmı, tüm genel adımları bitirdikten sonra iki kez, iki kez yaptığınız parçanın klonunu. Şimdi, ilk üç örneğin her biri için ayrı bir parçamız olacak. Örnek Oluştur 1 Varsayılan Opaklık Görüntü Modülüne Ek Ayarlar Uygulayın İlk örneği yapmaya başlayalım! Burada yapacağımız tek şey, ek etkiler olmadan bir vuruş geçişi yapmaktır. Bunu yapmak için görüntü modülünü açın ve filtre ayarlarını açın. Varsayılan opaklık değerinin%100 olduğundan emin olun. Opaklık:% 100
Yüzerken opaklığı değiştirmek için doğrudan opaklık. Opaklık:% 0
Son geçiş, geçiş süresini artırarak düzgün bir geçiş yapın. Geçiş süresi: 1200ms
Örnek oluşturun #2 İkinci örneğe varsayılan boşluk alanı modülüne ek ayarlar uygulayın! Resim modülünü sütun 1’deki açın ve orada varsayılan özel dolgu olmadığından emin olun. Yönetmen, artışa gönderildiğinde görüntünün boyutuna izin vermeye yönlendirirken birkaç alt rulman ekleyerek devam edin.
Dolgu Alt: 100 piksel
Kutumuzun gölgesi ayrıca imleci yönlendirirken kaybolacak varsayılan kutunun gölgesini de ekledi.Yatay konum gölge kutusu: -55px Kutu gölgesinin dikey konumu: -50px
Kutunun gölgesinin dağılımının gücü: -10px
Gölge Renk: #EDA96A
Bir sonraki varsayılan opaklık, filtre ayarlarını açın ve varsayılan opaklığın%100 olduğundan emin olun.
Opaklık:% 100 İmleçi yönlendirirken opaklık modülünü silmek için doğrudan opaklık. Bu, sütunun arka planının görünmesine ve ‘yüzerken’ bir görüntü oluşturmasına izin verecektir.
Opaklık:% 0 Son geçiş, görüntü modülünün geçiş ayarlarındaki geçiş süresini artırın.
Geçiş süresi: 1200ms Bir Örnek Oluştur #3 Gradyanın arka planını Sütun 1’e ekleyin Üçüncü örnek için satır ayarlarını açarak ve radyal gradyanın arka planını ilk sütuna ekleyerek başlarız. Bu, dairesel bir şekil havzasına bir resim verecektir.
Renk 1: RGBA (43,135,218.0) Renk 2: #ffffff
Sütun 1 Tip gradyanı: Radyal
Sütun 1 radyal yön: merkez
Sütun 1 Başlangıç Pozisyonu:% 60
Sütun 1:% 60’ın son konumu
Varsayılan Opaklık Görüntü Modülüne Ek Ayarlar Uygulayın Sütun 1’de görüntü modülünü açarak devam edin ve varsayılan opaklığın%100 olduğundan emin olun.
Opaklık:% 100 İmleciyi sütunun arka planının görülmesine izin verecek şekilde yönlendirirken tüm opaklığı silmek için opaklığı yönlendirin.
Opaklık:% 0 Örnek oluştur #4 Son örneğe yeni bir sütun yapısı satır ekleyin! Burada, 6 sütunlu yeni bir satıra ihtiyacımız var. Herhangi bir modül eklemeden sütun 1 arka plan görüntüsü, satır ayarlarını açın ve arka plan sütunu 1 görüntüsü olarak Hover’da görüntülemek istediğiniz arka plan görüntüsünü ekleyin.
Sütun Arka Planının Tekrarlanması Resim 1: Tekrar yok Satırdaki tüm sütunlar için tekrarlayın, satırınızdaki her sütun için önceki adımları tekrarlayın. Yapıştırıcı daha sonra satır boyutu ayarlarını açın ve sütunlar arasındaki tüm boşlukları silin.
Bu çizgiyi tamamen genişletin: evet Özel Talang genişliğini kullanın: 1 Resim Modülünü Sütun 1’e Ekleyin Görüntüyü Yükle Görüntü modülünü ilk sütuna ekleyerek ve varsayılan olarak görüntülemek 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 İmleciyi doğrudan opaklık ve silme, sütunun arka planının görüntülenmesine izin verecek şekilde yönlendirilirken. Opaklık:% 0
Geçiş, düzgün geçişler için geçiş süresini arttırır. Geçiş süresi: 800ms
Klon Görüntü Modülü 3 kez ve yinelenmeyi kalan sütuna yerleştirin, görüntü modülünü sütun 1’de değiştirmeyi bitirdikten sonra klonlayabilir ve kopyayı kalan sütuna yerleştirebilirsiniz. Görüntüyü de değiştirdiğinizden emin olun. Önizleme Şimdi tüm adımları ve dört örnekten geçtikten sonra, yaptığımız üç örneği görelim.
İmleç yönetimi, referans bölümüne, sayfalara ve takım sayfalarına ekstra etkileşimi getirmeye yardımcı olabilir.Bu öğreticide, yalnızca varsayılan Divi seçeneklerini kullanarak yüzerken çeşitli görüntü türlerine ulaşmanın kolay bir yolunu gösterdik!Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
