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.

uçan görüntü

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.

bölüm seçimi divi.jpg

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:

bir düzen seçin divi.jpg

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

arka görüntü divi.jpg

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.

resim ekle divi.jpg

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.

resim ve metin divi.jpg

Ü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

jaden elian resimleri divi.jpg

  • 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)

özelleştirme yazı tipi divi image.jpg

aralık

Son olarak, boşluk ayarlarında üst kenar boşluğu ekleyin.

  • Üst marj: 50 (masaüstü), 50px (tablet ve telefon)

kenar boşluğu görüntüsü divi.jpg

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ı divi imge module.jpg

Ayırıcının rengi

Bölenin rengini değiştir.

  • Ayırıcının rengi: # e25300

görüntü divi separaur color.jpg

modları

Stil ayarlarında başka bir ayırma stili seçin.

  • Ayırma tarzı: noktalı

bölünmüş ayırıcı divi.jpg

boyutlandırma

Ayrıca, boyutlandırma parametrelerinde bölücü ağırlığını arttırın.

  • Ayırıcı ağırlığı: 3px

kuyruk ayırıcı divi image.jpg

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.

divi.jpg metnin yeni bölümü

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

divi.jpg hattının boyutunu ve yüksekliğini değiştirin

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.

bir bölümü çoğaltmak divi.jpg

Ö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

image.jpg köprü yapılandırması

Fareyle opaklığın üzerine gelin

Fareyle gezinirken opaklığı değiştirin.

  • Opaklık:% 0

flyover.jpg'deki opaklığı değiştir

geçişler

Son olarak, geçiş süresini artırarak yumuşak bir geçiş oluşturun.

  • Geçişin Süresi: 1200ms

animasyon süresi divi module image.jpg

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

varsayılan fill.jpg dosyasını kontrol edin

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

alt margin.jpg tanımlayın

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

bir gölge tanımlayın divi.jpg

Varsayılan opaklık

Ardından, filtre ayarlarına gidin ve varsayılan opaklığın% 100 olduğundan emin olun.

  • Opaklık:% 100

uçan görüntü

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

köprü opaklığı divi.jpg

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

divi.jpg animasyonu süresi

Ö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

divi.jpg hat ayarları

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

divi.jpg üzerinde köprü görüntüsündeki opaklığın yapılandırılması

Fareyle opaklığın üzerine gelin

Sütunun arka planını ortaya çıkarmak için köprü opaklığını kaldırın.

  • Opaklık:% 0

canlılığı tanımlayın divi.jpg

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

örnek 4 düzen divi.jpg

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

tekrarı.jpg olmadan görüntü

Online tüm sütunlar için tekrarlayın

Sıranızdaki sütunların her biri için önceki adımı tekrarlayın.

diğer column.jpg üzerindeki görüntüleri çoğaltmak

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

divi.jpg'ın boyutlandırılması

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.

şimdi 1 divi.jpg sütunundaki resim modülü

Varsayılan opaklık

Bu modülün varsayılan opaklığının% 100 olduğundan emin olun.

  • Opaklık:% 100

divi.jpg de opaklığı yapılandır

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

köprü geçiş opaklığı modülü image divi.jpg

geçişler

Düzgün bir geçiş için geçiş süresini artırın.

  • Geçişin Süresi: 800ms

bir geçiş süresi divi.jpg

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.

module.jpg dosyasını kopyalamak için

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!