Elementor: Metnin üzerine gelindiğinde bir resim nasıl değiştirilir?

Bir metnin üzerine gelindiğinde bir resmi değiştirmek ister misiniz? Page Builder Elementor ? Bu yeni eğitimde, size bunu nasıl yapacağınızı göstereceğiz.

Bugün ne hakkında konuşmak istediğimiz hakkında hiçbir fikriniz yoksa, sizi aşağıdaki videoyu izlemeye davet ediyoruz:

O zaman neden burada olduğumuza dönelim.

Ayrıca aşağıdakilerle ilgili rehberimizi keşfedin:  Elementor ile Portföyden Efekt Kartı Nasıl Oluşturulur

Bu öğreticiyi tamamlamak için ihtiyacınız olacak Elementor'un Pro sürümü, çünkü yalnızca bu sürüm tarafından desteklenen özel CSS kodunu kullanacağız.Elementor.

2 sütunlu bir bölüm oluşturalım, ardından yan panelde tanımlayalım. Yükseklik uzeri Minimum Yükseklikve sonra Minimum yükseklik hadi tıklayalım VH ve kaydırıcıyı ayarlayın 100.

Sekmede stil hadi onu seçelim Arka plan türü üzerine tıklayarak klasik, ardından değiştirin renk uzeri# F9F9F9

Sekmede gelişmiş, hepsini değiştir İç kenar boşlukları uzeri 25

Şimdi sütun genişliğini şu şekilde değiştirelim: %40 sol sütun için ve %60 sağ sütun için.

Sol sütunda, bir bırakalım Metin Düzenleyici Widget'ı, ardından içine bir Metin yapıştırın ve Başlık Boyutu açık metin Başlık 3.

Sekmede gelişmiş, olarak girin İç Kenar Boşlukları 10-25-10-30 için sırasıyla üst, sağ, alt ve sol iç kenar boşlukları

bölümünde arka plân sekme gelişmiş, tıklamak GENEL BAKIŞöğesini seçin, ardından arka plan türü uzeri klasik, hadi girelim renk #DFF5FF et Geçiş süresi uzeri 0.5.

Fareyi metnin üzerine getirdiğimizde, üzerine gelindiğinde muhteşem bir arka plan rengi keşfetme fırsatımız olacak.

Şimdi bölüme geçelim sınırlarve üzerine tıklayın GENEL BAKIŞöğesini seçin, ardından Devam et için kenarlık türü et sınır arasındaki bağlantıyı devre dışı bırakalım girmek 4 özellikle hedefiniz sol kenarlık. hadi rengi seçelim #002FA7 ve bir geçiş süresi ekleyin 0.5

Metin kutumuzun üzerine bir kez daha gelirsek, solda bir kenarlıkla daha belirgin bir animasyon göreceğiz.

bölümünde sınır, sekmeye geri dönelim NORMAL, kenarlık türünü seçelim Devam et, sınırlar arasındaki bağlamayı devre dışı bırak, yakala 4 sol kenarlık için ve çok şeffaf hale getirin.

Metnin üzerine bir kez daha gelirsek, çok yumuşak bir geçiş göreceğiz.

Ayrıca Oku: Elementor ile bir görüntünün üzerindeki metin nasıl görüntülenir?

Bu metni iki kez çoğaltalım ve her birinin metnini değiştirelim. içindekiler bunun gibi.

Sağ sütunda, bir Resim widget'ıve kitaplığımızdan bir resim ekleyin.

Giderek bu görüntünün etrafında biraz boşluk yaratacağız. Gelişmiş sekme ve Üst, Sağ, Alt ve Sol tüm iç kenar boşlukları için 10 – 10 – 10 – 50 girin.

Resmi seçelim ve sekmede gelişmiş ikincisinden, bölüme gidelim Hareket efektleri daha sonra Giriş Animasyonu, Seçme Azaltmak

bölüme geri dönelim gelişmiş Gelişmiş Sekmesinden seçin ve CSS Sınıfları alanına bazı sınıf adları ekleyin. hadi alalım tüm-img img-1

İmajımızı 2 kez çoğaltalım.

İkinci görüntüyü seçelim ve img-1'i img-2 olarak değiştirelim, ardından görüntüyü yeni bir görüntüye değiştirelim.

Ayrıca bakınız: Elementor ile bir resim galerisi nasıl oluşturulur

Üçüncü görüntü için img-1'i img-3'e değiştirelim, ardından görüntüyü yeni bir görüntüyle değiştirelim.

Bölümümüzü seçelim ve sekmesine gidelim gelişmiş. Bölümde özel CSS, aşağıdaki kod parçacığını kopyalayıp yapıştırın:

selector .all-img{
    display: none;
}
selector .img-1{
    display: block;
}

(Bu bölüme sahip değilseniz Pro sürümünüz yoktur, devam etmek istiyorsanız sürümünüzü yükseltmeniz gerekir).

İlk metin düzenleyicimizi seçelim ve Gelişmiş sekmesine gidelim ve Özellikler bölümü. Alan içerisinde Özellikler, aşağıdaki kod parçacığını kopyalayıp yapıştırın:

data-showme|img-1

Bunu, img-1'i img-2'ye veya img-3'e değiştirirken diğer metin düzenleyiciler için yapın.

Şimdi sayfamıza bir HTML widget'ı ekleyelim. Aşağıdaki komut dosyasını kopyalayıp yapıştırın:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>

Şimdi sayfanızı kaydedin veya güncelleyin ve ardından önizleyin.

İşte, bu görevi kolayca yaptınız.

Elementor Pro'yu Hemen Alın!

Sonuç

İşte burada ! Bir metnin üzerine gelindiğinde bir resmi nasıl değiştireceğinizi gösteren bu makale bu kadar. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa, bize içinde bildirin. Yorumlar.

Ancak, ayrıca 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ş.

...