Wyprzedaż urodzinowa Elementora

Enjoy 60% Off on new purchases, renewal and upgrades.

00 Dni
:
00 godziny
:
00 Minuty
:
00 sekundy

Kup Teraz

Jak dodać efekt zamiany logo przy najechaniu za pomocą elementu Elementor

Muneeb Poradniki WordPress Oct 20, 2021

Wszyscy wiemy, jak nieograniczone dostosowywanie uzyskuje się dzięki Kreatorowi stron internetowych Elementor . Dzięki temu dostosowaniu możemy poprawić wrażenia użytkownika i być kreatywnym w tym, co tworzymy.

Efekt Logo Swap on Hover polega na tym, że gdy użytkownik najedzie kursorem na logo umieszczone na Twojej stronie, automatycznie zmieni ono jego szczegóły tj. kolor, kształt czy kontur. W tym samouczku zrozumiemy, jak utworzyć zamianę logo na efekt najechania za pomocą Elementora .

Jak utworzyć efekt zamiany logo przy najechaniu za pomocą elementu Elementor

Wiesz już jaki jest efekt i masz w głowie pomysły na to, co chcesz stworzyć, przejdźmy dalej i zobaczmy jak.

Aby rozpocząć, dodaj wewnętrzną sekcję widżetów.

Niesamowite oferty

Elementor 6 urodziny z do 60% zniżki

Zacząć teraz

Następnie musisz dodać kolumnę do początkowo utworzonej sekcji. W tym samouczku będziemy używać struktury dwukolumnowej .

Następnie przeciągnij i upuść widżet obrazu do utworzonej kolumny.

Aby efekt zadziałał, potrzebne będą dwa zdjęcia. Jeden ma być wyświetlany normalnie, a drugi wyświetlany, gdy użytkownik umieści kursor.

Możesz użyć dwóch wariacji tego samego logo lub użyć dwóch zupełnie różnych zdjęć, możliwości są nieograniczone.

Po wybraniu obrazu w niestandardowym polu CSS wklej następujący kod CSS, aby zmiana logo działała po najechaniu kursorem.

selector img:hover{
    content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
  opacity: .50;
  transition-duration: 3s;
 }

I zrobione! Opublikuj swoją stronę, aby zobaczyć podgląd i zobaczyć, jak wygląda efekt na Twojej stronie. Wróć, aby wprowadzić zmiany, jeśli chcesz.

W ten sposób możesz stworzyć efekt Logo Swap On Hover za pomocą Elementora . Dołącz do nas na Facebooku i Twitterze, aby być na bieżąco z naszymi postami.