Czy chcesz zmienić obraz jednym kliknięciem przycisku 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.

Czytaj także: Jak zmienić obraz po najechaniu kursorem na tekst za pomocą Elementora

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.

Przeciągnijmy widżet Obrazek do lewej kolumny i wstawmy obrazek z naszej biblioteki.

W prawej kolumnie wstawmy a Widżet tytułu zatytułowany Wybierz najlepsze. W zakładce Styl kliknijmy typografia i zmodyfikuj Wysokość rzędu przy 1.

Zobacz także: Jak zmienić obraznajedź kursorem na tekst za pomocą Elementora

Dodajmy poniżej widżetu Tytuł, a Widżet edytora tekstu.

Nad widżetem Tytuł upuśćmy widżet Separator na jego kartę Treść, chwyćmy 270 na szerokość. Kliknijmy Tekst, aby dodać element, a następnie wprowadź tendencja jako tekst. W zakładce Styl, zmodyfikuj smar i przerwa sur 2.

Odkryj również: Jak wyświetlić tekst nad obrazem za pomocą Elementora

W sekcji Tekst kliknij typografia, zmieńmy czcionkę, Rozmiar sur 18The smar sur 600.

Poniżej widżetu Edytor treść, złóżmy a Sekcja wewnętrzna, usuń jedną z kolumn w sekcji wewnętrznej i upuść tę ostatnią a przycisk-widget

Zmodyfikujmy przycisk przechodząc do panelu bocznego i w zakładce Treść, Kliknij biblioteka ikon sur ikona i wstaw ikonę Torba na zakupy, wyczyśćmy też zawartość przycisku on teksty

Przejdźmy do zakładki Styl przycisku i w Promień graniczny, Kliknij % i chwytam 50 dla wszystkich promieni krawężnika i in Marże wewnętrzne, chwyćmy 20.

Dostosujmy kolor przycisku, zmieniając kolor tego ostatniego, klikając klasyczny dla Typ tła i Zmieńmy kolor zgodnie z kolorem podświetlenia na obrazie.

Następnie kliknij kartę zaawansowany naszego przycisku, a następnie włącz pozycjonowanie i Szerokość Wybierz Wbudowany (automatyczny). W sekcji ZaawansowaneKarta Zaawansowane, chwyćmy 10 dla prawy margines.

Powtórzmy ten przycisk 4 razy i zmodyfikujmy kolory tych przycisków.

Następnie zduplikujmy nasz widżet obrazu 4 razy, a następnie zmodyfikujmy jego obrazy.

W L 'Zakładka Zaawansowane, chwyćmy wszystkie obrazy w polu Klasy CSS każdego z naszych obrazów.

Następnie w terenie Identyfikator CSS wprowadź czerwony-obraz dla obrazu z czerwonym podświetleniem, zielony-obraz dla obrazu z zielonym podświetleniem, brązowy-obraz dla obrazu z brązowym podświetleniem i tak dalej.

Wybierzmy nasz Sekcja i wKarta Zaawansowane, na polu Zamówienia Indywidualne CSS skopiuj i wklej następujący fragment kodu:

.all-images{
    display: none;
}
#red-image{
    display: block;
}

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

Następnie upuśćmy widżet HTML na naszą stronę, skopiuj i wklej następujący fragment kodu do sekcji Kod 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>

Wybierzmy pierwszy przycisk w polu Atrybuty niestandardowe z Sekcja atrybutów, skopiuj i wklej następujący fragment kodu:

data-showme|IMAGE-ID-NAME

Zmodyfikujmy część IMAGE-ID-NAME o identyfikatory twoich przycisków, są to identyfikatory czerwonego obrazu, zielonego obrazu i niebieskiego obrazu i tak dalej.

Więc dla każdego przycisku zmieńmy kod IMAGE-ID-NAME na kolor odpowiedniego przycisku

Aktualizuj swoją pracę i przeglądaj ją w trybie komputera stacjonarnego, tabletu i smartfona podczas testowania przycisków.

W trybie smartfona można np. wyrównać przyciski pośrodku, zmniejszyć marginesy i wiele więcej.

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.

...