Divi ile Hover'da Bir Görüntü Nasıl Değiştirilir

Fareyle üzerine gelindiğinde bir resmin nasıl değiştirileceğini bilmek, üzerinde çalıştığınız her tür web sitesi için kullanışlı olabilir. Ayrıca, sayfalara ince etkileşim eklemenize yardımcı olur. Örneğin, sayfalar ve ekip sayfaları hakkında referanslara ek bir bakış açısı kazandırmak için kullanabilirsiniz. Divi'nin yeni vurgulu seçenekleriyle, yalnızca yerleşik seçenekleri kullanarak üzerine gelindiğinde bir görüntüyü değiştirebilirsiniz. Sütun arka planlarını ve opaklık filtresini birleştirerek, oraya hemen ulaşırsınız.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, sıfırdan yeniden oluşturacağımız dört örneğe bir göz atalım.

Genel Adımlar

Yeni Bölüm Ekle

Bu öğreticinin ilk bölümünde, bazı genel adımlardan geçeceğiz. Bu genel adımlar, ilk üç örneğe odaklanırken zaman kazanmamıza yardımcı olacaktır. Yeni veya mevcut bir sayfa açın ve ona normal bir bölüm ekleyin.

Yeni Satır Ekle

Sütun Yapısı

Ardından, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

Sütun 1 Arka Plan 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. Fareyle üzerine gelindiğinde görünmesini istediğiniz resmi seçin.

• Sütun 1 Arka Plan Resmi Tekrarı: Tekrar Yok

Sütun 1'e Resim Ekle

Fotoğraf yükleniyor

İlk sütuna bir Resim Modülü ekleyerek devam edin ve üzerine gelmeden önce görünmesini istediğiniz resmi yükleyin.

Sütun 2'ye Başlık Metin Modülü Ekle

İçerik Ekle

İkinci sütunda, önce bir Metin Modülü başlığına ihtiyacımız olacak. Devam edin ve biraz H3 içeriği ekleyin.

Başlık Metni Ayarları

Ardından, 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: 100px (Masaüstü), 70px (Tablet), 50px (Telefon)
• Başlık 3 Harf Aralığı: -4px

• Başlık 3 Metin Gölgesi Yatay Uzunluk: 0.04em
• Başlık 3 Metin Gölgesi Dikey Uzunluğu: 0.04em
• Başlık 3 Metin Gölge Rengi: rgba(0,0,0,0.6)

aralık

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

• Üst Kenar Boşluğu: 100px (Masaüstü), 50px (Tablet ve Telefon)

Sütun 2'ye Bölücü Modülü Ekle

Bölücüyü Göster

Sütun 2'deki Metin Modülü başlığının hemen altına bir Bölücü Modül ekleyin.

• Bölücüyü Göster: Evet

Bölücü Renk

Sonraki ayırıcı rengini değiştirin.

• Bölücü Rengi: #e25300

Stiller

Ve stil ayarlarında başka bir bölücü stili seçin.

• Bölücü Stili: Noktalı

boyutlandırma

Boyutlandırma ayarlarında da bölücü ağırlığını artırın.

• Bölücü Ağırlığı: 3px

Sütun 2'ye Gövde Metni Modülü Ekle

İçerik Ekle

Son modüle! İkinci sütuna, seçtiğiniz içerikle bir gövde Metin Modülü ekleyin.

Metin Ayarları

Sonraki metin ayarlarını değiştirin.

• Metin Boyutu: 16px
• Metin Satırı Yüksekliği: 2.3em
• Metin Yönü: Yasla

Bölümü İki Kez Klonla

Tüm genel adımları tamamladıktan sonra, oluşturduğunuz bölümü iki kez klonlayın. Şimdi, ilk üç örneğin her biri için ayrı bir bölümümüz olacak.

Örnek 1 Oluştur

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 vurgulu geçişi 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

Hover Opaklığı

Üzerine gelindiğinde 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ş Süresi: 1200ms

2. Örnek Oluştur

Görüntü Modülüne Ek Ayarlar Uygulayın

Varsayılan Aralık

İkinci örneğe geçelim! 1. sütundaki Görüntü Modülünü açın ve orada varsayılan özel dolgu olmadığından emin olun.

Vurgu Aralığı

Fareyle üzerine gelindiğinde görüntünün boyutunun artmasını sağlamak için üzerine gelindiğinde biraz alt dolgu ekleyerek devam edin.

• Alt Dolgu: 100px

Kutu Gölge

Ayrıca, üzerine gelindiğinde kaybolacak varsayılan bir kutu gölgesi ekliyoruz.

• Kutu Gölgesi Yatay Konumu: -55px
• Kutu Gölgesi Dikey Konumu: -50px
• Kutu Gölge Yayılma Gücü: -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

Hover Opaklığı

Fareyle üzerine gelindiğinde modülün opaklığını kaldırın. Bu, sütun arka planının görünmesini ve 'vurgulu görüntü' efektini oluşturmasını sağlar.

• Opaklık: %0

geçişler

Son olarak Görüntü Modülünün geçiş ayarlarında geçiş süresini artırın.

• Geçiş Süresi: 1200ms

Örnek 3'ü Oluşturun

Sütun 1'e Gradyan Arka Planı Ekle

Üçüncü örnek için, satır ayarlarını açarak ve ilk sütuna bir radyal gradyan arka planı ekleyerek başlıyoruz. Bu, fareyle üzerine gelindiğinde görüntüye dairesel bir şekil verecektir.

• Renk 1: rgba(43,135,218,0)
• Renk 2: #ffffff
• Sütun 1 Gradyan Türü: Radyal
• Sütun 1 Radyal Yön: Merkez
• Sütun 1 Başlangıç ​​Konumu: %60
• Sütun 1 Bitiş Konumu: %60

Görüntü Modülüne Ek Ayarlar Uygulayın

Varsayılan Opaklık

Sütun 1'deki görüntü modülünü açarak ve varsayılan opaklığın %100 olduğundan emin olarak devam edin.

• Opaklık: %100

Hover Opaklığı

Sütun arka planının görünmesine izin vermek için fareyle üzerine gelindiğinde tüm opaklığı kaldırın.

• Opaklık: %0

Örnek 4'ü Oluşturun

Yeni Satır Ekle

Sütun Yapısı

Son örneğe geçelim! Burada 6 sütunlu yeni bir satıra ihtiyacımız olacak.

Sütun 1 Arka Plan Resmi

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve fareyle üzerine gelindiğinde görünmesini istediğiniz arka plan görüntüsünü sütun 1 arka plan görüntüsü olarak ekleyin.

• Sütun 1 Arka Plan Resmi Tekrarı: Tekrar Yok

Satırdaki Tüm Sütunlar İçin Tekrarla

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

boyutlandırma

Ardından, satırın boyutlandırma ayarlarına gidin ve sütunlar arasındaki tüm boşlukları kaldırın.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: 1

Sütun 1'e Görüntü Modülü Ekle

Fotoğraf yükleniyor

İ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

Hover Opaklığı

Bunun yerine sütun arka planının gösterilmesine izin vermek için fareyle üzerine gelindiğinde opaklığı kaldırın.

• Opaklık: %0

geçişler

Yumuşak bir geçiş için geçiş süresini artırın.

• Geçiş Süresi: 800ms

Görüntü Modülünü 3 Kez Klonla ve Kopyaları Kalan Sütunlara Yerleştir

1. sütundaki Görüntü Modülünü değiştirmeyi bitirdikten sonra, onu klonlayabilir ve kopyaları kalan sütunlara yerleştirebilirsiniz. Görselleri de değiştirmeyi unutmayın.

Ön izleme

Şimdi tüm adımlardan ve dört örneğin hepsinden geçtik, şimdi oluşturduğumuz üç örneğe son bir göz atalım.

Son düşünceler

Fareyle üzerine gelindiğinde bir resmi değiştirmek, bu ekstra etkileşimi, sayfalar ve ekip sayfaları hakkında referans bölümlerine getirmeye yardımcı olabilir. Bu öğreticide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak fareyle üzerine gelindiğinde farklı türlerde görüntüler elde etmenin kolay bir yolunu gösterdik! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

LovArt / Shutterstock.com tarafından Öne Çıkan Görsel