Chcesz dowiedzieć się, jak dodać efekt najechania kursorem do elementów w widgecie postówElementor?
Jeśli jesteś użytkownikiem WordPress używającym Elementor stworzyć swój Witryna internetowa, powinieneś znać funkcję efektu zawisu. Możesz znaleźć tę funkcję głównie w każdym ustawieniu widżetu Elementor.
Efekt najechania kursorem może uatrakcyjnić Twoje elementy, więc jest to skuteczny sposób na poprawę komfortu użytkowania strona internetowa.
A skoro już mowa o efekcie najechania, w tym artykule dowiesz się, jak dodać go do poszczególnych elementów postu w widżecie Elementor Posty wykorzystujące niestandardowy CSS Elementora, w szczególności efekt najechania zoomem.
Istnieją dwa powody, dla których tworzymy ten samouczek dla Ciebie:
- Domyślnie możesz dodać efekt najechania kursorem do posta z widżetu postów Elementora. Ale efekt zawisu będzie bardzo prosty/standardowy.
- Domyślnie Elementor umożliwia dodanie efektu suwaka do widżetu Posty (tab zaawansowany -> Przekształć -> échelle). Jednak efekt najechania kursorem wpłynie na wszystkie (nie pojedyncze) elementy widżetu postów.
Kroki, aby dodać efekt najechania kursorem do poszczególnych postów z widżetu postów Elementora
Przed rozpoczęciem samouczka chcemy Cię poinformować, że ten samouczek wykorzystuje funkcję Custom CSS Elementora. Ta funkcja jest dostępna tylko w Elementor Pro; upewnij się, że zaktualizowałeś swoją wersję.
Krok 1: Dodaj widżet postów
Przejdź do edytora Elementora, a my zaczniemy wszystko od zera, więc utwórz sekcję z pojedynczą kolumną.
Czytaj także: Jak zintegrować MailChimp z Elementorem
Następnie wybierz widżet Posty z panelu widżetów, a następnie przeciągnij go i upuść w obszarze edycji. Po dodaniu widżetu Posty możesz edytować i stylizować widżet zgodnie z własnymi preferencjami.
Uwaga: Upewnij się, że opublikowałeś już artykuły na swoim strona internetowa.
Krok 2: Dodaj fragment kodu CSS
Gdy już wyedytujesz i wystylizujesz widżet Posty, dodamy efekt najechania kursorem do pojedynczego posta, dodając prosty fragment kodu CSS. W ustawieniach widżetu Posty przejdź do Tab zaawansowany -> Niestandardowy CSS. Skopiuj poniższy fragment kodu CSS, a następnie wklej go w polu Niestandardowy CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Powyższy kod wybierze pojedynczy element postu w widżecie Posty za pomocą selektora .élémentor-post i zastosuj transformację CSS.
Jeśli jesteś zadowolony z zastosowanego efektu zawisu, możesz go zachować w ten sposób i zapisać swój projekt, jeśli chcesz. Jeśli jednak chcesz dostosować szybkość przejścia i wartość skali transformacji, możesz zmienić tę wartość we fragmencie kodu CSS.
Uwaga: Przekształcenie/powiększenie to powszechny i popularny efekt stosowany na stronach internetowych. Jeśli chcesz dowiedzieć się więcej o innych metodach przekształcania efektów zawisu, możesz odwiedzić tę stronę strona.
Odkryj także: wszystkie selektory widżetów Elementor w poniższym artykule
Pobierz Elementor Pro teraz !!!
Wnioski
W tym artykule dowiesz się, jak łatwo dodać efekt najechania kursorem do poszczególnych elementów postów w widgecie postów Elementora przy użyciu niestandardowego CSS.
Technika, której użyliśmy do uzyskania tego efektu, to (zoom-in), która obejmuje elementy 2D i niektóre pseudoprzekształcone elementy. Dostosuj i baw się wszystkimi stylami efektów najechania kursorem, aż znajdziesz najlepszy efekt najechania kursorem dla swojej witryny.
Tutaj jest! Właśnie przedstawiliśmy Ci najlepsze narzędzia do marketing e-mailem dla Elementora. Jeśli masz jakiekolwiek wątpliwości, jak ich używać, 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.
...
