Grafik komputerowy Puck, Gorzów Wlkp.
Tworzę silne marki. Od podstaw.
darmowa wycena

27 grudnia 2021 3 komentarze

Jak dodać animowane ikony na stronę www?

Pewnie część z Was zastanawia się jak ożywić swoją stronę internetową? Statyczne witryny pomału odchodzą w zapomnienie, a ich miejsce zajmują strony z licznymi animacjami i efektami 3D. Prostym rozwiązaniem tego problemu mogą być animowane ikony, które z łatwością dodasz na własną stronę.

Jak dodać animowane ikony na stronę www?

Wykorzystanie animacji na stronie www w znacznym stopniu ożywi jej przekaz, co może przełożyć się na wyższą konwersję i zyski dla Twojej firmy. Najczęściej stosowanymi animacjami na stronie www są karuzele zdjęć oraz slidery. Jednak coraz częściej prym wiodą animowane ikony. Nie dość, że wyglądają bardzo dobrze, to w dodatku przykuwają wzrok czytelnika. 

Dlaczego warto stosować animowane ikony?

Animowane ikony przyciągają uwagę, pomagają w znacznym stopniu uatrakcyjnić treści oraz pozytywnie wpływają na czytelność. Dodatkowo pomagają zwiększyć konwersję na stronie www. 

Z doświadczenia wiem, że animowane ikony często stosuje się w różnego rodzaju infografikach. Odpowiednio zaprojektowana ikona może w ciekawy sposób przedstawić dane, na których najbardziej nam zależy. 

Poniżej przykłady miejsc na stronie www, w których warto zastosować animowane ikony:

Lordicon — biblioteka animowanych ikon

Lordicon to biblioteka animowanych ikon, które w łatwy sposób możesz dodać na własną stronę www. W wersji darmowej masz dostęp do kilkuset animowanych ikon. Wykupując wersję PRO, zyskasz sporo dodatkowych ikon. Łącznie możesz skorzystać z biblioteki kilku tysięcy ikon – to naprawdę imponujący wynik!

Dodawanie ikon na stronę www

Twórcy aplikacji Lordicon.com udostępniają kilka możliwości integracji swoich ikon z innymi aplikacjami i programami. Poniżej w kilku krokach opiszę jak w łatwy sposób dodać animowane ikony na stronę www.

Krok 1: Wejdź na stronę lordicon.com

Przejdź do witryny www.lordicon.com. W centralnym punkcie strony kliknij zielony przycisk Browse icon. Po załadowaniu biblioteki możesz skorzystać z wyszukiwarki lub spisu kategorii, które znajdują się po lewej stronie witryny.

Jak dodać animowane ikony na stronę www?

Krok 2: Dostosuj ikonę

Wybraną ikonę możesz dodatkowo modyfikować, korzystając z panelu po prawej stronie, zmieniając jej kolor oraz grubość linii:

Tak przygotowaną ikonę możesz już dodać na swoją stronę www. Wystarczy, że klikniesz przycisk Reveal full editor. W okienku które się pojawi, będziesz mógł dodać wcześniej zaprojektowaną ikonę na kilka sposobów. Dodatkowo możesz w tym miejscu ustawić dodatkowe typy animacji.

Typ animacji (trigger):

Jak dodać animowane ikony na stronę www?

Krok 3: Dodaj ikonę na stronę www

Sposób 1: Embed HTML

Wystarczy, że klikniesz przycisk Embed HTML. W tym miejscu możesz dodatkowo ustawić takie parametry jak wielkość ikony (Size) oraz opóźnienie animacji (Delay). Po wprowadzeniu wszystkich ustawień możesz skopiować kod za pomocą przycisku Copy HTML code. Skopiowany kod HTML wystarczy wkleić na własną stronę www. 

Sposób 2: More options

W tym okienku możesz pobrać zaprojektowaną wcześniej ikonę jako jeden z wielu formatów plików: .gif, .mp4, .webp, .apng, .svg czy .png. Warto pamiętać, że dwa ostatnie formaty są statyczne. Po wyborze odpowiedniego formatu pojawi się okienko z możliwością pobrania pliku. W tym miejscu możesz również wybrać kolor tła ikony. Nie zabrakło także wszystkich parametrów dostępnych w sposobie 1: Embed HTML.

Integracja z WordPressem

Jeżeli zbudowałeś swoją stronę na silniku WordPress, możesz skorzystać z darmowej wtyczki, która umożliwia integrację Lordicon z WordPressem i wtyczką Gutenberg. Dodatkowo możesz skorzystać z tak zwanych shortcodów, aby umieścić animowane ikony w edytorach takich jak Divi czy Elementor. 

Zalety i wady Lordicon

Szukając narzędzia, które oferuje animowane ikony w bardzo dobrej jakości, Lordicon jest strzałem w dziesiątkę. Aplikacja ma sporo zalet i niewiele wad. 

Jak dodać animowane ikony na stronę www?
Siatka ikon Lordicon

Zalety Lordicon:

Wady Lordicon:

Podsumowanie

Bez dwóch zdań aplikacja Lordicon to jedna z lepszych, z którymi miałem do tej pory styczność. Bardzo spodobało mi się podejście autorów do projektowania ikon zgodnie ze sztuką oraz to, że 10% z każdej transakcji przekazywane jest na cele charytatywne. Dodatkowo na pochwałę zasługuje fakt, że zespół Lordicon pracuje nad pełną integracją z Adobe XD.

Cena 8 dolarów przy subskrypcji rocznej (płatne z góry 96$ za rok) jest niewielkim wydatkiem, biorąc pod uwagę to, ile możemy zyskać.

Oceń artykuł:
5/5 - (3 votes)
Autor artykułu:
Fajnie, że tu jesteś. → Poznajmy się bliżej, zobacz kim jestem.

najnowsze artykuły

To może Cię także zainteresować

Motyw Divi — wady i zalety
3 maja 2022 0 komentarzy

Motyw Divi — wady i zalety

Jakie narzędzie, które umożliwiłoby stworzenie nowoczesnej, eleganckiej i płynnie działającej witryny internetowej wybrać? To pytanie, które zadają sobie zarówno osoby prywatne, jak i zawodowi projektanci […]

Czytaj dalej
Kim jest webmaster?
19 kwietnia 2022 1 komentarz

Kim jest webmaster?

Każda nowoczesna firma musi być obecna w Internecie, aby mogła rozwijać się i zwiększać swoje zyski. Samo posiadanie social media nie wystarczy, aby wygrać z […]

Czytaj dalej
Czy grafik komputerowy musi umieć rysować?
9 kwietnia 2022 0 komentarzy

Czy grafik komputerowy musi umieć rysować?

Współcześnie zawód grafika kojarzy się z tworzeniem grafiki za pomocą nowoczesnych narządzi cyfrowych. Umiejętność pracy z komputerem i tworzenia pięknych obrazów, wywołujących u odbiorcy określone emocje, […]

Czytaj dalej

3 odpowiedzi na “Jak dodać animowane ikony na stronę www?”

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.

Social media

Zerknij także na moje profile w social mediach

Facebook

Bądź na bieżąco z nowościami z życia mojego studia graficznego. Znajdź mnie na Facebooku.

Lubię to

Instagram

Obserwuj moje konto na Instagramie. Zobacz zdjęcia i projekty, którymi dzielę się ze światem.

Obsrwuję

Darmowa wycena

Skontaktuj się ze mną i uzyskaj wycenę w 24 godziny

Masz pytania lub wątpliwości?
Porozmawiajmy o Twoim biznesie. Wycena w 24 godziny.

+48 798 929 435

Porozmawiamy o Twoim projekcie — w ciągu 24 godzin możesz liczyć na pierwszy kontakt z mojej strony.

Wycena przygotowana specjalnie dla Ciebie — przygotuję ofertę szytą na miarę, która zawierać będzie wszystkie najważniejsze czynniki.

Wspólnie stworzymy świetny projekt — po akceptacji oferty możemy rozpocząć prace nad Twoim projektem.

    Zapisz się do Newslettera

    Otrzymaj 10% rabatu na pierwsze zlecenie!


    Planujesz stworzenie strony www lub rebranding logo? A może interesujesz się grafiką i designem? Zapisz się do mojego newslettera i odbierz 10% zniżki pierwsze zlecenie.