Dëshironi të ndryshoni imazhin me klikimin e një butoni 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.

Lexo gjithashtu: Si të ndryshoni një imazh kur rri pezull mbi tekst 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.

Le të tërhiqni miniaplikacionin Image në kolonën e majtë dhe të fusim një imazh nga biblioteka jonë.

Në kolonën e djathtë, le të fusim a Miniaplikacioni i titullit me titull Zgjidhni më të mirën. Në skedën Stili le të klikojmë tipografi dhe modifikoni Lartësia e linjës në 1.

Shih gjithashtu: Si të ndryshoni një imazhge në pezullimin mbi tekst me Elementor

Le të shtojmë më poshtë miniaplikacionin Titulli, a Miniaplikacioni i Redaktuesit të Tekstit.

Mbi miniaplikacionin Titulli, le të hedhim një miniaplikacion ndarës në skedën e tij Përmbajtje, le të kapim 270 për gjerësinë. Le të klikojmë tek Text for Add element, më pas hyjmë prirje si tekst. Në skedën Stili, modifikoni Grease dhe hapsira sur 2.

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

Në seksionin Tekst, klikoni mbi tipografi, le të ndryshojmë fontin, të Madhësi sur 18, graso sur 600.

Nën miniaplikacionin Editor përmbajtje, le të paraqesim një Seksioni i brendshëm, fshini një nga kolonat e Seksionit të Brendshëm dhe hidhni këtë të fundit a buton-widget

Le të modifikojmë butonin duke shkuar në panelin anësor dhe në skedën Përmbajtje, klikoni mbi biblioteka e ikonave sur ikonë dhe futni ikonën Shopping Bag, le të pastrojmë gjithashtu përmbajtjen e butonit Tekst

Le të shkojmë te skeda Stili të butonit dhe brenda Rrezja kufitare, klikoni mbi % dhe kap 50 për të gjitha rrezet frenuese dhe në Kufijtë e brendshëm, le të kapim 20.

Le të personalizojmë ngjyrën e butonit duke ndryshuar ngjyrën e këtij të fundit duke klikuar klasik për Lloji i sfondit dhe Le të ndryshojmë ngjyrën sipas ngjyrës së theksuar në imazh.

Pastaj klikoni në skedën i përparuar e butonit tonë, pastaj ndizni pozicionimi dhe gjerësi le të zgjedhim Inline (Auto). Në seksionin e avancuar tëTab i avancuar, le të kapim 10 për margjina e djathtë.

Le ta dublikojmë këtë buton 4 herë dhe të modifikojmë ngjyrat e këtyre butonave.

Më pas, le të dublikojmë 4 herë miniaplikacionin tonë të imazhit dhe më pas modifikojmë imazhet e tyre.

Në L 'Skeda e avancuar, le të kapim të gjitha imazhet në fushë Klasat CSS të secilës prej imazheve tona.

Pastaj në fushë ID CSS futni imazhin e kuq për imazhin me theksim të kuq, imazhin jeshil për imazhin me theksim të gjelbër dhe imazhin kafe për imazhin me theksim kafe, e kështu me radhë.

Le të zgjedhim tonën Seksion dhe nëTab i avancuar, në fushë Me porosi CSS kopjoni dhe ngjisni fragmentin e mëposhtëm të kodit:

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

Më pas, le të hedhim një widget HTML në faqen tonë, kopjoni dhe ngjisni fragmentin e mëposhtëm të kodit në seksionin e Kodit HTML:

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

Le të zgjedhim butonin e parë, në fushë Atributet e personalizuara të Seksioni i atributeve, kopjoni dhe ngjisni fragmentin e mëposhtëm të kodit:

data-showme|IMAGE-ID-NAME

Le të modifikojmë pjesën IMAGE-ID-NAME sipas ID-ve të butonave tuaj, këto janë ID-të me imazh të kuq, me imazh të gjelbër dhe me imazh blu, e kështu me radhë.

Pra, për çdo buton, le të ndryshojmë kodin IMAGE-ID-NAME në ngjyrën e butonit përkatës

Përditësoni punën tuaj dhe shikoni paraprakisht atë në modalitetin e desktopit, tabletit dhe smartphone ndërsa testoni butonat tuaj.

Në modalitetin e smartfonit, për shembull, mund të rreshtoni butonat në qendër, të zvogëloni kufijtë dhe shumë më tepër.

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.

...