Czy widziałeś te piękne animacje CSS na popularnych stronach? Animowane efekty, takie jak przesuwanie zawartości, zanikanie w polach funkcji, odbijanie obrazów itp. W tym artykule pokażemy, jak łatwo dodać animacje CSS w WordPress bez pisania kodu.
Kiedy i dlaczego warto używać animacji CSS?
Animacje CSS pozwalają przyciągnąć uwagę użytkownika na różnych częściach strony.
Można ich używać do animowania funkcji produktu lub przycisku wywołania akcji.
Wiele stron internetowych korzysta z animacji CSS, gdy użytkownicy przewijają stronę w dół. Dodaje to element narracji do strony z elementami postępującymi w miarę przewijania użytkowników w dół.
Animacje CSS są również szybsze niż flash lub filmy. Ładują się szybko i są obsługiwane przez większość nowoczesnych przeglądarek internetowych.
Możesz dodać animacje CSS ręcznie do motywu WordPress lub arkusza stylów motywu podrzędnego. Jednak większość początkujących nie chce edytować swoich plików motywów ani tracić czasu na naukę CSS.
Powiedziawszy to, zobaczmy, jak możesz łatwo dodać animacje CSS do swojej witryny WordPress.
Konfiguracja CSS Animate! Plugin
Będziemy używać wtyczki do tego samouczka. Pozwala na tworzenie animacji CSS za pomocą edytora WYSIWYG.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować program Animate it! plugin. Wtyczka działa po wyjęciu z pudełka i nie ma żadnych ustawień do skonfigurowania.
Po prostu utwórz nowy post, a zauważysz nowy przycisk w edytorze wizualnym WordPress oznaczony jako ” Animuj to!’.
Kliknięcie przycisku spowoduje wyświetlenie okienka, w którym możesz zaprojektować animację CSS. Wtyczka obsługuje wiele animacji CSS do wyboru.
Najpierw musisz wybrać styl animacji. Następnie musisz wybrać opóźnienie animacji i czas trwania. Na koniec musisz wybrać, kiedy animacja ma się pojawić.
Wtyczka oferuje trzy opcje. Animację można uruchomić po kliknięciu, najechaniu kursorem lub przesunięciu przewijania.
Po zadowoleniu z ustawień możesz kliknąć przycisk Animuj, aby wyświetlić podgląd animacji.
Następnie kliknij przycisk Wstaw, aby dodać animację do posta lub strony WordPress. Zauważysz, że wtyczka doda shortcode z jakąś fałszywą treścią w edytorze postów.
Należy usunąć zawartość pozorowaną wewnątrz skrótu i zastąpić ją własną zawartością, obrazami lub czymkolwiek innym, co chcesz animować.
Teraz, gdy jesteś w dół, Kliknij, aby zapisać lub opublikować post, a następnie kliknij przycisk podglądu. Zobaczysz swoje treści pięknie animowane.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodawać animacje CSS w WordPress. Możesz również zobaczyć nasze porównanie najlepszych kreatorów stron 5 przeciągnij i upuść WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
