Jak łatwo dodać animacje CSS w WordPressie

Na przestrzeni lat eksperymentowaliśmy z różnymi sposobami na uczynienie stron internetowych WordPress bardziej interaktywnymi. Jeśli chcesz przyciągnąć uwagę odwiedzających, animacje mogą być bardzo skuteczne.

Możesz użyć animacji, aby przyciągnąć uwagę odwiedzającego i wyróżnić najważniejsze treści na stronie. Może to również zachęcić klientów do kliknięcia przycisków wezwania do działania i linków.

Na szczęście, łatwo jest również ustawić animacje w WordPressie, nawet jeśli nie wiesz, jak pisać kod.

W tym samouczku pokażemy Ci, jak łatwo dodać animacje CSS w WordPressie.

Dlaczego dodawać animacje CSS w WordPress?

Możesz używać animacji CSS, aby przyciągnąć uwagę odwiedzających do różnych części strony. Na przykład, jeśli masz sklep internetowy, animacje mogą podkreślić najważniejsze cechy produktu lub jego największe atuty sprzedażowe. Może to poprawić doświadczenie użytkownika i zwiększyć sprzedaż.

Animacje sprawią również, że Twoje CTA będą się wyróżniać, co może pomóc w osiągnięciu konkretnego celu, takiego jak zwiększenie liczby subskrybentów Twojego newslettera e-mailowego.

Możesz dodać animacje CSS do arkusza stylów motywu WordPress lub motywu potomnego. Zajmuje to jednak dużo czasu i wysiłku, a jeśli popełnisz błąd, może to zepsuć projekt Twojej witryny, a nawet jej funkcjonalność.

Mając to na uwadze, zobaczmy, jak łatwo możesz dodać animacje CSS do swojej witryny WordPress. Jeśli wolisz przejść bezpośrednio do konkretnej metody, możesz skorzystać z poniższych linków:

• Metoda 1: Jak łatwo animować dowolny blok WordPress (szybko i łatwo)
• Metoda 2: Jak dodać animacje CSS do niestandardowych stron (zalecane)

Metoda 1: Jak łatwo animować dowolny blok WordPress (Szybko i łatwo)

Najprostszym sposobem na dodanie prostej animacji CSS jest użycie Blocks Animation.

Ta darmowa wtyczka animacji pozwala dodać animację wejścia do dowolnego bloku bez pisania ani jednej linii CSS. Posiada również animację pisania i efekt typu ticker, który można dodać do tekstu i liczb.

Najpierw musisz zainstalować i aktywować darmowy plugin Blocks Animation. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem dla początkujących jak zainstalować plugin WordPress.

Po aktywacji otwórz dowolną stronę lub wpis w edytorze bloków WordPress. Następnie po prostu kliknij blok, który chcesz animować, i wybierz zakładkę „Blok” w menu po prawej stronie.

Zobaczysz, że to menu ma nową sekcję „Animacje”.

Po prostu kliknij, aby rozwinąć sekcję „Animacje”, a zobaczysz trzy różne opcje: Animacje, Animacje zliczania i Animacje pisania.

„Animacje” to krótkie efekty, które odtwarzają się raz po załadowaniu strony. Aby dodać tego rodzaju animację wejścia do swojego bloga WordPress, po prostu kliknij menu rozwijane obok „Animacja”.

Otwiera to menu, w którym możesz wybrać animację, której chcesz użyć.

Edytor WordPressa pokaże podgląd animacji, dzięki czemu możesz wypróbować różne opcje, aby zobaczyć, co wygląda najlepiej.

Domyślnie animacja wejścia odtworzy się natychmiast po załadowaniu strony, ale możesz dodać opóźnienie, jeśli wolisz. Jeśli używasz wielu animacji na tej samej stronie, możesz nawet użyć opóźnień, aby je rozłożyć, aby nie były przytłaczające.

Po prostu otwórz listę rozwijaną „Opóźnienie” i wybierz czas z listy.

Możesz również przyspieszyć lub spowolnić animację za pomocą listy rozwijanej „Prędkość”.

Podczas testowania różnych ustawień możesz w dowolnym momencie podglądać animację, klikając „Odtwórz animację ponownie”.

Wtyczka oferuje również „Animacje zliczania” i „Animacje pisania”.

Animacje pisania pozwalają animować tekst, podczas gdy Animacje licznika dodają efekt licznika do liczb. Te animacje działają z każdym blokiem Gutenberga, który obsługuje tekst lub liczby, dzięki czemu można ich używać do animowania przycisków, podpisów pod zdjęciami, nagłówków i nie tylko.

Aby dodać jeden z tych efektów, zacznij od zaznaczenia tekstu lub liczb, które chcesz animować. Następnie kliknij strzałkę w dół na małym pasku narzędzi.

Teraz możesz wybrać „Animacje zliczania” lub „Animacje pisania” z menu rozwijanego.

Jeśli te opcje są wyszarzone, upewnij się, że podświetliłeś właściwą treść. Na przykład nie będziesz mógł wybrać opcji „Animacja licznika”, jeśli podświetliłeś tylko tekst.

Po dodaniu animacji możesz użyć menu rozwijanych w małym podręcznym okienku, aby zmienić prędkość i dodać opóźnienie.

Na przykład, na poniższym obrazku używamy opóźnienia jednej sekundy.

Kiedy będziesz gotowy, aby animacja CSS działała na żywo, kliknij przycisk „Opublikuj” lub „Zaktualizuj”, aby zastosować animacje na swojej stronie. Teraz, jeśli odwiedzisz swoją stronę internetową WordPress, zobaczysz animację na żywo.

Metoda 2: Jak dodać animacje CSS do niestandardowych stron (zalecane)

Jeśli chcesz dodać proste animacje do wbudowanych bloków WordPress, to Blocks Animation jest dobrym wyborem. Jednak jeśli chcesz naprawdę przyciągnąć uwagę odwiedzających, zatrzymać ich na swojej stronie i uzyskać więcej konwersji, polecamy użyć SeedProd.

SeedProd to najlepsza wtyczka do tworzenia stron, która pozwala tworzyć piękne strony docelowe, strony sprzedażowe, stronę główną i inne, korzystając z prostego edytora metodą przeciągnij i upuść.

Zawiera również blok „Animowana nagłówek”, którego można użyć do tworzenia obracających się i wyróżnionych animowanych nagłówków.

Pomimo nazwy, możesz użyć bloku Animated Headline do animowania dowolnego tekstu, w tym wezwania do działania, podtytułu lub innego tekstu, który chcesz podkreślić.

SeedProd oferuje również ponad 40 animacji wejścia, które można dodać do dowolnego bloku, w tym obrazów, tekstu, przycisków, filmów i innych.

Możesz animować całe sekcje i kolumny za pomocą kilku kliknięć. W ten sposób możesz tworzyć angażujące animowane strony w ciągu kilku minut.

Jeśli używasz animacji, aby uzyskać więcej konwersji i sprzedaży, SeedProd integruje się z WooCommerce. Obsługuje również wiele najlepszych usług marketingowych e-mail, których możesz już używać do promowania swojej witryny.

Jak skonfigurować kreator stron SeedProd

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie SeedProd. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku jak zainstalować wtyczkę WordPress.

Po aktywacji musisz wprowadzić swój klucz licencyjny.

Te informacje znajdziesz w swoim koncie na stronie SeedProd. Po dodaniu klucza licencyjnego kliknij po prostu „Zweryfikuj klucz”.

Utwórz niestandardowy projekt strony

Aby rozpocząć, przejdź do SeedProd » Strony docelowe i kliknij „Dodaj nową stronę docelową”.

Na następnym ekranie zostaniesz poproszony o wybranie szablonu.

SeedProd oferuje ponad 350 pięknych szablonów, które są zorganizowane w różne kategorie, takie jak szablony stron 404 i niestandardowe strony „dziękuję” WooCommerce.

W tym przewodniku pokażemy Ci, jak utworzyć stronę sprzedażową z animowanym tekstem i animacjami wejścia, ale kroki będą podobne, niezależnie od tego, jaki rodzaj strony utworzysz.

Po prostu kliknij na dowolną zakładkę, aby zobaczyć różne szablony w tej kategorii.

Kiedy znajdziesz szablon, którego chcesz użyć, po prostu najedź na niego kursorem myszy, a następnie kliknij ikonę zaznaczenia.

Używamy szablonu „Zen Sales Page” na wszystkich naszych zrzutach ekranu, ale możesz użyć dowolnego szablonu.

Następnie musisz nadać stronie tytuł.

SeedProd automatycznie utworzy adres URL na podstawie tytułu strony, ale możesz go zmienić na dowolny. Na przykład dodanie odpowiednich słów kluczowych do adresu URL często może poprawić SEO w WordPressie i pomóc stronie pojawić się w odpowiednich wynikach wyszukiwania.

Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat jak przeprowadzić badanie słów kluczowych dla swojego bloga WordPress.

Gdy będziesz zadowolony z tytułu i adresu URL, kliknij „Zapisz i zacznij edytować stronę”.

Spowoduje to załadowanie edytora stron metodą przeciągnij i upuść SeedProd.

Po prawej stronie zobaczysz podgląd projektu strony na żywo, z pewnymi ustawieniami po lewej stronie.

SeedProd zawiera wiele bloków, które możesz dodać do swojego projektu, w tym bloki umożliwiające dodawanie przycisków udostępniania w sieciach społecznościowych, filmów, formularzy kontaktowych i innych.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat tworzenia niestandardowej strony w WordPress.

Jak dodać animowany tekst do WordPress

Aby dodać animowany tekst do strony, znajdź blok Animowany nagłówek i przeciągnij go na projekt strony.

Istnieją dwa sposoby animowania nagłówka. Po pierwsze, styl „Podświetlony” dodaje animację kształtu do tekstu, na przykład okrąg lub podkreślony zygzak.

Możesz użyć tej animacji, aby zwrócić uwagę na konkretne słowo lub frazę w nagłówku. Może to ułatwić czytanie i zrozumienie nagłówka poprzez podkreślenie najważniejszych treści. Jest to również świetny sposób na zwrócenie uwagi na wezwanie do działania.

Styl Podświetlenie ma również kilka kształtów przekreślenia.

Możesz używać przekreśleń, aby tworzyć ciekawe i przyciągające wzrok efekty, lub po prostu dodać trochę zabawy do swojego projektu.

Aby utworzyć animację Podświetlenie, po prostu otwórz menu rozwijane „Styl” i wybierz „Podświetlenie”.

Następnie otwórz menu rozwijane „Kształt” i wybierz kształt. Po kliknięciu kształtu SeedProd wyświetli podgląd tej animacji, dzięki czemu możesz wypróbować różne kształty, aby zobaczyć, który najbardziej Ci się podoba.

SeedProd ma również styl animacji „Rotacja”, który dodaje efekt przejścia do tekstu.

Często animowany tekst jest pierwszą rzeczą, na którą zwracają uwagę odwiedzający, gdy strona się ładuje, więc jest to świetny sposób na podkreślenie najważniejszego fragmentu tekstu.

Aby utworzyć animację przejścia, po prostu otwórz menu „Styl” i kliknij „Obracanie”.

Następnie możesz otworzyć menu rozwijane „Animacja” i wybrać typ przejścia, którego chcesz użyć, taki jak zanikanie, powiększenie lub przewijanie. Ponownie, SeedProd odtworzy animację w edytorze strony, dzięki czemu możesz wypróbować różne efekty, aby zobaczyć, który wolisz.

Niezależnie od tego, czy tworzysz animację „Podświetloną”, czy „Obracającą się”, możesz dodać tekst przed i po animowanym tekście.

Po prostu wpisz w polach „Przed nagłówkiem” i „Po nagłówku”. W polu „Tekst” dodaj słowo lub frazę, którą chcesz animować.

Jeśli chcesz animować cały nagłówek, pozostaw pola „Przed nagłówkiem” i „Po nagłówku” puste.

Domyślnie SeedProd odtworzy animację w pętli, co niektórzy odwiedzający mogą uznać za irytujące.

Aby animacja odtwarzała się tylko raz, kliknij, aby dezaktywować przełącznik „Nieskończona pętla”.

Domyślnie animacja będzie odtwarzana przez 1200 milisekund po 8000 milisekundach opóźnienia.

Aby użyć różnych wartości, wpisz je w polach „Czas trwania” i „Opóźnienie”. Na przykład, możesz przyspieszyć animację, używając krótszego czasu trwania.

Możesz również stylizować tekst. Na przykład możesz zmienić rozmiar czcionki i wyrównanie.

Gdy będziesz zadowolony z wyglądu animowanego nagłówka, kliknij przycisk „Zapisz”, aby zachować zmiany.

Dodaj animacje wejścia w WordPressie

Animacje wejścia odtwarzane są podczas pierwszego ładowania strony, dzięki czemu świetnie przyciągają uwagę odwiedzającego.

Możesz ich również użyć do podkreślenia treści, na którą odwiedzający powinni zwrócić uwagę w pierwszej kolejności. Na przykład, jeśli masz internetowy rynek, możesz animować główny obraz produktu lub baner reklamujący Twoją wyprzedaż z okazji Czarnego Piątku.

W edytorze SeedProd po prostu kliknij zawartość, którą chcesz animować, a następnie wybierz zakładkę „Zaawansowane” w menu po lewej stronie.

Następnie możesz kliknąć, aby rozwinąć sekcję „Efekty animacji”.

Następnie po prostu wybierz animację z listy rozwijanej „Animacja wejścia”.

Możesz teraz dodawać animacje wejścia do dowolnego bloku, sekcji lub kolumny, po prostu wykonując ten sam proces opisany powyżej.

Publikuj swoje animacje CSS w WordPressie

Gdy strona jest gotowa, kliknij menu rozwijane przy przycisku „Zapisz” i wybierz „Opublikuj”.

Możesz teraz odwiedzić tę stronę, aby zobaczyć animacje CSS na żywo.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać animacje CSS w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat dodawania animowanego tła w WordPress lub kluczowych elementów projektowania WordPress, których potrzebuje każda witryna.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.