Elementor: Jak zmienić obraz po najechaniu kursorem na tekst

Czy chcesz zmienić obraz po najechaniu kursorem na tekst za pomocą Page Builder Elementor ? W tym nowym samouczku pokażemy, jak to zrobić.

Jeśli nie masz pojęcia, o czym chcemy dzisiaj porozmawiać, zapraszamy do obejrzenia poniższego filmu:

Wróćmy do tego, dlaczego tu jesteśmy.

Odkryj także nasz przewodnik na temat:  Jak stworzyć kartę efektu portfela z Elementor

Aby ukończyć ten samouczek, będziesz potrzebować wersja Pro Elementora, ponieważ będziemy używać niestandardowego kodu CSS, który jest obsługiwany tylko w tej wersjiElementor.

Utwórzmy sekcję z 2 kolumnami, a następnie w panelu bocznym zdefiniujmy HAUTEUR sur Minimalna wysokość, a następnie Minimalna wysokość kliknijmy VH i ustaw suwak na 100.

W zakładce Styl wybierzmy to Typ tła en cliquant sur klasyczny, a następnie zmodyfikuj kolor sur#F9F9F9

W zakładce zaawansowany, zmodyfikuj wszystkie Marże wewnętrzne sur 25

Zmieńmy teraz szerokość kolumny na 40% dla lewej kolumny i 60% dla prawej kolumny.

W lewej kolumnie upuśćmy Widżet edytora tekstu, a następnie wklej w nim tekst i zmodyfikuj Rozmiar tytułu tekst włączony Tytuł 3.

W zakładce zaawansowany, wpisz jako Marginesy wewnętrzne 10-25-10-30 odpowiednio dla marginesy wewnętrzne górny, prawy, dolny i lewy

W sekcji tło patka zaawansowany, Kliknij PRZEGLĄD, a następnie wybierz typ tła sur klasyczny, wejdźmy w to kolor #DFF5FF et Czas trwania przejścia sur 0.5.

Jeśli najedziemy kursorem na tekst, po najechaniu myszą będziemy mieli okazję odkryć wspaniały kolor tła.

Przejdźmy teraz do sekcji granicei kliknij PRZEGLĄD, a następnie wybierz KONTUNUUJ dla typ obramowania et wyłączmy połączenie między obramowaniem chwycić 4 dla lewa granica. Wybierzmy kolor #002FA7 i dodaj czas trwania przejścia do 0.5

Jeśli jeszcze raz najedziemy kursorem na nasze pole tekstowe, zobaczymy bardziej widoczną animację z obramowaniem po lewej stronie.

W sekcji Granica, wróćmy do zakładki NORMALNA, wybierzmy typ obramowania na KONTUNUUJ, wyłączmy wiązanie między granicami, chwyć 4 dla lewej krawędzi i uczyń ją bardzo przezroczystą.

Jeśli jeszcze raz najedziemy kursorem na tekst, zobaczymy bardzo płynne przejście.

Czytaj także: Jak wyświetlić tekst nad obrazem za pomocą Elementora

Powielmy ten tekst dwukrotnie i zmieńmy treść każdego z nich treść lubię to.

W prawej kolumnie przeciągnij a Widżet obrazui wstaw obraz z naszej biblioteki.

Stworzymy przestrzeń wokół tego obrazu, przechodząc do: Karta Zaawansowane kolumny i wprowadź 10 – 10 – 10 – 50 dla wszystkich wewnętrznych marginesów Górny, Prawy, Dolny i Lewy.

Wybierzmy obraz i w zakładce zaawansowany tego ostatniego, przejdźmy do sekcji Efekty ruchu następnie Animacja wejścia, wybierać Fade In

Przejdźmy do sekcji zaawansowany z zakładki Zaawansowane i dodaj nazwy klas w polu Klasy CSS. Więc chodźmy wszystkie zdjęcia img-1

Zduplikujmy nasz obraz 2 razy.

Wybierzmy drugi obraz i zmieńmy img-1 na img-2, a następnie zmieńmy obraz na nowy.

Zobacz także: Jak stworzyć galerię obrazów za pomocą Elementora

W przypadku trzeciego obrazu po prostu zmieńmy img-1 na img-3, a następnie zmieńmy obraz na nowy.

Wybierzmy naszą sekcję i przejdźmy do jej zakładki zaawansowany. W dziale Niestandardowe CSS, skopiuj i wklej następujący fragment kodu:

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

(Jeśli nie masz tej sekcji, to nie masz wersji Pro, jeśli chcesz kontynuować, musisz zaktualizować swoją wersję).

Wybierzmy nasz pierwszy edytor tekstu i przejdźmy do zakładki Zaawansowane i Sekcja atrybutów. Na polu Atrybuty, skopiuj i wklej następujący fragment kodu:

data-showme|img-1

Zrób to dla innych edytorów tekstu, zmieniając img-1 na img-2 lub img-3

Dodajmy teraz widżet HTML do naszej strony. Skopiuj i wklej następujący skrypt:

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

Teraz zapisz lub zaktualizuj swoją stronę, a następnie wyświetl jej podgląd.

Proszę bardzo, właśnie wykonałeś to zadanie z łatwością.

Pobierz Elementor Pro teraz!

Wnioski

Tu jest ! To tyle w tym artykule, który pokazuje, jak zmienić obraz po najechaniu kursorem na tekst. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...