Chcesz dodać efekt najechania w Elementorze za pomocą niestandardowego CSS?

Elementor ma wbudowaną funkcję dodawania efektu najechania na element (omówiliśmy to w jednym z naszych artykułów. Chociaż funkcja jest wystarczająco przydatna, ma wadę. Możesz dodać do niej tylko efekt najechania. sekcja, kolumna, widżet Obrazek, widżet Przycisk i widżet Posty.

Czytaj także: Jak zainstalować Elementora na WordPressie

Wbudowana funkcja efektu najechania Elementora nie pozwala na dodanie efektu najechania do innych widżetów, takich jak widżet edytora tekstu, widżet tytułu itp. Kolejną wadą jest to, że możesz dodać tylko bardzo podstawowy efekt najechania.

Czy jest jakaś inna opcja dodania efektu najechania w Elementorze?

Tak jest. Możesz dodać efekt najechania w Elementorze za pomocą niestandardowego CSS. Ale aby dodać niestandardowy CSS, musisz użyć Elementor Pro, ponieważ niestandardowy CSS jest dostępny tylko w Elementor Pro.

Dodawanie efektu najechania w Elementorze za pomocą niestandardowego CSS

Zanim zaczniemy, spójrzmy na przykład efektów najechania utworzonych za pomocą niestandardowego CSS.

W przeciwieństwie do wbudowanego efektu najechania Elementora, możesz użyć tej metody, aby dodać efekt najechania do dowolnego elementu w Elementorze. Niezależnie od tego, czy jest to sekcja, kolumna czy widżet (wszystkie widżety).

W tym przykładzie pokażemy, jak dodać efekt punktowy do kolumny.

Najpierw kliknij uchwyt kolumny, aby przejść do panelu ustawień kolumny. Tam przejdź do zakładki zaawansowany i otwórz blok Zamówienia Indywidualne CSS i wklej następujący kod CSS.

selektor: hover {przejście: wszystkie .2s luzy na zewnątrz; transformacja: skala (1.1); kursor: punkt; indeks z: 1; }

Nie.

W powyższym kodzie używamy właściwości CSS przekształcenie () aby dodać efekt najechania. Typ transformacji, którego używamy w tym przykładzie, to skala o czasie trwania 1,1 sekundy.

Istnieją 4 inne typy transformacji, których możesz użyć:transform

  • Matrix
  • Tłumacz
  • Obrót
  • krzywy

Jeśli chcesz użyć innego stylu transformacji, możesz po prostu zastąpić wartość przekształcać na powyższym kodzie CSS.

Możesz przeczytać strona cette aby dowiedzieć się więcej o transformacji CSS.

Możesz podążać tą samą trasą, aby dodać efekt najechania na inne elementy.

Aby dodać efekt punktowy do sekcji, możesz kliknąć uchwyt sekcji i przejść do zakładki zaawansowany i otwórz blok Niestandardowe CSS.

dodaj efekt najechania w Elementorze za pomocą niestandardowego CSS

Aby dodać efekt najechania do widżetu, możesz kliknąć uchwyt widżetu i ponownie przejść do zakładki. Zaawansowane, następnie otwórz blok Niestandardowe CSS.

Inne dodatkowe wtyczki premium do WordPressa 

Odkryj także inne WordPress wtyczki premium, które optymalizują wydajność Twojego bloga lub witryny WordPress.

1. Popup sprzedaży na żywo

Wyskakujące okienko sprzedaży na żywo jest kolejnym WordPress Plugin powiadomienie z kilkoma gadżetami, które możesz zamienić w przewagę. Przede wszystkim ma możliwość wyświetlić wyskakujące okienko gdy ktoś kończy zamówienie. Wyskakująca wtyczka sprzedaży na żywo wordpress

Po drugie, wyskakujące okienko sprzedaży w czasie rzeczywistym może również wyświetlać powiadomienie, gdy osoba po prostu doda przedmiot do koszyka. Po trzecie, możesz użyć tego narzędzia, aby zwiększyć zainteresowanie produktem, pokazując, ilu odwiedzających obejrzało artykuł.

Dzięki najnowszym trendom internetowym możesz oczekiwać, że wyskakujące okienko sprzedaży na żywo będzie pięknie wyświetlać się na wszystkich urządzeniach i przeglądarkach. Jeśli chodzi o układ wyskakującego okienka, możesz go dostosować w najdrobniejszych szczegółach.

Czytaj: Jak naprawić alert zabezpieczeń na swoim blogu WordPress

Inne funkcje wyskakującego okienka sprzedaży na żywo to ponad trzydzieści animacji, dźwięków, odliczanie i spersonalizowane pozycjonowanie. Działa również w przypadku fałszywych powiadomień i umożliwia ustawienie go tylko dla określonych stron, na których chcesz, aby powiadomienie wykonało swoje zadanie.

Pobierz | Demo | hosting

2. Foodify

Foodify to najszybszy i najłatwiejszy sposób zamawiania żywności w sklepie. Jest całkowicie czuły i zawiera dodatkowe funkcje, takie jak obraz, opcja wyszukiwania, informacje o produkcie. Foodlify menu żywności restauracji dla woocommerce

Dodaje również przyciski do koszyka, aby poprawić doświadczenie użytkownika. To rozszerzenie WooCommerce to szybkie, kompleksowe rozwiązanie do zamawiania, które można dodać do dowolnej witryny WooCommerce.

Tutaj dla ciebie Wtyczki 5 WordPress do optymalizacji opisów kategorii i etykiet

Ma tę zaletę, że jest bardzo elastyczny i kompatybilny z wieloma istniejącymi wtyczkami w katalogu WordPress.

Pobierz | Demo | hosting

3. Przeglądarka obrazów Mega Zoom & Pan

Wtyczka Mega Zoom & Pan Image Viewer to świetna przeglądarka obrazów i przeglądarka z w pełni responsywnym układem do wyświetlania dużych obrazów na twoim blog WordPress.

Wtyczka Mega zoom pan wordpress do powiększania

Jest to potężne narzędzie przeznaczone do prezentowania produktów (zdjęcia produktów w wysokiej rozdzielczości. Np .: odzież, samochody, schematy techniczne itp.), Wyświetlania map i wszystkich innych zdjęć dzięki powiększeniu, jego funkcji panoramiczny, jego elementy sterujące nawigacją, jego pasek przewijaniai wysoce konfigurowalne znaczniki / punkty dostępu.

Oto 5 aplikacji na smartfony do ochrony Twoich zdjęć i filmów

Ta wtyczka działa świetnie na iOS (iPad, iPhone), Android i Windows mobile itp. Działa również we wszystkich nowoczesnych przeglądarkach i starszych przeglądarkach, takich jak IE7 lub IE8.

Pobierz | Demo | hosting

Inne zalecane zasoby

Zachęcamy również do zapoznania się z poniższymi zasobami, aby przejść dalej w zakresie kontroli nad witryną i blogiem.

Wnioski

Tutaj jest ! To tyle w przypadku tego przewodnika. Mamy nadzieję, że ten artykuł pomógł ci dodać efekt najechania w Elementorze za pomocą niestandardowego CSS. Możesz również przeczytać nasz artykuł na temat Jak naprawić blokowanie renderowania JavaScript i CSS w WordPress.

Będziesz jednak mógł również skonsultować się z nami 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.

Jeśli masz znajomego lub komentarz, zostaw go w dziale komentarz. Przeważnie udostępnij ten artykuł w różnych sieciach społecznościowych.

...