Jak łatwo dodawać animacje CSS w WordPress

Czy chcesz dodać animacje CSS w WordPress?

Animacje mogą przyciągnąć uwagę odwiedzających i podkreślić 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 odnośników.

W tym poradniku pokażemy, jak można łatwo dodać animacje CSS w WordPress.

Dlaczego warto dodawać animacje CSS w WordPress?

Możesz użyć animacji CSS, aby zwrócić uwagę odwiedzającego na różne części strony. Na przykład, jeśli masz sklep internetowy, animacje mogą podkreślać najważniejsze funkcje produktu lub największe punkty sprzedaży. Może to poprawić wrażenia użytkownika i zwiększyć sprzedaż.

Animacje sprawią również, że twoje wezwania do działania będą się wyróżniać, co może pomóc w osiągnięciu określonego celu, takiego jak zachęcenie większej liczby osób do zapisania się do newslettera e-mail.

Możesz dodać animacje CSS do arkusza stylów twojego motywu WordPress lub motywu potomnego. Wymaga to jednak dużo czasu i wysiłku, a jeśli popełnisz błąd, może to zepsuć wygląd, a nawet działanie twojej witryny internetowej.

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

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 do animacji pozwala dodać animację wejścia do dowolnego bloku bez konieczności pisania ani jednej linii CSS. Posiada również animację w rodzaju pisania na klawiaturze i efekt w stylu tickera, który można dodać do tekstu i liczb.

Najpierw musisz zainstalować i włączać darmową wtyczkę. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu, otwórz dowolną stronę lub wpis w edytorze bloków WordPress. Następnie po prostu kliknij blok, który chcesz animować i wybierz kartę „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 liczenia i Animacje pisania.

„Animacje” to krótkie efekty, które są odtwarzane raz, gdy strona się wczytuje. Aby dodać tego rodzaju animację wejścia do twojego bloga WordPress, po prostu kliknij menu rozwijane obok „Animacja”.

Spowoduje to otwarcie menu, w którym można wybrać animację do użycia.

Edytor WordPress wyświetli podgląd animacji, dzięki czemu można wypróbować różne opcje, aby zobaczyć, co wygląda najlepiej.

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

Wystarczy otworzyć menu rozwijane „Opóźnienie” i wybrać czas z listy.

Możesz także przyspieszyć lub spowolnić animację, korzystając z menu rozwijanego „Szybkość”.

Podczas wypróbowywania różnych ustawień można w dowolnym momencie wyświetlić podgląd animacji, klikając przycisk „Odtwórz animację”.

Wtyczka posiada również „Animacje liczenia” i „Animacje wpisywania”.

Animacje pisania pozwalają animować tekst, a animacje liczenia dodają efekt w stylu tickera do liczb. Animacje te 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 obrazkami, nagłówków i nie tylko.

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

Możesz teraz wybrać „Animacje liczenia” lub „Animacje wpisywania” z rozwijanego menu.

Jeśli te opcje są wyszarzone, upewnij się, że zaznaczyłeś właściwą treść. Na przykład nie będzie można wybrać opcji „Policz animację”, jeśli zaznaczono tylko tekst.

Po dodaniu animacji można użyć rozwijanych menu w małym wyskakującym okienku, aby zmienić prędkość i dodać opcjonalne opóźnienie.

Na przykład na poniższym obrazku używamy opóźnienia wynoszącego jedną sekundę.

Gdy będziesz gotowy do uruchomienia animacji CSS, kliknij przycisk „Opublikuj” lub „Aktualizuj”, aby zastosować animacje na twojej witrynie. Teraz, jeśli przejdziesz na swoją witrynę internetową WordPress, zobaczysz animację na żywo.

Metoda 2: Jak dodać animacje CSS do własnych stron (zalecane)

Jeśli chcesz dodać proste animacje do wbudowanych bloków WordPress, to Blocks Animation jest dobrym wyborem. Jeśli jednak chcesz naprawdę przyciągnąć uwagę odwiedzających, zatrzymać ludzi na twojej witrynie internetowej i uzyskać więcej konwersji, zalecamy użycie SeedProd.

SeedProd to najlepsza wtyczka do tworzenia stron, która umożliwia tworzenie 111111 pięknych stron docelowych, stron sprzedaży, strony głównej i innych za pomocą prostego edytora typu „przeciągnij i upuść”.

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

Pomimo nazwy, można użyć bloku Animowany nagłówek, aby animować dowolny tekst, w tym wezwanie do działania, podtytuł lub inny tekst, który chcesz podkreślić.

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

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

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

Jak skonfigurować kreator stron SeedProd

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć SeedProd. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu należy wpisz klucz licencyjny.

Informacje te można znaleźć na Twoim koncie w witrynie internetowej SeedProd. Po dodaniu klucza licencyjnego wystarczy kliknąć na „Verify Key”.

Utwórz własny projekt strony

Aby rozpocząć, przejdź do SeedProd ” Landing Pages i kliknij „Utwórz nową stronę docelową”.

Na następnym ekranie zostaniesz poproszony o wybranie szablonu.

SeedProd zawiera ponad 350 pięknych szablonów, które są podzielone na różne kategorie, takie jak szablony stron 404 i własne strony WooCommerce z podziękowaniami.

W tym przewodniku pokażemy, jak stworzyć stronę sprzedażową z animowanym tekstem i animacjami wejścia, ale kroki będą podobne bez względu na rodzaj tworzonej strony.

Wystarczy kliknąć dowolną kartę, aby zobaczyć różne szablony w tej kategorii.

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

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

Następnie należy nadać stronie tytuł.

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

Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat badania słów kluczowych dla twojego bloga WordPress.

Gdy będziesz zadowolony z tytułu i adresu URL, kliknij „Zapisz i rozpocznij edycję strony”.

Spowoduje to wczytywanie edytora stron SeedProd typu „przeciągnij i upuść”.

Po prawej stronie zobaczysz podgląd na żywo wyglądu strony, a po lewej niektóre ustawienia.

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

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

Jak dodać animowany tekst do WordPressa

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

Istnieją dwa sposoby animowania twojego nagłówka. Po pierwsze, styl „Podświetlony” dodaje do twojego tekstu animację kształtu, taką jak 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 twojego nagłówka, podkreślając najważniejsze treści. Jest to również świetny sposób na zwrócenie uwagi na wezwanie do działania.

Styl wyróżniony ma również kilka przekreślonych kształtów.

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

Aby utworzyć animację z podświetleniem, wystarczy otworzyć menu rozwijane „Styl” i wybrać opcję „Podświetlony”.

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

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

Często animowany tekst jest pierwszą rzeczą, na którą patrzą importerzy, gdy strona się wczytuje, więc jest to świetny sposób na podkreślenie najważniejszego fragmentu tekstu.

Aby utworzyć animację przejścia, wystarczy otworzyć menu rozwijane „Styl” i kliknąć „Obracanie”.

Następnie możesz otworzyć menu rozwijane „Animacja” i wybrać rodzaj przejścia, którego chcesz użyć, np. zanikanie, powiększanie lub zwijanie. Ponownie, SeedProd odtworzy animację wewnątrz edytora strony, więc możesz wypróbować różne efekty, aby zobaczyć, które wolisz.

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

Wystarczy wpisać rodzaj tekstu 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 odtwarza animację w pętli, co niektórzy odwiedzający mogą uznać za irytujące.

Aby odtworzyć animację tylko raz, kliknij, aby wyłączyć przełącznik „Nieskończona pętla”.

Domyślnie animacja będzie odtwarzana przez 1200 milisekund po opóźnieniu wynoszącym 8000 milisekund.

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 także zmienić styl tekstu. Można na przykład zmienić wielkość i wyrównanie czcionki.

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

Dodawanie animacji wejścia w WordPress

Animacje wejścia są odtwarzane, gdy strona wczytuje się po raz pierwszy, więc są świetnym sposobem na przyciągnięcie uwagi odwiedzającego.

Można ich również użyć do wyróżnienia treści, na które odwiedzający powinni zwrócić uwagę w pierwszej kolejności. Na przykład, jeśli prowadzisz sklep internetowy, możesz animować obrazek bohatera produktu lub baner reklamujący Twoją wyprzedaż z okazji Czarnego Piątku.

W edytorze SeedProd wystarczy kliknąć treść, którą chcemy animować, a następnie wybrać kartę „Zaawansowane” w menu po lewej stronie.

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

Następnie wystarczy wybrać animację z listy rozwijanej „Animacja wejścia”.

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

Opublikuj swoje animacje CSS w WordPressie

Kiedy będziesz zadowolony z konfiguracji strony, kliknij menu rozwijane na przycisku „Zapisz” i wybierz „Opublikuj”.

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

Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się dodawać animacje CSS w WordPress. Zachęcamy również do zapoznania się z naszym przewodnikiem na temat tworzenia własnych stron docelowych w WordPressie lub wyborem najlepszych wtyczek do tworzenia dynamicznych treści w WordPressie.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.