Jak dodać animowany tekst na witrynie internetowej

Animowany tekst to sposób na przyciągnięcie uwagi użytkownika strony oraz podniesienie jej wizualnej atrakcyjności. Element ten wykonamy w kilku łatwych krokach

Tutorial ten dotyczy witryn zbudowanych w oparciu o WordPress i krator stron Elementor. W podstawowej darmowej wersji Elementora nie ma mozliwości dodawania animowanyc h tekstów. Problem ten rozwiazuje jednak dodatek o nazwie All in one addon for Elementor – Widgetkit.

Instalujemy Widgetkit

Po zalogowaniu na zapleczu naszej WordPressowej strony internetowej w lewym panelu klikamy WtyczkiDodaj nową → w oknie wyszukiwania wpisujemy Widgetkit (nie trzeba wpisywać całej nazwy). Następnie instalujemy i aktywujemy dodatek.

Teraz przechodzimy do zakładki wszystkie strony i aktywujemy wybraną w Elementorze.

W lewym panelu Elementora pojawiły się już wszystkie dodatki Widgetkita, w tym interesujący nas w tym przypadku Animated Headline

W wybranym miejscu strony tworzymy nową sekcje i przeciągamy do kolumny element Animated Headline



Następnie w lewym panelu w ustawieniach dodatku zastępujemy teksty-wypełniacze docelowymi treściami.


Tekst wprowadzony w rubryce Prefix Title będzie stały, natomiast słowa wprowadzone w poniższych elementach będą się zmieniać


Modyfikacja animowanego tekstu


W kolejnym kroku w ustawieniach dodatku klikamy Styl i modyfikujemy takie elementy jak font, jego wielkość i kolor oraz tryb animacji. Do wyboru są 4 tryby: Rotate, Clip, Loading i Push.


Po zaktualizowaniu strony (zielony przycisk w lewym dolnym rogu) możemy otworzyć stronę i zobaczyć efekt naszej pracy. Poniżej 2 przykłady użycia dodatku Animated Headline

Oferujemy Laptopy Smartfony Zegarki sportowe

30 % rabatu na owoce i warzywa napoje gazowane słodycze