Elementor: Sådan ændrer du et billede ved at holde musen over tekst

Ønsker du at ændre et billede, når du svæver over en tekst med Side Builder Elementor ? I denne nye tutorial viser vi dig, hvordan du gør det.

Hvis du ikke aner, hvad vi vil tale om i dag, inviterer vi dig til at se følgende video:

Lad os derefter vende tilbage til, hvorfor vi er her.

Find også vores guide til:  Sådan opretter du et effektkort fra en portefølje med Elementor

For at fuldføre denne tutorial skal du bruge Pro-versionen af ​​Elementor, da vi vil bruge tilpasset CSS-kode, som kun understøttes af denne version afElementor.

Lad os oprette en sektion med 2 kolonner, og lad os derefter i sidepanelet definere Højde ud af Min Højdeog så Minimum højde lad os klikke videre VH og sæt skyderen til 100.

I fanen stil lad os vælge det Baggrundstype en cliquant sur klassisk, og rediger derefter farve ud af # F9F9F9

I fanen avanceret, ændre alle Interne marginer ud af 25

Lad os nu ændre kolonnebredden til 40 % for venstre kolonne og 60 % for højre kolonne.

Lad os slippe en i venstre kolonne Teksteditor-widget, indsæt derefter en tekst i den og modificer Titelstørrelse tekst på Afsnit 3.

I fanen avanceret, indtast som Interne marginer 10-25-10-30 henholdsvis for top, højre, bund og venstre indre marginer

I afsnittet Baggrund fanen avanceret, Klik på OVERSIGT, og vælg derefter baggrundstype ud af klassisk, lad os indtaste det farve #DFF5FF et Overgangsvarighed ud af 0.5.

Hvis vi svæver over teksten, får vi mulighed for at opdage en storslået baggrundsfarve på hover.

Lad os nu gå til afsnittet grænser, og klik på OVERSIGT, og vælg derefter Fortsæt. for grænsetype et lad os deaktivere forbindelsen mellem grænsen at gå ind 4 til at venstre kant. Lad os vælge farven #002FA7 og tilføje en overgangsvarighed til 0.5

Hvis vi svæver over vores tekstfelt en gang til, vil vi se en mere fremtrædende animation med en kant til venstre.

I afsnittet grænse, lad os gå tilbage til fanen NORMAL, lad os vælge kanttypen på Fortsæt., lad os slå bindingen mellem grænser fra, tag fat 4 for den venstre kant og gør den meget gennemsigtig.

Hvis vi holder markøren over teksten en gang til, vil vi se en meget jævn overgang.

Læs også: Sådan viser du tekst over et billede med Elementor

Lad os duplikere denne tekst to gange og ændre teksten til hver indhold sådan her.

Træk en i højre kolonne Billed-widget, og indsæt et billede fra vores bibliotek.

Vi vil skabe noget rum omkring dette billede ved at gå til Avanceret fane i kolonnen og indtast 10 – 10 – 10 – 50 for alle interne marginer af Top, Right, Bottom og Left.

Lad os vælge billedet og i fanen avanceret af sidstnævnte, lad os gå til afsnittet Bevægelseseffekter derefter Indgangsanimation, Vælg Fade In

Lad os gå ind i afsnittet avanceret fra fanen Avanceret og tilføj nogle klassenavne i feltet CSS-klasser. Så lad os komme all-img img-1

Lad os duplikere vores billede 2 gange.

Lad os vælge det andet billede og ændre img-1 til img-2, og derefter ændre billedet til et nyt billede.

Se også: Sådan oprettes et billedgalleri med Elementor

For det tredje billede, lad os bare ændre img-1 til img-3, og derefter ændre billedet til et nyt billede.

Lad os vælge vores sektion og gå til dens fane avanceret. I afsnittet Brugerdefineret CSS, kopier og indsæt følgende kodestykke:

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

(Hvis du ikke har denne sektion, så har du ikke Pro-versionen, hvis du vil fortsætte skal du opgradere din version).

Lad os vælge vores første teksteditor og gå til fanen Avanceret og Attributter sektion. I marken Attributter, kopier og indsæt følgende kodestykke:

data-showme|img-1

Gør dette for andre teksteditorer, mens du ændrer img-1 til img-2 eller til img-3

Nu skal vi tilføje en HTML-widget til vores side. Kopiér og indsæt følgende script:

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

Gem eller opdater nu din side, og se et eksempel på den.

Der går du, du har lige gjort denne opgave nemt.

Hent Elementor Pro nu!

Konklusion

Der er det ! Det er det for denne artikel, som viser dig, hvordan du ændrer et billede, når du svæver over en tekst. Hvis du er i tvivl om, hvordan du kommer dertil, så lad os det vide inden for kommentarer.

Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.

Men i mellemtiden del denne artikel på dine forskellige sociale netværk.

...