Bir düğmeye tıklayarak görüntüyü 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 Oku: Elementor ile metnin üzerine gelindiğinde bir resim nasıl değiştirilir

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.

Resim widget'ını sol sütuna sürükleyelim ve kitaplığımızdan bir resim ekleyelim.

Sağ sütuna, bir ekleyelim Başlık Widget'ı En İyisini Seçin başlıklı. sekmesinde stil hadi tıklayalım matbaacılık ve değiştir 1'de satır yüksekliği.

Ayrıca bakınız: Bir resim nasıl değiştirilirElementor ile metnin üzerine gelin

Başlık widget'ının altına ekleyelim, bir Metin Düzenleyici widget'ı.

Başlık widget'ının üstüne, sekmesine bir Ayırıcı Widget'ı bırakalım içindekiler, hadi kapalım 270 genişlik için. Öğe Eklemek için Metin'e tıklayalım, ardından eğilim metin olarak. sekmesinde stil, Gresi değiştirin ve boşluk uzeri 2.

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

Metin bölümünde, üzerine tıklayın. matbaacılık, yazı tipini değiştirelim, boyut uzeri 18içinde gres uzeri 600.

Editör widget'ının altında içindekiler, hadi dosyalayalım İç bölüm, Dahili Bölümün sütunlarından birini silin ve ikincisine bırakın düğme widget'ı

Yan panele ve sekmeye giderek düğmeyi değiştirelim içindekiler, tıklamak simge kitaplığı uzeri ikon ve simgeyi ekleyin Alışveriş Çantası, üzerindeki düğmenin içeriğini de temizleyelim Metinleri

hadi sekmeye gidelim stil düğmesinin ve içinde Sınır Yarıçapı, tıklamak % ve ele geçirmek 50 tüm bordür yarıçapları için ve İç kenar boşlukları, hadi kapalım 20.

Tıklayarak ikincisinin rengini değiştirerek düğmenin rengini özelleştirelim. klasik için Arka Plan Türü ve görseldeki vurgu rengine göre rengi değiştirelim.

Ardından Sekmeye tıklayın gelişmiş düğmemizin, ardından konumlandırma ve Genişlik hadi seçelim Satır içi (Otomatik). Gelişmiş bölümündeGelişmiş sekmesi, hadi kapalım 10 özellikle hedefiniz sağ kenar boşluğu.

Bu butonu 4 defa çoğaltalım ve bu butonların renklerini değiştirelim.

Ardından, Resim widget'ımızı 4 kez çoğaltalım, ardından resimlerini değiştirelim.

L 'deGelişmiş sekme, hadi kapalım Tüm resimler alan içerisinde CSS sınıfları resimlerimizin her biri.

Daha sonra sahada CSS kimliği kırmızı vurgulu görüntü için kırmızı görüntü, yeşil vurgulu görüntü için yeşil görüntü ve kahverengi vurgulu görüntü için kahverengi görüntü vb. girin.

bizim seçelim Bölüm Ve içindeGelişmiş sekmesi, alan içerisinde görenek CSS, aşağıdaki kod parçacığını kopyalayıp yapıştırın:

.all-images{
    display: none;
}
#red-image{
    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)

Ardından sayfamıza bir HTML widget'ı bırakalım, aşağıdaki kod parçasını kopyalayıp HTML Kodu bölümüne yapıştıralım:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

Alandaki ilk düğmeyi seçelim Özel Nitelikler arasında Özellikler bölümü, aşağıdaki kod parçacığını kopyalayıp yapıştırın:

data-showme|IMAGE-ID-NAME

IMAGE-ID-NAME kısmını butonlarınızın ID'lerine göre değiştirelim, bunlar kırmızı-image, green-image ve mavi-image ID'leridir, vb.

O halde her buton için IMAGE-ID-NAME kodunu uygun butonun rengiyle değiştirelim.

Düğmelerinizi test ederken çalışmanızı güncelleyin ve masaüstü, tablet ve akıllı telefon modunda önizleyin.

Akıllı telefon modunda, örneğin düğmeleri ortada hizalayabilir, kenar boşluklarını azaltabilir ve çok daha fazlasını yapabilirsiniz.

İş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ş.

...