Jak dodać animację do tekstu w wordpress

Fantazyjne style tekstu szybko przyciągają uwagę widzów. Właściciele witryn WordPress często pytają, jak dodać animację do tekstu. Oczywiście znajdziesz kilka metod projektowania tekstów witryny WordPress. Możesz ręcznie dodać efekty HTML CSS, które wymagają nieco więcej kodu. Ale kodowanie to świetny sposób na dodanie niestandardowej animacji do witryny. Ponownie wtyczka z najlepszym widżetem jest stosunkowo poręczna, skuteczna, a także popularna .

Jednak staraliśmy się objąć obie techniki tak łatwo, jak to tylko możliwe. Jeśli prowadzisz witrynę WordPress, poświęć trochę czasu na przeczytanie bloga i zrozumienie procesów. Prawidłowe wykonanie kroków i instrukcji pozwoli płynnie dostosować własną animację.

Jak dodać animowane efekty tekstowe w WordPress

Animowane efekty tekstowe mogą być użyte do dodania stylu i osobowości Twojej witrynie WordPress. W tym samouczku pokażemy sposoby dodawania tych efektów; ale wcześniej musisz mieć jasne pojęcie o animowanym tekście i jego roli; uczmy się!

Co to jest animowany efekt tekstowy i jak się pojawia?

Animowane efekty tekstowe to świetny sposób na dodanie odrobiny zabawy i ekscytacji do artykułów i tytułów . Gdy zdecydujesz się na efektowny animowany efekt tekstowy, możesz tworzyć różne efekty. Niektóre efekty są proste, jak zmiana koloru lub rozmiaru tekstu , a inne to szczegółowe animacje, takie jak migający lub migający tekst .

Animowany tekst różni się nieco od zwykłego tekstu. Zwykle ten typ tekstu nie przesuwa się sam. Zamiast tego ma efekt, który sprawia, że ​​wygląda, jakby poruszał się po ekranie. Tak więc fantazyjne teksty sprawiają, że ludzie są bardziej skłonni do klikania treści, linków lub otwierania wiadomości e-mail .

Rola animowanych tekstów w Twojej witrynie

W motywach WordPress dostępne są różne rodzaje animowanych efektów tekstowych, ale wszystkie mają tę samą podstawową funkcjonalność. Zmieniają kolor lub styl tekstu i po prostu zmieniają styl testu. Możesz na przykład zmienić przycisk „wezwania do działania” na czerwone tło i biały tekst „Kliknij tutaj!” po kliknięciu.

Animowany nagłówek lub sekcja bohatera z fantazyjnymi tekstami pełnią następujące role:

• Sprawia, że ​​Twoje projekty są wizualnie bardziej interesujące.
• Wyróżnij oferty specjalne i ważne informacje.
• Sprawia, że ​​cechy Twojego produktu są zauważalne.
• Sprawia, że ​​witryna jest bardziej interaktywna i promuje firmę.

Najprostsze sposoby dodawania animowanych efektów tekstowych

Korzystanie z wtyczki WordPress

Dzisiejszy rynek oferuje różnego rodzaju wtyczki ułatwiające stylizację tekstu. ElementsKit to tak potężna wtyczka , a także dodatek do narzędzia do tworzenia stron Elementor. Z ElementsKit dostaniesz wszystko pod jedną maską.

Fantazyjny animowany tekst to imponujący widżet prezentowany przez ElementsKit pro.

Zaloguj się do pulpitu nawigacyjnego -> Wybierz dowolną stronę lub post -> Kliknij edytuj za pomocą ElementsKit -> Wyszukaj widżet ElementsKit Fancy Animation Text -> Przeciągnij i upuść widżet

Sekcja treści

Część nazywana jest częścią Fancy Text i zawiera następujące pola:

Animacja

• Styl animacji – Tutaj dwie opcje to Tekst lub SVG, obie umożliwiają tworzenie różnych stylów animacji.
• Typ animacji – W zależności od typu animacji, masz tutaj różne możliwości wyboru.
• Reveal Duration (ms) – Możesz ustawić czas trwania animacji w milisekundach za pomocą pola opcji.
• Ujawnij opóźnienie animacji (ms) – tutaj dostosuj czas opóźnienia animacji. Określa, że ​​animacja może rozpocząć się później, natychmiast od początku lub natychmiast i w połowie animacji.

Zawartość

• Tekst prefiksu — musisz wpisać tutaj treść prefiksu, którą chcesz wyświetlić. Oznacza to, że zostanie napisany przed fantazyjną animacją.
• Fantazyjne listy – dodaj tutaj elementy, aby uzyskać fantazyjne animacje.
• Tekst sufiksu — wpisz treść sufiksu, którą chcesz wyświetlić. Tak więc zostanie to określone po fantazyjnej animacji.

• Tag HTML tytułu — wybierz tutaj tag HTML treści.
• Link (Opcjonalny) – Dodaj dowolny link, jeśli chcesz, aby użytkownicy przekierowywali do dowolnej innej lokalizacji.

Sekcja stylu

• Tekst nagłówka — użyj tego pola, aby dostosować wyrównanie nagłówka, typografię, kolor itp.
• Fantazyjne listy tekstowe — użyj tego pola, aby dostosować typografię, kolor i wypełnienie.
• Fantazyjny kursor – za pomocą tego pola możesz nadać kursorowi fantazyjny wygląd za pomocą koloru, szerokości i wysokości.

Po edycji i stylizowaniu wszystkich wymaganych instrukcji kliknij aktualizuj i zobacz zmiany z interfejsu użytkownika. Przykładem jest –

Stosowanie CSS

Tworząc animacje CSS w WordPressie, pamiętaj o następujących podstawowych, ale ważnych rzeczach :

• Ustawienie właściwej nazwy animacji – Jest to nazwa, która będzie wyświetlana na elemencie, gdy zostanie on przeniesiony przez animację CSS. Na przykład, jeśli masz przycisk z animacją o nazwie „fadeIn”, byłaby to wartość, której użyłbyś dla tej właściwości.
• Animacja-czas trwania — jest to liczba sekund, które zajmie ukończenie animacji. Możesz także ustawić to na brak lub 0, aby animacja trwała w nieskończoność lub do momentu, gdy wydarzy się coś innego (np. załadowanie strony).
• Funkcja synchronizacji animacji — kontroluje sposób przemieszczania się elementu z jednego miejsca do drugiego w oparciu o czas, jaki zajmuje określony czas (w milisekundach). Na przykład, jeśli ustawisz tę właściwość na zwalnianie, wtedy twój element zacznie się poruszać powoli, a następnie przyspieszy pod koniec swojego czasu trwania, zanim zacznie ponownie od początku.
• Opóźnienie animacji — jest to wartość określająca, ile milisekund należy dodać po zakończeniu animacji, zanim rozpocznie się ona ponownie (na przykład 1s).
• Liczba iteracji animacji — jest to czas potrzebny do odtworzenia animacji. Korzystając z właściwości CSS, możesz policzyć tę iterację.
• Animations-direction – jest to kolejność lub kierunek, w którym animacja powinna być odtwarzana. Może to być normalny, odwrócony, alternatywny i alternatywny-odwrócony.
• Animation-fill-mode — te wartości określają sposób wyświetlania elementu. Może to być przed i po zastosowaniu animacji.
• Znajomość @keyframes – Określa właściwości animacji, które zmieniają się w trakcie, a także wartości, które te właściwości powinny przyjmować. Na przykład:

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

Ogólnie rzecz biorąc, wartości procentowe są używane do wskazania czasu animacji. Powyższa klatka kluczowa pokazuje, że kolor tła elementu zmieni się w 25 procentach z czerwonego na żółty w trakcie animacji.

Jednak from i to mogą być użyte zamiast odpowiednio 0% i 100% .

Tworzenie pliku animate.css

Najpierw musisz utworzyć osobny plik ze wszystkimi niezbędnymi właściwościami w edytorze tekstu, w którym pracujesz. Możesz wybrać klatki kluczowe dla dowolnej animacji . Następnie musisz połączyć je z określonymi klasami CSS, aby zastosować je z dowolnym tekstem w witrynie WordPress.

Zacznij od napisania prostego kodu do pliku CSS. Przykładowy kod tekstu animacji może wyglądać tak:

 ```@keyframes MyAnimation { from { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

Teraz, aby powiązać tę klatkę kluczową z klasą CSS, ustawiliśmy tekst o nazwie MyAnimation. Tak więc, zaraz po powyższym kodzie, musisz teraz umieścić poniższy kod w pliku.

 .MyAnimation { animation-name: MyAnimation; }

Tutaj znajdziesz całą podstawową wiedzę na temat animacji CSS i przećwiczysz kody!

Możesz powtórzyć tę procedurę, aby utworzyć jak najwięcej animacji zgodnie z potrzebami. Następnie zapisz plik jako animate.css. Alternatywnie możesz pobrać plik Animate.css . Jest to bardzo lubiany plik, który zawiera klatki kluczowe i klasy CSS dla wielu popularnych projektów animacji. Co więcej, użycie pliku zmniejszy ból związany z kodowaniem złożonej animacji.

Powyższy kod animuje tekst tagu h1 „ MyAnimation ”. Możesz zmienić czas trwania animacji, zmieniając „3s” na inną wartość . Możesz także zmienić kolory, zmieniając wartości szesnastkowe. Po zapisaniu pliku CSS możesz dokonać dalszych zmian w wyglądzie swojej strony internetowej, możesz edytować plik CSS. Możesz zmienić czcionkę, rozmiar tekstu i kolor tekstu, edytując plik CSS. Możesz także zmienić kolor tła i rozmiar nagłówka, zmieniając plik CSS.

Ładowanie pliku animate.css do witryny WordPress

Po zakończeniu pracy z plikiem prześlij go do katalogu motywu. Cały proces podzieliliśmy na trzy etapy,

Krok 1

Przejdź do witryny za pomocą protokołu przesyłania plików (FTP) -> Wybierz klienta FTP (FileZilla, WinSCP, Cyberduck itp.) -> Wybierz niezbędne poświadczenia na swoim koncie hostingowym.

Krok 2

Uzyskaj dostęp do katalogu public_html -> Przejdź do treści wp - > Motywy -> Wybierz folder motywu aktywnego lub podrzędnego

Krok 3

Teraz wyszukaj podkatalog o nazwie css. Jeśli go otrzymasz, prześlij swój plik animate.css lub animate.min.css z pliku Animate.css z podkatalogiem.

Jeśli jednak nie masz folderu podkatalogu, możesz łatwo utworzyć nowy. W tym celu tuż po załadowaniu pliku wykonaj prostą edycję, aby utworzyć nowy plik i gotowe.

Wywołaj arkusz stylów programu Animate za pośrednictwem funkcji.php

Znajdziesz plik functions.php w folderze aktywnego motywu. Teraz musisz dodać ten fragment kodu, aby wywołać arkusz stylów programu Animate:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

Pamiętaj , że jeśli użyłeś pliku animate.min.css z pliku Animate.css, w wierszu końcowym musisz napisać animate.min.css zamiast animate.css. Po zapisaniu wszystkich zmian przejdź do pulpitu nawigacyjnego WordPress.

Zastosuj animacje za pomocą klas CSS

Teraz można zastosować dowolną klasę w pliku animate.css, aby zobaczyć różne efekty animacji w postach i na stronach. Również plik Animate.css umożliwia odwołanie się do pełnej listy wszystkich.

Na koniec wybierz post lub stronę w Edytorze klasycznym -> Przełącz się na edytor tekstu -> Lub kliknij ikonę z trzema kropkami na pasku narzędzi bloków, jeśli jest to Edytor bloków -> Wybierz Edytuj jako HTML-> Dodaj animowany class i klasę animacji do tagu elementu -> Preview

Są to dwie skuteczne techniki dodawania animowanego tekstu do witryny, które mogą sprawić, że będzie ona bardziej interesująca i atrakcyjna wizualnie . Korzystając z jednej z tych technik, możesz dodać trochę ruchu i zainteresowania do swoich stron.

Jednak stosowanie CSS może być nieco trudne, jeśli nie masz pojęcia o kodowaniu. Dlatego zaleca się skorzystanie z pomocy eksperta przy tworzeniu animacji CSS w WordPress. Alternatywnie, fantazyjny animowany tekst ElementsKit to inteligentny widżet, który pomaga szybko zaprojektować dowolną stylową animację. Dzięki widżetowi możesz przekształcić wybrane teksty w fantazyjne animacje.