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 w witrynie 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 swojej witryny. Ponownie, wtyczka z najlepszym widgetem jest stosunkowo przydatna, skuteczna, a także popularna.

Jednakże staraliśmy się omówić obie techniki tak łatwo, jak to możliwe. Jeśli prowadzisz witrynę WordPress, poświęć trochę czasu na przeczytanie bloga i zrozumienie procesów. Właściwe postępowanie zgodnie z instrukcjami i instrukcjami pozwoli Ci płynnie dostosować własną animację.

Jak dodać animowane efekty tekstowe w WordPress

Animowane efekty tekstowe można wykorzystać, aby dodać charakteru i osobowości swojej witrynie WordPress. W tym samouczku pokażemy Ci sposoby dodawania tych efektów; ale wcześniej musisz mieć jasne pojęcie o animowanym tekście i jego roli; nauczmy się!

Co to jest efekt animowanego tekstu i jak się pojawia?

Animowane efekty tekstowe to świetny sposób na dodanie odrobiny zabawy i emocji do Twojego filmu artykułów i tytułów. Jeśli zdecydujesz się użyć fantazyjnego efektu animowanego tekstu, możesz stworzyć różne efekty. Niektóre efekty są proste, jak zmiana koloru lub rozmiaru tekstu, a niektóre to szczegółowe animacje, takie jak migający lub migający tekst.

Tekst animowany różni się nieco od zwykłego tekstu. Zwykle tego typu tekst nie przesuwa się samodzielnie. Zamiast tego ma efekt, który sprawia wrażenie, jakby poruszał się po ekranie. Zatem fantazyjne teksty zwiększają prawdopodobieństwo, że ludzie to zrobią kliknij treść, linki lub otwórz e-maile.

Rola tekstów animowanych w Twojej witrynie

W motywach WordPress dostępne są różne typy animowanych efektów tekstowych, ale wszystkie mają tę samą podstawową funkcjonalność. Zmieniają kolor lub styl tekstu i po prostu zmieniają styl testu. Można na przykład zmienić przycisk „wezwania do działania”. z czerwonym tłem i białym tekstem, który mówi "Kliknij tutaj!" po kliknięciu.

The animowany nagłówek lub sekcja bohatera z fantazyjnymi tekstami odgrywa następujące role:

• Sprawia, że Twoje projekty są wizualnie bardziej interesujące.
• Zaznacz oferty specjalne i ważne informacje.
• Sprawia, że cechy Twojego produktu są zauważalne.
• Sprawia, że strona internetowa jest bardziej interaktywna i promuje firmę.

Najłatwiejsze sposoby dodawania animowanych efektów tekstowych

Korzystanie z wtyczki WordPress

Dzisiejszy rynek oferuje różne rodzaje wtyczek ułatwiających zadania związane ze stylizacją tekstu. ElementsKit to potężna wtyczka a także dodatek do narzędzia do tworzenia stron Elementor. Dzięki ElementsKit znajdziesz wszystko pod jednym maską.

Fantazyjny animowany tekst to imponujący widget prezentowany przez ElementsKit pro. 

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

Sekcja treści

Część nazywa się Część fantazyjnego tekstu, zawiera następujące pola-

Czy wiesz dlaczego ElementsKit jest tak popularny? 🤔
Sprawdź tutaj 👉 Witryny internetowe o najwyższym rankingu na świecie zbudowane przy użyciu ElementsKit

Animacja

• Styl animacji – Tutaj dostępne są dwie opcje: Tekst lub SVG, obie pozwalają na tworzenie różnych stylów animacji.
• Typ animacji – W zależności od rodzaju animacji będziesz miał tutaj różne możliwości wyboru.
• Czas trwania ujawnienia (ms) – Za pomocą pola opcji możesz ustawić czas trwania animacji w milisekundach.
• Opóźnienie animacji ujawnienia (ms) – Dostosuj tutaj czas opóźnienia animacji. Określa, że animacja może rozpocząć się później, natychmiast od jej początku lub natychmiast i w trakcie animacji.

Treść

• Tekst prefiksu – Musisz wpisać tutaj treść prefiksu, którą chcesz wyświetlić. Oznacza to, że zostanie napisany przed wymyślną animacją.
• Fantazyjne listy – Dodaj tutaj elementy, aby uzyskać fantazyjną animację.
• Tekst sufiksu – Wpisz treść sufiksu, którą chcesz wyświetlić. Tak więc zostanie to określone po fantazyjnej animacji.

• Tytułowy znacznik HTML – Wybierz tutaj znacznik HTML treści.
• Link (opcjonalnie) – 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łówków, 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 wystylizowaniu wszystkich wymaganych instrukcji kliknij przycisk Aktualizuj i zobacz zmiany w interfejsie. Przykładem jest –

Stosowanie CSS

Tworząc animacje CSS w WordPress, pamiętaj o następujących zasadach mając na uwadze podstawowe, ale ważne rzeczy:

• Ustawianie właściwej nazwy animacji – Jest to nazwa, która będzie wyświetlana na elemencie, gdy zostanie on przesunięty w animacji CSS. Na przykład, jeśli masz przycisk z animacją o nazwie „FadeIn”, będzie to wartość, której użyłbyś dla tej właściwości.
• Czas trwania animacji – Jest to liczba sekund, jaką zajmie ukończenie animacji. Możesz także ustawić tę opcję na none lub 0, aby animacja trwała przez czas nieokreślony lub do momentu, aż 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 potrzebny na określoną ilość czasu (w milisekundach). Na przykład, jeśli ustawisz tę właściwość na łatwość, wówczas twój element zacznie się poruszać powoli, a następnie przyspieszy pod koniec 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 1 s).
• Liczba iteracji animacji – Jest to ilość czasu potrzebna na odtworzenie animacji. Używając właściwości CSS, możesz policzyć tę iterację.
• Animacje-reżyseria – Jest to kolejność lub kierunek odtwarzania animacji. Może być normalny, odwrócony, naprzemienny i naprzemiennie odwrócony.
• Tryb wypełniania animacji – Wartości te określają sposób wyświetlania elementu. Może to nastąpić przed i po zastosowaniu animacji.
• Znajomość @klatek kluczowych – Określa właściwości animacji, które zmieniają się w trakcie, a także wartości, jakie te właściwości powinny przyjmować. Na przykład: 

Przykład @keyframes { 0% {kolor tła: czerwony;} 25% {kolor tła: żółty;} 50% {kolor tła: niebieski;} 100% {kolor tła: zielony;} }

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

Jednakże, od i do można stosować zamiast Odpowiednio 0% i 100%.

Segment „osi czasu” odgrywa ogromną rolę w przyciąganiu uwagi klientów i wpływaniu na nich, aby odwiedzili Twoją witrynę! Przeczytaj więcej 👉 Tutaj!

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 do dowolnego tekstu w witrynie WordPress.

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

```@klatki kluczowe MojaAnimacja { z { krycie: 0; transformacja: obrót (20 stopni); czas trwania animacji: 3s; } do {opacity: 1;} transformacja: obrót (0 stopni); } }

Teraz, aby powiązać tę klatkę kluczową z klasą CSS, ustawiliśmy tekst o nazwie MojaAnimacja. Zatem zaraz po powyższym kodzie należy umieścić poniższy kod w pliku.

.MyAnimation { nazwa-animacji: MojaAnimacja; }

Możesz znaleźć całą podstawową wiedzę dotyczącą animacji CSS i przećwiczyć ją kody tutaj!

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

Powyższy kod będzie animował tekst Twojego znacznik h1 'MojaAnimacja'. 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 wprowadzić dalsze zmiany w wyglądzie swojej witryny, 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ą Protokół przesyłania plików (FTP) -> Wybierz klienta FTP (FileZilla, WinSCP, Cyberduck itp.) -> Wybierz niezbędne dane uwierzytelniające na swoim koncie hostingowym.

Krok 2

Dostęp do katalogu public_html -> Przejdź do wp-content – > Motywy -> Wybierz folder aktywnego lub podrzędnego motywu

Krok 3

Teraz wyszukaj podkatalog o nazwie css. Jeśli go otrzymasz, prześlij plik animate.css lub animate.min.css z pliku Animate.css w podkatalogu. 

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

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

Plik funkcji.php znajdziesz w aktywnym folderze motywu. Teraz musisz dodać ten fragment kodu, aby wywołać arkusz stylów programu Animate:

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

Pamiętać, jeśli użyłeś pliku animate.min.css z Animate.css, musisz napisać animate.min.css w linii końcowej zamiast animate.css. Po zapisaniu wszystkich zmian przejdź do panelu 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 stronach. Ponadto plik Animate.css umożliwia odwoływanie się do pełnej listy wszystkich.

Wreszcie, Wybierz post lub stronę w Edytorze klasycznym -> Przełącz do edytora tekstu -> Lub kliknij ikonę z trzema kropkami na pasku narzędzi bloku, jeśli jest to Edytor bloku -> Wybierz Edytuj jako HTML-> Dodaj animowaną klasę i klasę animacji do znacznika elementu -> Podgląd

Oto dwie skuteczne techniki dodawania animowanego tekstu do witryny, które mogą pomóc w jej ulepszeniu bardziej wciągające i atrakcyjne wizualnie. Korzystając z jednej z tych technik, możesz dodać trochę ruchu i zainteresowania swoim stronom.

Jednak zastosowanie CSS może być nieco trudne, jeśli nie masz pojęcia o kodowaniu. Dlatego przy tworzeniu animacji CSS w WordPress zaleca się skorzystanie z pomocy ekspertów. Alternatywnie fantazyjny animowany tekst ElementsKit to inteligentny widget, który pomaga w szybkim projektowaniu dowolnej stylowej animacji. Dzięki widżetowi możesz przekształcić wybrane teksty w fantazyjne animacje.