Elementor: Si të ndryshoni një imazh kur rri pezull mbi tekst

Dëshironi të ndryshoni një imazh kur rri pezull mbi një tekst me Faqja Builder Elementor ? Në këtë tutorial të ri, ne do t'ju tregojmë se si ta bëni atë.

Nëse nuk e keni idenë se për çfarë duam të flasim sot, ju ftojmë të shikoni videon e mëposhtme:

Atëherë le të kthehemi te pse jemi këtu.

Zbuloni gjithashtu udhëzuesin tonë për:  Si të krijoni një kartë efekti nga një portofol me Elementor

Për të përfunduar këtë tutorial, do t'ju duhet versioni Pro i Elementor, sepse ne do të përdorim kodin e personalizuar CSS i cili mbështetet vetëm nga ky version iElementor.

Le të krijojmë një seksion me 2 kolona, ​​më pas në panelin anësor, le të përcaktojmë Lartësia sur Lartësia minimale, pastaj në Lartësia minimale le të klikojmë VH dhe vendoseni rrëshqitësin në 100.

Në skedë Stili le ta zgjedhim Lloji i sfondit duke klikuar mbi klasik, më pas modifikoni couleur sur# F9F9F9

Në skedë i përparuar, modifikoni të gjitha Kufijtë e brendshëm sur 25

Tani le të ndryshojmë gjerësinë e kolonës në 40% për kolonën e majtë dhe 60% për kolonën e djathtë.

Në kolonën e majtë, le të hedhim a Miniaplikacioni i redaktuesit të tekstit, më pas ngjisni një Tekst në të dhe modifikoni Madhësia e titullit teksti në Titulli 3.

Në skedë i përparuar, futni si Marzhet e brendshme 10-25-10-30 respektivisht për kufijtë e brendshëm lart, djathtas, poshtë dhe majtas

Në seksionin sfond skedinë i përparuar, klikoni mbi PVIRMBLEDHJE, më pas zgjidhni lloji i sfondit sur klasik, le ta fusim ngjyra #DFF5FF et Kohëzgjatja e tranzicionit sur 0.5.

Nëse rri pezull mbi tekst, do të kemi mundësinë të zbulojmë një ngjyrë madhështore të sfondit në hover.

Tani le të shkojmë në seksion kufijtë, dhe klikoni mbi PVIRMBLEDHJE, pastaj zgjidhni vazhdoj për lloji i kufirit et le të çaktivizojmë lidhjen midis kufirit të hysh 4 për kufiri i majtë. Le të zgjedhim ngjyrën #002FA7 dhe shtoni një kohëzgjatje tranzicioni në 0.5

Nëse rri pezull mbi kutinë tonë të tekstit edhe një herë, do të shohim një animacion më të spikatur me një kufi në të majtë.

Në seksionin kufi, le të kthehemi te skeda NORMAL, le të zgjedhim llojin e kufirit në vazhdoj, le të fikim lidhjen midis kufijve, kap 4 për kufirin e majtë dhe e bëjnë atë shumë transparent.

Nëse rri pezull mbi tekst edhe një herë, do të shohim një tranzicion shumë të qetë.

Lexo gjithashtu: Si të shfaqni tekstin mbi një imazh me Elementor

Le ta kopjojmë këtë tekst dy herë dhe të ndryshojmë tekstet e secilit përmbajtje si kjo.

Në kolonën e djathtë, tërhiqni a Miniaplikacioni i imazhit, dhe futni një imazh nga biblioteka jonë.

Ne do të krijojmë një hapësirë ​​rreth këtij imazhi duke shkuar te Skeda e avancuar të kolonës dhe vendosni 10 – 10 – 10 – 50 për të gjitha kufijtë e brendshëm të sipër, djathtas, poshtë dhe majtas.

Le të zgjedhim imazhin dhe në skedën i përparuar e kësaj të fundit, le të kalojmë në seksion Efektet e lëvizjes pastaj në Animacioni i hyrjes, zgjidhni Zbehet në

Le të shkojmë në seksion i përparuar nga skeda e avancuar dhe shtoni disa emra klasash në fushën CSS Classes. Pra, le të marrim all-img img-1

Le të dublikojmë imazhin tonë 2 herë.

Le të zgjedhim imazhin e dytë dhe të ndryshojmë img-1 në img-2, më pas ta ndryshojmë imazhin në një imazh të ri.

Shih gjithashtu: Si të krijoni një galeri imazhesh me Elementor

Për imazhin e tretë, le të ndryshojmë img-1 në img-3, pastaj ndryshojmë imazhin në një imazh të ri.

Le të zgjedhim seksionin tonë dhe të shkojmë te skeda e tij i përparuar. Në seksionin Custom CSS, kopjoni dhe ngjisni fragmentin e mëposhtëm të kodit:

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

(Nëse nuk e keni këtë seksion, atëherë nuk keni versionin Pro, nëse dëshironi të vazhdoni, duhet të përmirësoni versionin tuaj).

Le të zgjedhim redaktuesin tonë të parë të tekstit dhe të shkojmë te skeda e avancuar dhe te Seksioni i atributeveMe Në fushë Atributet, kopjoni dhe ngjisni fragmentin e mëposhtëm të kodit:

data-showme|img-1

Bëni këtë për redaktuesit e tjerë të tekstit ndërsa ndryshoni img-1 në img-2 ose në img-3

Tani le të shtojmë një widget HTML në faqen tonë. Kopjoni dhe ngjisni skriptin e mëposhtëm:

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

Tani ruani ose përditësoni faqen tuaj dhe më pas shikoni atë paraprakisht.

Ja ku shkoni, sapo e keni bërë këtë detyrë me lehtësi.

Merrni Elementor Pro Tani!

Përfundim

Aty ajo është ! Kjo është ajo për këtë artikull që ju tregon se si të ndryshoni një imazh kur rri pezull mbi një tekst. Nëse keni ndonjë shqetësim se si të arrini atje, na tregoni brenda komente.

Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...